commit
7572cc7a99
GPG Key ID:
A595FB7E3E56911C
@ -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,34 @@ |
|||||||
import "./font.css" |
import "code-prettify/styles/desert.css"; |
||||||
import "./index.scss" |
import "bootstrap-icons/font/bootstrap-icons.css"; |
||||||
|
|
||||||
import "code-prettify/styles/desert.css"
|
import "code-prettify"; |
||||||
import "bootstrap-icons/font/bootstrap-icons.css" |
|
||||||
|
|
||||||
import "code-prettify" |
import "./style/index.scss"; |
||||||
|
|
||||||
|
const applyPrettyPrint = () => { |
||||||
|
|
||||||
|
const blogPosts = document.getElementsByClassName("blog-post-content"); |
||||||
|
for (const blogPost of blogPosts) { |
||||||
|
|
||||||
|
const codeBlocks = blogPost.getElementsByTagName("code"); |
||||||
|
for (const codeBlock of codeBlocks) { |
||||||
|
codeBlock.parentElement.classList.add("prettyprint", "linenums", "kg-card", "kg-code-card"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
PR.prettyPrint(); |
PR.prettyPrint(); |
||||||
|
} |
||||||
|
|
||||||
|
const init = () => { |
||||||
|
applyPrettyPrint();
|
||||||
|
} |
||||||
|
|
||||||
|
if (document.readyState === "complete" || document.readyState === "interactive") { |
||||||
|
requestAnimationFrame(init); |
||||||
|
} else { |
||||||
|
document.addEventListener("DOMContentLoaded", init); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,59 @@ |
|||||||
|
@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; |
||||||
|
} |
||||||
|
|
||||||
|
@media all and (max-width: 512px) { |
||||||
|
.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,4 @@ |
|||||||
|
.instagram-media { |
||||||
|
margin: 0 !important; |
||||||
|
min-width: auto !important; |
||||||
|
} |
||||||
@ -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,45 @@ |
|||||||
|
@use "./const.scss" as *; |
||||||
|
|
||||||
|
.kg-card { |
||||||
|
width: auto; |
||||||
|
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 > * { |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
|
||||||
|
.kg-card img { |
||||||
|
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; |
||||||
|
text-shadow: none; |
||||||
|
overflow-x: auto; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
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,23 @@ |
|||||||
|
@use "./const.scss" as *; |
||||||
|
|
||||||
|
.pinned-container { |
||||||
|
background-color: $background-color; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pinned-container .blog-post-head { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pinned-container .blog-post-content > * { |
||||||
|
width: 80vw; |
||||||
|
} |
||||||
|
.pinned-container .blog-post-content > .kg-card { |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media all and (max-width: 512px) { |
||||||
|
.pinned-container .blog-post-content > * { |
||||||
|
width: 90vw; |
||||||
|
} |
||||||
|
} |
||||||
@ -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…
Reference in new issue