Restructure scss files

main
Nikita Tokarchuk 2 years ago
parent 9e1ddd9f13
commit 129a80904f
Signed by: mainnika
GPG Key ID: A595FB7E3E56911C
  1. 18
      web/font.css
  2. 5
      web/index.js
  3. 291
      web/index.scss
  4. 66
      web/style/blog.scss
  5. 14
      web/style/const.scss
  6. 25
      web/style/font.scss
  7. 61
      web/style/index.scss
  8. 43
      web/style/kg.scss
  9. 81
      web/style/menu.scss
  10. 14
      web/style/pinned.scss
  11. 39
      web/style/scroll.scss

@ -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;
}

@ -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();

@ -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;
}
}

@ -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;
}
}

@ -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;

@ -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;
}

@ -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;
}
}

@ -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;
}
}

@ -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;
}
}

@ -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;
}

@ -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;
}
}
Loading…
Cancel
Save