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 "./index.scss" |
||||
import "code-prettify/styles/desert.css"; |
||||
import "bootstrap-icons/font/bootstrap-icons.css"; |
||||
|
||||
import "code-prettify/styles/desert.css"
|
||||
import "bootstrap-icons/font/bootstrap-icons.css" |
||||
import "code-prettify"; |
||||
|
||||
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(); |
||||
} |
||||
|
||||
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