From 129a80904f89df6caadf907fb9179c84c825d24d Mon Sep 17 00:00:00 2001 From: Nikita Tokarchuk Date: Tue, 4 Jan 2022 20:27:06 +0100 Subject: [PATCH] Restructure scss files --- web/font.css | 18 --- web/index.js | 5 +- web/index.scss | 291 ------------------------------------------ web/style/blog.scss | 66 ++++++++++ web/style/const.scss | 14 ++ web/style/font.scss | 25 ++++ web/style/index.scss | 61 +++++++++ web/style/kg.scss | 43 +++++++ web/style/menu.scss | 81 ++++++++++++ web/style/pinned.scss | 14 ++ web/style/scroll.scss | 39 ++++++ 11 files changed, 345 insertions(+), 312 deletions(-) delete mode 100644 web/font.css delete mode 100644 web/index.scss create mode 100644 web/style/blog.scss create mode 100644 web/style/const.scss create mode 100644 web/style/font.scss create mode 100644 web/style/index.scss create mode 100644 web/style/kg.scss create mode 100644 web/style/menu.scss create mode 100644 web/style/pinned.scss create mode 100644 web/style/scroll.scss diff --git a/web/font.css b/web/font.css deleted file mode 100644 index 5fb762f..0000000 --- a/web/font.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * The Typekit service used to deliver this font or fonts for use on websites - * is provided by Adobe and is subject to these Terms of Use - * http://www.adobe.com/products/eulas/tou_typekit. For font license - * information, see the list below. - * - * rockwell: - * - http://typekit.com/eulas/00000000000000007735bab8 - * - * © 2009-2021 Adobe Systems Incorporated. All Rights Reserved. - */ -/*{"last_published":"2021-11-09 19:51:07 UTC"}*/ - -@font-face { -font-family:"rockwell"; -src:url("https://use.typekit.net/af/ed9b67/00000000000000007735bab8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/ed9b67/00000000000000007735bab8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/ed9b67/00000000000000007735bab8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); -font-display:auto;font-style:normal;font-weight:400; -} diff --git a/web/index.js b/web/index.js index 53311d5..e9cc0b7 100644 --- a/web/index.js +++ b/web/index.js @@ -1,9 +1,8 @@ -import "./font.css" -import "./index.scss" - import "code-prettify/styles/desert.css" import "bootstrap-icons/font/bootstrap-icons.css" import "code-prettify" +import "./style/index.scss" + PR.prettyPrint(); diff --git a/web/index.scss b/web/index.scss deleted file mode 100644 index 57e0911..0000000 --- a/web/index.scss +++ /dev/null @@ -1,291 +0,0 @@ - -$main-color: #046380; -$text-color: #002F2F; -$background-color: #E6E2AF; - -$body-font: "arial", sans-serif; -$body-font-size: 1em; -$body-font-shadow: 0em 0em 0.1em #aaa; - -$menu-font: "rockwell", sans-serif; -$menu-font-size: 1.7em; -$menu-background-color: $background-color; -$menu-accent-color: $main-color; - -$menu-logo-font-size: 2em; - -.scroll-container { - z-index: 0; - height: 64px; - margin-top: auto; -} -.scroll-container a { - left: 50%; - margin-top: -32px; - position: absolute; -} -.scroll-container a span { - position: absolute; - left: 50%; - width: 24px; - height: 24px; - margin-left: -12px; - margin-top: -36px; - border-left: 1px solid $main-color; - border-bottom: 1px solid $main-color; - transform: rotate(-45deg); - animation: scroll-keyframes 1.5s infinite; - box-sizing: border-box; -} -@keyframes scroll-keyframes { - 0% { - transform: rotate(-45deg) translate(0, 0); - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - transform: rotate(-45deg) translate(-20px, 20px); - opacity: 0; - } -} - -body, html { - font-size: $body-font-size; - text-shadow: $body-font-shadow; - color: $text-color; - background-color: $background-color; - margin-left: 0px; - margin-right: 0px; - margin-top: 10px; - width: 100%; - display: flex; - flex-direction: column; -} - -img { - max-width: 70vw; - height: auto; -} - -.kg-card { - max-width: 70vw; - padding: 0.2em; - border-width: 2px; - border-radius: 0.5em; - border-style: solid; - border-color: $main-color; - background-color: $main-color; -} - -.kg-card img { - vertical-align: top; - border-radius: 0.2em; -} - -.kg-card figcaption { - text-align: center; - color: $background-color; - text-shadow: none; - padding-top: 0.3em; -} - -.kg-code-card { - background-color: #333; -} - -.kg-code-card pre { - text-shadow: none; - overflow-x: auto; - - li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { - list-style-type: decimal !important; - } -} - -a.external::after { - content: "⃕"; - font-size: 0.6em; - vertical-align: text-top; - padding-left: 0.1em; - display: inline-block; -} - -.root-container { - padding-bottom: 0.5em; - margin-left: 3em; - margin-right: 3em; - display: flex; - flex-direction: column; -} - -.welcome-container { - min-height: 95vh; -} - -.blog-container { - background-color: $background-color; -} - -.blog-post-head { - margin-bottom: 0; - border-color: $main-color; - border-bottom-style: solid; - border-width: 2px; -} - -.blog-post-head h1 { - margin-block-start: 0.43em; - margin-block-end: 0.43em; - font-family: $menu-font; - font-size: 2em; - font-weight: normal; -} - -.blog-post-head-image { - text-align: center; - border-color: $main-color; - border-bottom-style: solid; - border-width: 2px; -} - -.blog-post-head-image img { - vertical-align: top; -} - -.blog-post-head > * { - width: 100%; - text-align: center; -} - -.blog-post-tailer > * { - width: 100%; - text-align: center; - margin-top: 0; - margin-bottom: 2em; -} - -.blog-post-content { - display: flex; - flex-direction: column; - align-items: center; -} - -.blog-post-content > * { - width: 50vw; -} - -.blog-post-content > .kg-card { - width: 100%; -} - -.pinned-container { - background-color: $background-color; - z-index: 1; -} - -.pinned-container .blog-post-content > * { - width: 80vw; -} - -.pinned-container .blog-post-head { - display: none; -} -// .pinned-container .blog-post-tailer { -// display: none; -// } - -.menu-container { - background-color: $menu-background-color; - border-bottom-style: solid; - border-bottom-width: 0.5em; - border-color: $menu-accent-color; - padding-bottom: 0.5em; - z-index: 2; -} - -.menu { - display: flex; - justify-content: space-between; - font-family: $menu-font; - font-size: $menu-font-size; -} - -.menu > * { - margin: 0; - padding: 0; -} - -.menu a { - padding-bottom: 0.15em; - border-color: $main-color; -} -.menu a:link, -.menu a:visited { - color: $text-color; - text-decoration: none; -} -.menu a:hover, -.menu a:active { - color: $text-color; - text-decoration: none; - border-bottom-width: 0.15em; - border-bottom-style: solid; -} - -.menu-logo span { - color: $main-color; - font-size: $menu-logo-font-size; -} - -.menu-nav { - display: flex; - list-style: none; -} -.menu-nav > li::before { - content: ''; - font-size: $menu-logo-font-size; -} -.menu-nav > li { - padding-left: 1.3em; -} - -@media all and (max-width: 1024px) { - .root-container { - margin-left: 1.4em; - margin-right: 1.4em; - } - .menu-nav { - flex-direction: column; - align-items: flex-end; - } - .menu-nav > li.menu-nav-li1::before { - display: inline; - } - .menu-nav > li::before { - display: none; - } -} - -@media all and (max-width: 512px) { - .root-container { - margin-left: 0.8em; - margin-right: 0.8em; - } - .menu { - flex-direction: column; - } - .menu-nav { - margin-top: 0.3em; - } - .menu-nav > li.menu-nav-li1::before { - display: none; - } - .blog-post-content > * { - width: 90vw; - } - .pinned-container .blog-post-content > * { - width: 90vw; - } -} \ No newline at end of file diff --git a/web/style/blog.scss b/web/style/blog.scss new file mode 100644 index 0000000..5a363fd --- /dev/null +++ b/web/style/blog.scss @@ -0,0 +1,66 @@ +@use "./const.scss" as *; + +.blog-container { + background-color: $background-color; +} + +.blog-post-head { + margin-bottom: 0; + border-color: $main-color; + border-bottom-style: solid; + border-width: 2px; +} + +.blog-post-head h1 { + margin-block-start: 0.43em; + margin-block-end: 0.43em; + font-family: $menu-font; + font-size: 2em; + font-weight: normal; +} + +.blog-post-head-image { + text-align: center; + border-color: $main-color; + border-bottom-style: solid; + border-width: 2px; +} + +.blog-post-head-image img { + vertical-align: top; +} + +.blog-post-head > * { + width: 100%; + text-align: center; +} + +.blog-post-tailer > * { + width: 100%; + text-align: center; + margin-top: 0; + margin-bottom: 2em; +} + +.blog-post-content { + display: flex; + flex-direction: column; + align-items: center; +} + +.blog-post-content > * { + width: 50vw; +} + +.blog-post-content > .kg-card { + width: 100%; +} + +@media all and (max-width: 512px) { + .blog-post-content > * { + width: 90vw; + } + .pinned-container .blog-post-content > * { + width: 90vw; + } +} diff --git a/web/style/const.scss b/web/style/const.scss new file mode 100644 index 0000000..4a6ae66 --- /dev/null +++ b/web/style/const.scss @@ -0,0 +1,14 @@ +$main-color: #046380; +$text-color: #002f2f; +$background-color: #e6e2af; + +$body-font: "arial", sans-serif; +$body-font-size: 1em; +$body-font-shadow: 0em 0em 0.1em #aaa; + +$menu-font: "rockwell", sans-serif; +$menu-font-size: 1.7em; +$menu-background-color: $background-color; +$menu-accent-color: $main-color; + +$menu-logo-font-size: 2em; diff --git a/web/style/font.scss b/web/style/font.scss new file mode 100644 index 0000000..cd9318b --- /dev/null +++ b/web/style/font.scss @@ -0,0 +1,25 @@ +/* + * The Typekit service used to deliver this font or fonts for use on websites + * is provided by Adobe and is subject to these Terms of Use + * http://www.adobe.com/products/eulas/tou_typekit. For font license + * information, see the list below. + * + * rockwell: + * - http://typekit.com/eulas/00000000000000007735bab8 + * + * © 2009-2021 Adobe Systems Incorporated. All Rights Reserved. + */ +/*{"last_published":"2021-11-09 19:51:07 UTC"}*/ + +@font-face { + font-family: "rockwell"; + src: url("https://use.typekit.net/af/ed9b67/00000000000000007735bab8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") + format("woff2"), + url("https://use.typekit.net/af/ed9b67/00000000000000007735bab8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") + format("woff"), + url("https://use.typekit.net/af/ed9b67/00000000000000007735bab8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") + format("opentype"); + font-display: auto; + font-style: normal; + font-weight: 400; +} diff --git a/web/style/index.scss b/web/style/index.scss new file mode 100644 index 0000000..fc8d4b9 --- /dev/null +++ b/web/style/index.scss @@ -0,0 +1,61 @@ +@use "./const.scss" as *; + +@use "./blog.scss"; +@use "./font.scss"; +@use "./kg.scss"; +@use "./menu.scss"; +@use "./pinned.scss"; +@use "./scroll.scss"; + +body, +html { + font-size: $body-font-size; + text-shadow: $body-font-shadow; + color: $text-color; + background-color: $background-color; + margin-left: 0px; + margin-right: 0px; + margin-top: 10px; + width: 100%; + display: flex; + flex-direction: column; +} + +img { + max-width: 70vw; + height: auto; +} + +a.external::after { + content: "⃕"; + font-size: 0.6em; + vertical-align: text-top; + padding-left: 0.1em; + display: inline-block; +} + +.root-container { + padding-bottom: 0.5em; + margin-left: 3em; + margin-right: 3em; + display: flex; + flex-direction: column; +} + +.welcome-container { + min-height: 95vh; +} + +@media all and (max-width: 1024px) { + .root-container { + margin-left: 1.4em; + margin-right: 1.4em; + } +} + +@media all and (max-width: 512px) { + .root-container { + margin-left: 0.8em; + margin-right: 0.8em; + } +} diff --git a/web/style/kg.scss b/web/style/kg.scss new file mode 100644 index 0000000..98c7057 --- /dev/null +++ b/web/style/kg.scss @@ -0,0 +1,43 @@ +@use "./const.scss" as *; + +.kg-card { + max-width: 70vw; + padding: 0.2em; + border-width: 2px; + border-radius: 0.5em; + border-style: solid; + border-color: $main-color; + background-color: $main-color; +} + +.kg-card img { + vertical-align: top; + border-radius: 0.2em; +} + +.kg-card figcaption { + text-align: center; + color: $background-color; + text-shadow: none; + padding-top: 0.3em; +} + +.kg-code-card { + background-color: #333; +} + +.kg-code-card pre { + text-shadow: none; + overflow-x: auto; + + li.L0, + li.L1, + li.L2, + li.L3, + li.L5, + li.L6, + li.L7, + li.L8 { + list-style-type: decimal !important; + } +} diff --git a/web/style/menu.scss b/web/style/menu.scss new file mode 100644 index 0000000..7161ae1 --- /dev/null +++ b/web/style/menu.scss @@ -0,0 +1,81 @@ +@use "./const.scss" as *; + +.menu-container { + background-color: $menu-background-color; + border-bottom-style: solid; + border-bottom-width: 0.5em; + border-color: $menu-accent-color; + padding-bottom: 0.5em; + z-index: 2; +} + +.menu { + display: flex; + justify-content: space-between; + font-family: $menu-font; + font-size: $menu-font-size; +} + +.menu > * { + margin: 0; + padding: 0; +} + +.menu a { + padding-bottom: 0.15em; + border-color: $main-color; +} +.menu a:link, +.menu a:visited { + color: $text-color; + text-decoration: none; +} +.menu a:hover, +.menu a:active { + color: $text-color; + text-decoration: none; + border-bottom-width: 0.15em; + border-bottom-style: solid; +} + +.menu-logo span { + color: $main-color; + font-size: $menu-logo-font-size; +} + +.menu-nav { + display: flex; + list-style: none; +} +.menu-nav > li::before { + content: ""; + font-size: $menu-logo-font-size; +} +.menu-nav > li { + padding-left: 1.3em; +} + +@media all and (max-width: 1024px) { + .menu-nav { + flex-direction: column; + align-items: flex-end; + } + .menu-nav > li.menu-nav-li1::before { + display: inline; + } + .menu-nav > li::before { + display: none; + } +} + +@media all and (max-width: 512px) { + .menu { + flex-direction: column; + } + .menu-nav { + margin-top: 0.3em; + } + .menu-nav > li.menu-nav-li1::before { + display: none; + } +} diff --git a/web/style/pinned.scss b/web/style/pinned.scss new file mode 100644 index 0000000..33d0090 --- /dev/null +++ b/web/style/pinned.scss @@ -0,0 +1,14 @@ +@use "./const.scss" as *; + +.pinned-container { + background-color: $background-color; + z-index: 1; +} + +.pinned-container .blog-post-content > * { + width: 80vw; +} + +.pinned-container .blog-post-head { + display: none; +} diff --git a/web/style/scroll.scss b/web/style/scroll.scss new file mode 100644 index 0000000..30ede5c --- /dev/null +++ b/web/style/scroll.scss @@ -0,0 +1,39 @@ +@use "./const.scss" as *; + +.scroll-container { + z-index: 0; + height: 64px; + margin-top: auto; +} +.scroll-container a { + left: 50%; + margin-top: -32px; + position: absolute; +} +.scroll-container a span { + position: absolute; + left: 50%; + width: 24px; + height: 24px; + margin-left: -12px; + margin-top: -36px; + border-left: 1px solid $main-color; + border-bottom: 1px solid $main-color; + transform: rotate(-45deg); + animation: scroll-keyframes 1.5s infinite; + box-sizing: border-box; +} + +@keyframes scroll-keyframes { + 0% { + transform: rotate(-45deg) translate(0, 0); + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: rotate(-45deg) translate(-20px, 20px); + opacity: 0; + } +}