From ae6df5e842f849ffe8464a8d0a070839de1b5b3a Mon Sep 17 00:00:00 2001 From: Eltrac Date: Wed, 8 Jan 2025 14:38:00 +0800 Subject: refactor(theme): use scss and split index.css into modules --- assets/css/components/_animation.scss | 9 + assets/css/components/_content.scss | 89 ++++ assets/css/components/_footer.scss | 44 ++ assets/css/components/_header.scss | 68 +++ assets/css/components/_markdown.scss | 90 ++++ assets/css/components/_pages.scss | 216 +++++++++ assets/css/components/_reset.scss | 32 ++ assets/css/components/_shortcodes.scss | 202 ++++++++ assets/css/components/_variables.scss | 44 ++ assets/css/flexbox.css | 852 +++++++++++++++++++++++++++++++++ assets/css/flexboxgrid-6.3.1.min.css | 852 --------------------------------- assets/css/index.css | 825 ------------------------------- assets/css/index.scss | 9 + layouts/index.html | 2 +- layouts/partials/head/css.html | 4 +- 15 files changed, 1658 insertions(+), 1680 deletions(-) create mode 100644 assets/css/components/_animation.scss create mode 100644 assets/css/components/_content.scss create mode 100644 assets/css/components/_footer.scss create mode 100644 assets/css/components/_header.scss create mode 100644 assets/css/components/_markdown.scss create mode 100644 assets/css/components/_pages.scss create mode 100644 assets/css/components/_reset.scss create mode 100644 assets/css/components/_shortcodes.scss create mode 100644 assets/css/components/_variables.scss create mode 100644 assets/css/flexbox.css delete mode 100644 assets/css/flexboxgrid-6.3.1.min.css delete mode 100644 assets/css/index.css create mode 100644 assets/css/index.scss diff --git a/assets/css/components/_animation.scss b/assets/css/components/_animation.scss new file mode 100644 index 00000000..a47bfafc --- /dev/null +++ b/assets/css/components/_animation.scss @@ -0,0 +1,9 @@ +/* transition swup */ + +html.is-changing .transition-fade { + transition: opacity 0.25s; + opacity: 1; +} +html.is-animating .transition-fade { + opacity: 0; +} diff --git a/assets/css/components/_content.scss b/assets/css/components/_content.scss new file mode 100644 index 00000000..6c5815cb --- /dev/null +++ b/assets/css/components/_content.scss @@ -0,0 +1,89 @@ +/* toc */ + +#toc-container { + position: absolute; + bottom: 0; + right: calc(50% + var(--page-width) / 2); + left: auto; + height: 100%; + top: 12rem; +} + +@media screen and (max-width: 1200px) { + #toc-container { + display: none + } +} + +#toc { + /* position */ + position: sticky; + top: 3rem; + /* styling */ + font-size: 1rem; + padding: 0 2rem; +} + +@media screen and (max-width: 1700px) { + #toc { + font-size: 0.9rem; + } +} + +@media screen and (max-width: 1500px) { + #toc { + font-size: 0.825rem; + } +} + +#toc ul, #toc ol { + margin-block-start: 0; + margin-block-end: 0; + padding-inline-start: 1rem; +} + +#toc li { + list-style: none; +} + +#toc li > a { + color: var(--secondary-text-color); + text-decoration: none; + transition: color .3s; + display: inline-flex; + align-items: center; + gap: .5rem; +} + +#toc li > a::before { + content: ''; + display: inline-block; + width: 1rem; + height: .3rem; + background-color: var(--block-background-color); + border-radius: .2rem; + transition: background .3s; +} + +#toc li a:hover, +#toc li.is-active-li > a { + color: var(--text-color); +} + +#toc li.is-active-li > a::before { + background-color: var(--secondary-text-color); +} + +#toc .toc-list { + overflow: hidden; + position: relative; +} + +#toc .toc-list .toc-list { + max-height: 25rem; + overflow-y: auto +} + +#toc .toc-list.is-collapsed { + max-height: 0 +} diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss new file mode 100644 index 00000000..44811c6c --- /dev/null +++ b/assets/css/components/_footer.scss @@ -0,0 +1,44 @@ +/* site footer */ + +#footer { + width: var(--page-width); + margin: 2rem auto; + font-family: var(--mono-font-family); +} + +@media screen and (min-width: 768px) { + #footer { + display: flex; + justify-content: space-between; + } +} + +#footer-links { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +#footer-links ul.footer-navigation { + list-style: none; + display: flex; + gap: 0.2rem; + justify-content: flex-end; + padding-inline-start: 0; +} + +#footer-links ul.footer-navigation li { + display: inline-flex; + align-items: center; +} + +#footer-links ul.footer-navigation li img { + height: 1rem; + width: auto +} + +#footer-copyright .word-count { + font-family: var(--serif-font-family); + font-size: .9rem; + color: var(--secondary-text-color) +} diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss new file mode 100644 index 00000000..9e3d4454 --- /dev/null +++ b/assets/css/components/_header.scss @@ -0,0 +1,68 @@ +/* header */ + +.header-title { + font-size: 2rem; + font-weight: 900; + margin-top: 32px; + text-align: center; + letter-spacing: .15rem; +} +.header-title a { + text-decoration: none; +} + +.header-subtitle { + color: var(--secondary-text-color); +} + +.header-line { + width: 100%; + border-width: 1px; + border-color: var(--border-color); + border-style: solid none none none; +} + +/* navigation */ + +#navigation-bar { + --gap: .75rem; + display: flex; + justify-content: center; + align-items: center; + gap: var(--gap); + padding-left: calc(1rem + var(--gap)) +} + +.navigation { + margin: 1rem 0; + display: flex; + justify-content: center; + align-items: center; + width: fit-content; + border-radius: 1rem; + overflow: hidden; +} + +.navigation-item a { + display: inline-block; + color: var(--background-color); + padding: 0.25rem 0.5rem; + background-color: var(--text-color); +} + +.navigation-item:first-child a { + padding-left: 0.75rem +} + +.navigation-item:last-child a { + padding-right: 0.75rem +} + +.navigation-item.active a { + color: var(--text-color); + background-color: var(--block-background-color); +} + +.navigation-item a:hover { + text-decoration: none; +} diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss new file mode 100644 index 00000000..9ed1c967 --- /dev/null +++ b/assets/css/components/_markdown.scss @@ -0,0 +1,90 @@ +// Variables (can be moved to a separate variables file if needed) +$font-size: var(--content-font-size); +$link-color: var(--link-color); +$secondary-text-color: var(--secondary-text-color); +$border-color: var(--border-color); +$block-background-color: var(--block-background-color); + +// Mixin for block styles +@mixin block-style($margin, $padding, $color: null, $border-left: null) { + margin: $margin; + padding: $padding; + @if $color { + color: $color; + } + @if $border-left { + border-left: $border-left; + } +} + +// Main styles +.markdown-body { + font-size: $font-size; + max-width: 100%; + + // Nested styles for child elements + a { + text-decoration: underline; + color: $link-color; + } + + blockquote { + @include block-style(0, 0 1em, $secondary-text-color, 0.25em solid $border-color); + } + + pre { + padding: 16px; + overflow: auto; + border-radius: 10px; + } + + code { + padding: 0.2em 0.4em; + font-size: 85%; + background-color: $block-background-color; + border-radius: 6px; + } + + pre > code { + padding: 0; + font-size: 100%; + background-color: inherit; + border: 0; + } + + p { + hyphens: auto; + text-justify: ideographic; + margin-bottom: 1em; + } + + strong { + color: var(--strong-text-color) + } + + em { + color: var(--em-text-color) + } + + hr { + margin: 2.5rem auto; + border: 0.1rem dashed var(--border-color); + } + + img { + max-width: 100%; + display: block; + margin-right: auto; + margin-top: 6px; + } + + figure { + margin: 0; + } + + figure figcaption h4 { + font-size: 0.9rem; + color: var(--secondary-text-color); + font-weight: 400; + } +} diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss new file mode 100644 index 00000000..61a88aae --- /dev/null +++ b/assets/css/components/_pages.scss @@ -0,0 +1,216 @@ +/* posts list */ + +#posts-list { + min-height: 600px; +} + +#posts-list ul { + list-style-type: none; + padding-inline-start: 1em; +} + +.featured-post a.posts-title-link { + font-weight: 800; + display: block; +} + +.posts-line { + font-size: 1.2rem; + margin: 12px 0; +} + +#posts-list > section:nth-child(1) > ul:nth-child(3) > li.first-post > div > div.posts-title.col-xs-9.col-sm-10 > div { + align-items: flex-start; +} + +.posts-categories { + font-size: 0.8rem; + text-align: center; +} + +.posts-category { + padding: 3px 0; + border: var(--border-color) 2px solid; + border-radius: 5px; + background-color: var(--background-color); +} + +.posts-date { + font-family: var(--mono-font-family); + color: var(--secondary-text-color) +} + +.posts-year-section { + --section-height: 9rem; + min-height: var(--section-height); + position: relative; + margin: 2rem 0; +} + +.posts-year-title { + font-size: 2rem; + font-weight: 900; + position: absolute; + right: 0; + color: var(--text-color); + opacity: 0.25; + font-size: calc(var(--section-height) / 2); + margin: 0; + line-height: 1; + z-index: -1; +} + +#posts-list hr { + border: 1px solid var(--border-color); + margin: 3rem 0; +} + +.posts-subtitle { + color: var(--secondary-text-color) +} + +/* post */ + +.post-header { + margin-bottom: 2rem; +} + +.post-title { + font-size: 2rem; + font-weight: 900; +} + +.post-subtitle { + display: block; + color: var(--secondary-text-color); + font-style: italic; + font-size: 1.2rem; +} + +.post-tags a { + display: inline-block; + color: var(--secondary-text-color); + font-size: var(--content-font-size); +} + +.post-date { + color: var(--secondary-text-color) +} + +.post-author { + float: right; + font-weight: 600; +} + +.page-content { + min-height: 60%; +} + +.post-content { + margin-bottom: 50px; + line-height: 2 +} + +/* termlist */ + +.termlist-title { + font-size: 2rem; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + + background-color: var(--block-background-color); + padding: 0.5rem 1rem; + border-radius: 1rem; + width: fit-content; + margin: 2rem auto; + margin-bottom: 0; +} + +.termlist-title::before, +.termlist-title::after { + margin: 0.5rem 0; + color: var(--secondary-text-color); + font-size: 0.75em +} + +.termlist-title::before { + content: "《"; +} + +.termlist-title::after { + content: "》"; +} + +.termlist-subscribe { + text-align: center; + font-size: .9rem +} + +.termlist-subscribe a { + color: var(--secondary-text-color) +} + +.termlist-subscribe a:hover { + text-decoration: none +} + +/* category page */ + +section.taxonomy { + margin: 2rem 0; +} + +.taxonomy-tags { + display: flex; + flex-wrap: wrap; + gap: .5rem +} + +.taxonomy-tags-item { + display: inline-flex; + align-items: center; + gap: .3rem; + + padding: .25rem .75rem; + background-color: var(--block-background-color); + transition: color, background .3s; + border-radius: .3rem; +} + +.taxonomy-tags-item:hover { + text-decoration: none; + background-color: var(--text-color); + color: var(--block-background-color); +} + +.taxonomy-tags-item .tag-count { + font-size: .8rem; + color: var(--secondary-text-color); +} + +@media screen and (max-width: 600px) { + .posts-line { + font-size: 16px; + } + + .markdown-body { + font-size: 16px; + } + .post-title { + font-size: 2rem; + } + .post-content p { + letter-spacing: 0.05em; + } + .post-content .post-gallery img { + width: 100%; + } +} + +@media screen and (max-width: 48em) { + .posts-category { + display: none; + } +} diff --git a/assets/css/components/_reset.scss b/assets/css/components/_reset.scss new file mode 100644 index 00000000..8d29ea32 --- /dev/null +++ b/assets/css/components/_reset.scss @@ -0,0 +1,32 @@ +body { + font-family: var(--serif-font-family); + -webkit-font-smoothing: antialiased; + margin: 0 20px; + color: var(--text-color); + position: relative; + /* background */ + background-image: linear-gradient(to bottom, var(--block-background-color), transparent); + background-size: 100% 5rem; + background-position: top left; + background-repeat: no-repeat; + background-color: var(--background-color); +} + +article { + max-width: var(--page-width); + margin: 0 auto +} + +a { + color: var(--text-color); + text-decoration: none; + text-underline-offset: 0.25rem; +} + +a:hover { + text-decoration: underline; +} + +ul { + list-style-type: square; +} diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss new file mode 100644 index 00000000..48074923 --- /dev/null +++ b/assets/css/components/_shortcodes.scss @@ -0,0 +1,202 @@ +/* callouts */ + +.callout { + background-color: var(--block-background-color); + border-radius: .25rem; + padding: 1rem 1.25rem; + line-height: 1.75; + + display: flex; + gap: .75rem; + + margin: 0.5rem 0; +} + +.callout .callout-content p { + margin: 0; +} + +/* quote shortcode */ + +.quote-card { + --card-bg: rgba(255,255,255,0.25); + --card-bg-lighter: rgba(255,255,255,0.1); + --card-noise: rgba(255,255,255,0.04); + + font-size: 1.5rem; + font-style: italic; + text-align: center; + margin: 5rem 3rem; + padding: 1rem; + border: 1px solid var(--border-color); + border-radius: 1rem; + box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a; + transform: rotate(3deg); + background-color: rgba(255,255,255,0.35); + + background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)), + repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px, + repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px; + background-blend-mode: normal, difference; +} + +@media screen and (max-width: 768px) { + .quote-card { + font-size: 1.2rem; + margin: 3rem 1rem; + } +} + +/* blog links */ + +div.blog-links { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +a.blog-link { + position: relative; + background-color: var(--block-background-color); + text-decoration: none; + color: var(--text-color); + padding: 1rem 2rem; + padding-right: 4rem; + border-radius: 1rem; + width: calc(50% - 2rem); + box-sizing: border-box; + overflow: hidden +} + +@media screen and (max-width: 768px) { + a.blog-link { + font-size: 1.2rem; + padding: 0.5rem 1rem; + padding-right: 2rem; + width: 100%; + } +} + +a.blog-link h4, +a.blog-link p { + margin: 0; + font-size: 1.2rem; +} + +a.blog-link p { + line-height: 1.5; +} + +a.blog-link .blog-link-content { + z-index: 10; +} + +a.blog-link-image { + z-index: 0; +} + +a.blog-link img { + --size: 5rem; + display: block; + position: absolute; + right: -1rem; + bottom: -1rem; + width: var(--size); + height: var(--size); + border-radius: 100%; + z-index: 0; +} + +/* book showcase shortcode */ + +.book-showcase { + display: flex; + gap: 2rem; + line-height: 1.5; + margin: 2rem 0 +} + +.book-showcase .book-cover { + width: 25%; + flex-shrink: 0; +} + +.book-description-header .book-title { + margin: 0 +} + +.book-description-header p { + font-size: 1rem; + margin: 0.1rem +} + +/* inline-image shortcode */ + +.inline-image { + display: flex; + overflow-x: auto; + scroll-behavior: smooth; + gap: 1rem; + white-space: nowrap; +} + +.inline-image > figure { + display: inline-block; + margin: 0; + flex-shrink: 0; +} + +.inline-image > figure img { + height: 20rem; + object-fit: cover; + display: block; +} + + +/* gallery */ + +.gallery-img { + text-align: center; +} + +.gallery-img span { + text-align: center; +} + +.gallery-img-desc { + font-size: 0.8em; + font-weight: 800; +} + +/* sidenote shortcode */ + +@media screen and (max-width: 1199px) { + .sidenote { + border: 1px solid var(--block-background-color); + padding: .75rem 1rem; + border-radius: 0.5rem; + line-height: 1.5; + } + .sidenote-title { + font-size: 1rem; + text-align: right; + font-style: italic + } +} + +@media screen and (min-width: 1200px) { + .sidenote { + position: absolute; + left: calc(50% + var(--page-width) / 2); + margin-left: 2rem; + max-width: 20rem + } +} + +.sidenote-title { + margin: 0.5rem 0 +} + +.sidenote-content { + font-size: 1rem +} diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss new file mode 100644 index 00000000..11eded55 --- /dev/null +++ b/assets/css/components/_variables.scss @@ -0,0 +1,44 @@ +:root { + /* colors */ + --background-color: #F5F5F7; + --block-background-color: #E9E8ED; + --border-color: #d0d7de; + --text-color: #1D1D1F; + --secondary-text-color: #6E6E73; + --link-color: #277BD9; + + --strong-text-color: #B6506A; + --em-text-color: #0271A4; + + /* fonts */ + --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace; + --serif-font-family: "Noto Serif SC", serif; + --content-font-size: 20px; + + /* waline */ + --waline-font-size: 20px; + --waline-border-color: var(--border-color); + --waline-bg-color: var(--background-color); + + --page-width: 700px; +} + +.dark { + --background-color: #1D2021; + --block-background-color: #181A1B; + --border-color: rgba(255,255,255,0.2); + --text-color: #D2CEC9; + --secondary-text-color: #A1998D; + --link-color: #277BD9 +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #1D2021; + --block-background-color: #181A1B; + --border-color: rgba(255,255,255,0.2); + --text-color: #D2CEC9; + --secondary-text-color: #A1998D; + --link-color: #277BD9; + } +} diff --git a/assets/css/flexbox.css b/assets/css/flexbox.css new file mode 100644 index 00000000..7e27ea94 --- /dev/null +++ b/assets/css/flexbox.css @@ -0,0 +1,852 @@ +.container, +.container-fluid { + margin-right: auto; + margin-left: auto +} + +.container-fluid { + padding-right: 2rem; + padding-left: 2rem +} + +.row { + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -.5rem; + margin-left: -.5rem +} + +.row.reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse +} + +.col.reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse +} + +.col-xs, +.col-xs-1, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-offset-0, +.col-xs-offset-1, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem +} + +.col-xs { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% +} + +.col-xs-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% +} + +.col-xs-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% +} + +.col-xs-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% +} + +.col-xs-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% +} + +.col-xs-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% +} + +.col-xs-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% +} + +.col-xs-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% +} + +.col-xs-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% +} + +.col-xs-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% +} + +.col-xs-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% +} + +.col-xs-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% +} + +.col-xs-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% +} + +.col-xs-offset-0 { + margin-left: 0 +} + +.col-xs-offset-1 { + margin-left: 8.33333333% +} + +.col-xs-offset-2 { + margin-left: 16.66666667% +} + +.col-xs-offset-3 { + margin-left: 25% +} + +.col-xs-offset-4 { + margin-left: 33.33333333% +} + +.col-xs-offset-5 { + margin-left: 41.66666667% +} + +.col-xs-offset-6 { + margin-left: 50% +} + +.col-xs-offset-7 { + margin-left: 58.33333333% +} + +.col-xs-offset-8 { + margin-left: 66.66666667% +} + +.col-xs-offset-9 { + margin-left: 75% +} + +.col-xs-offset-10 { + margin-left: 83.33333333% +} + +.col-xs-offset-11 { + margin-left: 91.66666667% +} + +.start-xs { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start +} + +.center-xs { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center +} + +.end-xs { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end +} + +.top-xs { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start +} + +.middle-xs { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.bottom-xs { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end +} + +.around-xs { + -ms-flex-pack: distribute; + justify-content: space-around +} + +.between-xs { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between +} + +.first-xs { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 +} + +.last-xs { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 +} + +@media only screen and (min-width:48em) { + .container { + width: 49rem + } + .col-sm, + .col-sm-1, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-offset-0, + .col-sm-offset-1, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem + } + .col-sm { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-sm-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% + } + .col-sm-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% + } + .col-sm-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% + } + .col-sm-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% + } + .col-sm-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% + } + .col-sm-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% + } + .col-sm-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% + } + .col-sm-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% + } + .col-sm-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% + } + .col-sm-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% + } + .col-sm-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% + } + .col-sm-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% + } + .col-sm-offset-0 { + margin-left: 0 + } + .col-sm-offset-1 { + margin-left: 8.33333333% + } + .col-sm-offset-2 { + margin-left: 16.66666667% + } + .col-sm-offset-3 { + margin-left: 25% + } + .col-sm-offset-4 { + margin-left: 33.33333333% + } + .col-sm-offset-5 { + margin-left: 41.66666667% + } + .col-sm-offset-6 { + margin-left: 50% + } + .col-sm-offset-7 { + margin-left: 58.33333333% + } + .col-sm-offset-8 { + margin-left: 66.66666667% + } + .col-sm-offset-9 { + margin-left: 75% + } + .col-sm-offset-10 { + margin-left: 83.33333333% + } + .col-sm-offset-11 { + margin-left: 91.66666667% + } + .start-sm { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start + } + .center-sm { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center + } + .end-sm { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end + } + .top-sm { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start + } + .middle-sm { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center + } + .bottom-sm { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end + } + .around-sm { + -ms-flex-pack: distribute; + justify-content: space-around + } + .between-sm { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between + } + .first-sm { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 + } + .last-sm { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 + } +} + +@media only screen and (min-width:64em) { + .container { + width: 65rem + } + .col-md, + .col-md-1, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-offset-0, + .col-md-offset-1, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem + } + .col-md { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-md-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% + } + .col-md-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% + } + .col-md-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% + } + .col-md-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% + } + .col-md-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% + } + .col-md-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% + } + .col-md-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% + } + .col-md-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% + } + .col-md-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% + } + .col-md-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% + } + .col-md-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% + } + .col-md-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% + } + .col-md-offset-0 { + margin-left: 0 + } + .col-md-offset-1 { + margin-left: 8.33333333% + } + .col-md-offset-2 { + margin-left: 16.66666667% + } + .col-md-offset-3 { + margin-left: 25% + } + .col-md-offset-4 { + margin-left: 33.33333333% + } + .col-md-offset-5 { + margin-left: 41.66666667% + } + .col-md-offset-6 { + margin-left: 50% + } + .col-md-offset-7 { + margin-left: 58.33333333% + } + .col-md-offset-8 { + margin-left: 66.66666667% + } + .col-md-offset-9 { + margin-left: 75% + } + .col-md-offset-10 { + margin-left: 83.33333333% + } + .col-md-offset-11 { + margin-left: 91.66666667% + } + .start-md { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start + } + .center-md { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center + } + .end-md { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end + } + .top-md { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start + } + .middle-md { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center + } + .bottom-md { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end + } + .around-md { + -ms-flex-pack: distribute; + justify-content: space-around + } + .between-md { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between + } + .first-md { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 + } + .last-md { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 + } +} + +@media only screen and (min-width:75em) { + .container { + width: 76rem + } + .col-lg, + .col-lg-1, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-offset-0, + .col-lg-offset-1, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem + } + .col-lg { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-lg-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% + } + .col-lg-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% + } + .col-lg-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% + } + .col-lg-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% + } + .col-lg-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% + } + .col-lg-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% + } + .col-lg-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% + } + .col-lg-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% + } + .col-lg-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% + } + .col-lg-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% + } + .col-lg-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% + } + .col-lg-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% + } + .col-lg-offset-0 { + margin-left: 0 + } + .col-lg-offset-1 { + margin-left: 8.33333333% + } + .col-lg-offset-2 { + margin-left: 16.66666667% + } + .col-lg-offset-3 { + margin-left: 25% + } + .col-lg-offset-4 { + margin-left: 33.33333333% + } + .col-lg-offset-5 { + margin-left: 41.66666667% + } + .col-lg-offset-6 { + margin-left: 50% + } + .col-lg-offset-7 { + margin-left: 58.33333333% + } + .col-lg-offset-8 { + margin-left: 66.66666667% + } + .col-lg-offset-9 { + margin-left: 75% + } + .col-lg-offset-10 { + margin-left: 83.33333333% + } + .col-lg-offset-11 { + margin-left: 91.66666667% + } + .start-lg { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start + } + .center-lg { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center + } + .end-lg { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end + } + .top-lg { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start + } + .middle-lg { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center + } + .bottom-lg { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end + } + .around-lg { + -ms-flex-pack: distribute; + justify-content: space-around + } + .between-lg { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between + } + .first-lg { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 + } + .last-lg { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 + } +} \ No newline at end of file diff --git a/assets/css/flexboxgrid-6.3.1.min.css b/assets/css/flexboxgrid-6.3.1.min.css deleted file mode 100644 index 7e27ea94..00000000 --- a/assets/css/flexboxgrid-6.3.1.min.css +++ /dev/null @@ -1,852 +0,0 @@ -.container, -.container-fluid { - margin-right: auto; - margin-left: auto -} - -.container-fluid { - padding-right: 2rem; - padding-left: 2rem -} - -.row { - box-sizing: border-box; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-right: -.5rem; - margin-left: -.5rem -} - -.row.reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse -} - -.col.reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse -} - -.col-xs, -.col-xs-1, -.col-xs-10, -.col-xs-11, -.col-xs-12, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-offset-0, -.col-xs-offset-1, -.col-xs-offset-10, -.col-xs-offset-11, -.col-xs-offset-12, -.col-xs-offset-2, -.col-xs-offset-3, -.col-xs-offset-4, -.col-xs-offset-5, -.col-xs-offset-6, -.col-xs-offset-7, -.col-xs-offset-8, -.col-xs-offset-9 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: .5rem; - padding-left: .5rem -} - -.col-xs { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% -} - -.col-xs-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333% -} - -.col-xs-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667% -} - -.col-xs-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25% -} - -.col-xs-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333% -} - -.col-xs-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667% -} - -.col-xs-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50% -} - -.col-xs-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333% -} - -.col-xs-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667% -} - -.col-xs-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75% -} - -.col-xs-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333% -} - -.col-xs-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667% -} - -.col-xs-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100% -} - -.col-xs-offset-0 { - margin-left: 0 -} - -.col-xs-offset-1 { - margin-left: 8.33333333% -} - -.col-xs-offset-2 { - margin-left: 16.66666667% -} - -.col-xs-offset-3 { - margin-left: 25% -} - -.col-xs-offset-4 { - margin-left: 33.33333333% -} - -.col-xs-offset-5 { - margin-left: 41.66666667% -} - -.col-xs-offset-6 { - margin-left: 50% -} - -.col-xs-offset-7 { - margin-left: 58.33333333% -} - -.col-xs-offset-8 { - margin-left: 66.66666667% -} - -.col-xs-offset-9 { - margin-left: 75% -} - -.col-xs-offset-10 { - margin-left: 83.33333333% -} - -.col-xs-offset-11 { - margin-left: 91.66666667% -} - -.start-xs { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start -} - -.center-xs { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center -} - -.end-xs { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end -} - -.top-xs { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start -} - -.middle-xs { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center -} - -.bottom-xs { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end -} - -.around-xs { - -ms-flex-pack: distribute; - justify-content: space-around -} - -.between-xs { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between -} - -.first-xs { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1 -} - -.last-xs { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1 -} - -@media only screen and (min-width:48em) { - .container { - width: 49rem - } - .col-sm, - .col-sm-1, - .col-sm-10, - .col-sm-11, - .col-sm-12, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-offset-0, - .col-sm-offset-1, - .col-sm-offset-10, - .col-sm-offset-11, - .col-sm-offset-12, - .col-sm-offset-2, - .col-sm-offset-3, - .col-sm-offset-4, - .col-sm-offset-5, - .col-sm-offset-6, - .col-sm-offset-7, - .col-sm-offset-8, - .col-sm-offset-9 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: .5rem; - padding-left: .5rem - } - .col-sm { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-sm-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333% - } - .col-sm-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667% - } - .col-sm-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25% - } - .col-sm-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333% - } - .col-sm-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667% - } - .col-sm-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50% - } - .col-sm-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333% - } - .col-sm-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667% - } - .col-sm-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75% - } - .col-sm-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333% - } - .col-sm-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667% - } - .col-sm-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100% - } - .col-sm-offset-0 { - margin-left: 0 - } - .col-sm-offset-1 { - margin-left: 8.33333333% - } - .col-sm-offset-2 { - margin-left: 16.66666667% - } - .col-sm-offset-3 { - margin-left: 25% - } - .col-sm-offset-4 { - margin-left: 33.33333333% - } - .col-sm-offset-5 { - margin-left: 41.66666667% - } - .col-sm-offset-6 { - margin-left: 50% - } - .col-sm-offset-7 { - margin-left: 58.33333333% - } - .col-sm-offset-8 { - margin-left: 66.66666667% - } - .col-sm-offset-9 { - margin-left: 75% - } - .col-sm-offset-10 { - margin-left: 83.33333333% - } - .col-sm-offset-11 { - margin-left: 91.66666667% - } - .start-sm { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start - } - .center-sm { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center - } - .end-sm { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end - } - .top-sm { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start - } - .middle-sm { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center - } - .bottom-sm { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end - } - .around-sm { - -ms-flex-pack: distribute; - justify-content: space-around - } - .between-sm { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between - } - .first-sm { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1 - } - .last-sm { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1 - } -} - -@media only screen and (min-width:64em) { - .container { - width: 65rem - } - .col-md, - .col-md-1, - .col-md-10, - .col-md-11, - .col-md-12, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-offset-0, - .col-md-offset-1, - .col-md-offset-10, - .col-md-offset-11, - .col-md-offset-12, - .col-md-offset-2, - .col-md-offset-3, - .col-md-offset-4, - .col-md-offset-5, - .col-md-offset-6, - .col-md-offset-7, - .col-md-offset-8, - .col-md-offset-9 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: .5rem; - padding-left: .5rem - } - .col-md { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-md-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333% - } - .col-md-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667% - } - .col-md-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25% - } - .col-md-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333% - } - .col-md-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667% - } - .col-md-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50% - } - .col-md-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333% - } - .col-md-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667% - } - .col-md-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75% - } - .col-md-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333% - } - .col-md-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667% - } - .col-md-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100% - } - .col-md-offset-0 { - margin-left: 0 - } - .col-md-offset-1 { - margin-left: 8.33333333% - } - .col-md-offset-2 { - margin-left: 16.66666667% - } - .col-md-offset-3 { - margin-left: 25% - } - .col-md-offset-4 { - margin-left: 33.33333333% - } - .col-md-offset-5 { - margin-left: 41.66666667% - } - .col-md-offset-6 { - margin-left: 50% - } - .col-md-offset-7 { - margin-left: 58.33333333% - } - .col-md-offset-8 { - margin-left: 66.66666667% - } - .col-md-offset-9 { - margin-left: 75% - } - .col-md-offset-10 { - margin-left: 83.33333333% - } - .col-md-offset-11 { - margin-left: 91.66666667% - } - .start-md { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start - } - .center-md { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center - } - .end-md { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end - } - .top-md { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start - } - .middle-md { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center - } - .bottom-md { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end - } - .around-md { - -ms-flex-pack: distribute; - justify-content: space-around - } - .between-md { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between - } - .first-md { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1 - } - .last-md { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1 - } -} - -@media only screen and (min-width:75em) { - .container { - width: 76rem - } - .col-lg, - .col-lg-1, - .col-lg-10, - .col-lg-11, - .col-lg-12, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-offset-0, - .col-lg-offset-1, - .col-lg-offset-10, - .col-lg-offset-11, - .col-lg-offset-12, - .col-lg-offset-2, - .col-lg-offset-3, - .col-lg-offset-4, - .col-lg-offset-5, - .col-lg-offset-6, - .col-lg-offset-7, - .col-lg-offset-8, - .col-lg-offset-9 { - box-sizing: border-box; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: .5rem; - padding-left: .5rem - } - .col-lg { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-lg-1 { - -ms-flex-preferred-size: 8.33333333%; - flex-basis: 8.33333333%; - max-width: 8.33333333% - } - .col-lg-2 { - -ms-flex-preferred-size: 16.66666667%; - flex-basis: 16.66666667%; - max-width: 16.66666667% - } - .col-lg-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25% - } - .col-lg-4 { - -ms-flex-preferred-size: 33.33333333%; - flex-basis: 33.33333333%; - max-width: 33.33333333% - } - .col-lg-5 { - -ms-flex-preferred-size: 41.66666667%; - flex-basis: 41.66666667%; - max-width: 41.66666667% - } - .col-lg-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50% - } - .col-lg-7 { - -ms-flex-preferred-size: 58.33333333%; - flex-basis: 58.33333333%; - max-width: 58.33333333% - } - .col-lg-8 { - -ms-flex-preferred-size: 66.66666667%; - flex-basis: 66.66666667%; - max-width: 66.66666667% - } - .col-lg-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75% - } - .col-lg-10 { - -ms-flex-preferred-size: 83.33333333%; - flex-basis: 83.33333333%; - max-width: 83.33333333% - } - .col-lg-11 { - -ms-flex-preferred-size: 91.66666667%; - flex-basis: 91.66666667%; - max-width: 91.66666667% - } - .col-lg-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100% - } - .col-lg-offset-0 { - margin-left: 0 - } - .col-lg-offset-1 { - margin-left: 8.33333333% - } - .col-lg-offset-2 { - margin-left: 16.66666667% - } - .col-lg-offset-3 { - margin-left: 25% - } - .col-lg-offset-4 { - margin-left: 33.33333333% - } - .col-lg-offset-5 { - margin-left: 41.66666667% - } - .col-lg-offset-6 { - margin-left: 50% - } - .col-lg-offset-7 { - margin-left: 58.33333333% - } - .col-lg-offset-8 { - margin-left: 66.66666667% - } - .col-lg-offset-9 { - margin-left: 75% - } - .col-lg-offset-10 { - margin-left: 83.33333333% - } - .col-lg-offset-11 { - margin-left: 91.66666667% - } - .start-lg { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: start - } - .center-lg { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center - } - .end-lg { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - text-align: end - } - .top-lg { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start - } - .middle-lg { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center - } - .bottom-lg { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end - } - .around-lg { - -ms-flex-pack: distribute; - justify-content: space-around - } - .between-lg { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between - } - .first-lg { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1 - } - .last-lg { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1 - } -} \ No newline at end of file diff --git a/assets/css/index.css b/assets/css/index.css deleted file mode 100644 index 5ba6d04a..00000000 --- a/assets/css/index.css +++ /dev/null @@ -1,825 +0,0 @@ -/* global */ - -:root { - /* colors */ - --background-color: #F5F5F7; - --block-background-color: #E9E8ED; - --border-color: #d0d7de; - --text-color: #1D1D1F; - --secondary-text-color: #6E6E73; - --link-color: #277BD9; - - --strong-text-color: #B6506A; - --em-text-color: #0271A4; - - /* fonts */ - --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace; - --serif-font-family: "Noto Serif SC", serif; - --content-font-size: 20px; - - /* waline */ - --waline-font-size: 20px; - --waline-border-color: var(--border-color); - --waline-bg-color: var(--background-color); - - --page-width: 700px; -} - -.dark { - --background-color: #1D2021; - --block-background-color: #181A1B; - --border-color: rgba(255,255,255,0.2); - --text-color: #D2CEC9; - --secondary-text-color: #A1998D; - --link-color: #277BD9 -} - -@media (prefers-color-scheme: dark) { - :root { - --background-color: #1D2021; - --block-background-color: #181A1B; - --border-color: rgba(255,255,255,0.2); - --text-color: #D2CEC9; - --secondary-text-color: #A1998D; - --link-color: #277BD9; - } -} - -body { - font-family: var(--serif-font-family); - -webkit-font-smoothing: antialiased; - margin: 0 20px; - color: var(--text-color); - position: relative; - /* background */ - background-image: linear-gradient(to bottom, var(--block-background-color), transparent); - background-size: 100% 5rem; - background-position: top left; - background-repeat: no-repeat; - background-color: var(--background-color); -} - -article { - max-width: var(--page-width); - margin: 0 auto -} - -a { - color: var(--text-color); - text-decoration: none; - text-underline-offset: 0.25rem; -} - -a:hover { - text-decoration: underline; -} - -ul { - list-style-type: square; -} - -.markdown-body { - font-size: var(--content-font-size); - max-width: 100%; -} - -.markdown-body a { - text-decoration: underline; - color: var(--link-color); -} - -.markdown-body blockquote { - margin: 0; - padding: 0 1em; - color: var(--secondary-text-color); - border-left: 0.25em solid var(--border-color); -} - -.markdown-body pre { - padding: 16px; - overflow: auto; - border-radius: 10px; -} - -.markdown-body code { - padding: 0.2em 0.4em; - font-size: 85%; - background-color: var(--block-background-color); - border-radius: 6px; -} - -.markdown-body img { - max-width: 100% -} - -/* reset code */ - -.markdown-body pre > code { - padding: 0; - font-size: 100%; - background-color: inherit; - border: 0; -} - -/* i18n */ - -.Chinese .markdown-body { - line-height: 200%; -} - -/* header */ - -.site-date-catalog { - font-size: 2rem; -} - -.header-title { - font-size: 2rem; - font-weight: 900; - margin-top: 32px; - text-align: center; - letter-spacing: .15rem; -} -.header-title a { - text-decoration: none; -} - -.header-subtitle { - color: var(--secondary-text-color); -} - -/* Navigation */ - -#navigation-bar { - --gap: .75rem; - display: flex; - justify-content: center; - align-items: center; - gap: var(--gap); - padding-left: calc(1rem + var(--gap)) -} - -.navigation { - margin: 1rem 0; - display: flex; - justify-content: center; - align-items: center; - width: fit-content; - border-radius: 1rem; - overflow: hidden; -} - -.navigation-item a { - display: inline-block; - color: var(--background-color); - padding: 0.25rem 0.5rem; - background-color: var(--text-color); -} - -.navigation-item:first-child a { - padding-left: 0.75rem -} - -.navigation-item:last-child a { - padding-right: 0.75rem -} - -.navigation-item.active a { - color: var(--text-color); - background-color: var(--block-background-color); -} - -.navigation-item a:hover { - text-decoration: none; -} - -.header-line { - width: 100%; - border-width: 1px; - border-color: var(--border-color); - border-style: solid none none none; -} - -/* posts list */ - -#posts-list { - min-height: 600px; -} - -#posts-list ul { - list-style-type: none; - padding-inline-start: 1em; -} - -.featured-post a.posts-title-link { - font-weight: 800; - display: block; -} - -.posts-line { - font-size: 1.2rem; - margin: 12px 0; -} - -#posts-list > section:nth-child(1) > ul:nth-child(3) > li.first-post > div > div.posts-title.col-xs-9.col-sm-10 > div { - align-items: flex-start; -} - -.posts-categories { - font-size: 0.8rem; - text-align: center; -} - -.posts-category { - padding: 3px 0; - border: var(--border-color) 2px solid; - border-radius: 5px; - background-color: var(--background-color); -} - -.posts-date { - font-family: var(--mono-font-family); - color: var(--secondary-text-color) -} - -.posts-year-section { - --section-height: 9rem; - min-height: var(--section-height); - position: relative; - margin: 2rem 0; -} - -.posts-year-title { - font-weight: 900; - position: absolute; - right: 0; - color: var(--text-color); - opacity: 0.25; - font-size: calc(var(--section-height) / 2); - margin: 0; - line-height: 1; - z-index: -1; -} - -#posts-list hr { - border: 1px solid var(--border-color); - margin: 3rem 0; -} - -.posts-subtitle { - color: var(--secondary-text-color) -} - -/* post */ - -.post-header { - margin-bottom: 2rem; -} - -.post-title { - font-size: 2rem; - font-weight: 900; -} - -.post-subtitle { - display: block; - color: var(--secondary-text-color); - font-style: italic; - font-size: 1.2rem; -} - -.post-tags a { - display: inline-block; - color: var(--secondary-text-color); - font-size: var(--content-font-size); -} - -.post-date { - color: var(--secondary-text-color) -} - -.post-author { - float: right; - font-weight: 600; -} - -.page-content { - min-height: 60%; -} - -.post-content { - margin-bottom: 50px; - line-height: 2 -} - -.post-content p { - hyphens: auto; - text-justify: ideographic; - margin-bottom: 1em; -} - -.post-content strong { - color: var(--strong-text-color) -} - -.post-content em { - color: var(--em-text-color) -} - -.post-content hr { - margin: 2.5rem auto; - border: 0.1rem dashed var(--border-color); -} - -.post-content img { - max-width: 100%; - display: block; - margin-right: auto; - margin-top: 6px; -} - -.post-content .post-gallery { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.post-content .post-gallery img { - margin-right: auto; - margin-top: auto; - width: calc(50% - 3px); -} - -.post-content figure { - margin: 0; -} - -.post-content figure figcaption h4 { - font-size: 0.9rem; - color: var(--secondary-text-color); - font-weight: 400; -} - -.related-content { - border-width: 3px; - border-style: solid; - border-color: #000; - padding: 0 10px; - margin-bottom: 50px; - margin-top: 100px; -} - -.related-content li { - margin: 5px 0; -} - -/* termlist */ - -.termlist-title { - font-size: 2rem; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - - background-color: var(--block-background-color); - padding: 0.5rem 1rem; - border-radius: 1rem; - width: fit-content; - margin: 2rem auto; - margin-bottom: 0; -} - -.termlist-title::before, -.termlist-title::after { - margin: 0.5rem 0; - color: var(--secondary-text-color); - font-size: 0.75em -} - -.termlist-title::before { - content: "《"; -} - -.termlist-title::after { - content: "》"; -} - -.termlist-subscribe { - text-align: center; - font-size: .9rem -} - -.termlist-subscribe a { - color: var(--secondary-text-color) -} - -.termlist-subscribe a:hover { - text-decoration: none -} - -/* category page */ - -section.taxonomy { - margin: 2rem 0; -} - -.taxonomy-tags { - display: flex; - flex-wrap: wrap; - gap: .5rem -} - -.taxonomy-tags-item { - display: inline-flex; - align-items: center; - gap: .3rem; - - padding: .25rem .75rem; - background-color: var(--block-background-color); - transition: color, background .3s; - border-radius: .3rem; -} - -.taxonomy-tags-item:hover { - text-decoration: none; - background-color: var(--text-color); - color: var(--block-background-color); -} - -.taxonomy-tags-item .tag-count { - font-size: .8rem; - color: var(--secondary-text-color); -} - -/* gallery */ - -.gallery-img { - text-align: center; -} - -.gallery-img span { - text-align: center; -} - -.gallery-img-desc { - font-size: 0.8em; - font-weight: 800; -} - -@media screen and (max-width: 600px) { - .posts-line { - font-size: 16px; - } - - .markdown-body { - font-size: 16px; - } - .post-title { - font-size: 2rem; - } - .post-content p { - letter-spacing: 0.05em; - } - .post-content .post-gallery img { - width: 100%; - } -} - -@media screen and (max-width: 48em) { - .posts-category { - display: none; - } -} - -/* callouts */ - -.callout { - background-color: var(--block-background-color); - border-radius: .25rem; - padding: 1rem 1.25rem; - line-height: 1.75; - - display: flex; - gap: .75rem; - - margin: 0.5rem 0; -} - -.callout .callout-content p { - margin: 0; -} - -/* quote shortcode */ - -.quote-card { - --card-bg: rgba(255,255,255,0.25); - --card-bg-lighter: rgba(255,255,255,0.1); - --card-noise: rgba(255,255,255,0.04); - - font-size: 1.5rem; - font-style: italic; - text-align: center; - margin: 5rem 3rem; - padding: 1rem; - border: 1px solid var(--border-color); - border-radius: 1rem; - box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a; - transform: rotate(3deg); - background-color: rgba(255,255,255,0.35); - - background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)), - repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px, - repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px; - background-blend-mode: normal, difference; -} - -@media screen and (max-width: 768px) { - .quote-card { - font-size: 1.2rem; - margin: 3rem 1rem; - } -} - -/* blog links */ - -div.blog-links { - display: flex; - flex-wrap: wrap; - gap: 1rem; -} - -a.blog-link { - position: relative; - background-color: var(--block-background-color); - text-decoration: none; - color: var(--text-color); - padding: 1rem 2rem; - padding-right: 4rem; - border-radius: 1rem; - width: calc(50% - 2rem); - box-sizing: border-box; - overflow: hidden -} - -@media screen and (max-width: 768px) { - a.blog-link { - font-size: 1.2rem; - padding: 0.5rem 1rem; - padding-right: 2rem; - width: 100%; - } -} - -a.blog-link h4, -a.blog-link p { - margin: 0; - font-size: 1.2rem; -} - -a.blog-link p { - line-height: 1.5; -} - -a.blog-link .blog-link-content { - z-index: 10; -} - -a.blog-link-image { - z-index: 0; -} - -a.blog-link img { - --size: 5rem; - display: block; - position: absolute; - right: -1rem; - bottom: -1rem; - width: var(--size); - height: var(--size); - border-radius: 100%; - z-index: 0; -} - -/* book showcase shortcode */ - -.book-showcase { - display: flex; - gap: 2rem; - line-height: 1.5; - margin: 2rem 0 -} - -.book-showcase .book-cover { - width: 25%; - flex-shrink: 0; -} - -.book-description-header .book-title { - margin: 0 -} - -.book-description-header p { - font-size: 1rem; - margin: 0.1rem -} - -/* inline-image shortcode */ - -.inline-image { - display: flex; - overflow-x: auto; - scroll-behavior: smooth; - gap: 1rem; - white-space: nowrap; -} - -.inline-image > figure { - display: inline-block; - margin: 0; - flex-shrink: 0; -} - -.inline-image > figure img { - height: 20rem; - object-fit: cover; - display: block; -} - -/* sidenote shortcode */ - -@media screen and (max-width: 1199px) { - .sidenote { - border: 1px solid var(--block-background-color); - padding: .75rem 1rem; - border-radius: 0.5rem; - line-height: 1.5; - } - .sidenote-title { - font-size: 1rem; - text-align: right; - font-style: italic - } -} - -@media screen and (min-width: 1200px) { - .sidenote { - position: absolute; - left: calc(50% + var(--page-width) / 2); - margin-left: 2rem; - max-width: 20rem - } -} - -.sidenote-title { - margin: 0.5rem 0 -} - -.sidenote-content { - font-size: 1rem -} - -/* toc */ - -#toc-container { - position: absolute; - bottom: 0; - right: calc(50% + var(--page-width) / 2); - left: auto; - height: 100%; - top: 12rem; -} - -@media screen and (max-width: 1200px) { - #toc-container { - display: none - } -} - -#toc { - /* position */ - position: sticky; - top: 3rem; - /* styling */ - font-size: 1rem; - padding: 0 2rem; -} - -@media screen and (max-width: 1700px) { - #toc { - font-size: 0.9rem; - } -} - -@media screen and (max-width: 1500px) { - #toc { - font-size: 0.825rem; - } -} - -#toc ul, #toc ol { - margin-block-start: 0; - margin-block-end: 0; - padding-inline-start: 1rem; -} - -#toc li { - list-style: none; -} - -#toc li > a { - color: var(--secondary-text-color); - text-decoration: none; - transition: color .3s; - display: inline-flex; - align-items: center; - gap: .5rem; -} - -#toc li > a::before { - content: ''; - display: inline-block; - width: 1rem; - height: .3rem; - background-color: var(--block-background-color); - border-radius: .2rem; - transition: background .3s; -} - -#toc li a:hover, -#toc li.is-active-li > a { - color: var(--text-color); -} - -#toc li.is-active-li > a::before { - background-color: var(--secondary-text-color); -} - -#toc .toc-list { - overflow: hidden; - position: relative; -} - -#toc .toc-list .toc-list { - max-height: 25rem; - overflow-y: auto -} - -#toc .toc-list.is-collapsed { - max-height: 0 -} - -/* transition swup */ - -html.is-changing .transition-fade { - transition: opacity 0.25s; - opacity: 1; -} -html.is-animating .transition-fade { - opacity: 0; -} - -/* site footer */ - -#footer { - width: var(--page-width); - margin: 2rem auto; - font-family: var(--mono-font-family); -} - -@media screen and (min-width: 768px) { - #footer { - display: flex; - justify-content: space-between; - } -} - -#footer-links { - display: flex; - flex-direction: column; - align-items: flex-end; -} - -#footer-links ul.footer-navigation { - list-style: none; - display: flex; - gap: 0.2rem; - justify-content: flex-end; - padding-inline-start: 0; -} - -#footer-links ul.footer-navigation li { - display: inline-flex; - align-items: center; -} - -#footer-links ul.footer-navigation li img { - height: 1rem; - width: auto -} - -#footer-copyright .word-count { - font-family: var(--serif-font-family); - font-size: .9rem; - color: var(--secondary-text-color) -} diff --git a/assets/css/index.scss b/assets/css/index.scss new file mode 100644 index 00000000..fc9f6f4e --- /dev/null +++ b/assets/css/index.scss @@ -0,0 +1,9 @@ +@import 'components/variables'; +@import 'components/reset'; +@import 'components/markdown'; +@import 'components/header'; +@import 'components/pages'; +@import 'components/content'; +@import 'components/shortcodes'; +@import 'components/footer'; +@import 'components/animation'; diff --git a/layouts/index.html b/layouts/index.html index 8ded46d5..eddfebb9 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -8,7 +8,7 @@ {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}}
-

{{ .Key }}

+

{{ .Key }}

{{ range .Pages.GroupByDate "01" }}

{{ .Key }} 月

diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html index b2193666..c3fc5aaf 100644 --- a/layouts/partials/head/css.html +++ b/layouts/partials/head/css.html @@ -1,8 +1,8 @@ -{{ with resources.Get "css/index.css" | minify }} +{{ with resources.Get "css/flexbox.css" | minify }} {{ end }} -{{ with resources.Get "css/flexboxgrid-6.3.1.min.css" | minify }} +{{ with resources.Get "css/index.scss" | css.Sass | minify }} {{ end }} -- cgit v1.2.3