mainnika
/
nikita-tokarch-uk
mirror of https://github.com/mainnika/nikita-tokarch-uk.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Restructure scss files

Browse Source
develop
Nikita Tokarchuk 3 years ago
parent 9e1ddd9f13
commit 129a80904f
Signed by: mainnika
GPG Key ID: A595FB7E3E56911C
11 changed files with 345 additions and 312 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

18
web/font.css
Unescape View File

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

5
web/index.js
Unescape View File

@ -1,9 +1,8 @@
import "./font.css"
import "./index.scss"
import "code-prettify/styles/desert.css" import "code-prettify/styles/desert.css"
import "bootstrap-icons/font/bootstrap-icons.css" import "bootstrap-icons/font/bootstrap-icons.css"
import "code-prettify" import "code-prettify"
import "./style/index.scss"
PR.prettyPrint(); PR.prettyPrint();

291
web/index.scss
Unescape View File

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

66
web/style/blog.scss
Unescape View File

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

14
web/style/const.scss
Unescape View File

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

25
web/style/font.scss
Unescape View File

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

61
web/style/index.scss
Unescape View File

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

43
web/style/kg.scss
Unescape View File

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

81
web/style/menu.scss
Unescape View File

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

14
web/style/pinned.scss
Unescape View File

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

39
web/style/scroll.scss
Unescape View File

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