From 71612a8cf1a8b4bee4a5e65adf2f3b2c7af54222 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 21 Nov 2024 02:21:34 +0800 Subject: [PATCH] perf: modular sass architecture - Modularized the Sass architecture to enhance code maintainability and reduce the output file size - Replaced deprecated `@import` with `@use` / `@forward` --- .gitignore | 2 +- .stylelintrc.json | 1 + _includes/head.html | 2 +- _posts/2019-08-09-getting-started.md | 2 - _sass/abstracts/_breakpoints.scss | 73 + _sass/abstracts/_index.scss | 4 + _sass/abstracts/_mixins.scss | 80 + .../_placeholders.scss} | 83 +- .../_variables.scss} | 4 - _sass/addon/commons.scss | 1526 ----------------- _sass/base/_base.scss | 476 +++++ _sass/base/_index.scss | 4 + _sass/base/_reset.scss | 41 + .../{addon/syntax.scss => base/_syntax.scss} | 131 +- _sass/base/_typography.scss | 266 +++ _sass/colors/syntax-dark.scss | 164 -- _sass/colors/syntax-light.scss | 210 --- _sass/colors/typography-light.scss | 112 -- _sass/components/_buttons.scss | 51 + _sass/components/_index.scss | 2 + _sass/components/_popups.scss | 172 ++ _sass/layout/_footer.scss | 36 + _sass/layout/_index.scss | 4 + _sass/layout/_panel.scss | 66 + _sass/layout/_sidebar.scss | 258 +++ _sass/layout/_topbar.scss | 86 + _sass/main.bundle.scss | 4 +- _sass/main.scss | 17 +- .../archives.scss => pages/_archives.scss} | 23 +- .../_categories.scss} | 11 +- .../_category-tag.scss} | 29 +- _sass/{layout/home.scss => pages/_home.scss} | 119 +- _sass/pages/_index.scss | 7 + _sass/{layout/post.scss => pages/_post.scss} | 219 +-- _sass/pages/_search.scss | 184 ++ _sass/{layout/tags.scss => pages/_tags.scss} | 10 +- .../_dark.scss} | 168 +- _sass/themes/_light.scss | 313 ++++ _sass/variables-hook.scss | 3 - assets/css/jekyll-theme-chirpy.scss | 2 +- package.json | 2 +- purgecss.config.js | 23 - purgecss.js | 30 + tools/init.sh | 3 +- tools/release.sh | 2 +- 45 files changed, 2523 insertions(+), 2502 deletions(-) create mode 100644 _sass/abstracts/_breakpoints.scss create mode 100644 _sass/abstracts/_index.scss create mode 100644 _sass/abstracts/_mixins.scss rename _sass/{addon/module.scss => abstracts/_placeholders.scss} (59%) rename _sass/{addon/variables.scss => abstracts/_variables.scss} (96%) delete mode 100644 _sass/addon/commons.scss create mode 100644 _sass/base/_base.scss create mode 100644 _sass/base/_index.scss create mode 100644 _sass/base/_reset.scss rename _sass/{addon/syntax.scss => base/_syntax.scss} (74%) create mode 100644 _sass/base/_typography.scss delete mode 100644 _sass/colors/syntax-dark.scss delete mode 100644 _sass/colors/syntax-light.scss delete mode 100644 _sass/colors/typography-light.scss create mode 100644 _sass/components/_buttons.scss create mode 100644 _sass/components/_index.scss create mode 100644 _sass/components/_popups.scss create mode 100644 _sass/layout/_footer.scss create mode 100644 _sass/layout/_index.scss create mode 100644 _sass/layout/_panel.scss create mode 100644 _sass/layout/_sidebar.scss create mode 100644 _sass/layout/_topbar.scss rename _sass/{layout/archives.scss => pages/_archives.scss} (95%) rename _sass/{layout/categories.scss => pages/_categories.scss} (87%) rename _sass/{layout/category-tag.scss => pages/_category-tag.scss} (79%) rename _sass/{layout/home.scss => pages/_home.scss} (73%) create mode 100644 _sass/pages/_index.scss rename _sass/{layout/post.scss => pages/_post.scss} (67%) create mode 100644 _sass/pages/_search.scss rename _sass/{layout/tags.scss => pages/_tags.scss} (71%) rename _sass/{colors/typography-dark.scss => themes/_dark.scss} (62%) create mode 100644 _sass/themes/_light.scss delete mode 100644 _sass/variables-hook.scss delete mode 100644 purgecss.config.js create mode 100644 purgecss.js diff --git a/.gitignore b/.gitignore index 0082d90041b..7dd7cefd964 100644 --- a/.gitignore +++ b/.gitignore @@ -23,5 +23,5 @@ package-lock.json !.vscode/tasks.json # Misc -_sass/dist +_sass/vendors assets/js/dist diff --git a/.stylelintrc.json b/.stylelintrc.json index 57dd7d6e7db..b890290957c 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,4 +1,5 @@ { + "ignoreFiles": ["_sass/vendors/**"], "extends": "stylelint-config-standard-scss", "rules": { "no-descending-specificity": null, diff --git a/_includes/head.html b/_includes/head.html index 310f52eb995..011187c960d 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -70,7 +70,7 @@ {% unless jekyll.environment == 'production' %} - + {% endunless %} diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index 3b41a3cabe4..2681126947c 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -93,8 +93,6 @@ Social contact options are displayed at the bottom of the sidebar. You can enabl To customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} file to the same path in your Jekyll site, and add your custom styles at the end of the file. -Starting with version `6.2.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main SASS file `_sass/main.scss`{: .filepath} to the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign your new values there. - ### Customizing Static Assets Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in `_data/origin/cors.yml`{: .filepath }. You can replace some of them based on the network conditions in the region where your website is published. diff --git a/_sass/abstracts/_breakpoints.scss b/_sass/abstracts/_breakpoints.scss new file mode 100644 index 00000000000..e40cefeee36 --- /dev/null +++ b/_sass/abstracts/_breakpoints.scss @@ -0,0 +1,73 @@ +@use 'sass:map'; + +$-breakpoints: ( + // 1 column + sm: 576px, + md: 768px, + // 2 columns + lg: 850px, + // 3 columns + xl: 1200px, + xxl: 1400px, + xxxl: 1650px +); + +@function get($breakpoint) { + @return map.get($-breakpoints, $breakpoint); +} + +/* Less than the given width */ +@mixin lt($width) { + @media all and (max-width: calc(#{$width} - 1px)) { + @content; + } +} + +/* Less than or equal to the given width */ +@mixin lte($width) { + @media all and (max-width: $width) { + @content; + } +} + +@mixin sm { + @media all and (min-width: get(sm)) { + @content; + } +} + +@mixin md { + @media all and (min-width: get(md)) { + @content; + } +} + +@mixin lg { + @media all and (min-width: get(lg)) { + @content; + } +} + +@mixin xl { + @media all and (min-width: get(xl)) { + @content; + } +} + +@mixin xxl { + @media all and (min-width: get(xxl)) { + @content; + } +} + +@mixin xxxl { + @media all and (min-width: get(xxxl)) { + @content; + } +} + +@mixin between($min, $max) { + @media all and (min-width: $min) and (max-width: $max) { + @content; + } +} diff --git a/_sass/abstracts/_index.scss b/_sass/abstracts/_index.scss new file mode 100644 index 00000000000..6c9e21cf46b --- /dev/null +++ b/_sass/abstracts/_index.scss @@ -0,0 +1,4 @@ +@forward 'variables'; +@forward 'mixins'; +@forward 'placeholders'; +@forward 'breakpoints'; diff --git a/_sass/abstracts/_mixins.scss b/_sass/abstracts/_mixins.scss new file mode 100644 index 00000000000..c5eeee3cafc --- /dev/null +++ b/_sass/abstracts/_mixins.scss @@ -0,0 +1,80 @@ +@mixin text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@mixin mt-mb($value) { + margin-top: $value; + margin-bottom: $value; +} + +@mixin ml-mr($value) { + margin-left: $value; + margin-right: $value; +} + +@mixin pt-pb($val) { + padding-top: $val; + padding-bottom: $val; +} + +@mixin pl-pr($val, $important: false) { + @if $important { + padding-left: $val !important; + padding-right: $val !important; + } @else { + padding-left: $val; + padding-right: $val; + } +} + +@mixin placeholder { + color: var(--text-muted-color) !important; +} + +@mixin placeholder-focus { + opacity: 0.6; +} + +@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) { + color: $color; + font-size: $font-size; + font-weight: $font-weight; +} + +@mixin align-center { + position: relative; + left: 50%; + transform: translateX(-50%); +} + +@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) { + &.prompt-#{$type} { + background-color: var(--prompt-#{$type}-bg); + + &::before { + content: $fa-content; + color: var(--prompt-#{$type}-icon-color); + font: var(--fa-font-#{$fa-style}); + + @if $rotate != 0 { + transform: rotate(#{$rotate}deg); + } + } + } +} + +@mixin slide($append: null) { + $basic: transform 0.4s ease; + + @if $append { + transition: $basic, $append; + } @else { + transition: $basic; + } +} + +@mixin max-w-100 { + max-width: 100%; +} diff --git a/_sass/addon/module.scss b/_sass/abstracts/_placeholders.scss similarity index 59% rename from _sass/addon/module.scss rename to _sass/abstracts/_placeholders.scss index 1dfb735fd01..e4c1bb06d3a 100644 --- a/_sass/addon/module.scss +++ b/_sass/abstracts/_placeholders.scss @@ -1,13 +1,10 @@ -/* -* Mainly scss modules, only imported to `assets/css/main.scss` -*/ - -/* ---------- scss placeholder --------- */ +@use 'variables' as v; +@use 'mixins' as mx; %heading { color: var(--heading-color); font-weight: 400; - font-family: $font-family-heading; + font-family: v.$font-family-heading; scroll-margin-top: 3.5rem; } @@ -82,7 +79,7 @@ } %rounded { - border-radius: $radius-lg; + border-radius: v.$radius-lg; } %img-caption { @@ -112,14 +109,8 @@ -webkit-box-orient: vertical; } -@mixin text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - %text-ellipsis { - @include text-ellipsis; + @include mx.text-ellipsis; } %text-highlight { @@ -151,65 +142,15 @@ } } -/* ---------- scss mixin --------- */ - -@mixin mt-mb($value) { - margin-top: $value; - margin-bottom: $value; +%code-snippet-bg { + background-color: var(--highlight-bg-color); } -@mixin ml-mr($value) { - margin-left: $value; - margin-right: $value; +%code-snippet-padding { + padding-left: 1rem; + padding-right: 1.5rem; } -@mixin pt-pb($val) { - padding-top: $val; - padding-bottom: $val; -} - -@mixin pl-pr($val, $important: false) { - @if $important { - padding-left: $val !important; - padding-right: $val !important; - } @else { - padding-left: $val; - padding-right: $val; - } -} - -@mixin placeholder { - color: var(--text-muted-color) !important; -} - -@mixin placeholder-focus { - opacity: 0.6; -} - -@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) { - color: $color; - font-size: $font-size; - font-weight: $font-weight; -} - -@mixin align-center { - position: relative; - left: 50%; - transform: translateX(-50%); -} - -@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) { - &.prompt-#{$type} { - background-color: var(--prompt-#{$type}-bg); - - &::before { - content: $fa-content; - color: var(--prompt-#{$type}-icon-color); - font: var(--fa-font-#{$fa-style}); - - @if $rotate != 0 { - transform: rotate(#{$rotate}deg); - } - } - } +%max-w-100 { + max-width: 100%; } diff --git a/_sass/addon/variables.scss b/_sass/abstracts/_variables.scss similarity index 96% rename from _sass/addon/variables.scss rename to _sass/abstracts/_variables.scss index 1d51cb14ee6..0194e40baa3 100644 --- a/_sass/addon/variables.scss +++ b/_sass/abstracts/_variables.scss @@ -1,7 +1,3 @@ -/* - * The SCSS variables - */ - /* sidebar */ $sidebar-width: 260px !default; /* the basic width */ diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss deleted file mode 100644 index 5e8aceaa262..00000000000 --- a/_sass/addon/commons.scss +++ /dev/null @@ -1,1526 +0,0 @@ -/* The common styles */ - -html { - font-size: 16px; - - @media (prefers-color-scheme: light) { - &:not([data-mode]), - &[data-mode='light'] { - @include light-scheme; - } - - &[data-mode='dark'] { - @include dark-scheme; - } - } - - @media (prefers-color-scheme: dark) { - &:not([data-mode]), - &[data-mode='dark'] { - @include dark-scheme; - } - - &[data-mode='light'] { - @include light-scheme; - } - } -} - -body { - background: var(--main-bg); - padding: env(safe-area-inset-top) env(safe-area-inset-right) - env(safe-area-inset-bottom) env(safe-area-inset-left); - color: var(--text-color); - -webkit-font-smoothing: antialiased; - font-family: $font-family-base; -} - -/* --- Typography --- */ - -@for $i from 1 through 5 { - h#{$i} { - @extend %heading; - - @if $i > 1 { - @extend %anchor; - } - - @if $i < 5 { - $size-factor: 0.25rem; - - @if $i > 1 { - $size-factor: 0.18rem; - - main & { - @if $i == 2 { - margin: 2.5rem 0 1.25rem; - } @else { - margin: 2rem 0 1rem; - } - } - } - - & { - font-size: 1rem + (5 - $i) * $size-factor; - } - } @else { - font-size: 1.05rem; - } - } -} - -a { - @extend %link-color; - - text-decoration: none; -} - -img { - max-width: 100%; - height: auto; - transition: all 0.35s ease-in-out; - - .blur & { - $blur: 20px; - - -webkit-filter: blur($blur); - filter: blur($blur); - } -} - -blockquote { - border-left: 0.125rem solid var(--blockquote-border-color); - padding-left: 1rem; - color: var(--blockquote-text-color); - margin-top: 0.5rem; - - > p:last-child { - margin-bottom: 0; - } - - &[class^='prompt-'] { - border-left: 0; - position: relative; - padding: 1rem 1rem 1rem 3rem; - color: var(--prompt-text-color); - - @extend %rounded; - - &::before { - text-align: center; - width: 3rem; - position: absolute; - left: 0.25rem; - margin-top: 0.4rem; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - } - } - - @include prompt('tip', '\f0eb', $fa-style: 'regular'); - @include prompt('info', '\f06a', $rotate: 180); - @include prompt('warning', '\f06a'); - @include prompt('danger', '\f071'); -} - -kbd { - font-family: Lato, sans-serif; - display: inline-block; - vertical-align: middle; - line-height: 1.3rem; - min-width: 1.75rem; - text-align: center; - margin: 0 0.3rem; - padding-top: 0.1rem; - color: var(--kbd-text-color); - background-color: var(--kbd-bg-color); - border-radius: $radius-sm; - border: solid 1px var(--kbd-wrap-color); - box-shadow: inset 0 -2px 0 var(--kbd-wrap-color); -} - -hr { - border-color: var(--main-border-color); - opacity: 1; -} - -footer { - background-color: var(--main-bg); - height: $footer-height; - border-top: 1px solid var(--main-border-color); - - @extend %text-xs; - - a { - @extend %text-highlight; - - &:hover { - @extend %link-hover; - } - } - - em { - @extend %text-highlight; - } - - p { - text-align: center; - margin-bottom: 0; - } -} - -/* fontawesome icons */ -i { - &.far, - &.fas { - @extend %no-cursor; - } -} - -/* --- Panels --- */ - -.access { - top: 2rem; - transition: top 0.2s ease-in-out; - margin-top: 3rem; - margin-bottom: 4rem; - - &:only-child { - position: -webkit-sticky; - position: sticky; - } - - > section { - padding-left: 1rem; - border-left: 1px solid var(--main-border-color); - - &:not(:last-child) { - margin-bottom: 4rem; - } - } - - .content { - font-size: 0.9rem; - } -} - -#panel-wrapper { - /* the headings */ - .panel-heading { - font-family: inherit; - line-height: inherit; - - @include label(inherit); - } - - .post-tag { - line-height: 1.05rem; - font-size: 0.85rem; - border-radius: 0.8rem; - padding: 0.3rem 0.5rem; - margin: 0 0.35rem 0.5rem 0; - - &:hover { - transition: all 0.3s ease-in; - } - } -} - -#access-lastmod { - a { - color: inherit; - - &:hover { - @extend %link-hover; - } - - @extend %no-bottom-border; - } -} - -.footnotes > ol { - padding-left: 2rem; - margin-top: 0.5rem; - - > li { - &:not(:last-child) { - margin-bottom: 0.3rem; - } - - @extend %sup-fn-target; - - > p { - margin-left: 0.25em; - - @include mt-mb(0); - } - } -} - -.footnote { - @at-root a#{&} { - @include ml-mr(1px); - @include pl-pr(2px); - - border-bottom-style: none !important; - } -} - -sup { - @extend %sup-fn-target; -} - -.reversefootnote { - @at-root a#{&} { - font-size: 0.6rem; - line-height: 1; - position: relative; - bottom: 0.25em; - margin-left: 0.25em; - border-bottom-style: none !important; - } -} - -/* --- Begin of Markdown table style --- */ - -/* it will be created by Liquid */ -.table-wrapper { - overflow-x: auto; - margin-bottom: 1.5rem; - - > table { - min-width: 100%; - overflow-x: auto; - border-spacing: 0; - - thead { - border-bottom: solid 2px rgba(210, 215, 217, 0.75); - - th { - @extend %table-cell; - } - } - - tbody { - tr { - border-bottom: 1px solid var(--tb-border-color); - - &:nth-child(2n) { - background-color: var(--tb-even-bg); - } - - &:nth-child(2n + 1) { - background-color: var(--tb-odd-bg); - } - - td { - @extend %table-cell; - } - } - } /* tbody */ - } /* table */ -} - -/* --- post --- */ - -.preview-img { - aspect-ratio: 40 / 21; - width: 100%; - height: 100%; - overflow: hidden; - - @extend %rounded; - - &:not(.no-bg) { - background: var(--img-bg); - } - - img { - height: 100%; - -o-object-fit: cover; - object-fit: cover; - - @extend %rounded; - - @at-root #post-list & { - width: 100%; - } - } -} - -.post-preview { - @extend %rounded; - - border: 0; - background: var(--card-bg); - box-shadow: var(--card-shadow); - - &::before { - @extend %rounded; - - content: ''; - width: 100%; - height: 100%; - position: absolute; - background-color: var(--card-hovor-bg); - opacity: 0; - transition: opacity 0.35s ease-in-out; - } - - &:hover { - &::before { - opacity: 0.3; - } - } -} - -main { - line-height: 1.75; - - h1 { - margin-top: 2rem; - } - - p { - > a.popup { - &:not(.normal):not(.left):not(.right) { - @include align-center; - } - } - } - - .categories, - #tags, - #archives { - a:not(:hover) { - @extend %no-bottom-border; - } - } -} - -.post-meta { - @extend %text-sm; - - a { - &:not([class]):hover { - @extend %link-hover; - } - } - - em { - @extend %normal-font-style; - } -} - -.content { - font-size: 1.08rem; - margin-top: 2rem; - overflow-wrap: break-word; - - a { - &.popup { - @extend %no-cursor; - @extend %img-caption; - @include mt-mb(0.5rem); - - cursor: zoom-in; - } - - &:not(.img-link) { - @extend %link-underline; - - &:hover { - @extend %link-hover; - } - } - } - - ol, - ul { - &:not([class]), - &.task-list { - -webkit-padding-start: 1.75rem; - padding-inline-start: 1.75rem; - - li { - margin: 0.25rem 0; - padding-left: 0.25rem; - } - - ol, - ul { - -webkit-padding-start: 1.25rem; - padding-inline-start: 1.25rem; - margin: 0.5rem 0; - } - } - } - - ul.task-list { - -webkit-padding-start: 1.25rem; - padding-inline-start: 1.25rem; - - li { - list-style-type: none; - padding-left: 0; - - /* checkbox icon */ - > i { - width: 2rem; - margin-left: -1.25rem; - color: var(--checkbox-color); - - &.checked { - color: var(--checkbox-checked-color); - } - } - - ul { - -webkit-padding-start: 1.75rem; - padding-inline-start: 1.75rem; - } - } - - input[type='checkbox'] { - margin: 0 0.5rem 0.2rem -1.3rem; - vertical-align: middle; - } - } /* ul */ - - dl > dd { - margin-left: 1rem; - } - - ::marker { - color: var(--text-muted-color); - } -} /* .content */ - -.tag:hover { - @extend %tag-hover; -} - -.post-tag { - display: inline-block; - min-width: 2rem; - text-align: center; - border-radius: 0.5rem; - border: 1px solid var(--btn-border-color); - padding: 0 0.4rem; - color: var(--text-muted-color); - line-height: 1.3rem; - - &:not(:last-child) { - margin-right: 0.2rem; - } -} - -.rounded-10 { - border-radius: 10px !important; -} - -.img-link { - color: transparent; - display: inline-flex; -} - -.shimmer { - overflow: hidden; - position: relative; - background: var(--img-bg); - - &::before { - content: ''; - position: absolute; - background: var(--shimmer-bg); - height: 100%; - width: 100%; - -webkit-animation: shimmer 1.3s infinite; - animation: shimmer 1.3s infinite; - } - - @-webkit-keyframes shimmer { - 0% { - transform: translateX(-100%); - } - - 100% { - transform: translateX(100%); - } - } - - @keyframes shimmer { - 0% { - transform: translateX(-100%); - } - - 100% { - transform: translateX(100%); - } - } -} - -.embed-video { - width: 100%; - height: 100%; - margin-bottom: 1rem; - aspect-ratio: 16 / 9; - - @extend %rounded; - - &.twitch { - aspect-ratio: 310 / 189; - } - - &.file { - display: block; - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - margin: auto; - margin-bottom: 0; - } - - @extend %img-caption; -} - -.embed-audio { - width: 100%; - display: block; - - @extend %img-caption; -} - -/* --- buttons --- */ -.btn-lang { - border: 1px solid !important; - padding: 1px 3px; - border-radius: 3px; - color: var(--link-color); - - &:focus { - box-shadow: none; - } -} - -/* --- Effects classes --- */ - -.flex-grow-1 { - flex-grow: 1 !important; -} - -.btn-box-shadow { - box-shadow: var(--card-shadow); -} - -/* overwrite bootstrap muted */ -.text-muted { - color: var(--text-muted-color) !important; -} - -/* Overwrite bootstrap tooltip */ -.tooltip-inner { - font-size: 0.7rem; - max-width: 220px; - text-align: left; -} - -/* Overwrite bootstrap outline button */ -.btn.btn-outline-primary { - &:not(.disabled):hover { - border-color: #007bff !important; - } -} - -.disabled { - color: rgb(206, 196, 196); - pointer-events: auto; - cursor: not-allowed; -} - -.hide-border-bottom { - border-bottom: none !important; -} - -.input-focus { - box-shadow: none; - border-color: var(--input-focus-border-color) !important; - background: center !important; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; -} - -.left { - float: left; - margin: 0.75rem 1rem 1rem 0; -} - -.right { - float: right; - margin: 0.75rem 0 1rem 1rem; -} - -/* --- Overriding --- */ - -/* mermaid */ -.mermaid { - text-align: center; -} - -/* MathJax */ -mjx-container { - overflow-y: hidden; - min-width: auto !important; -} - -/* --- sidebar layout --- */ - -$sidebar-display: 'sidebar-display'; -$btn-border-width: 3px; -$btn-mb: 0.5rem; - -#sidebar { - @include pl-pr(0); - - position: fixed; - top: 0; - left: 0; - height: 100%; - overflow-y: auto; - width: $sidebar-width; - background: var(--sidebar-bg); - border-right: 1px solid var(--sidebar-border-color); - - /* Hide scrollbar for IE, Edge and Firefox */ - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - - /* Hide scrollbar for Chrome, Safari and Opera */ - &::-webkit-scrollbar { - display: none; - } - - %sidebar-link-hover { - &:hover { - color: var(--sidebar-active-color); - } - } - - a { - @extend %sidebar-links; - } - - #avatar { - display: block; - width: 7rem; - height: 7rem; - overflow: hidden; - box-shadow: var(--avatar-border-color) 0 0 0 2px; - transform: translateZ(0); /* fixed the zoom in Safari */ - - img { - transition: transform 0.5s; - - &:hover { - transform: scale(1.2); - } - } - } - - .profile-wrapper { - @include mt-mb(2.5rem); - @extend %clickable-transition; - - padding-left: 2.5rem; - padding-right: 1.25rem; - width: 100%; - } - - .site-title { - @extend %clickable-transition; - @extend %sidebar-link-hover; - - font-family: inherit; - font-weight: 900; - font-size: 1.75rem; - line-height: 1.2; - letter-spacing: 0.25px; - margin-top: 1.25rem; - margin-bottom: 0.5rem; - width: fit-content; - color: var(--site-title-color); - } - - .site-subtitle { - font-size: 95%; - color: var(--site-subtitle-color); - margin-top: 0.25rem; - word-spacing: 1px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - ul { - margin-bottom: 2rem; - - li.nav-item { - opacity: 0.9; - width: 100%; - - @include pl-pr(1.5rem); - - a.nav-link { - @include pt-pb(0.6rem); - - display: flex; - align-items: center; - border-radius: 0.75rem; - font-weight: 600; - - &:hover { - background-color: var(--sidebar-hover-bg); - } - - i { - font-size: 95%; - opacity: 0.8; - margin-right: 1.5rem; - } - - span { - font-size: 90%; - letter-spacing: 0.2px; - } - } - - &.active { - .nav-link { - color: var(--sidebar-active-color); - background-color: var(--sidebar-hover-bg); - - span { - opacity: 1; - } - } - } - - &:not(:first-child) { - margin-top: 0.25rem; - } - } - } - - .sidebar-bottom { - padding-left: 2rem; - padding-right: 1rem; - margin-bottom: 1.5rem; - - $btn-size: 1.75rem; - - %button { - width: $btn-size; - height: $btn-size; - margin-bottom: $btn-mb; // multi line gap - border-radius: 50%; - color: var(--sidebar-btn-color); - background-color: var(--sidebar-btn-bg); - text-align: center; - display: flex; - align-items: center; - justify-content: center; - - &:not(:focus-visible) { - box-shadow: var(--sidebar-border-color) 0 0 0 1px; - } - - &:hover { - background-color: var(--sidebar-hover-bg); - } - } - - a { - @extend %button; - @extend %sidebar-link-hover; - @extend %clickable-transition; - - &:not(:last-child) { - margin-right: $sb-btn-gap; - } - } - - i { - line-height: $btn-size; - } - - #mode-toggle { - @extend %button; - @extend %sidebar-links; - @extend %sidebar-link-hover; - } - - .icon-border { - @extend %no-cursor; - @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2)); - - background-color: var(--sidebar-btn-color); - content: ''; - width: $btn-border-width; - height: $btn-border-width; - border-radius: 50%; - margin-bottom: $btn-mb; - } - } /* .sidebar-bottom */ -} /* #sidebar */ - -@media (hover: hover) { - #sidebar ul > li:last-child::after { - transition: top 0.5s ease; - } - - .nav-link { - transition: background-color 0.3s ease-in-out; - } - - .post-preview { - transition: background-color 0.35s ease-in-out; - } -} - -#search-result-wrapper { - display: none; - height: 100%; - width: 100%; - overflow: auto; - - .content { - margin-top: 2rem; - } -} - -/* --- top-bar --- */ - -#topbar-wrapper { - height: $topbar-height; - background-color: var(--topbar-bg); -} - -#topbar { - @extend %btn-color; - - #breadcrumb { - font-size: 1rem; - color: var(--text-muted-color); - padding-left: 0.5rem; - - a:hover { - @extend %link-hover; - } - - span { - &:not(:last-child) { - &::after { - content: '›'; - padding: 0 0.3rem; - } - } - } - } -} /* #topbar */ - -::-webkit-input-placeholder { - @include placeholder; -} - -::-moz-placeholder { - @include placeholder; -} - -:-ms-input-placeholder { - @include placeholder; -} - -::-ms-input-placeholder { - @include placeholder; -} - -::placeholder { - @include placeholder; -} - -:focus::-webkit-input-placeholder { - @include placeholder-focus; -} - -:focus::-moz-placeholder { - @include placeholder-focus; -} - -:focus:-ms-input-placeholder { - @include placeholder-focus; -} - -:focus::-ms-input-placeholder { - @include placeholder-focus; -} - -:focus::placeholder { - @include placeholder-focus; -} - -search { - display: flex; - width: 100%; - border-radius: 1rem; - border: 1px solid var(--search-border-color); - background: var(--main-bg); - padding: 0 0.5rem; - - i { - z-index: 2; - font-size: 0.9rem; - color: var(--search-icon-color); - } -} - -#sidebar-trigger, -#search-trigger { - display: none; -} - -/* 'Cancel' link */ -#search-cancel { - color: var(--link-color); - display: none; - white-space: nowrap; - - @extend %cursor-pointer; -} - -#search-input { - background: center; - border: 0; - border-radius: 0; - padding: 0.18rem 0.3rem; - color: var(--text-color); - height: auto; - - &:focus { - box-shadow: none; - } -} - -#search-hints { - padding: 0 1rem; - - h4 { - margin-bottom: 1.5rem; - } - - .post-tag { - display: inline-block; - line-height: 1rem; - font-size: 1rem; - background: var(--search-tag-bg); - border: none; - padding: 0.5rem; - margin: 0 1.25rem 1rem 0; - - &::before { - content: '#'; - color: var(--text-muted-color); - padding-right: 0.2rem; - } - - @extend %link-color; - } -} - -#search-results { - padding-bottom: 3rem; - - a { - font-size: 1.4rem; - line-height: 1.5rem; - - &:hover { - @extend %link-hover; - } - - @extend %link-color; - @extend %no-bottom-border; - @extend %heading; - } - - > article { - width: 100%; - - &:not(:last-child) { - margin-bottom: 1rem; - } - - /* icons */ - i { - color: #818182; - margin-right: 0.15rem; - font-size: 80%; - } - - > p { - @extend %text-ellipsis; - - white-space: break-spaces; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - } - } -} /* #search-results */ - -#topbar-title { - display: none; - font-size: 1.1rem; - font-weight: 600; - font-family: sans-serif; - color: var(--topbar-text-color); - text-align: center; - width: 70%; - word-break: keep-all; -} - -#mask { - inset: 0 0 0 0; -} - -/* --- basic wrappers --- */ - -#main-wrapper { - position: relative; - - @include pl-pr(0); - - > .container { - min-height: 100vh; - } -} - -#topbar-wrapper.row, -#main-wrapper > .container > .row, -#search-result-wrapper > .row { - @include ml-mr(0); -} - -#tail-wrapper { - > :not(script) { - margin-top: 3rem; - } -} - -/* --- button back-to-top --- */ - -#back-to-top { - visibility: hidden; - opacity: 0; - z-index: 1; - cursor: pointer; - position: fixed; - right: 1rem; - bottom: calc($footer-height-large - $back2top-size / 2); - background: var(--button-bg); - color: var(--btn-backtotop-color); - padding: 0; - width: $back2top-size; - height: $back2top-size; - border-radius: 50%; - border: 1px solid var(--btn-backtotop-border-color); - transition: opacity 0.5s ease-in-out, transform 0.2s ease-out; - - &:hover { - transform: translate3d(0, -5px, 0); - -webkit-transform: translate3d(0, -5px, 0); - } - - i { - line-height: $back2top-size; - position: relative; - bottom: 2px; - } - - &.show { - opacity: 1; - visibility: visible; - } -} - -#notification { - @-webkit-keyframes popup { - from { - opacity: 0; - bottom: 0; - } - } - - @keyframes popup { - from { - opacity: 0; - bottom: 0; - } - } - - .toast-header { - background: none; - border-bottom: none; - color: inherit; - } - - .toast-body { - font-family: Lato, sans-serif; - line-height: 1.25rem; - - button { - font-size: 90%; - min-width: 4rem; - } - } - - &.toast { - &.show { - display: block; - min-width: 20rem; - border-radius: 0.5rem; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - background-color: rgba(255, 255, 255, 0.5); - color: #1b1b1eba; - position: fixed; - left: 50%; - bottom: 20%; - transform: translateX(-50%); - -webkit-animation: popup 0.8s; - animation: popup 0.8s; - } - } -} - -/* - Responsive Design: - - {sidebar, content, panel} >= 1200px screen width - {sidebar, content} >= 850px screen width - {content} <= 849px screen width - -*/ - -@media all and (max-width: 576px) { - main { - .content { - > blockquote[class^='prompt-'] { - @include ml-mr(-1rem); - - border-radius: 0; - max-width: none; - } - } - } - - #avatar { - width: 5rem; - height: 5rem; - } -} - -@media all and (max-width: 768px) { - %full-width { - max-width: 100%; - } - - #topbar { - @extend %full-width; - } - - #main-wrapper > .container { - @extend %full-width; - @include pl-pr(0); - } -} - -/* hide sidebar and panel */ -@media all and (max-width: 849px) { - @mixin slide($append: null) { - $basic: transform 0.4s ease; - - @if $append { - transition: $basic, $append; - } @else { - transition: $basic; - } - } - - footer { - @include slide; - - height: $footer-height-large; - padding: 1.5rem 0; - } - - [#{$sidebar-display}] { - #sidebar { - transform: translateX(0); - } - - #main-wrapper { - transform: translateX($sidebar-width); - } - - #back-to-top { - visibility: hidden; - } - } - - #sidebar { - @include slide; - - transform: translateX(-$sidebar-width); /* hide */ - -webkit-transform: translateX(-$sidebar-width); - } - - #main-wrapper { - @include slide; - } - - #topbar, - #main-wrapper > .container { - max-width: 100%; - } - - #search-result-wrapper { - width: 100%; - } - - #breadcrumb, - search { - display: none; - } - - #topbar-wrapper { - @include slide(top 0.2s ease); - - left: 0; - } - - main, - #panel-wrapper { - margin-top: 0; - } - - #topbar-title, - #sidebar-trigger, - #search-trigger { - display: block; - } - - #search-result-wrapper .content { - letter-spacing: 0; - } - - #tags { - justify-content: center !important; - } - - h1.dynamic-title { - display: none; - - ~ .content { - margin-top: 2.5rem; - } - } -} /* max-width: 849px */ - -/* Sidebar is visible */ -@media all and (min-width: 850px) { - /* Solved jumping scrollbar */ - html { - overflow-y: scroll; - } - - #main-wrapper { - margin-left: $sidebar-width; - } - - #sidebar { - .profile-wrapper { - margin-top: 3rem; - } - } - - #search-hints { - display: none; - } - - search { - max-width: $search-max-width; - } - - #search-result-wrapper { - max-width: $main-content-max-width; - justify-content: start !important; - } - - main { - h1 { - margin-top: 3rem; - } - } - - div.content .table-wrapper > table { - min-width: 70%; - } - - /* button 'back-to-Top' position */ - #back-to-top { - right: 5%; - bottom: calc($footer-height - $back2top-size / 2); - } - - #topbar-title { - text-align: left; - } -} - -/* Pad horizontal */ -@media all and (min-width: 992px) and (max-width: 1199px) { - #main-wrapper > .container .col-lg-11 { - flex: 0 0 96%; - max-width: 96%; - } -} - -/* Compact icons in sidebar & panel hidden */ -@media all and (min-width: 850px) and (max-width: 1199px) { - #search-results > div { - max-width: 700px; - } - - #breadcrumb { - width: 65%; - overflow: hidden; - text-overflow: ellipsis; - word-break: keep-all; - white-space: nowrap; - } -} - -/* panel hidden */ -@media all and (max-width: 1199px) { - #panel-wrapper { - display: none; - } - - #main-wrapper > .container > div.row { - justify-content: center !important; - } -} - -/* --- desktop mode, both sidebar and panel are visible --- */ - -@media all and (min-width: 1200px) { - search { - margin-right: 4rem; - } - - #search-input { - transition: all 0.3s ease-in-out; - } - - #search-results > article { - width: 45%; - - &:nth-child(odd) { - margin-right: 1.5rem; - } - - &:nth-child(even) { - margin-left: 1.5rem; - } - - &:last-child:nth-child(odd) { - position: relative; - right: 24.3%; - } - } - - .content { - font-size: 1.03rem; - } -} - -@media all and (min-width: 1400px) { - #back-to-top { - right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem); - } -} - -@media all and (min-width: 1650px) { - $icon-gap: 1rem; - - #main-wrapper { - margin-left: $sidebar-width-large; - } - - #topbar-wrapper { - left: $sidebar-width-large; - } - - search { - margin-right: calc( - $main-content-max-width / 4 - $search-max-width - 0.75rem - ); - } - - #main-wrapper > .container { - max-width: $main-content-max-width; - - @include pl-pr(1.75rem, true); - } - - main.col-12, - #tail-wrapper { - padding-right: 4.5rem !important; - } - - #back-to-top { - right: calc( - (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem - ); - } - - #sidebar { - width: $sidebar-width-large; - - .profile-wrapper { - margin-top: 3.5rem; - margin-bottom: 2.5rem; - padding-left: 3.5rem; - } - - ul { - li.nav-item { - @include pl-pr(2.75rem); - } - } - - .sidebar-bottom { - padding-left: 2.75rem; - margin-bottom: 1.75rem; - - a:not(:last-child) { - margin-right: $sb-btn-gap-lg; - } - - .icon-border { - @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2)); - } - } - } -} /* min-width: 1650px */ diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss new file mode 100644 index 00000000000..19f153bd657 --- /dev/null +++ b/_sass/base/_base.scss @@ -0,0 +1,476 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; +@use '../themes/light'; +@use '../themes/dark'; + +:root { + font-size: 16px; +} + +html { + @media (prefers-color-scheme: light) { + &:not([data-mode]), + &[data-mode='light'] { + @include light.styles; + } + + &[data-mode='dark'] { + @include dark.styles; + } + } + + @media (prefers-color-scheme: dark) { + &:not([data-mode]), + &[data-mode='dark'] { + @include dark.styles; + } + + &[data-mode='light'] { + @include light.styles; + } + } + + @include bp.lg { + overflow-y: scroll; + } +} + +body { + background: var(--main-bg); + padding: env(safe-area-inset-top) env(safe-area-inset-right) + env(safe-area-inset-bottom) env(safe-area-inset-left); + color: var(--text-color); + -webkit-font-smoothing: antialiased; + font-family: v.$font-family-base; +} + +h1.dynamic-title { + @include bp.lt(bp.get(lg)) { + display: none; + + ~ .content { + margin-top: 2.5rem; + } + } +} + +main { + &.col-12 { + @include bp.xxxl { + padding-right: 4.5rem !important; + } + } +} + +.preview-img { + aspect-ratio: 40 / 21; + width: 100%; + height: 100%; + overflow: hidden; + + @extend %rounded; + + &:not(.no-bg) { + background: var(--img-bg); + } + + img { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + + @extend %rounded; + + @at-root #post-list & { + width: 100%; + } + } +} + +.post-preview { + @extend %rounded; + + border: 0; + background: var(--card-bg); + box-shadow: var(--card-shadow); + + &::before { + @extend %rounded; + + content: ''; + width: 100%; + height: 100%; + position: absolute; + background-color: var(--card-hovor-bg); + opacity: 0; + transition: opacity 0.35s ease-in-out; + } + + &:hover { + &::before { + opacity: 0.3; + } + } +} + +.post-meta { + @extend %text-sm; + + a { + &:not([class]):hover { + @extend %link-hover; + } + } + + em { + @extend %normal-font-style; + } +} + +.content { + font-size: 1.08rem; + margin-top: 2rem; + overflow-wrap: break-word; + + @include bp.xl { + font-size: 1.03rem; + } + + a { + &.popup { + @extend %no-cursor; + @extend %img-caption; + @include mx.mt-mb(0.5rem); + + cursor: zoom-in; + } + + &:not(.img-link) { + @extend %link-underline; + + &:hover { + @extend %link-hover; + } + } + } + + ol, + ul { + &:not([class]), + &.task-list { + -webkit-padding-start: 1.75rem; + padding-inline-start: 1.75rem; + + li { + margin: 0.25rem 0; + padding-left: 0.25rem; + } + + ol, + ul { + -webkit-padding-start: 1.25rem; + padding-inline-start: 1.25rem; + margin: 0.5rem 0; + } + } + } + + ul.task-list { + -webkit-padding-start: 1.25rem; + padding-inline-start: 1.25rem; + + li { + list-style-type: none; + padding-left: 0; + + /* checkbox icon */ + > i { + width: 2rem; + margin-left: -1.25rem; + color: var(--checkbox-color); + + &.checked { + color: var(--checkbox-checked-color); + } + } + + ul { + -webkit-padding-start: 1.75rem; + padding-inline-start: 1.75rem; + } + } + + input[type='checkbox'] { + margin: 0 0.5rem 0.2rem -1.3rem; + vertical-align: middle; + } + } /* ul */ + + dl > dd { + margin-left: 1rem; + } + + ::marker { + color: var(--text-muted-color); + } + + .table-wrapper > table { + @include bp.lg { + min-width: 70%; + } + } +} /* .content */ + +.tag:hover { + @extend %tag-hover; +} + +.post-tag { + display: inline-block; + min-width: 2rem; + text-align: center; + border-radius: 0.5rem; + border: 1px solid var(--btn-border-color); + padding: 0 0.4rem; + color: var(--text-muted-color); + line-height: 1.3rem; + + &:not(:last-child) { + margin-right: 0.2rem; + } +} + +.rounded-10 { + border-radius: 10px !important; +} + +.img-link { + color: transparent; + display: inline-flex; +} + +.shimmer { + overflow: hidden; + position: relative; + background: var(--img-bg); + + &::before { + content: ''; + position: absolute; + background: var(--shimmer-bg); + height: 100%; + width: 100%; + -webkit-animation: shimmer 1.3s infinite; + animation: shimmer 1.3s infinite; + } + + @-webkit-keyframes shimmer { + 0% { + transform: translateX(-100%); + } + + 100% { + transform: translateX(100%); + } + } + + @keyframes shimmer { + 0% { + transform: translateX(-100%); + } + + 100% { + transform: translateX(100%); + } + } +} + +.embed-video { + width: 100%; + height: 100%; + margin-bottom: 1rem; + aspect-ratio: 16 / 9; + + @extend %rounded; + + &.twitch { + aspect-ratio: 310 / 189; + } + + &.file { + display: block; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; + margin: auto; + margin-bottom: 0; + } + + @extend %img-caption; +} + +.embed-audio { + width: 100%; + display: block; + + @extend %img-caption; +} + +/* --- Effects classes --- */ + +.flex-grow-1 { + flex-grow: 1 !important; +} + +.btn-box-shadow { + box-shadow: var(--card-shadow); +} + +/* overwrite bootstrap muted */ +.text-muted { + color: var(--text-muted-color) !important; +} + +/* Overwrite bootstrap tooltip */ +.tooltip-inner { + font-size: 0.7rem; + max-width: 220px; + text-align: left; +} + +/* Overwrite bootstrap outline button */ +.btn.btn-outline-primary { + &:not(.disabled):hover { + border-color: #007bff !important; + } +} + +.disabled { + color: rgb(206, 196, 196); + pointer-events: auto; + cursor: not-allowed; +} + +.hide-border-bottom { + border-bottom: none !important; +} + +.input-focus { + box-shadow: none; + border-color: var(--input-focus-border-color) !important; + background: center !important; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; +} + +.left { + float: left; + margin: 0.75rem 1rem 1rem 0; +} + +.right { + float: right; + margin: 0.75rem 0 1rem 1rem; +} + +/* --- Overriding --- */ + +/* mermaid */ +.mermaid { + text-align: center; +} + +/* MathJax */ +mjx-container { + overflow-y: hidden; + min-width: auto !important; +} + +@media (hover: hover) { + #sidebar ul > li:last-child::after { + transition: top 0.5s ease; + } + + .nav-link { + transition: background-color 0.3s ease-in-out; + } + + .post-preview { + transition: background-color 0.35s ease-in-out; + } +} + +#mask { + inset: 0 0 0 0; +} + +#main-wrapper { + position: relative; + + @include mx.pl-pr(0); + + @include bp.lt(bp.get(lg)) { + @include mx.slide; + } + + @include bp.lg { + margin-left: v.$sidebar-width; + } + + @include bp.xxxl { + margin-left: v.$sidebar-width-large; + } + + > .container { + min-height: 100vh; + + @include bp.lte(bp.get(md)) { + @include mx.max-w-100; + @include mx.pl-pr(0); + } + + @include bp.lt(bp.get(lg)) { + max-width: 100%; + } + + /* Pad horizontal */ + @include bp.between(992px, calc(#{bp.get(xl)} - 1px)) { + .col-lg-11 { + flex: 0 0 96%; + max-width: 96%; + } + } + + @include bp.lt(bp.get(xl)) { + > .row { + justify-content: center !important; + } + } + + @include bp.xxxl { + max-width: v.$main-content-max-width; + + @include mx.pl-pr(1.75rem, true); + } + } +} + +/* --- basic wrappers --- */ + +#topbar-wrapper.row, +#main-wrapper > .container > .row, +#search-result-wrapper > .row { + @include mx.ml-mr(0); +} + +#tail-wrapper { + @include bp.xxxl { + padding-right: 4.5rem !important; + } + + > :not(script) { + margin-top: 3rem; + } +} diff --git a/_sass/base/_index.scss b/_sass/base/_index.scss new file mode 100644 index 00000000000..611d28ff4ab --- /dev/null +++ b/_sass/base/_index.scss @@ -0,0 +1,4 @@ +@forward 'reset'; +@forward 'base'; +@forward 'typography'; +@forward 'syntax'; diff --git a/_sass/base/_reset.scss b/_sass/base/_reset.scss new file mode 100644 index 00000000000..1e5a6294662 --- /dev/null +++ b/_sass/base/_reset.scss @@ -0,0 +1,41 @@ +@use '../abstracts/mixins' as *; + +::-webkit-input-placeholder { + @include placeholder; +} + +::-moz-placeholder { + @include placeholder; +} + +:-ms-input-placeholder { + @include placeholder; +} + +::-ms-input-placeholder { + @include placeholder; +} + +::placeholder { + @include placeholder; +} + +:focus::-webkit-input-placeholder { + @include placeholder-focus; +} + +:focus::-moz-placeholder { + @include placeholder-focus; +} + +:focus:-ms-input-placeholder { + @include placeholder-focus; +} + +:focus::-ms-input-placeholder { + @include placeholder-focus; +} + +:focus::placeholder { + @include placeholder-focus; +} diff --git a/_sass/addon/syntax.scss b/_sass/base/_syntax.scss similarity index 74% rename from _sass/addon/syntax.scss rename to _sass/base/_syntax.scss index 6bd7b406336..69924fc693e 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/base/_syntax.scss @@ -1,44 +1,7 @@ -/* -* The syntax highlight. -*/ - -@import 'colors/syntax-light'; -@import 'colors/syntax-dark'; - -html { - @media (prefers-color-scheme: light) { - &:not([data-mode]), - &[data-mode='light'] { - @include light-syntax; - } - - &[data-mode='dark'] { - @include dark-syntax; - } - } - - @media (prefers-color-scheme: dark) { - &:not([data-mode]), - &[data-mode='dark'] { - @include dark-syntax; - } - - &[data-mode='light'] { - @include light-syntax; - } - } -} - -/* -- code snippets -- */ - -%code-snippet-bg { - background-color: var(--highlight-bg-color); -} - -%code-snippet-padding { - padding-left: 1rem; - padding-right: 1.5rem; -} +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; .highlighter-rouge { color: var(--highlighter-rouge-color); @@ -59,7 +22,7 @@ html { pre { margin-bottom: 0; - font-size: $code-font-size; + font-size: v.$code-font-size; line-height: 1.4rem; word-wrap: normal; /* Fixed Safari overflow-x */ } @@ -101,10 +64,10 @@ code { color: var(--code-color); &.highlighter-rouge { - font-size: $code-font-size; + font-size: v.$code-font-size; padding: 3px 5px; word-break: break-word; - border-radius: $radius-sm; + border-radius: v.$radius-sm; background-color: var(--inline-code-bg); } @@ -150,9 +113,42 @@ div[class^='language-'] { box-shadow: var(--language-border-color) 0 0 0 1px; .content > & { - @include ml-mr(-1rem); + @include mx.ml-mr(-1rem); border-radius: 0; + + @include bp.sm { + @include mx.ml-mr(0); + + border-radius: v.$radius-lg; + } + } + + .code-header { + @include bp.sm { + @include mx.ml-mr(0); + + $dot-margin: 1rem; + + &::before { + content: ''; + display: inline-block; + margin-left: $dot-margin; + width: v.$code-dot-size; + height: v.$code-dot-size; + border-radius: 50%; + background-color: var(--code-header-muted-color); + box-shadow: (v.$code-dot-size + v.$code-dot-gap) 0 0 + var(--code-header-muted-color), + (v.$code-dot-size + v.$code-dot-gap) * 2 0 0 + var(--code-header-muted-color); + } + + span { + // center the text of label + margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1); + } + } } .highlight { @@ -184,18 +180,18 @@ div { display: flex; justify-content: space-between; align-items: center; - height: $code-header-height; + height: v.$code-header-height; margin-left: 0.75rem; margin-right: 0.25rem; /* the label block */ span { - line-height: $code-header-height; + line-height: v.$code-header-height; /* label icon */ i { font-size: 1rem; - width: $code-icon-width; + width: v.$code-icon-width; color: var(--code-header-icon-color); &.small { @@ -223,8 +219,8 @@ div { @extend %rounded; border: 1px solid transparent; - height: $code-header-height; - width: $code-header-height; + height: v.$code-header-height; + width: v.$code-header-height; padding: 0; background-color: inherit; @@ -255,38 +251,3 @@ div { } } } - -@media all and (min-width: 576px) { - div[class^='language-'] { - .content > & { - @include ml-mr(0); - - border-radius: $radius-lg; - } - - .code-header { - @include ml-mr(0); - - $dot-margin: 1rem; - - &::before { - content: ''; - display: inline-block; - margin-left: $dot-margin; - width: $code-dot-size; - height: $code-dot-size; - border-radius: 50%; - background-color: var(--code-header-muted-color); - box-shadow: ($code-dot-size + $code-dot-gap) 0 0 - var(--code-header-muted-color), - ($code-dot-size + $code-dot-gap) * 2 0 0 - var(--code-header-muted-color); - } - - span { - // center the text of label - margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1); - } - } - } -} diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss new file mode 100644 index 00000000000..4cf39643687 --- /dev/null +++ b/_sass/base/_typography.scss @@ -0,0 +1,266 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; + +@for $i from 1 through 5 { + h#{$i} { + @extend %heading; + + @if $i > 1 { + @extend %anchor; + } + + @if $i < 5 { + $size-factor: 0.25rem; + + @if $i > 1 { + $size-factor: 0.18rem; + + main & { + @if $i == 2 { + margin: 2.5rem 0 1.25rem; + } @else { + margin: 2rem 0 1rem; + } + } + } + + & { + font-size: 1rem + (5 - $i) * $size-factor; + } + } @else { + font-size: 1.05rem; + } + } +} + +a { + @extend %link-color; + + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; + transition: all 0.35s ease-in-out; + + .blur & { + $blur: 20px; + + -webkit-filter: blur($blur); + filter: blur($blur); + } +} + +blockquote { + border-left: 0.125rem solid var(--blockquote-border-color); + padding-left: 1rem; + color: var(--blockquote-text-color); + margin-top: 0.5rem; + + > p:last-child { + margin-bottom: 0; + } + + &[class^='prompt-'] { + border-left: 0; + position: relative; + padding: 1rem 1rem 1rem 3rem; + color: var(--prompt-text-color); + + @extend %rounded; + + &::before { + text-align: center; + width: 3rem; + position: absolute; + left: 0.25rem; + margin-top: 0.4rem; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + } + } + + @include mx.prompt('tip', '\f0eb', $fa-style: 'regular'); + @include mx.prompt('info', '\f06a', $rotate: 180); + @include mx.prompt('warning', '\f06a'); + @include mx.prompt('danger', '\f071'); +} + +kbd { + font-family: Lato, sans-serif; + display: inline-block; + vertical-align: middle; + line-height: 1.3rem; + min-width: 1.75rem; + text-align: center; + margin: 0 0.3rem; + padding-top: 0.1rem; + color: var(--kbd-text-color); + background-color: var(--kbd-bg-color); + border-radius: v.$radius-sm; + border: solid 1px var(--kbd-wrap-color); + box-shadow: inset 0 -2px 0 var(--kbd-wrap-color); +} + +hr { + border-color: var(--main-border-color); + opacity: 1; +} + +footer { + background-color: var(--main-bg); + height: v.$footer-height; + border-top: 1px solid var(--main-border-color); + + @extend %text-xs; + + a { + @extend %text-highlight; + + &:hover { + @extend %link-hover; + } + } + + em { + @extend %text-highlight; + } + + p { + text-align: center; + margin-bottom: 0; + } +} + +/* fontawesome icons */ +i { + &.far, + &.fas { + @extend %no-cursor; + } +} + +sup { + @extend %sup-fn-target; +} + +main { + line-height: 1.75; + + h1 { + margin-top: 2rem; + + @include bp.lg { + margin-top: 3rem; + } + } + + p { + > a.popup { + &:not(.normal):not(.left):not(.right) { + @include mx.align-center; + } + } + } + + .categories, + #tags, + #archives { + a:not(:hover) { + @extend %no-bottom-border; + } + } + + @include bp.lte(bp.get(sm)) { + .content { + > blockquote[class^='prompt-'] { + @include mx.ml-mr(-1rem); + + border-radius: 0; + max-width: none; + } + } + } +} + +.footnotes > ol { + padding-left: 2rem; + margin-top: 0.5rem; + + > li { + &:not(:last-child) { + margin-bottom: 0.3rem; + } + + @extend %sup-fn-target; + + > p { + margin-left: 0.25em; + + @include mx.mt-mb(0); + } + } +} + +.footnote { + @at-root a#{&} { + @include mx.ml-mr(1px); + @include mx.pl-pr(2px); + + border-bottom-style: none !important; + } +} + +.reversefootnote { + @at-root a#{&} { + font-size: 0.6rem; + line-height: 1; + position: relative; + bottom: 0.25em; + margin-left: 0.25em; + border-bottom-style: none !important; + } +} + +/* --- Begin of Markdown table style --- */ + +/* it will be created by Liquid */ +.table-wrapper { + overflow-x: auto; + margin-bottom: 1.5rem; + + > table { + min-width: 100%; + overflow-x: auto; + border-spacing: 0; + + thead { + border-bottom: solid 2px rgba(210, 215, 217, 0.75); + + th { + @extend %table-cell; + } + } + + tbody { + tr { + border-bottom: 1px solid var(--tb-border-color); + + &:nth-child(2n) { + background-color: var(--tb-even-bg); + } + + &:nth-child(2n + 1) { + background-color: var(--tb-odd-bg); + } + + td { + @extend %table-cell; + } + } + } /* tbody */ + } /* table */ +} diff --git a/_sass/colors/syntax-dark.scss b/_sass/colors/syntax-dark.scss deleted file mode 100644 index eb92204dd88..00000000000 --- a/_sass/colors/syntax-dark.scss +++ /dev/null @@ -1,164 +0,0 @@ -/* - * The syntax dark mode styles. - */ - -@mixin dark-syntax { - --language-border-color: #2d2d2d; - --highlight-bg-color: #151515; - --highlighter-rouge-color: #c9def1; - --highlight-lineno-color: #808080; - --inline-code-bg: rgba(255, 255, 255, 0.05); - --code-color: #b0b0b0; - --code-header-text-color: #6a6a6a; - --code-header-muted-color: #353535; - --code-header-icon-color: #565656; - --clipboard-checked-color: #2bcc2b; - --filepath-text-color: #cacaca; - - .highlight .gp { - color: #87939d; - } - - /* --- Syntax highlight theme from `rougify style base16.dark` --- */ - - .highlight table td { - padding: 5px; - } - - .highlight table pre { - margin: 0; - } - - .highlight, - .highlight .w { - color: #d0d0d0; - background-color: #151515; - } - - .highlight .err { - color: #151515; - background-color: #ac4142; - } - - .highlight .c, - .highlight .ch, - .highlight .cd, - .highlight .cm, - .highlight .cpf, - .highlight .c1, - .highlight .cs { - color: #848484; - } - - .highlight .cp { - color: #f4bf75; - } - - .highlight .nt { - color: #f4bf75; - } - - .highlight .o, - .highlight .ow { - color: #d0d0d0; - } - - .highlight .p, - .highlight .pi { - color: #d0d0d0; - } - - .highlight .gi { - color: #90a959; - } - - .highlight .gd { - color: #f08a8b; - background-color: #320000; - } - - .highlight .gh { - color: #6a9fb5; - background-color: #151515; - font-weight: bold; - } - - .highlight .k, - .highlight .kn, - .highlight .kp, - .highlight .kr, - .highlight .kv { - color: #aa759f; - } - - .highlight .kc { - color: #d28445; - } - - .highlight .kt { - color: #d28445; - } - - .highlight .kd { - color: #d28445; - } - - .highlight .s, - .highlight .sb, - .highlight .sc, - .highlight .dl, - .highlight .sd, - .highlight .s2, - .highlight .sh, - .highlight .sx, - .highlight .s1 { - color: #90a959; - } - - .highlight .sa { - color: #aa759f; - } - - .highlight .sr { - color: #75b5aa; - } - - .highlight .si { - color: #b76d45; - } - - .highlight .se { - color: #b76d45; - } - - .highlight .nn { - color: #f4bf75; - } - - .highlight .nc { - color: #f4bf75; - } - - .highlight .no { - color: #f4bf75; - } - - .highlight .na { - color: #6a9fb5; - } - - .highlight .m, - .highlight .mb, - .highlight .mf, - .highlight .mh, - .highlight .mi, - .highlight .il, - .highlight .mo, - .highlight .mx { - color: #90a959; - } - - .highlight .ss { - color: #90a959; - } -} diff --git a/_sass/colors/syntax-light.scss b/_sass/colors/syntax-light.scss deleted file mode 100644 index 76aa66916b3..00000000000 --- a/_sass/colors/syntax-light.scss +++ /dev/null @@ -1,210 +0,0 @@ -/* - * The syntax light mode code snippet colors. - */ - -@mixin light-syntax { - /* --- custom light colors --- */ - --language-border-color: #ececec; - --highlight-bg-color: #f6f8fa; - --highlighter-rouge-color: #3f596f; - --highlight-lineno-color: #9e9e9e; - --inline-code-bg: rgba(25, 25, 28, 0.05); - --code-color: #3a3a3a; - --code-header-text-color: #a3a3a3; - --code-header-muted-color: #e5e5e5; - --code-header-icon-color: #c9c8c8; - --clipboard-checked-color: #43c743; - - /* --- Syntax highlight theme from `rougify style github` --- */ - - .highlight table td { - padding: 5px; - } - - .highlight table pre { - margin: 0; - } - - .highlight, - .highlight .w { - color: #24292f; - background-color: #f6f8fa; - } - - .highlight .k, - .highlight .kd, - .highlight .kn, - .highlight .kp, - .highlight .kr, - .highlight .kt, - .highlight .kv { - color: #cf222e; - } - - .highlight .gr { - color: #f6f8fa; - } - - .highlight .gd { - color: #82071e; - background-color: #ffebe9; - } - - .highlight .nb { - color: #953800; - } - - .highlight .nc { - color: #953800; - } - - .highlight .no { - color: #953800; - } - - .highlight .nn { - color: #953800; - } - - .highlight .sr { - color: #116329; - } - - .highlight .na { - color: #116329; - } - - .highlight .nt { - color: #116329; - } - - .highlight .gi { - color: #116329; - background-color: #dafbe1; - } - - .highlight .kc { - color: #0550ae; - } - - .highlight .l, - .highlight .ld, - .highlight .m, - .highlight .mb, - .highlight .mf, - .highlight .mh, - .highlight .mi, - .highlight .il, - .highlight .mo, - .highlight .mx { - color: #0550ae; - } - - .highlight .sb { - color: #0550ae; - } - - .highlight .bp { - color: #0550ae; - } - - .highlight .ne { - color: #0550ae; - } - - .highlight .nl { - color: #0550ae; - } - - .highlight .py { - color: #0550ae; - } - - .highlight .nv, - .highlight .vc, - .highlight .vg, - .highlight .vi, - .highlight .vm { - color: #0550ae; - } - - .highlight .o, - .highlight .ow { - color: #0550ae; - } - - .highlight .gh { - color: #0550ae; - font-weight: bold; - } - - .highlight .gu { - color: #0550ae; - font-weight: bold; - } - - .highlight .s, - .highlight .sa, - .highlight .sc, - .highlight .dl, - .highlight .sd, - .highlight .s2, - .highlight .se, - .highlight .sh, - .highlight .sx, - .highlight .s1, - .highlight .ss { - color: #0a3069; - } - - .highlight .nd { - color: #8250df; - } - - .highlight .nf, - .highlight .fm { - color: #8250df; - } - - .highlight .err { - color: #f6f8fa; - background-color: #82071e; - } - - .highlight .c, - .highlight .ch, - .highlight .cd, - .highlight .cm, - .highlight .cp, - .highlight .cpf, - .highlight .c1, - .highlight .cs { - color: #68717a; - } - - .highlight .gl { - color: #68717a; - } - - .highlight .gt { - color: #68717a; - } - - .highlight .ni { - color: #24292f; - } - - .highlight .si { - color: #24292f; - } - - .highlight .ge { - color: #24292f; - font-style: italic; - } - - .highlight .gs { - color: #24292f; - font-weight: bold; - } -} /* light-syntax */ diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss deleted file mode 100644 index b6fc5618ad5..00000000000 --- a/_sass/colors/typography-light.scss +++ /dev/null @@ -1,112 +0,0 @@ -/* - * The syntax light mode typography colors - */ - -@mixin light-scheme { - /* Framework color */ - --main-bg: white; - --mask-bg: #c1c3c5; - --main-border-color: #f3f3f3; - - /* Common color */ - --text-color: #34343c; - --text-muted-color: #757575; - --text-muted-highlight-color: inherit; - --heading-color: #2a2a2a; - --label-color: #585858; - --blockquote-border-color: #eeeeee; - --blockquote-text-color: #757575; - --link-color: #0056b2; - --link-underline-color: #dee2e6; - --button-bg: #ffffff; - --btn-border-color: #e9ecef; - --btn-backtotop-color: #686868; - --btn-backtotop-border-color: #f1f1f1; - --checkbox-color: #c5c5c5; - --checkbox-checked-color: #07a8f7; - --img-bg: radial-gradient( - circle, - rgb(255, 255, 255) 0%, - rgb(239, 239, 239) 100% - ); - --shimmer-bg: linear-gradient( - 90deg, - rgba(250, 250, 250, 0) 0%, - rgba(232, 230, 230, 1) 50%, - rgba(250, 250, 250, 0) 100% - ); - - /* Sidebar */ - --site-title-color: rgb(113, 113, 113); - --site-subtitle-color: #717171; - --sidebar-bg: #f6f8fa; - --sidebar-border-color: #efefef; - --sidebar-muted-color: #545454; - --sidebar-active-color: #1d1d1d; - --sidebar-hover-bg: rgb(223, 233, 241, 0.64); - --sidebar-btn-bg: white; - --sidebar-btn-color: #8e8e8e; - --avatar-border-color: white; - - /* Topbar */ - --topbar-bg: rgb(255, 255, 255, 0.7); - --topbar-text-color: rgb(78, 78, 78); - --search-border-color: rgb(240, 240, 240); - --search-icon-color: #c2c6cc; - --input-focus-border-color: #b8b8b8; - - /* Home page */ - --post-list-text-color: dimgray; - --btn-patinator-text-color: #555555; - --btn-paginator-hover-color: var(--sidebar-bg); - - /* Posts */ - --toc-highlight: #0550ae; - --toc-popup-border-color: lightgray; - --btn-share-color: gray; - --btn-share-hover-color: #0d6efd; - --card-bg: white; - --card-hovor-bg: #e2e2e2; - --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0, - rgba(211, 209, 209, 0.15) 0 0 0 1px; - --footnote-target-bg: lightcyan; - --tb-odd-bg: #fbfcfd; - --tb-border-color: #eaeaea; - --dash-color: silver; - --kbd-wrap-color: #bdbdbd; - --kbd-text-color: var(--text-color); - --kbd-bg-color: white; - --prompt-text-color: rgb(46, 46, 46, 0.77); - --prompt-tip-bg: rgb(123, 247, 144, 0.2); - --prompt-tip-icon-color: #03b303; - --prompt-info-bg: #e1f5fe; - --prompt-info-icon-color: #0070cb; - --prompt-warning-bg: rgb(255, 243, 205); - --prompt-warning-icon-color: #ef9c03; - --prompt-danger-bg: rgb(248, 215, 218, 0.56); - --prompt-danger-icon-color: #df3c30; - - /* Tags */ - --tag-border: #dee2e6; - --tag-shadow: var(--btn-border-color); - --tag-hover: rgb(222, 226, 230); - --search-tag-bg: #f8f9fa; - - /* Categories */ - --categories-border: rgba(0, 0, 0, 0.125); - --categories-hover-bg: var(--btn-border-color); - --categories-icon-hover-color: darkslategray; - - /* Archive */ - --timeline-color: rgba(0, 0, 0, 0.075); - --timeline-node-bg: #c2c6cc; - --timeline-year-dot-color: #ffffff; - - [class^='prompt-'] { - --link-underline-color: rgb(219, 216, 216); - } - - .dark { - display: none; - } -} /* light-scheme */ diff --git a/_sass/components/_buttons.scss b/_sass/components/_buttons.scss new file mode 100644 index 00000000000..bd7363e5586 --- /dev/null +++ b/_sass/components/_buttons.scss @@ -0,0 +1,51 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; + +#back-to-top { + visibility: hidden; + opacity: 0; + z-index: 1; + cursor: pointer; + position: fixed; + right: 1rem; + bottom: calc(v.$footer-height-large - v.$back2top-size / 2); + background: var(--button-bg); + color: var(--btn-backtotop-color); + padding: 0; + width: v.$back2top-size; + height: v.$back2top-size; + border-radius: 50%; + border: 1px solid var(--btn-backtotop-border-color); + transition: opacity 0.5s ease-in-out, transform 0.2s ease-out; + + @include bp.lg { + right: 5%; + bottom: calc(v.$footer-height - v.$back2top-size / 2); + } + + @include bp.xxl { + right: calc((100vw - v.$sidebar-width - 1140px) / 2 + 3rem); + } + + @include bp.xxxl { + right: calc( + (100vw - v.$sidebar-width-large - v.$main-content-max-width) / 2 + 2rem + ); + } + + &:hover { + transform: translate3d(0, -5px, 0); + -webkit-transform: translate3d(0, -5px, 0); + } + + i { + line-height: v.$back2top-size; + position: relative; + bottom: 2px; + } + + &.show { + opacity: 1; + visibility: visible; + } +} diff --git a/_sass/components/_index.scss b/_sass/components/_index.scss new file mode 100644 index 00000000000..ffbb9083479 --- /dev/null +++ b/_sass/components/_index.scss @@ -0,0 +1,2 @@ +@forward 'buttons'; +@forward 'popups'; diff --git a/_sass/components/_popups.scss b/_sass/components/_popups.scss new file mode 100644 index 00000000000..ca3e2fc697d --- /dev/null +++ b/_sass/components/_popups.scss @@ -0,0 +1,172 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/placeholders'; + +/* PWA update popup */ +#notification { + @-webkit-keyframes popup { + from { + opacity: 0; + bottom: 0; + } + } + + @keyframes popup { + from { + opacity: 0; + bottom: 0; + } + } + + .toast-header { + background: none; + border-bottom: none; + color: inherit; + } + + .toast-body { + font-family: Lato, sans-serif; + line-height: 1.25rem; + + button { + font-size: 90%; + min-width: 4rem; + } + } + + &.toast { + &.show { + display: block; + min-width: 20rem; + border-radius: 0.5rem; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.5); + color: #1b1b1eba; + position: fixed; + left: 50%; + bottom: 20%; + transform: translateX(-50%); + -webkit-animation: popup 0.8s; + animation: popup 0.8s; + } + } +} + +#toc-popup { + $slide-in: slide-in 0.3s ease-out; + $slide-out: slide-out 0.3s ease-out; + $curtain-height: 2rem; + $backdrop: blur(5px); + + border-color: var(--toc-popup-border-color); + border-width: 1px; + border-radius: v.$radius-lg; + color: var(--text-color); + background: var(--card-bg); + margin-top: v.$topbar-height; + min-width: 20rem; + font-size: 1.05rem; + + @include bp.sm { + max-width: 32rem; + } + + &[open] { + -webkit-animation: $slide-in; + animation: $slide-in; + } + + &[closing] { + -webkit-animation: $slide-out; + animation: $slide-out; + } + + @include bp.lg { + left: v.$sidebar-width; + } + + .header { + @extend %btn-color; + + position: -webkit-sticky; + position: sticky; + top: 0; + background-color: inherit; + border-bottom: 1px solid var(--main-border-color); + + .label { + font-family: v.$font-family-heading; + } + } + + button { + > i { + font-size: 1.25rem; + vertical-align: middle; + } + + &:focus-visible { + box-shadow: none; + } + } + + ul { + list-style-type: none; + padding-left: 0; + + li { + ul, + & + li { + margin-top: 0.25rem; + } + + a { + display: flex; + line-height: 1.5; + padding: 0.375rem 0; + padding-right: 1.125rem; + + &.toc-link::before { + display: none; + } + } + } + } + + @for $i from 2 through 4 { + .node-name--H#{$i} { + padding-left: 1.125rem * ($i - 1); + } + } + + .is-active-link { + color: var(--toc-highlight) !important; + font-weight: 600; + } + + &::-webkit-backdrop { + -webkit-backdrop-filter: $backdrop; + backdrop-filter: $backdrop; + } + + &::backdrop { + -webkit-backdrop-filter: $backdrop; + backdrop-filter: $backdrop; + } + + &::after { + display: flex; + content: ''; + position: relative; + background: linear-gradient(transparent, var(--card-bg) 70%); + height: $curtain-height; + } + + #toc-popup-content { + overflow: auto; + max-height: calc(100vh - 4 * v.$topbar-height); + font-family: v.$font-family-heading; + margin-bottom: -$curtain-height; + } +} diff --git a/_sass/layout/_footer.scss b/_sass/layout/_footer.scss new file mode 100644 index 00000000000..fd49ea041f2 --- /dev/null +++ b/_sass/layout/_footer.scss @@ -0,0 +1,36 @@ +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/variables' as v; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; + +footer { + background-color: var(--main-bg); + height: v.$footer-height; + border-top: 1px solid var(--main-border-color); + + @extend %text-xs; + + @include bp.lt(bp.get(lg)) { + @include mx.slide; + + height: v.$footer-height-large; + padding: 1.5rem 0; + } + + a { + @extend %text-highlight; + + &:hover { + @extend %link-hover; + } + } + + em { + @extend %text-highlight; + } + + p { + text-align: center; + margin-bottom: 0; + } +} diff --git a/_sass/layout/_index.scss b/_sass/layout/_index.scss new file mode 100644 index 00000000000..fa75daf9377 --- /dev/null +++ b/_sass/layout/_index.scss @@ -0,0 +1,4 @@ +@forward 'sidebar'; +@forward 'topbar'; +@forward 'panel'; +@forward 'footer'; diff --git a/_sass/layout/_panel.scss b/_sass/layout/_panel.scss new file mode 100644 index 00000000000..bb5c2bc180c --- /dev/null +++ b/_sass/layout/_panel.scss @@ -0,0 +1,66 @@ +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; + +.access { + top: 2rem; + transition: top 0.2s ease-in-out; + margin-top: 3rem; + margin-bottom: 4rem; + + &:only-child { + position: -webkit-sticky; + position: sticky; + } + + > section { + padding-left: 1rem; + border-left: 1px solid var(--main-border-color); + + &:not(:last-child) { + margin-bottom: 4rem; + } + } + + .content { + font-size: 0.9rem; + } +} + +#panel-wrapper { + /* the headings */ + .panel-heading { + font-family: inherit; + line-height: inherit; + + @include mx.label(inherit); + } + + .post-tag { + line-height: 1.05rem; + font-size: 0.85rem; + border-radius: 0.8rem; + padding: 0.3rem 0.5rem; + margin: 0 0.35rem 0.5rem 0; + + &:hover { + transition: all 0.3s ease-in; + } + } + + @include bp.lt(bp.get(xl)) { + display: none; + } +} + +#access-lastmod { + a { + color: inherit; + + &:hover { + @extend %link-hover; + } + + @extend %no-bottom-border; + } +} diff --git a/_sass/layout/_sidebar.scss b/_sass/layout/_sidebar.scss new file mode 100644 index 00000000000..eaad470c6c4 --- /dev/null +++ b/_sass/layout/_sidebar.scss @@ -0,0 +1,258 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/mixins' as mx; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/placeholders'; + +$btn-border-width: 3px; +$btn-mb: 0.5rem; +$sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */ + +#sidebar { + @include mx.pl-pr(0); + + position: fixed; + top: 0; + left: 0; + height: 100%; + overflow-y: auto; + width: v.$sidebar-width; + background: var(--sidebar-bg); + border-right: 1px solid var(--sidebar-border-color); + + /* Hide scrollbar for IE, Edge and Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + + /* Hide scrollbar for Chrome, Safari and Opera */ + &::-webkit-scrollbar { + display: none; + } + + @include bp.lt(bp.get(lg)) { + @include mx.slide; + + transform: translateX(-#{v.$sidebar-width}); /* hide */ + -webkit-transform: translateX(-#{v.$sidebar-width}); + + [#{$sidebar-display}] & { + transform: translateX(0); + } + } + + @include bp.xxxl { + width: v.$sidebar-width-large; + } + + %sidebar-link-hover { + &:hover { + color: var(--sidebar-active-color); + } + } + + a { + @extend %sidebar-links; + } + + #avatar { + display: block; + width: 6.5rem; + height: 6.5rem; + overflow: hidden; + box-shadow: var(--avatar-border-color) 0 0 0 2px; + transform: translateZ(0); /* fixed the zoom in Safari */ + + @include bp.sm { + width: 7rem; + height: 7rem; + } + + img { + transition: transform 0.5s; + + &:hover { + transform: scale(1.2); + } + } + } + + .profile-wrapper { + @include mx.mt-mb(2.5rem); + @extend %clickable-transition; + + padding-left: 2.5rem; + padding-right: 1.25rem; + width: 100%; + + @include bp.lg { + margin-top: 3rem; + } + + @include bp.xxxl { + margin-top: 3.5rem; + margin-bottom: 2.5rem; + padding-left: 3.5rem; + } + } + + .site-title { + @extend %clickable-transition; + @extend %sidebar-link-hover; + + font-family: inherit; + font-weight: 900; + font-size: 1.75rem; + line-height: 1.2; + letter-spacing: 0.25px; + margin-top: 1.25rem; + margin-bottom: 0.5rem; + width: fit-content; + color: var(--site-title-color); + } + + .site-subtitle { + font-size: 95%; + color: var(--site-subtitle-color); + margin-top: 0.25rem; + word-spacing: 1px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + ul { + margin-bottom: 2rem; + + li.nav-item { + opacity: 0.9; + width: 100%; + + @include mx.pl-pr(1.5rem); + + @include bp.xxxl { + @include mx.pl-pr(2.75rem); + } + + a.nav-link { + @include mx.pt-pb(0.6rem); + + display: flex; + align-items: center; + border-radius: 0.75rem; + font-weight: 600; + + &:hover { + background-color: var(--sidebar-hover-bg); + } + + i { + font-size: 95%; + opacity: 0.8; + margin-right: 1.5rem; + } + + span { + font-size: 90%; + letter-spacing: 0.2px; + } + } + + &.active { + .nav-link { + color: var(--sidebar-active-color); + background-color: var(--sidebar-hover-bg); + + span { + opacity: 1; + } + } + } + + &:not(:first-child) { + margin-top: 0.25rem; + } + } + } + + .sidebar-bottom { + padding-left: 2rem; + padding-right: 1rem; + margin-bottom: 1.5rem; + + @include bp.xxxl { + padding-left: 2.75rem; + margin-bottom: 1.75rem; + } + + $btn-size: 1.75rem; + + %button { + width: $btn-size; + height: $btn-size; + margin-bottom: $btn-mb; // multi line gap + border-radius: 50%; + color: var(--sidebar-btn-color); + background-color: var(--sidebar-btn-bg); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + + &:not(:focus-visible) { + box-shadow: var(--sidebar-border-color) 0 0 0 1px; + } + + &:hover { + background-color: var(--sidebar-hover-bg); + } + } + + a { + @extend %button; + @extend %sidebar-link-hover; + @extend %clickable-transition; + + &:not(:last-child) { + margin-right: v.$sb-btn-gap; + + @include bp.xxxl { + margin-right: v.$sb-btn-gap-lg; + } + } + } + + i { + line-height: $btn-size; + } + + #mode-toggle { + @extend %button; + @extend %sidebar-links; + @extend %sidebar-link-hover; + } + + .icon-border { + @extend %no-cursor; + @include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2)); + + background-color: var(--sidebar-btn-color); + content: ''; + width: $btn-border-width; + height: $btn-border-width; + border-radius: 50%; + margin-bottom: $btn-mb; + + @include bp.xxxl { + @include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2)); + } + } + } /* .sidebar-bottom */ +} /* #sidebar */ + +[#{$sidebar-display}] { + #main-wrapper { + @include bp.lt(bp.get(lg)) { + transform: translateX(v.$sidebar-width); + } + } +} diff --git a/_sass/layout/_topbar.scss b/_sass/layout/_topbar.scss new file mode 100644 index 00000000000..eb0aea9b0ca --- /dev/null +++ b/_sass/layout/_topbar.scss @@ -0,0 +1,86 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/mixins' as mx; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/placeholders'; + +#topbar-wrapper { + height: v.$topbar-height; + background-color: var(--topbar-bg); + + @include bp.lt(bp.get(lg)) { + @include mx.slide(top 0.2s ease); + + left: 0; + } +} + +#topbar { + @extend %btn-color; + + #breadcrumb { + font-size: 1rem; + color: var(--text-muted-color); + padding-left: 0.5rem; + + a:hover { + @extend %link-hover; + } + + span { + &:not(:last-child) { + &::after { + content: '›'; + padding: 0 0.3rem; + } + } + } + + @include bp.lt(bp.get(lg)) { + display: none; + } + + @include bp.between(bp.get(lg), calc(#{bp.get(xl)} - 1px)) { + width: 65%; + overflow: hidden; + text-overflow: ellipsis; + word-break: keep-all; + white-space: nowrap; + } + } + + @include bp.lte(bp.get(md)) { + @include mx.max-w-100; + } + + @include bp.lt(bp.get(lg)) { + max-width: 100%; + } +} + +#topbar-title { + display: none; + font-size: 1.1rem; + font-weight: 600; + font-family: sans-serif; + color: var(--topbar-text-color); + text-align: center; + width: 70%; + word-break: keep-all; + + @include bp.lt(bp.get(lg)) { + display: block; + } + + @include bp.lg { + text-align: left; + } +} + +#sidebar-trigger, +#search-trigger { + display: none; + + @include bp.lt(bp.get(lg)) { + display: block; + } +} diff --git a/_sass/main.bundle.scss b/_sass/main.bundle.scss index 52e893feb36..5d84f938ec6 100644 --- a/_sass/main.bundle.scss +++ b/_sass/main.bundle.scss @@ -1,2 +1,2 @@ -@import 'dist/bootstrap'; -@import 'main'; +@use 'vendors/bootstrap'; +@use 'main'; diff --git a/_sass/main.scss b/_sass/main.scss index 1c2311d5bfa..3bbb70d6515 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -1,13 +1,4 @@ -@import 'colors/typography-light'; -@import 'colors/typography-dark'; -@import 'addon/variables'; -@import 'variables-hook'; -@import 'addon/module'; -@import 'addon/syntax'; -@import 'addon/commons'; -@import 'layout/home'; -@import 'layout/post'; -@import 'layout/tags'; -@import 'layout/archives'; -@import 'layout/categories'; -@import 'layout/category-tag'; +@forward 'base'; +@forward 'components'; +@forward 'layout'; +@forward 'pages'; diff --git a/_sass/layout/archives.scss b/_sass/pages/_archives.scss similarity index 95% rename from _sass/layout/archives.scss rename to _sass/pages/_archives.scss index fd1979b8f91..86e77a89b48 100644 --- a/_sass/layout/archives.scss +++ b/_sass/pages/_archives.scss @@ -1,10 +1,17 @@ -/* - Style for Archives -*/ +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/placeholders'; #archives { letter-spacing: 0.03rem; + @include bp.lt(bp.get(sm)) { + margin-top: -1rem; + + ul { + letter-spacing: 0; + } + } + $timeline-width: 4px; %timeline { @@ -131,13 +138,3 @@ } } } /* #archives */ - -@media all and (max-width: 576px) { - #archives { - margin-top: -1rem; - - ul { - letter-spacing: 0; - } - } -} diff --git a/_sass/layout/categories.scss b/_sass/pages/_categories.scss similarity index 87% rename from _sass/layout/categories.scss rename to _sass/pages/_categories.scss index f12b9633682..64a2df500c5 100644 --- a/_sass/layout/categories.scss +++ b/_sass/pages/_categories.scss @@ -1,8 +1,7 @@ -/* - Style for Tab Categories -*/ +@use '../abstracts/variables' as v; +@use '../abstracts/placeholders'; -%category-icon-color { +%-category-icon-color { color: gray; } @@ -16,7 +15,7 @@ } .card-header { - $radius: calc($radius-lg - 1px); + $radius: calc(v.$radius-lg - 1px); padding: 0.75rem; border-radius: $radius; @@ -29,7 +28,7 @@ } i { - @extend %category-icon-color; + @extend %-category-icon-color; font-size: 86%; /* fontawesome icons */ } diff --git a/_sass/layout/category-tag.scss b/_sass/pages/_category-tag.scss similarity index 79% rename from _sass/layout/category-tag.scss rename to _sass/pages/_category-tag.scss index fe7d99cec25..0a827121bad 100644 --- a/_sass/layout/category-tag.scss +++ b/_sass/pages/_category-tag.scss @@ -1,6 +1,6 @@ -/* - Style for page Category and Tag -*/ +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; .dash { margin: 0 0.5rem 0.6rem 0.5rem; @@ -24,6 +24,10 @@ position: relative; top: 0.6rem; margin-right: 0.5rem; + + @include bp.lt(bp.get(sm)) { + margin: 0 0.5rem; + } } /* post's title */ @@ -31,6 +35,10 @@ @extend %no-bottom-border; font-size: 1.1rem; + + @include bp.lt(bp.get(sm)) { + @include mx.text-ellipsis; + } } } } @@ -53,18 +61,3 @@ margin-bottom: -1px; /* Avoid jumping */ } } - -@media all and (max-width: 576px) { - #page-category, - #page-tag { - ul > li { - &::before { - margin: 0 0.5rem; - } - - > a { - @include text-ellipsis; - } - } - } -} diff --git a/_sass/layout/home.scss b/_sass/pages/_home.scss similarity index 73% rename from _sass/layout/home.scss rename to _sass/pages/_home.scss index 7fff3ba1627..7a4bbf9b0c8 100644 --- a/_sass/layout/home.scss +++ b/_sass/pages/_home.scss @@ -1,10 +1,14 @@ -/* - Style for Homepage -*/ +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/placeholders'; #post-list { margin-top: 2rem; + @include bp.lg { + margin-top: 2.5rem; + } + .card-wrapper { &:hover { text-decoration: none; @@ -20,7 +24,11 @@ background: none; %img-radius { - border-radius: $radius-lg $radius-lg 0 0; + border-radius: v.$radius-lg v.$radius-lg 0 0; + + @include bp.md { + border-radius: 0 v.$radius-lg v.$radius-lg 0; + } } .preview-img { @@ -35,6 +43,10 @@ height: 100%; padding: 1rem; + @include bp.md { + padding: 1.75rem 1.75rem 1.25rem; + } + .card-title { @extend %text-clip; @@ -46,14 +58,20 @@ color: var(--text-muted-color) !important; } - .card-text.content { - @extend %muted; + .card-text { + @include bp.md { + display: inherit !important; + } - p { - @extend %text-clip; + &.content { + @extend %muted; - line-height: 1.5; - margin: 0; + p { + @extend %text-clip; + + line-height: 1.5; + margin: 0; + } } } @@ -63,6 +81,10 @@ i { &:not(:first-child) { margin-left: 1.5rem; + + @include bp.md { + margin-left: 1.75rem; + } } } @@ -87,11 +109,28 @@ font-family: Lato, sans-serif; justify-content: space-evenly; + @include bp.lg { + font-size: 0.85rem; + justify-content: center; + } + a:hover { text-decoration: none; } .page-item { + @include bp.lt(bp.get(lg)) { + &:not(:first-child):not(:last-child) { + display: none; + } + } + + @include bp.lg { + &:not(:last-child) { + margin-right: 0.7rem; + } + } + .page-link { color: var(--btn-patinator-text-color); padding: 0 0.6rem; @@ -125,64 +164,10 @@ } } } /* .page-item */ -} /* .pagination */ - -/* Tablet */ -@media all and (min-width: 768px) { - %img-radius { - border-radius: 0 $radius-lg $radius-lg 0; - } - - #post-list { - .card { - .card-body { - padding: 1.75rem 1.75rem 1.25rem 1.75rem; - .card-text { - display: inherit !important; - } - - .post-meta { - i { - &:not(:first-child) { - margin-left: 1.75rem; - } - } - } - } - } - } -} - -/* Hide SideBar and TOC */ -@media all and (max-width: 830px) { - .pagination { - .page-item { - &:not(:first-child):not(:last-child) { - display: none; - } - } - } -} - -/* Sidebar is visible */ -@media all and (min-width: 831px) { - #post-list { - margin-top: 2.5rem; - } - - .pagination { - font-size: 0.85rem; - justify-content: center; - - .page-item { - &:not(:last-child) { - margin-right: 0.7rem; - } - } - - .page-index { + .page-index { + @include bp.lg { display: none; } - } /* .pagination */ + } } diff --git a/_sass/pages/_index.scss b/_sass/pages/_index.scss new file mode 100644 index 00000000000..74e9ea6eb55 --- /dev/null +++ b/_sass/pages/_index.scss @@ -0,0 +1,7 @@ +@forward 'search'; +@forward 'home'; +@forward 'post'; +@forward 'categories'; +@forward 'tags'; +@forward 'archives'; +@forward 'category-tag'; diff --git a/_sass/layout/post.scss b/_sass/pages/_post.scss similarity index 67% rename from _sass/layout/post.scss rename to _sass/pages/_post.scss index 891479e6784..d789050d6bd 100644 --- a/_sass/layout/post.scss +++ b/_sass/pages/_post.scss @@ -1,14 +1,15 @@ -/** - * Post-specific styles - */ +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; -%btn-post-nav { +%-btn-post-nav { width: 50%; position: relative; border-color: var(--btn-border-color); } -@mixin dot($pl: 0.25rem, $pr: 0.25rem) { +@mixin -dot($pl: 0.25rem, $pr: 0.25rem) { content: '\2022'; padding-left: $pl; padding-right: $pr; @@ -24,7 +25,7 @@ header { .post-meta { span + span::before { - @include dot; + @include -dot; } em, @@ -113,9 +114,20 @@ header { } /* .share-wrapper */ } +.post-tail-bottom { + @include bp.lte(bp.get(sm)) { + flex-wrap: wrap-reverse !important; + + > div:first-child { + width: 100%; + margin-top: 1rem; + } + } +} + .share-mastodon { /* See: https://github.com/justinribeiro/share-to-mastodon#properties */ - --wc-stm-font-family: $font-family-base; + --wc-stm-font-family: v.$font-family-base; --wc-stm-dialog-background-color: var(--card-bg); --wc-stm-form-button-border: 1px solid var(--btn-border-color); --wc-stm-form-submit-background-color: var(--sidebar-btn-bg); @@ -139,8 +151,13 @@ header { } .post-navigation { + @include bp.lt(bp.get(lg)) { + @include mx.pl-pr(0); + @include mx.ml-mr(-0.5rem); + } + .btn { - @extend %btn-post-nav; + @extend %-btn-post-nav; &:not(:hover) { color: var(--link-color); @@ -153,7 +170,7 @@ header { } &.disabled { - @extend %btn-post-nav; + @extend %-btn-post-nav; pointer-events: auto; cursor: not-allowed; @@ -173,12 +190,12 @@ header { } &:first-child { - border-radius: $radius-lg 0 0 $radius-lg; + border-radius: v.$radius-lg 0 0 v.$radius-lg; left: 0.5px; } &:last-child { - border-radius: 0 $radius-lg $radius-lg 0; + border-radius: 0 v.$radius-lg v.$radius-lg 0; right: 0.5px; } } @@ -298,23 +315,27 @@ header { top: 0; z-index: 1; margin: 0 -1rem; - height: $topbar-height; + height: v.$topbar-height; background: var(--main-bg); border-bottom: 1px solid var(--main-border-color); transition: all 0.2s ease-in-out; @extend %btn-color; + @include bp.xl { + display: none !important; + } + .label { @extend %heading; - margin-left: 0.25rem; + margin-left: 0.375rem; padding: 0 0.75rem; color: inherit; } &.invisible { - top: -$topbar-height; + top: -#{v.$topbar-height}; transition: none; } } @@ -322,11 +343,15 @@ header { #toc-solo-trigger { color: var(--text-muted-color); border-color: var(--btn-border-color); - border-radius: $radius-lg; + border-radius: v.$radius-lg; + + @include bp.xl { + display: none !important; + } .label { font-size: 1rem; - font-family: $font-family-heading; + font-family: v.$font-family-heading; } &:hover { @@ -338,7 +363,7 @@ header { @mixin slide-in { from { opacity: 0.7; - transform: translateY(-$topbar-height); + transform: translateY(-#{v.$topbar-height}); } to { @@ -354,7 +379,7 @@ header { } 100% { - transform: translateY(-$topbar-height); + transform: translateY(-#{v.$topbar-height}); opacity: 0; } } @@ -375,129 +400,11 @@ header { @include slide-out; } -#toc-popup { - $slide-in: slide-in 0.3s ease-out; - $slide-out: slide-out 0.3s ease-out; - $curtain-height: 2rem; - $backdrop: blur(5px); - - border-color: var(--toc-popup-border-color); - border-width: 1px; - border-radius: $radius-lg; - color: var(--text-color); - background: var(--card-bg); - margin-top: $topbar-height; - min-width: 20rem; - font-size: 1.05rem; - - @media all and (min-width: 576px) { - max-width: 32rem; - } - - &[open] { - -webkit-animation: $slide-in; - animation: $slide-in; - } - - &[closing] { - -webkit-animation: $slide-out; - animation: $slide-out; - } - - @media all and (min-width: 850px) { - left: $sidebar-width; - } - - .header { - @extend %btn-color; - - position: -webkit-sticky; - position: sticky; - top: 0; - background-color: inherit; - border-bottom: 1px solid var(--main-border-color); - - .label { - font-family: $font-family-heading; - } - } - - button { - > i { - font-size: 1.25rem; - vertical-align: middle; - } - - &:focus-visible { - box-shadow: none; - } - } - - ul { - list-style-type: none; - padding-left: 0; - - li { - ul, - & + li { - margin-top: 0.25rem; - } - - a { - display: flex; - line-height: 1.5; - padding: 0.375rem 0; - padding-right: 1.125rem; - - &.toc-link::before { - display: none; - } - } - } - } - - @for $i from 2 through 4 { - .node-name--H#{$i} { - padding-left: 1.125rem * ($i - 1); - } - } - - .is-active-link { - color: var(--toc-highlight) !important; - font-weight: 600; - } - - &::-webkit-backdrop { - -webkit-backdrop-filter: $backdrop; - backdrop-filter: $backdrop; - } - - &::backdrop { - -webkit-backdrop-filter: $backdrop; - backdrop-filter: $backdrop; - } - - &::after { - display: flex; - content: ''; - position: relative; - background: linear-gradient(transparent, var(--card-bg) 70%); - height: $curtain-height; - } - - #toc-popup-content { - overflow: auto; - max-height: calc(100vh - 4 * $topbar-height); - font-family: $font-family-heading; - margin-bottom: -$curtain-height; - } -} - /* --- Related Posts --- */ #related-posts { > h3 { - @include label(1.1rem, 600); + @include mx.label(1.1rem, 600); } time { @@ -540,47 +447,23 @@ header { } .share-label { - @include label(inherit, 400, inherit); + @include mx.label(inherit, 400, inherit); &::after { content: ':'; } } -@media all and (max-width: 576px) { - .post-tail-bottom { - flex-wrap: wrap-reverse !important; - - > div:first-child { - width: 100%; - margin-top: 1rem; - } - } -} - -@media all and (max-width: 768px) { - .content > p > img { +.content > p > img { + @include bp.lte(bp.get(md)) { max-width: calc(100% + 1rem); } } -/* Hide SideBar and TOC */ -@media all and (max-width: 849px) { - .post-navigation { - @include pl-pr(0); - @include ml-mr(-0.5rem); - } -} - -@media all and (min-width: 1200px) { - h2, - h3, - h4 { +h2, +h3, +h4 { + @include bp.xl { scroll-margin-top: 2rem; } - - #toc-bar, - #toc-solo-trigger { - display: none !important; - } } diff --git a/_sass/pages/_search.scss b/_sass/pages/_search.scss new file mode 100644 index 00000000000..dfb044edd6a --- /dev/null +++ b/_sass/pages/_search.scss @@ -0,0 +1,184 @@ +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/variables' as v; +@use '../abstracts/placeholders'; + +search { + display: flex; + width: 100%; + border-radius: 1rem; + border: 1px solid var(--search-border-color); + background: var(--main-bg); + padding: 0 0.5rem; + + i { + z-index: 2; + font-size: 0.9rem; + color: var(--search-icon-color); + } + + @include bp.lt(bp.get(lg)) { + display: none; + } + + @include bp.lg { + max-width: v.$search-max-width; + } + + @include bp.xl { + margin-right: 4rem; + } + + @include bp.xxxl { + margin-right: calc( + v.$main-content-max-width / 4 - v.$search-max-width - 0.75rem + ); + } +} + +#search-result-wrapper { + display: none; + height: 100%; + width: 100%; + overflow: auto; + + .content { + margin-top: 2rem; + } + + @include bp.lt(bp.get(lg)) { + width: 100%; + + .content { + letter-spacing: 0; + } + } + + @include bp.lg { + max-width: v.$main-content-max-width; + justify-content: start !important; + } +} + +#search-results { + padding-bottom: 3rem; + + @include bp.between(bp.get(lg), calc(#{bp.get(xl)} - 1px)) { + > div { + max-width: 700px; + } + } + + a { + font-size: 1.4rem; + line-height: 1.5rem; + + &:hover { + @extend %link-hover; + } + + @extend %link-color; + @extend %no-bottom-border; + @extend %heading; + } + + > article { + width: 100%; + + &:not(:last-child) { + margin-bottom: 1rem; + } + + @include bp.xl { + width: 45%; + + &:nth-child(odd) { + margin-right: 1.5rem; + } + + &:nth-child(even) { + margin-left: 1.5rem; + } + + &:last-child:nth-child(odd) { + position: relative; + right: 24.3%; + } + } + + h2 { + line-height: 2.5rem; + } + + /* icons */ + i { + color: #818182; + margin-right: 0.15rem; + font-size: 80%; + } + + > p { + @extend %text-ellipsis; + + white-space: break-spaces; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + } +} + +/* 'Cancel' link */ +#search-cancel { + color: var(--link-color); + display: none; + white-space: nowrap; + + @extend %cursor-pointer; +} + +#search-input { + background: center; + border: 0; + border-radius: 0; + padding: 0.18rem 0.3rem; + color: var(--text-color); + height: auto; + + &:focus { + box-shadow: none; + } + + @include bp.xl { + transition: all 0.3s ease-in-out; + } +} + +#search-hints { + padding: 0 1rem; + + @include bp.lg { + display: none; + } + + h4 { + margin-bottom: 1.5rem; + } + + .post-tag { + display: inline-block; + line-height: 1rem; + font-size: 1rem; + background: var(--search-tag-bg); + border: none; + padding: 0.5rem; + margin: 0 1.25rem 1rem 0; + + &::before { + content: '#'; + color: var(--text-muted-color); + padding-right: 0.2rem; + } + + @extend %link-color; + } +} diff --git a/_sass/layout/tags.scss b/_sass/pages/_tags.scss similarity index 71% rename from _sass/layout/tags.scss rename to _sass/pages/_tags.scss index 4cf5d3b716f..d22f20d6cd7 100644 --- a/_sass/layout/tags.scss +++ b/_sass/pages/_tags.scss @@ -1,6 +1,4 @@ -/* - Styles for Tab Tags -*/ +@use '../abstracts/breakpoints' as bp; .tag { border-radius: 0.7em; @@ -17,3 +15,9 @@ font-family: Oswald, sans-serif; } } + +#tags { + @include bp.lt(bp.get(lg)) { + justify-content: center !important; + } +} diff --git a/_sass/colors/typography-dark.scss b/_sass/themes/_dark.scss similarity index 62% rename from _sass/colors/typography-dark.scss rename to _sass/themes/_dark.scss index 664c93653e6..8c2f6ea8bd5 100644 --- a/_sass/colors/typography-dark.scss +++ b/_sass/themes/_dark.scss @@ -1,8 +1,6 @@ -/* - * The main dark mode styles - */ +@mixin styles { + color-scheme: dark; -@mixin dark-scheme { /* Framework color */ --main-bg: rgb(27, 27, 30); --mask-bg: rgb(68, 69, 70); @@ -100,7 +98,18 @@ --timeline-color: rgb(63, 65, 68); --timeline-year-dot-color: var(--timeline-color); - color-scheme: dark; + /* Code highlight colors */ + --language-border-color: #2d2d2d; + --highlight-bg-color: #151515; + --highlighter-rouge-color: #c9def1; + --highlight-lineno-color: #808080; + --inline-code-bg: rgba(255, 255, 255, 0.05); + --code-color: #b0b0b0; + --code-header-text-color: #6a6a6a; + --code-header-muted-color: #353535; + --code-header-icon-color: #565656; + --clipboard-checked-color: #2bcc2b; + --filepath-text-color: #cacaca; .light { display: none; @@ -144,4 +153,151 @@ #disqus_thread { color-scheme: none; } -} /* dark-scheme */ + + /* --- Syntax highlight theme from `rougify style base16.dark` --- */ + + .highlight .gp { + color: #87939d; + } + + .highlight table td { + padding: 5px; + } + + .highlight table pre { + margin: 0; + } + + .highlight, + .highlight .w { + color: #d0d0d0; + background-color: #151515; + } + + .highlight .err { + color: #151515; + background-color: #ac4142; + } + + .highlight .c, + .highlight .ch, + .highlight .cd, + .highlight .cm, + .highlight .cpf, + .highlight .c1, + .highlight .cs { + color: #848484; + } + + .highlight .cp { + color: #f4bf75; + } + + .highlight .nt { + color: #f4bf75; + } + + .highlight .o, + .highlight .ow { + color: #d0d0d0; + } + + .highlight .p, + .highlight .pi { + color: #d0d0d0; + } + + .highlight .gi { + color: #90a959; + } + + .highlight .gd { + color: #f08a8b; + background-color: #320000; + } + + .highlight .gh { + color: #6a9fb5; + background-color: #151515; + font-weight: bold; + } + + .highlight .k, + .highlight .kn, + .highlight .kp, + .highlight .kr, + .highlight .kv { + color: #aa759f; + } + + .highlight .kc { + color: #d28445; + } + + .highlight .kt { + color: #d28445; + } + + .highlight .kd { + color: #d28445; + } + + .highlight .s, + .highlight .sb, + .highlight .sc, + .highlight .dl, + .highlight .sd, + .highlight .s2, + .highlight .sh, + .highlight .sx, + .highlight .s1 { + color: #90a959; + } + + .highlight .sa { + color: #aa759f; + } + + .highlight .sr { + color: #75b5aa; + } + + .highlight .si { + color: #b76d45; + } + + .highlight .se { + color: #b76d45; + } + + .highlight .nn { + color: #f4bf75; + } + + .highlight .nc { + color: #f4bf75; + } + + .highlight .no { + color: #f4bf75; + } + + .highlight .na { + color: #6a9fb5; + } + + .highlight .m, + .highlight .mb, + .highlight .mf, + .highlight .mh, + .highlight .mi, + .highlight .il, + .highlight .mo, + .highlight .mx { + color: #90a959; + } + + .highlight .ss { + color: #90a959; + } +} diff --git a/_sass/themes/_light.scss b/_sass/themes/_light.scss new file mode 100644 index 00000000000..14c3962b7ae --- /dev/null +++ b/_sass/themes/_light.scss @@ -0,0 +1,313 @@ +@mixin styles { + /* Framework color */ + --main-bg: white; + --mask-bg: #c1c3c5; + --main-border-color: #f3f3f3; + + /* Common color */ + --text-color: #34343c; + --text-muted-color: #757575; + --text-muted-highlight-color: inherit; + --heading-color: #2a2a2a; + --label-color: #585858; + --blockquote-border-color: #eeeeee; + --blockquote-text-color: #757575; + --link-color: #0056b2; + --link-underline-color: #dee2e6; + --button-bg: #ffffff; + --btn-border-color: #e9ecef; + --btn-backtotop-color: #686868; + --btn-backtotop-border-color: #f1f1f1; + --checkbox-color: #c5c5c5; + --checkbox-checked-color: #07a8f7; + --img-bg: radial-gradient( + circle, + rgb(255, 255, 255) 0%, + rgb(239, 239, 239) 100% + ); + --shimmer-bg: linear-gradient( + 90deg, + rgba(250, 250, 250, 0) 0%, + rgba(232, 230, 230, 1) 50%, + rgba(250, 250, 250, 0) 100% + ); + + /* Sidebar */ + --site-title-color: rgb(113, 113, 113); + --site-subtitle-color: #717171; + --sidebar-bg: #f6f8fa; + --sidebar-border-color: #efefef; + --sidebar-muted-color: #545454; + --sidebar-active-color: #1d1d1d; + --sidebar-hover-bg: rgb(223, 233, 241, 0.64); + --sidebar-btn-bg: white; + --sidebar-btn-color: #8e8e8e; + --avatar-border-color: white; + + /* Topbar */ + --topbar-bg: rgb(255, 255, 255, 0.7); + --topbar-text-color: rgb(78, 78, 78); + --search-border-color: rgb(240, 240, 240); + --search-icon-color: #c2c6cc; + --input-focus-border-color: #b8b8b8; + + /* Home page */ + --post-list-text-color: dimgray; + --btn-patinator-text-color: #555555; + --btn-paginator-hover-color: var(--sidebar-bg); + + /* Posts */ + --toc-highlight: #0550ae; + --toc-popup-border-color: lightgray; + --btn-share-color: gray; + --btn-share-hover-color: #0d6efd; + --card-bg: white; + --card-hovor-bg: #e2e2e2; + --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0, + rgba(211, 209, 209, 0.15) 0 0 0 1px; + --footnote-target-bg: lightcyan; + --tb-odd-bg: #fbfcfd; + --tb-border-color: #eaeaea; + --dash-color: silver; + --kbd-wrap-color: #bdbdbd; + --kbd-text-color: var(--text-color); + --kbd-bg-color: white; + --prompt-text-color: rgb(46, 46, 46, 0.77); + --prompt-tip-bg: rgb(123, 247, 144, 0.2); + --prompt-tip-icon-color: #03b303; + --prompt-info-bg: #e1f5fe; + --prompt-info-icon-color: #0070cb; + --prompt-warning-bg: rgb(255, 243, 205); + --prompt-warning-icon-color: #ef9c03; + --prompt-danger-bg: rgb(248, 215, 218, 0.56); + --prompt-danger-icon-color: #df3c30; + + /* Tags */ + --tag-border: #dee2e6; + --tag-shadow: var(--btn-border-color); + --tag-hover: rgb(222, 226, 230); + --search-tag-bg: #f8f9fa; + + /* Categories */ + --categories-border: rgba(0, 0, 0, 0.125); + --categories-hover-bg: var(--btn-border-color); + --categories-icon-hover-color: darkslategray; + + /* Archive */ + --timeline-color: rgba(0, 0, 0, 0.075); + --timeline-node-bg: #c2c6cc; + --timeline-year-dot-color: #ffffff; + + /* --- Custom code light mode colors --- */ + --language-border-color: #ececec; + --highlight-bg-color: #f6f8fa; + --highlighter-rouge-color: #3f596f; + --highlight-lineno-color: #9e9e9e; + --inline-code-bg: rgba(25, 25, 28, 0.05); + --code-color: #3a3a3a; + --code-header-text-color: #a3a3a3; + --code-header-muted-color: #e5e5e5; + --code-header-icon-color: #c9c8c8; + --clipboard-checked-color: #43c743; + + [class^='prompt-'] { + --link-underline-color: rgb(219, 216, 216); + } + + .dark { + display: none; + } + + /* --- Syntax highlight theme from `rougify style github` --- */ + + .highlight table td { + padding: 5px; + } + + .highlight table pre { + margin: 0; + } + + .highlight, + .highlight .w { + color: #24292f; + background-color: #f6f8fa; + } + + .highlight .k, + .highlight .kd, + .highlight .kn, + .highlight .kp, + .highlight .kr, + .highlight .kt, + .highlight .kv { + color: #cf222e; + } + + .highlight .gr { + color: #f6f8fa; + } + + .highlight .gd { + color: #82071e; + background-color: #ffebe9; + } + + .highlight .nb { + color: #953800; + } + + .highlight .nc { + color: #953800; + } + + .highlight .no { + color: #953800; + } + + .highlight .nn { + color: #953800; + } + + .highlight .sr { + color: #116329; + } + + .highlight .na { + color: #116329; + } + + .highlight .nt { + color: #116329; + } + + .highlight .gi { + color: #116329; + background-color: #dafbe1; + } + + .highlight .kc { + color: #0550ae; + } + + .highlight .l, + .highlight .ld, + .highlight .m, + .highlight .mb, + .highlight .mf, + .highlight .mh, + .highlight .mi, + .highlight .il, + .highlight .mo, + .highlight .mx { + color: #0550ae; + } + + .highlight .sb { + color: #0550ae; + } + + .highlight .bp { + color: #0550ae; + } + + .highlight .ne { + color: #0550ae; + } + + .highlight .nl { + color: #0550ae; + } + + .highlight .py { + color: #0550ae; + } + + .highlight .nv, + .highlight .vc, + .highlight .vg, + .highlight .vi, + .highlight .vm { + color: #0550ae; + } + + .highlight .o, + .highlight .ow { + color: #0550ae; + } + + .highlight .gh { + color: #0550ae; + font-weight: bold; + } + + .highlight .gu { + color: #0550ae; + font-weight: bold; + } + + .highlight .s, + .highlight .sa, + .highlight .sc, + .highlight .dl, + .highlight .sd, + .highlight .s2, + .highlight .se, + .highlight .sh, + .highlight .sx, + .highlight .s1, + .highlight .ss { + color: #0a3069; + } + + .highlight .nd { + color: #8250df; + } + + .highlight .nf, + .highlight .fm { + color: #8250df; + } + + .highlight .err { + color: #f6f8fa; + background-color: #82071e; + } + + .highlight .c, + .highlight .ch, + .highlight .cd, + .highlight .cm, + .highlight .cp, + .highlight .cpf, + .highlight .c1, + .highlight .cs { + color: #68717a; + } + + .highlight .gl { + color: #68717a; + } + + .highlight .gt { + color: #68717a; + } + + .highlight .ni { + color: #24292f; + } + + .highlight .si { + color: #24292f; + } + + .highlight .ge { + color: #24292f; + font-style: italic; + } + + .highlight .gs { + color: #24292f; + font-weight: bold; + } +} diff --git a/_sass/variables-hook.scss b/_sass/variables-hook.scss deleted file mode 100644 index f27e0eb8280..00000000000 --- a/_sass/variables-hook.scss +++ /dev/null @@ -1,3 +0,0 @@ -/* - Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss` -*/ diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss index d20545ba80b..7ff89bf7f13 100644 --- a/assets/css/jekyll-theme-chirpy.scss +++ b/assets/css/jekyll-theme-chirpy.scss @@ -1,7 +1,7 @@ --- --- -@import 'main +@use 'main {%- if jekyll.environment == 'production' -%} .bundle {%- endif -%} diff --git a/package.json b/package.json index d6beea03eb8..aa83ee7279a 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/", "scripts": { "build": "concurrently npm:build:*", - "build:css": "purgecss -c purgecss.config.js", + "build:css": "node purgecss.js", "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production", "watch:js": "rollup -c --bundleConfigAsCjs -w", "lint:scss": "stylelint _sass/**/*.scss", diff --git a/purgecss.config.js b/purgecss.config.js deleted file mode 100644 index de370dea30c..00000000000 --- a/purgecss.config.js +++ /dev/null @@ -1,23 +0,0 @@ -const fs = require('fs'); -const DIST_PATH = '_sass/dist'; - -fs.rm(DIST_PATH, { recursive: true, force: true }, (err) => { - if (err) { - throw err; - } - - fs.mkdirSync(DIST_PATH); -}); - -module.exports = { - content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'], - css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'], - keyframes: true, - variables: true, - output: `${DIST_PATH}/bootstrap.css`, - // The `safelist` should be changed appropriately for future development - safelist: { - standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'], - greedy: [/^col-/, /tooltip/] - } -}; diff --git a/purgecss.js b/purgecss.js new file mode 100644 index 00000000000..ad42db297ee --- /dev/null +++ b/purgecss.js @@ -0,0 +1,30 @@ +const fs = require('fs').promises; +const { PurgeCSS } = require('purgecss'); +const DIST_PATH = '_sass/vendors'; +const output = `${DIST_PATH}/_bootstrap.scss`; + +const config = { + content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'], + css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'], + keyframes: true, + variables: true, + // The `safelist` should be changed appropriately for future development + safelist: { + standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'], + greedy: [/^col-/, /tooltip/] + } +}; + +function main() { + fs.rm(DIST_PATH, { recursive: true, force: true }) + .then(() => fs.mkdir(DIST_PATH)) + .then(() => new PurgeCSS().purge(config)) + .then((result) => { + return fs.writeFile(output, result[0].css); + }) + .catch((err) => { + console.error('Error during PurgeCSS process:', err); + }); +} + +main(); diff --git a/tools/init.sh b/tools/init.sh index 2ad72ab9bea..d710182be4e 100755 --- a/tools/init.sh +++ b/tools/init.sh @@ -92,7 +92,8 @@ init_files() { npm i && npm run build # track the CSS/JS output - _sedi "/.*\/dist$/d" .gitignore + _sedi "/^_sass\/vendors/d" .gitignore + _sedi "/^assets\/js\/dist/d" .gitignore } commit() { diff --git a/tools/release.sh b/tools/release.sh index 522c892c827..36ca88af6a4 100755 --- a/tools/release.sh +++ b/tools/release.sh @@ -15,7 +15,7 @@ NODE_SPEC="package.json" CHANGELOG="docs/CHANGELOG.md" CONFIG="_config.yml" -CSS_DIST="_sass/dist" +CSS_DIST="_sass/vendors" JS_DIST="assets/js/dist" FILES=(