From 8e25bfe11e04bd498ac3de258b154c914da7abbb Mon Sep 17 00:00:00 2001 From: geekifan Date: Sat, 19 Apr 2025 21:27:20 +0800 Subject: [PATCH] initial commit --- .gitignore | 13 + README.md | 1 + archetypes/default.md | 5 + assets/sass/abstracts/_breakpoints.scss | 73 ++++ assets/sass/abstracts/_index.scss | 4 + assets/sass/abstracts/_mixins.scss | 80 ++++ assets/sass/abstracts/_placeholders.scss | 160 ++++++++ assets/sass/abstracts/_variables.scss | 30 ++ assets/sass/base/_base.scss | 476 ++++++++++++++++++++++ assets/sass/base/_index.scss | 4 + assets/sass/base/_reset.scss | 41 ++ assets/sass/base/_syntax.scss | 253 ++++++++++++ assets/sass/base/_typography.scss | 266 ++++++++++++ assets/sass/components/_buttons.scss | 51 +++ assets/sass/components/_index.scss | 2 + assets/sass/components/_popups.scss | 172 ++++++++ assets/sass/layout/_footer.scss | 36 ++ assets/sass/layout/_index.scss | 4 + assets/sass/layout/_panel.scss | 70 ++++ assets/sass/layout/_sidebar.scss | 258 ++++++++++++ assets/sass/layout/_topbar.scss | 86 ++++ assets/sass/main.bundle.scss | 2 + assets/sass/main.scss | 4 + assets/sass/pages/_archives.scss | 140 +++++++ assets/sass/pages/_categories.scss | 82 ++++ assets/sass/pages/_category-tag.scss | 63 +++ assets/sass/pages/_home.scss | 173 ++++++++ assets/sass/pages/_index.scss | 7 + assets/sass/pages/_post.scss | 498 +++++++++++++++++++++++ assets/sass/pages/_search.scss | 184 +++++++++ assets/sass/pages/_tags.scss | 23 ++ assets/sass/themes/_dark.scss | 303 ++++++++++++++ assets/sass/themes/_light.scss | 313 ++++++++++++++ hugo.toml | 3 + layouts/_default/baseof.html | 46 +++ layouts/index.html | 3 + 36 files changed, 3929 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 archetypes/default.md create mode 100644 assets/sass/abstracts/_breakpoints.scss create mode 100644 assets/sass/abstracts/_index.scss create mode 100644 assets/sass/abstracts/_mixins.scss create mode 100644 assets/sass/abstracts/_placeholders.scss create mode 100644 assets/sass/abstracts/_variables.scss create mode 100644 assets/sass/base/_base.scss create mode 100644 assets/sass/base/_index.scss create mode 100644 assets/sass/base/_reset.scss create mode 100644 assets/sass/base/_syntax.scss create mode 100644 assets/sass/base/_typography.scss create mode 100644 assets/sass/components/_buttons.scss create mode 100644 assets/sass/components/_index.scss create mode 100644 assets/sass/components/_popups.scss create mode 100644 assets/sass/layout/_footer.scss create mode 100644 assets/sass/layout/_index.scss create mode 100644 assets/sass/layout/_panel.scss create mode 100644 assets/sass/layout/_sidebar.scss create mode 100644 assets/sass/layout/_topbar.scss create mode 100644 assets/sass/main.bundle.scss create mode 100644 assets/sass/main.scss create mode 100644 assets/sass/pages/_archives.scss create mode 100644 assets/sass/pages/_categories.scss create mode 100644 assets/sass/pages/_category-tag.scss create mode 100644 assets/sass/pages/_home.scss create mode 100644 assets/sass/pages/_index.scss create mode 100644 assets/sass/pages/_post.scss create mode 100644 assets/sass/pages/_search.scss create mode 100644 assets/sass/pages/_tags.scss create mode 100644 assets/sass/themes/_dark.scss create mode 100644 assets/sass/themes/_light.scss create mode 100644 hugo.toml create mode 100644 layouts/_default/baseof.html create mode 100644 layouts/index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7b62a71 --- /dev/null +++ b/.gitignore @@ -0,0 +1,13 @@ +# Generated files by hugo +/public/ +/resources/_gen/ +/assets/jsconfig.json +hugo_stats.json + +# Executable may be added to repository +hugo.exe +hugo.darwin +hugo.linux + +# Temporary lock file while building +/.hugo_build.lock \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..85d8bcf --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# WIP: hugo-theme-chirpy \ No newline at end of file diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..25b6752 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,5 @@ ++++ +date = '{{ .Date }}' +draft = true +title = '{{ replace .File.ContentBaseName "-" " " | title }}' ++++ diff --git a/assets/sass/abstracts/_breakpoints.scss b/assets/sass/abstracts/_breakpoints.scss new file mode 100644 index 0000000..e40cefe --- /dev/null +++ b/assets/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/assets/sass/abstracts/_index.scss b/assets/sass/abstracts/_index.scss new file mode 100644 index 0000000..6c9e21c --- /dev/null +++ b/assets/sass/abstracts/_index.scss @@ -0,0 +1,4 @@ +@forward 'variables'; +@forward 'mixins'; +@forward 'placeholders'; +@forward 'breakpoints'; diff --git a/assets/sass/abstracts/_mixins.scss b/assets/sass/abstracts/_mixins.scss new file mode 100644 index 0000000..c5eeee3 --- /dev/null +++ b/assets/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/assets/sass/abstracts/_placeholders.scss b/assets/sass/abstracts/_placeholders.scss new file mode 100644 index 0000000..9a2b8ac --- /dev/null +++ b/assets/sass/abstracts/_placeholders.scss @@ -0,0 +1,160 @@ +@use 'variables' as v; +@use 'mixins' as mx; + +%heading { + color: var(--heading-color); + font-weight: 400; + font-family: v.$font-family-heading; + scroll-margin-top: 3.5rem; +} + +%anchor { + .anchor { + font-size: 80%; + } + + @media (hover: hover) { + .anchor { + visibility: hidden; + opacity: 0; + transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s; + } + + &:hover { + .anchor { + visibility: visible; + opacity: 1; + transition: opacity 0.25s ease-in, visibility 0s ease-in 0s; + } + } + } +} + +%tag-hover { + background: var(--tag-hover); + transition: background 0.35s ease-in-out; +} + +%table-cell { + padding: 0.4rem 1rem; + font-size: 95%; + white-space: nowrap; +} + +%link-hover { + color: #d2603a !important; + border-bottom: 1px solid #d2603a; + text-decoration: none; +} + +%link-color { + color: var(--link-color); +} + +%link-underline { + border-bottom: 1px solid var(--link-underline-color); +} + +%clickable-transition { + transition: all 0.3s ease-in-out; +} + +%no-cursor { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +%no-bottom-border { + border-bottom: none; +} + +%cursor-pointer { + cursor: pointer; +} + +%normal-font-style { + font-style: normal; +} + +%rounded { + border-radius: v.$radius-lg; +} + +%img-caption { + + em { + display: block; + text-align: center; + font-style: normal; + font-size: 80%; + padding: 0; + color: #6d6c6c; + } +} + +%sidebar-links { + color: var(--sidebar-muted-color); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +%text-clip { + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +%text-ellipsis { + @include mx.text-ellipsis; +} + +%text-highlight { + color: var(--text-muted-highlight-color); + font-weight: 600; +} + +%text-sm { + font-size: 0.85rem; +} + +%text-xs { + font-size: 0.8rem; +} + +%sup-fn-target { + &:target { + background-color: var(--footnote-target-bg); + width: -moz-fit-content; + width: -webkit-fit-content; + width: fit-content; + transition: background-color 1.75s ease-in-out; + } +} + +%btn-color { + button i { + color: #999999; + } +} + +%code-snippet-bg { + background-color: var(--highlight-bg-color); +} + +%code-snippet-padding { + padding-left: 1rem; + padding-right: 1.5rem; +} + +%max-w-100 { + max-width: 100%; +} + +%panel-border { + border-left: 1px solid var(--main-border-color); +} diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss new file mode 100644 index 0000000..0194e40 --- /dev/null +++ b/assets/sass/abstracts/_variables.scss @@ -0,0 +1,30 @@ +/* sidebar */ + +$sidebar-width: 260px !default; /* the basic width */ +$sidebar-width-large: 300px !default; /* screen width: >= 1650px */ +$sb-btn-gap: 0.8rem !default; +$sb-btn-gap-lg: 1rem !default; + +/* other framework sizes */ + +$topbar-height: 3rem !default; +$search-max-width: 200px !default; +$footer-height: 5rem !default; +$footer-height-large: 6rem !default; /* screen width: < 850px */ +$main-content-max-width: 1250px !default; +$radius-sm: 6px !default; +$radius-lg: 10px !default; +$back2top-size: 2.75rem !default; + +/* syntax highlight */ + +$code-font-size: 0.85rem !default; +$code-header-height: 2.25rem !default; +$code-dot-size: 0.75rem !default; +$code-dot-gap: 0.5rem !default; +$code-icon-width: 1.75rem !default; + +/* fonts */ + +$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default; +$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default; diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss new file mode 100644 index 0000000..19f153b --- /dev/null +++ b/assets/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/assets/sass/base/_index.scss b/assets/sass/base/_index.scss new file mode 100644 index 0000000..611d28f --- /dev/null +++ b/assets/sass/base/_index.scss @@ -0,0 +1,4 @@ +@forward 'reset'; +@forward 'base'; +@forward 'typography'; +@forward 'syntax'; diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss new file mode 100644 index 0000000..1e5a629 --- /dev/null +++ b/assets/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/assets/sass/base/_syntax.scss b/assets/sass/base/_syntax.scss new file mode 100644 index 0000000..69924fc --- /dev/null +++ b/assets/sass/base/_syntax.scss @@ -0,0 +1,253 @@ +@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); + margin-top: 0.5rem; + margin-bottom: 1.2em; /* Override BS Inline-code style */ +} + +.highlight { + @extend %rounded; + @extend %code-snippet-bg; + + overflow: auto; + padding-bottom: 0.75rem; + + @at-root figure#{&} { + @extend %code-snippet-bg; + } + + pre { + margin-bottom: 0; + font-size: v.$code-font-size; + line-height: 1.4rem; + word-wrap: normal; /* Fixed Safari overflow-x */ + } + + table { + td { + &:first-child { + display: inline-block; + margin-left: 1rem; + margin-right: 0.75rem; + } + + &:last-child { + padding-right: 2rem !important; + } + + pre { + overflow: visible; /* Fixed iOS safari overflow-x */ + word-break: normal; /* Fixed iOS safari linenos code break */ + } + } + } + + .lineno { + text-align: right; + color: var(--highlight-lineno-color); + -webkit-user-select: none; + -moz-user-select: none; + -o-user-select: none; + -ms-user-select: none; + user-select: none; + } +} /* .highlight */ + +code { + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + color: var(--code-color); + + &.highlighter-rouge { + font-size: v.$code-font-size; + padding: 3px 5px; + word-break: break-word; + border-radius: v.$radius-sm; + background-color: var(--inline-code-bg); + } + + &.filepath { + background-color: inherit; + color: var(--filepath-text-color); + font-weight: 600; + padding: 0; + } + + a > &.highlighter-rouge { + padding-bottom: 0; /* show link's underlinke */ + color: inherit; + } + + a:hover > &.highlighter-rouge { + border-bottom: none; + } + + blockquote & { + color: inherit; + } +} + +td.rouge-code { + @extend %code-snippet-padding; + + /* + Prevent some browser extends from + changing the URL string of code block. + */ + a { + color: inherit !important; + border-bottom: none !important; + pointer-events: none; + } +} + +div[class^='language-'] { + @extend %rounded; + @extend %code-snippet-bg; + + box-shadow: var(--language-border-color) 0 0 0 1px; + + .content > & { + @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 { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} + +/* Hide line numbers for default, console, and terminal code snippets */ +div { + &.nolineno, + &.language-plaintext, + &.language-console, + &.language-terminal { + td:first-child { + padding: 0 !important; + margin-right: 0; + + .lineno { + display: none; + } + } + } +} + +.code-header { + @extend %no-cursor; + + display: flex; + justify-content: space-between; + align-items: center; + height: v.$code-header-height; + margin-left: 0.75rem; + margin-right: 0.25rem; + + /* the label block */ + span { + line-height: v.$code-header-height; + + /* label icon */ + i { + font-size: 1rem; + width: v.$code-icon-width; + color: var(--code-header-icon-color); + + &.small { + font-size: 70%; + } + } + + @at-root [file] #{&} > i { + position: relative; + top: 1px; /* center the file icon */ + } + + /* label text */ + &::after { + content: attr(data-label-text); + font-size: 0.85rem; + font-weight: 600; + color: var(--code-header-text-color); + } + } + + /* clipboard */ + button { + @extend %cursor-pointer; + @extend %rounded; + + border: 1px solid transparent; + height: v.$code-header-height; + width: v.$code-header-height; + padding: 0; + background-color: inherit; + + i { + color: var(--code-header-icon-color); + } + + &[timeout] { + &:hover { + border-color: var(--clipboard-checked-color); + } + + i { + color: var(--clipboard-checked-color); + } + } + + &:focus { + outline: none; + } + + &:not([timeout]):hover { + background-color: rgba(128, 128, 128, 0.37); + + i { + color: white; + } + } + } +} diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..4cf3964 --- /dev/null +++ b/assets/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/assets/sass/components/_buttons.scss b/assets/sass/components/_buttons.scss new file mode 100644 index 0000000..bd7363e --- /dev/null +++ b/assets/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/assets/sass/components/_index.scss b/assets/sass/components/_index.scss new file mode 100644 index 0000000..ffbb908 --- /dev/null +++ b/assets/sass/components/_index.scss @@ -0,0 +1,2 @@ +@forward 'buttons'; +@forward 'popups'; diff --git a/assets/sass/components/_popups.scss b/assets/sass/components/_popups.scss new file mode 100644 index 0000000..ca3e2fc --- /dev/null +++ b/assets/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/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss new file mode 100644 index 0000000..fd49ea0 --- /dev/null +++ b/assets/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/assets/sass/layout/_index.scss b/assets/sass/layout/_index.scss new file mode 100644 index 0000000..fa75daf --- /dev/null +++ b/assets/sass/layout/_index.scss @@ -0,0 +1,4 @@ +@forward 'sidebar'; +@forward 'topbar'; +@forward 'panel'; +@forward 'footer'; diff --git a/assets/sass/layout/_panel.scss b/assets/sass/layout/_panel.scss new file mode 100644 index 0000000..c0d5e9e --- /dev/null +++ b/assets/sass/layout/_panel.scss @@ -0,0 +1,70 @@ +@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; + + &:only-child { + position: -webkit-sticky; + position: sticky; + } + + > section { + @extend %panel-border; + + padding-left: 1rem; + + &:not(:first-child) { + margin-top: 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; + } + } + + > :last-child { + margin-bottom: 4rem; + } + + @include bp.lt(bp.get(xl)) { + display: none; + } +} + +#access-lastmod { + a { + color: inherit; + + &:hover { + @extend %link-hover; + } + + @extend %no-bottom-border; + } +} diff --git a/assets/sass/layout/_sidebar.scss b/assets/sass/layout/_sidebar.scss new file mode 100644 index 0000000..eaad470 --- /dev/null +++ b/assets/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/assets/sass/layout/_topbar.scss b/assets/sass/layout/_topbar.scss new file mode 100644 index 0000000..eb0aea9 --- /dev/null +++ b/assets/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/assets/sass/main.bundle.scss b/assets/sass/main.bundle.scss new file mode 100644 index 0000000..5d84f93 --- /dev/null +++ b/assets/sass/main.bundle.scss @@ -0,0 +1,2 @@ +@use 'vendors/bootstrap'; +@use 'main'; diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..3bbb70d --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,4 @@ +@forward 'base'; +@forward 'components'; +@forward 'layout'; +@forward 'pages'; diff --git a/assets/sass/pages/_archives.scss b/assets/sass/pages/_archives.scss new file mode 100644 index 0000000..86e77a8 --- /dev/null +++ b/assets/sass/pages/_archives.scss @@ -0,0 +1,140 @@ +@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 { + content: ''; + width: $timeline-width; + position: relative; + float: left; + background-color: var(--timeline-color); + } + + .year { + height: 3.5rem; + font-size: 1.5rem; + position: relative; + left: 2px; + margin-left: -$timeline-width; + + &::before { + @extend %timeline; + + height: 72px; + left: 79px; + bottom: 16px; + } + + &:first-child::before { + @extend %timeline; + + height: 32px; + top: 24px; + } + + /* Year dot */ + &::after { + content: ''; + display: inline-block; + position: relative; + border-radius: 50%; + width: 12px; + height: 12px; + left: 21.5px; + border: 3px solid; + background-color: var(--timeline-year-dot-color); + border-color: var(--timeline-node-bg); + box-shadow: 0 0 2px 0 #c2c6cc; + z-index: 1; + } + } + + ul { + li { + font-size: 1.1rem; + line-height: 3rem; + + @extend %text-ellipsis; + + &:nth-child(odd) { + background-color: var(--main-bg, #ffffff); + background-image: linear-gradient( + to left, + #ffffff, + #fbfbfb, + #fbfbfb, + #fbfbfb, + #ffffff + ); + } + + &::before { + @extend %timeline; + + top: 0; + left: 77px; + height: 3.1rem; + } + } + + &:last-child li:last-child::before { + height: 1.5rem; + } + } /* #archives ul */ + + .date { + white-space: nowrap; + display: inline-block; + position: relative; + right: 0.5rem; + + &.month { + width: 1.4rem; + text-align: center; + } + + &.day { + font-size: 85%; + font-family: Lato, sans-serif; + } + } + + a { + /* post title in Archvies */ + margin-left: 2.5rem; + position: relative; + top: 0.1rem; + + &:hover { + border-bottom: none; + } + + &::before { + /* the dot before post title */ + content: ''; + display: inline-block; + position: relative; + border-radius: 50%; + width: 8px; + height: 8px; + float: left; + top: 1.35rem; + left: 71px; + background-color: var(--timeline-node-bg); + box-shadow: 0 0 3px 0 #c2c6cc; + z-index: 1; + } + } +} /* #archives */ diff --git a/assets/sass/pages/_categories.scss b/assets/sass/pages/_categories.scss new file mode 100644 index 0000000..64a2df5 --- /dev/null +++ b/assets/sass/pages/_categories.scss @@ -0,0 +1,82 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/placeholders'; + +%-category-icon-color { + color: gray; +} + +.categories { + margin-bottom: 2rem; + border-color: var(--categories-border); + + &.card, + .list-group { + @extend %rounded; + } + + .card-header { + $radius: calc(v.$radius-lg - 1px); + + padding: 0.75rem; + border-radius: $radius; + border-bottom: 0; + + &.hide-border-bottom { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + + i { + @extend %-category-icon-color; + + font-size: 86%; /* fontawesome icons */ + } + + .list-group-item { + border-left: none; + border-right: none; + padding-left: 2rem; + + &:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + &:last-child { + border-bottom: 0; + } + } +} /* .categories */ + +.category-trigger { + width: 1.7rem; + height: 1.7rem; + border-radius: 50%; + text-align: center; + color: #6c757d !important; + + i { + position: relative; + height: 0.7rem; + width: 1rem; + transition: transform 300ms ease; + } + + &:hover { + i { + color: var(--categories-icon-hover-color); + } + } +} + +/* only works on desktop */ +@media (hover: hover) { + .category-trigger:hover { + background-color: var(--categories-hover-bg); + } +} + +.rotate { + transform: rotate(-90deg); +} diff --git a/assets/sass/pages/_category-tag.scss b/assets/sass/pages/_category-tag.scss new file mode 100644 index 0000000..0a82712 --- /dev/null +++ b/assets/sass/pages/_category-tag.scss @@ -0,0 +1,63 @@ +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; + +.dash { + margin: 0 0.5rem 0.6rem 0.5rem; + border-bottom: 2px dotted var(--dash-color); +} + +#page-category, +#page-tag { + ul > li { + line-height: 1.5rem; + padding: 0.6rem 0; + + /* dot */ + &::before { + background: #999999; + width: 5px; + height: 5px; + border-radius: 50%; + display: block; + content: ''; + position: relative; + top: 0.6rem; + margin-right: 0.5rem; + + @include bp.lt(bp.get(sm)) { + margin: 0 0.5rem; + } + } + + /* post's title */ + > a { + @extend %no-bottom-border; + + font-size: 1.1rem; + + @include bp.lt(bp.get(sm)) { + @include mx.text-ellipsis; + } + } + } +} + +/* tag icon */ +#page-tag h1 > i { + font-size: 1.2rem; +} + +#page-category h1 > i { + font-size: 1.25rem; +} + +#page-category, +#page-tag, +#access-lastmod { + a:hover { + @extend %link-hover; + + margin-bottom: -1px; /* Avoid jumping */ + } +} diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss new file mode 100644 index 0000000..7a4bbf9 --- /dev/null +++ b/assets/sass/pages/_home.scss @@ -0,0 +1,173 @@ +@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; + } + + &:not(:last-child) { + margin-bottom: 1.25rem; + } + } + + .card { + border: 0; + background: none; + + %img-radius { + 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 { + @extend %img-radius; + + img { + @extend %img-radius; + } + } + + .card-body { + height: 100%; + padding: 1rem; + + @include bp.md { + padding: 1.75rem 1.75rem 1.25rem; + } + + .card-title { + @extend %text-clip; + + color: var(--heading-color) !important; + font-size: 1.25rem; + } + + %muted { + color: var(--text-muted-color) !important; + } + + .card-text { + @include bp.md { + display: inherit !important; + } + + &.content { + @extend %muted; + + p { + @extend %text-clip; + + line-height: 1.5; + margin: 0; + } + } + } + + .post-meta { + @extend %muted; + + i { + &:not(:first-child) { + margin-left: 1.5rem; + + @include bp.md { + margin-left: 1.75rem; + } + } + } + + em { + @extend %normal-font-style; + + color: inherit; + } + + > div:first-child { + display: block; + + @extend %text-ellipsis; + } + } + } + } +} /* #post-list */ + +.pagination { + color: var(--text-color); + 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; + display: -webkit-box; + -webkit-box-pack: center; + -webkit-box-align: center; + border-radius: 0.5rem; + border: 0; + background-color: inherit; + } + + &.active { + .page-link { + background-color: var(--btn-paginator-hover-color); + } + } + + &:not(.active) { + .page-link { + &:hover { + box-shadow: inset var(--btn-border-color) 0 0 0 1px; + } + } + } + + &.disabled { + cursor: not-allowed; + + .page-link { + color: rgba(108, 117, 125, 0.57); + } + } + } /* .page-item */ + + .page-index { + @include bp.lg { + display: none; + } + } +} diff --git a/assets/sass/pages/_index.scss b/assets/sass/pages/_index.scss new file mode 100644 index 0000000..74e9ea6 --- /dev/null +++ b/assets/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/assets/sass/pages/_post.scss b/assets/sass/pages/_post.scss new file mode 100644 index 0000000..12a301f --- /dev/null +++ b/assets/sass/pages/_post.scss @@ -0,0 +1,498 @@ +@use '../abstracts/variables' as v; +@use '../abstracts/breakpoints' as bp; +@use '../abstracts/mixins' as mx; +@use '../abstracts/placeholders'; + +%-btn-post-nav { + width: 50%; + position: relative; + border-color: var(--btn-border-color); +} + +@mixin -dot($pl: 0.25rem, $pr: 0.25rem) { + content: '\2022'; + padding-left: $pl; + padding-right: $pr; +} + +header { + .post-desc { + @extend %heading; + + font-size: 1.125rem; + line-height: 1.6; + } + + .post-meta { + span + span::before { + @include -dot; + } + + em, + time { + @extend %text-highlight; + } + + em { + a { + color: inherit; + } + } + } + + h1 + .post-meta { + margin-top: 1.5rem; + } +} + +.post-tail-wrapper { + @extend %text-sm; + + margin-top: 6rem; + border-bottom: 1px double var(--main-border-color); + + .license-wrapper { + line-height: 1.2rem; + + > a { + @extend %text-highlight; + + &:hover { + @extend %link-hover; + } + } + + span:last-child { + @extend %text-sm; + } + } /* .license-wrapper */ + + .post-meta a:not(:hover) { + @extend %link-underline; + } + + .share-wrapper { + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + %icon-size { + font-size: 1.125rem; + } + + .share-icons { + display: flex; + + i { + color: var(--btn-share-color); + + @extend %icon-size; + } + + > * { + @extend %icon-size; + + margin-left: 0.5rem; + + &:hover { + i { + @extend %btn-share-hover; + } + } + } + + button { + padding: 0; + border: none; + line-height: inherit; + + @extend %cursor-pointer; + } + } /* .share-icons */ + } /* .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: 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); + --wc-stm-form-cancel-background-color: var(--sidebar-btn-bg); + --wc-stm-form-button-background-color-hover: #007bff; + --wc-stm-form-button-color-hover: white; + + font-size: 1rem; +} + +.post-tags { + line-height: 2rem; + + .post-tag { + &:hover { + @extend %link-hover; + @extend %tag-hover; + @extend %no-bottom-border; + } + } +} + +.post-navigation { + @include bp.lt(bp.get(lg)) { + @include mx.pl-pr(0); + @include mx.ml-mr(-0.5rem); + } + + .btn { + @extend %-btn-post-nav; + + &:not(:hover) { + color: var(--link-color); + } + + &:hover { + &:not(.disabled)::before { + color: whitesmoke; + } + } + + &.disabled { + @extend %-btn-post-nav; + + pointer-events: auto; + cursor: not-allowed; + background: none; + color: gray; + } + + &.btn-outline-primary.disabled:focus { + box-shadow: none; + } + + &::before { + color: var(--text-muted-color); + font-size: 0.65rem; + text-transform: uppercase; + content: attr(aria-label); + } + + &:first-child { + border-radius: v.$radius-lg 0 0 v.$radius-lg; + left: 0.5px; + } + + &:last-child { + border-radius: 0 v.$radius-lg v.$radius-lg 0; + right: 0.5px; + } + } + + p { + font-size: 1.1rem; + line-height: 1.5rem; + margin-top: 0.3rem; + white-space: normal; + } +} /* .post-navigation */ + +@media (hover: hover) { + .post-navigation { + .btn, + .btn::before { + transition: all 0.35s ease-in-out; + } + } +} + +@-webkit-keyframes fade-up { + from { + opacity: 0; + margin-top: 4rem; + } + + to { + opacity: 1; + } +} + +@keyframes fade-up { + from { + opacity: 0; + margin-top: 4rem; + } + + to { + opacity: 1; + } +} + +/* TOC panel */ + +%top-cover { + content: ''; + display: block; + position: -webkit-sticky; + position: sticky; + top: 0; + width: 100%; + height: 3rem; + background: linear-gradient(var(--main-bg) 50%, transparent); +} + +#toc-wrapper { + top: 0; + transition: top 0.2s ease-in-out; + overflow-y: auto; + max-height: 100vh; + scrollbar-width: none; + margin-top: 2rem; + + &:not(.invisible) { + -webkit-animation: fade-up 0.8s; + animation: fade-up 0.8s; + } + + ul { + list-style: none; + font-size: 0.85rem; + line-height: 1.25; + padding-left: 0; + + li { + a { + padding: 0.4rem 0 0.4rem 1.25rem; + } + } + + /* Overwrite TOC plugin style */ + + .toc-link { + display: block; + + @extend %text-ellipsis; + + &:hover { + color: var(--toc-highlight); + text-decoration: none; + } + + &::before { + display: none; + } + } + + .is-active-link { + color: var(--toc-highlight) !important; + font-weight: 600; + + &::before { + display: inline-block; + width: 1px; + height: 1.25rem; + background-color: var(--toc-highlight) !important; + } + } + + ul { + padding-left: 0.75rem; + } + } + + @at-root .toc-border-cover { + @extend %top-cover; + + margin-bottom: -4rem; + } + + &::before { + @extend %top-cover; + } + + &::after { + content: ''; + position: fixed; + bottom: 0; + width: 15%; + height: 2.25rem; + margin-left: -1px; + background: linear-gradient(transparent, var(--main-bg) 70%); + } + + > * { + @extend %panel-border; + } +} + +/* --- TOC button, bar and popup in mobile/tablet --- */ + +#toc-bar { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1; + margin: 0 -1rem; + 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.375rem; + padding: 0 0.75rem; + color: inherit; + } + + &.invisible { + top: -#{v.$topbar-height}; + transition: none; + } +} + +#toc-solo-trigger { + color: var(--text-muted-color); + border-color: var(--btn-border-color); + border-radius: v.$radius-lg; + + @include bp.xl { + display: none !important; + } + + .label { + font-size: 1rem; + font-family: v.$font-family-heading; + } + + &:hover { + box-shadow: none; + background: none; + } +} + +@mixin slide-in { + from { + opacity: 0.7; + transform: translateY(-#{v.$topbar-height}); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@mixin slide-out { + 0% { + transform: translateY(0); + opacity: 1; + } + + 100% { + transform: translateY(-#{v.$topbar-height}); + opacity: 0; + } +} + +@-webkit-keyframes slide-in { + @include slide-in; +} + +@keyframes slide-in { + @include slide-in; +} + +@-webkit-keyframes slide-out { + @include slide-out; +} + +@keyframes slide-out { + @include slide-out; +} + +/* --- Related Posts --- */ + +#related-posts { + > h3 { + @include mx.label(1.1rem, 600); + } + + time { + @extend %normal-font-style; + @extend %text-xs; + + color: var(--text-muted-color); + } + + p { + @extend %text-ellipsis; + + font-size: 0.9rem; + margin-bottom: 0.5rem; + white-space: break-spaces; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + .card { + h4 { + @extend %text-clip; + } + } +} + +/* stylelint-disable-next-line selector-id-pattern */ +#disqus_thread { + min-height: 8.5rem; +} + +.utterances { + max-width: 100%; + min-height: 269px; +} + +%btn-share-hover { + color: var(--btn-share-hover-color) !important; +} + +.share-label { + @include mx.label(inherit, 400, inherit); + + &::after { + content: ':'; + } +} + +.content > p > img { + @include bp.lte(bp.get(md)) { + max-width: calc(100% + 1rem); + } +} + +h2, +h3, +h4 { + @include bp.xl { + scroll-margin-top: 2rem; + } +} diff --git a/assets/sass/pages/_search.scss b/assets/sass/pages/_search.scss new file mode 100644 index 0000000..dfb044e --- /dev/null +++ b/assets/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/assets/sass/pages/_tags.scss b/assets/sass/pages/_tags.scss new file mode 100644 index 0000000..d22f20d --- /dev/null +++ b/assets/sass/pages/_tags.scss @@ -0,0 +1,23 @@ +@use '../abstracts/breakpoints' as bp; + +.tag { + border-radius: 0.7em; + padding: 6px 8px 7px; + margin-right: 0.8rem; + line-height: 3rem; + letter-spacing: 0; + border: 1px solid var(--tag-border) !important; + box-shadow: 0 0 3px 0 var(--tag-shadow); + + span { + margin-left: 0.6em; + font-size: 0.7em; + font-family: Oswald, sans-serif; + } +} + +#tags { + @include bp.lt(bp.get(lg)) { + justify-content: center !important; + } +} diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss new file mode 100644 index 0000000..8c2f6ea --- /dev/null +++ b/assets/sass/themes/_dark.scss @@ -0,0 +1,303 @@ +@mixin styles { + color-scheme: dark; + + /* Framework color */ + --main-bg: rgb(27, 27, 30); + --mask-bg: rgb(68, 69, 70); + --main-border-color: rgb(44, 45, 45); + + /* Common color */ + --text-color: rgb(175, 176, 177); + --text-muted-color: #868686; + --text-muted-highlight-color: #aeaeae; + --heading-color: #cccccc; + --label-color: #a7a7a7; + --blockquote-border-color: rgb(66, 66, 66); + --blockquote-text-color: #868686; + --link-color: rgb(138, 180, 248); + --link-underline-color: rgb(82, 108, 150); + --button-bg: #1e1e1e; + --btn-border-color: #2e2f31; + --btn-backtotop-color: var(--text-color); + --btn-backtotop-border-color: #212122; + --card-header-bg: #292929; + --checkbox-color: rgb(118, 120, 121); + --checkbox-checked-color: var(--link-color); + --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); + --shimmer-bg: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(58, 55, 55, 0.4) 50%, + rgba(255, 255, 255, 0) 100% + ); + + /* Sidebar */ + --site-title-color: #717070; + --site-subtitle-color: #868686; + --sidebar-bg: #1e1e1e; + --sidebar-border-color: #292929; + --sidebar-muted-color: #868686; + --sidebar-active-color: rgb(255, 255, 255, 0.95); + --sidebar-hover-bg: #262626; + --sidebar-btn-bg: #232328; + --sidebar-btn-color: #787878; + --avatar-border-color: rgb(206, 206, 206, 0.9); + + /* Topbar */ + --topbar-bg: rgb(27, 27, 30, 0.64); + --topbar-text-color: var(--text-color); + --search-border-color: rgb(55, 55, 55); + --search-icon-color: rgb(100, 102, 105); + --input-focus-border-color: rgb(112, 114, 115); + + /* Home page */ + --post-list-text-color: rgb(175, 176, 177); + --btn-patinator-text-color: var(--text-color); + --btn-paginator-hover-color: #2e2e2e; + + /* Posts */ + --toc-highlight: rgb(116, 178, 243); + --toc-popup-border-color: #373737; + --tag-hover: rgb(43, 56, 62); + --tb-odd-bg: #252526; /* odd rows of the posts' table */ + --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ + --tb-border-color: var(--tb-odd-bg); + --footnote-target-bg: rgb(63, 81, 181); + --btn-share-color: #6c757d; + --btn-share-hover-color: #bfc1ca; + --card-bg: #1e1e1e; + --card-hovor-bg: #464d51; + --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0, + rgb(137, 135, 135, 0.24) 0 0 0 1px; + --kbd-wrap-color: #6a6a6a; + --kbd-text-color: #d3d3d3; + --kbd-bg-color: #242424; + --prompt-text-color: rgb(216, 212, 212, 0.75); + --prompt-tip-bg: rgb(22, 60, 36, 0.64); + --prompt-tip-icon-color: rgb(15, 164, 15, 0.81); + --prompt-info-bg: rgb(7, 59, 104, 0.8); + --prompt-info-icon-color: #0075d1; + --prompt-warning-bg: rgb(90, 69, 3, 0.88); + --prompt-warning-icon-color: rgb(255, 165, 0, 0.8); + --prompt-danger-bg: rgb(86, 28, 8, 0.8); + --prompt-danger-icon-color: #cd0202; + + /* Tags */ + --tag-border: rgb(59, 79, 88); + --tag-shadow: rgb(32, 33, 33); + --dash-color: rgb(63, 65, 68); + --search-tag-bg: #292828; + + /* Categories */ + --categories-border: rgb(64, 66, 69, 0.5); + --categories-hover-bg: rgb(73, 75, 76); + --categories-icon-hover-color: white; + + /* Archive */ + --timeline-node-bg: rgb(150, 152, 156); + --timeline-color: rgb(63, 65, 68); + --timeline-year-dot-color: var(--timeline-color); + + /* 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; + } + + /* Categories */ + .categories.card, + .list-group-item { + background-color: var(--card-bg); + } + + .categories { + .card-header { + background-color: var(--card-header-bg); + } + + .list-group-item { + border-left: none; + border-right: none; + padding-left: 2rem; + border-color: var(--categories-border); + + &:last-child { + border-bottom-color: var(--card-bg); + } + } + } + + #archives li:nth-child(odd) { + background-image: linear-gradient( + to left, + rgb(26, 26, 30), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(26, 26, 30) + ); + } + + /* stylelint-disable-next-line selector-id-pattern */ + #disqus_thread { + color-scheme: none; + } + + /* --- 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/assets/sass/themes/_light.scss b/assets/sass/themes/_light.scss new file mode 100644 index 0000000..14c3962 --- /dev/null +++ b/assets/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/hugo.toml b/hugo.toml new file mode 100644 index 0000000..7e568b8 --- /dev/null +++ b/hugo.toml @@ -0,0 +1,3 @@ +baseURL = 'https://example.org/' +languageCode = 'en-us' +title = 'My New Hugo Site' diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..19480e6 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,46 @@ + + + {{ $opts := dict + "transpiler" "dartsass" + "targetPath" "css/main.css" + "enableSourceMap" true + }} + {{ $sass := resources.Get "sass/main.scss" }} + {{ $style := $sass | toCSS $opts | minify | fingerprint }} + + + + + +
+
+ +
+
+ {{ block "main" . }}{{ end }} +
+ + + +
+ +
+ +
+
+
+
+ + +
+ +
+ + \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..924d072 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,3 @@ +{{ define "main" }} +

Welcome to My Site!

+{{ end }} \ No newline at end of file