From debf54e2f7d375c4c1c92fb0d85141341c7cfed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 21 May 2022 15:01:19 +0800 Subject: [PATCH] :lipstick: Finished the common style settings. --- assets/css/_common/outline/footer/index.scss | 100 ++++++ .../css/_common/outline/header/bookmark.scss | 24 ++ .../_common/outline/header/github-banner.scss | 59 ++++ assets/css/_common/outline/header/index.scss | 38 +++ assets/css/_common/outline/header/menu.scss | 56 ++++ .../css/_common/outline/header/site-meta.scss | 49 +++ .../css/_common/outline/header/site-nav.scss | 24 ++ assets/css/_common/outline/index.scss | 5 + assets/css/_common/outline/mobile.scss | 85 ++++++ assets/css/_common/outline/sidebar/index.scss | 38 +++ .../outline/sidebar/sidebar-author-links.scss | 11 + .../outline/sidebar/sidebar-author.scss | 29 ++ .../outline/sidebar/sidebar-blogroll.scss | 15 + .../outline/sidebar/sidebar-button.scss | 15 + .../outline/sidebar/sidebar-dimmer.scss | 24 ++ .../_common/outline/sidebar/sidebar-nav.scss | 57 ++++ .../_common/outline/sidebar/sidebar-toc.scss | 61 ++++ .../outline/sidebar/sidebar-toggle.scss | 21 ++ .../_common/outline/sidebar/site-state.scss | 28 ++ assets/css/_common/scaffolding/base.scss | 99 ++++++ assets/css/_common/scaffolding/buttons.scss | 26 ++ assets/css/_common/scaffolding/comments.scss | 39 +++ .../scaffolding/highlight/copy-code.scss | 55 ++++ .../_common/scaffolding/highlight/index.scss | 141 +++++++++ assets/css/_common/scaffolding/index.scss | 12 + assets/css/_common/scaffolding/normalize.scss | 289 ++++++++++++++++++ .../css/_common/scaffolding/pagination.scss | 55 ++++ assets/css/_common/scaffolding/tables.scss | 39 +++ .../scaffolding/tags/blockquote-center.scss | 34 +++ .../scaffolding/tags/group-pictures.scss | 20 ++ .../css/_common/scaffolding/tags/index.scss | 8 + .../css/_common/scaffolding/tags/label.scss | 12 + .../_common/scaffolding/tags/link-grid.scss | 113 +++++++ .../css/_common/scaffolding/tags/mermaid.scss | 6 + assets/css/_common/scaffolding/tags/note.scss | 114 +++++++ assets/css/_common/scaffolding/tags/pdf.scss | 8 + assets/css/_common/scaffolding/tags/tabs.scss | 103 +++++++ assets/css/_common/scaffolding/toggles.scss | 26 ++ assets/css/_sitevars.scss | 72 ++++- assets/css/_variables/Gemini.scss | 18 ++ assets/css/_variables/Pisces.scss | 68 +++++ assets/css/main.scss | 13 +- assets/css/noscript.scss | 30 ++ exampleSite/config.yaml | 151 ++++++++- 44 files changed, 2281 insertions(+), 9 deletions(-) create mode 100644 assets/css/_common/outline/footer/index.scss create mode 100644 assets/css/_common/outline/header/bookmark.scss create mode 100644 assets/css/_common/outline/header/github-banner.scss create mode 100644 assets/css/_common/outline/header/index.scss create mode 100644 assets/css/_common/outline/header/menu.scss create mode 100644 assets/css/_common/outline/header/site-meta.scss create mode 100644 assets/css/_common/outline/header/site-nav.scss create mode 100644 assets/css/_common/outline/index.scss create mode 100644 assets/css/_common/outline/mobile.scss create mode 100644 assets/css/_common/outline/sidebar/index.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-author-links.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-author.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-blogroll.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-button.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-dimmer.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-nav.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-toc.scss create mode 100644 assets/css/_common/outline/sidebar/sidebar-toggle.scss create mode 100644 assets/css/_common/outline/sidebar/site-state.scss create mode 100644 assets/css/_common/scaffolding/base.scss create mode 100644 assets/css/_common/scaffolding/buttons.scss create mode 100644 assets/css/_common/scaffolding/comments.scss create mode 100644 assets/css/_common/scaffolding/highlight/copy-code.scss create mode 100644 assets/css/_common/scaffolding/highlight/index.scss create mode 100644 assets/css/_common/scaffolding/index.scss create mode 100644 assets/css/_common/scaffolding/normalize.scss create mode 100644 assets/css/_common/scaffolding/pagination.scss create mode 100644 assets/css/_common/scaffolding/tables.scss create mode 100644 assets/css/_common/scaffolding/tags/blockquote-center.scss create mode 100644 assets/css/_common/scaffolding/tags/group-pictures.scss create mode 100644 assets/css/_common/scaffolding/tags/index.scss create mode 100644 assets/css/_common/scaffolding/tags/label.scss create mode 100644 assets/css/_common/scaffolding/tags/link-grid.scss create mode 100644 assets/css/_common/scaffolding/tags/mermaid.scss create mode 100644 assets/css/_common/scaffolding/tags/note.scss create mode 100644 assets/css/_common/scaffolding/tags/pdf.scss create mode 100644 assets/css/_common/scaffolding/tags/tabs.scss create mode 100644 assets/css/_common/scaffolding/toggles.scss create mode 100644 assets/css/_variables/Gemini.scss create mode 100644 assets/css/_variables/Pisces.scss create mode 100644 assets/css/noscript.scss diff --git a/assets/css/_common/outline/footer/index.scss b/assets/css/_common/outline/footer/index.scss new file mode 100644 index 0000000..b7a2d9b --- /dev/null +++ b/assets/css/_common/outline/footer/index.scss @@ -0,0 +1,100 @@ +// Footer Section +// -------------------------------------------------- +.footer { + color: $grey-dark; + font-size: $font-size-small; + padding: 20px 0; + + &.footer-fixed { + bottom: 0; + left: 0; + position: absolute; + right: 0; + } +} + +// Flexbox layout makes it possible to reorder the child +// elements of .footer-inner through the `order` CSS property +.footer-inner { + box-sizing: border-box; + text-align: center; + @include flex-column(); + @include main-container(); +} + +.use-motion { + .footer { + opacity: 0; + } +} + +@keyframes icon-animate { + 0%, 100% { + transform: scale(1); + } + + 10%, 30% { + transform: scale(.9); + } + + 20%, 40%, 60%, 80% { + transform: scale(1.1); + } + + 50%, 70% { + transform: scale(1.1); + } +} + +.languages { + display: inline-block; + font-size: $font-size-large; + position: relative; + + .lang-select-label span { + margin: 0 .5em; + } + + .lang-select { + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + } +} + +.with-love { + color: $cfg_footer_icon_color; + display: inline-block; + margin: 0 5px; + + @if $cfg_footer_icon_animated { + animation: icon-animate 1.33s ease-in-out infinite; + } +} + +@if $cfg_footer_beian_enable { + .beian img { + display: inline-block; + margin: 0 3px; + vertical-align: middle; + } +} + +@if $cfg_busuanzi_enable { + .busuanzi-count { + @if $cfg_busuanzi_visitors { + #busuanzi_container_site_uv { + display: none; + } + } + + @if $cfg_busuanzi_views { + #busuanzi_container_site_pv { + display: none; + } + } + } +} diff --git a/assets/css/_common/outline/header/bookmark.scss b/assets/css/_common/outline/header/bookmark.scss new file mode 100644 index 0000000..32816a1 --- /dev/null +++ b/assets/css/_common/outline/header/bookmark.scss @@ -0,0 +1,24 @@ +@if $cfg_bookmark_enable { + .book-mark-link { + border-bottom: 0; + position: fixed; + top: -10px; + transition: top .3s; + @include sidebar-toggle-position(true); + + @include tablet-mobile() { + display: none; + } + + &::before { + color: convert($cfg_bookmark_color); + font-size: 32px; + line-height: 1; + @include font-family-icons('\f02e'); + } + } + + .book-mark-link:hover, .book-mark-link-fixed { + top: -2px; + } +} diff --git a/assets/css/_common/outline/header/github-banner.scss b/assets/css/_common/outline/header/github-banner.scss new file mode 100644 index 0000000..9c17380 --- /dev/null +++ b/assets/css/_common/outline/header/github-banner.scss @@ -0,0 +1,59 @@ +@if $cfg_github_banner_enable { + @keyframes octocat-wave { + 0%, 100% { + transform: rotate(0); + } + + 20%, 60% { + transform: rotate(-25deg); + } + + 40%, 80% { + transform: rotate(10deg); + } + } + + .github-corner { + :hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } + + svg { + color: white; + fill: var(--theme-color); + position: absolute; + right: 0; + top: 0; + z-index: $zindex-0; + } + + @include tablet-mobile() { + @if $cfg_local_search_enable or $cfg_algolia_search_enable { + display: none; + } + + svg { + @if ($scheme == 'Pisces') or ($scheme == 'Gemini') { + color: var(--theme-color); + fill: white; + } + } + + .github-corner:hover .octo-arm { + animation: none; + } + + .github-corner .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } + } + + @if $scheme == 'Mist' { + @include mobile() { + svg { + top: inherit; + } + } + } + } +} diff --git a/assets/css/_common/outline/header/index.scss b/assets/css/_common/outline/header/index.scss new file mode 100644 index 0000000..3326bd6 --- /dev/null +++ b/assets/css/_common/outline/header/index.scss @@ -0,0 +1,38 @@ +// Header Section +// -------------------------------------------------- +.headband { + background: $headband-bg; + height: $headband-height; + + @include tablet-mobile() { + display: none; + } +} + +// Fix issue #521 +header.header { + background: $head-bg; +} + +.header-inner { + @include main-container(); +} + +.site-brand-container { + display: flex; + flex-shrink: 0; + padding: 0 10px; +} + +.use-motion { + header.header, .site-brand-container .toggle { + opacity: 0; + } +} + +@import 'site-meta'; +@import 'site-nav'; +@import 'menu'; + +@import 'bookmark'; +@import 'github-banner'; diff --git a/assets/css/_common/outline/header/menu.scss b/assets/css/_common/outline/header/menu.scss new file mode 100644 index 0000000..495a7dd --- /dev/null +++ b/assets/css/_common/outline/header/menu.scss @@ -0,0 +1,56 @@ +// Menu +// -------------------------------------------------- +.menu { + margin: 0; + padding: 1em 0; + text-align: center; +} + +.menu-item { + display: inline-block; + list-style: none; + margin: 0 10px; + + @include mobile() { + display: block; + margin-top: 10px; + + &.menu-item-search { + display: none; + } + } + + a { + border-bottom: 0; + display: block; + font-size: $font-size-smaller; + transition: border-color $transition-ease; + + &:hover, &.menu-item-active { + background: var(--menu-item-bg-color); + } + } + + .fa, .fab, .far, .fas { + margin-right: 8px; + } + + .badge { + display: inline-block; + font-weight: bold; + line-height: 1; + margin-left: .35em; + margin-top: .35em; + text-align: center; + white-space: nowrap; + + @include mobile() { + float: right; + margin-left: 0; + } + } +} + +.use-motion .menu-item { + visibility: hidden; +} diff --git a/assets/css/_common/outline/header/site-meta.scss b/assets/css/_common/outline/header/site-meta.scss new file mode 100644 index 0000000..b79d678 --- /dev/null +++ b/assets/css/_common/outline/header/site-meta.scss @@ -0,0 +1,49 @@ +.site-meta { + flex-grow: 1; + text-align: center; + + @include mobile() { + text-align: center; + } +} + +.custom-logo-image { + margin-top: 20px; + + @include tablet-mobile() { + display: none; + } +} + +.brand { + border-bottom: 0; + color: var(--brand-color); + display: inline-block; + padding: 0 40px; + + &:hover { + color: var(--brand-hover-color); + } +} + +.site-title { + font-family: $font-family-logo; + font-size: $font-size-title; + font-weight: normal; + line-height: 1.5; + margin: 0; +} + +.site-subtitle { + color: $subtitle-color; + font-size: $font-size-subtitle; + margin: 10px 0; +} + +.use-motion { + .site-title, .site-subtitle, .custom-logo-image { + opacity: 0; + position: relative; + top: -10px; + } +} diff --git a/assets/css/_common/outline/header/site-nav.scss b/assets/css/_common/outline/header/site-nav.scss new file mode 100644 index 0000000..9c744ad --- /dev/null +++ b/assets/css/_common/outline/header/site-nav.scss @@ -0,0 +1,24 @@ +.site-nav-toggle, .site-nav-right { + display: none; + + @include mobile() { + @include flex-column(); + } + + .toggle { + color: var(--text-color); + padding: 10px; + width: 22px; + + .toggle-line { + background: var(--text-color); + border-radius: 1px; + } + } +} + +.site-nav { + @include mobile() { + @include site-nav-hide-by-default(); + } +} diff --git a/assets/css/_common/outline/index.scss b/assets/css/_common/outline/index.scss new file mode 100644 index 0000000..fd6fc19 --- /dev/null +++ b/assets/css/_common/outline/index.scss @@ -0,0 +1,5 @@ +@import 'header'; +@import 'sidebar'; +@import 'footer'; + +@import 'mobile'; diff --git a/assets/css/_common/outline/mobile.scss b/assets/css/_common/outline/mobile.scss new file mode 100644 index 0000000..64abd37 --- /dev/null +++ b/assets/css/_common/outline/mobile.scss @@ -0,0 +1,85 @@ +/* +// < 767px +@include mobile() { + +} +*/ + +@if $cfg_mobile_layout_economy { + @include mobile-small() { + // For Pisces & Gemini schemes only wider width (remove main blocks in Gemini). + .main-inner { + padding: initial !important; + } + + // For all schemes wider width. + .posts-expand { + .post-header { + margin-bottom: 10px !important; + } + } + + .post-block { + margin-top: initial !important; + // Inside posts blocks content padding (default 40px). + padding: $content-mobile-padding 18px $content-mobile-padding !important; + } + + .post-body { + // For headers narrow width. + h1, h2, h3, h4, h5, h6 { + margin: 20px 0 8px; + } + + // Rewrite paddings & margins inside tags. + .note, .tabs .tab-content .tab-pane { + h1, h2, h3, h4, h5, h6 { + margin: 0 5px; + } + } + + // For paragraphs narrow width. + > p { + margin: 0 0 10px; + } + + // Rewrite paddings & margins inside tags. + .note > p, .tabs .tab-content .tab-pane > p { + padding: 0 5px; + } + + img, video { + margin-bottom: 10px !important; + } + + .note { + margin-bottom: 10px !important; + padding: 10px !important; + + @if $cfg_note_icons { + &:not(.no-icon) { + padding-left: 35px !important; + } + } + } + + .tabs .tab-content .tab-pane { + padding: 10px 10px 0 !important; + } + } + + .post-eof { + margin: 40px auto 20px !important; + } + + .pagination { + margin-top: 40px; + } + } +} +/* +// < 413px +@include mobile-smallest() { + +} +*/ diff --git a/assets/css/_common/outline/sidebar/index.scss b/assets/css/_common/outline/sidebar/index.scss new file mode 100644 index 0000000..d74ca3f --- /dev/null +++ b/assets/css/_common/outline/sidebar/index.scss @@ -0,0 +1,38 @@ +.sidebar-inner { + color: $grey-dark; + // Init Sidebar & TOC inner dimensions on all pages and for all schemes. + $offset : if(($scheme == 'Pisces') or ($scheme == 'Gemini'), $sidebar-offset, $sidebar-padding); + max-height: calc(100vh - #{$offset * 2}); + padding: $sidebar-padding 10px; + text-align: center; + @include flex-column(); +} + +.site-overview-item:not(:first-child) { + margin-top: 10px; +} + +.cc-license { + .cc-opacity { + border-bottom: 0; + opacity: .7; + + &:hover { + opacity: .9; + } + } + + img { + display: inline-block; + } +} + +@import 'sidebar-author'; +@import 'sidebar-author-links'; +@import 'sidebar-button'; +@import 'sidebar-blogroll'; +@import 'sidebar-dimmer'; +@import 'sidebar-nav'; +@import 'sidebar-toggle'; +@import 'sidebar-toc'; +@import 'site-state'; diff --git a/assets/css/_common/outline/sidebar/sidebar-author-links.scss b/assets/css/_common/outline/sidebar/sidebar-author-links.scss new file mode 100644 index 0000000..8796cea --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-author-links.scss @@ -0,0 +1,11 @@ +.links-of-author { + a { + font-size: $font-size-smaller; + } + + @if not $cfg_social_icons_only { + .fa, .fab, .far, .fas { + margin-right: 2px; + } + } +} diff --git a/assets/css/_common/outline/sidebar/sidebar-author.scss b/assets/css/_common/outline/sidebar/sidebar-author.scss new file mode 100644 index 0000000..ca0fd99 --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-author.scss @@ -0,0 +1,29 @@ +.site-author-image { + border: $site-author-image-border-width solid $site-author-image-border-color; + max-width: $site-author-image-width; + padding: 2px; + + @if $cfg_avatar_rounded { + border-radius: 50%; + } + + @if $cfg_avatar_rotated { + transition: transform 1s ease-out; + + &:hover { + transform: rotateZ(360deg); + } + } +} + +.site-author-name { + color: $site-author-name-color; + font-weight: $site-author-name-weight; + margin: $site-author-name-margin; +} + +.site-description { + color: $site-description-color; + font-size: $site-description-font-size; + margin-top: $site-description-margin-top; +} diff --git a/assets/css/_common/outline/sidebar/sidebar-blogroll.scss b/assets/css/_common/outline/sidebar/sidebar-blogroll.scss new file mode 100644 index 0000000..ec51087 --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-blogroll.scss @@ -0,0 +1,15 @@ +.links-of-blogroll { + font-size: $font-size-smaller; +} + +.links-of-blogroll-title { + font-size: $font-size-small; + font-weight: 600; + margin-top: 0; +} + +.links-of-blogroll-list { + list-style: none; + margin: 0; + padding: 0; +} diff --git a/assets/css/_common/outline/sidebar/sidebar-button.scss b/assets/css/_common/outline/sidebar/sidebar-button.scss new file mode 100644 index 0000000..2cf4ada --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-button.scss @@ -0,0 +1,15 @@ +.sidebar .sidebar-button { + &:not(:first-child) { + margin-top: 15px; + } + + button { + @include button($orange); + border: 1px solid $orange; + border-radius: 4px; + + .fa, .fab, .far, .fas { + margin-right: 5px; + } + } +} diff --git a/assets/css/_common/outline/sidebar/sidebar-dimmer.scss b/assets/css/_common/outline/sidebar/sidebar-dimmer.scss new file mode 100644 index 0000000..18e2bf9 --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-dimmer.scss @@ -0,0 +1,24 @@ +.sidebar-dimmer { + display: none; +} + +@include tablet-mobile() { + .sidebar-dimmer { + background: black; + display: block; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + transition: visibility .4s, opacity .4s; + visibility: hidden; + width: 100%; + z-index: $zindex-1; + + .sidebar-active & { + opacity: .7; + visibility: visible; + } + } +} diff --git a/assets/css/_common/outline/sidebar/sidebar-nav.scss b/assets/css/_common/outline/sidebar/sidebar-nav.scss new file mode 100644 index 0000000..1f137bb --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-nav.scss @@ -0,0 +1,57 @@ +// Sidebar Navigation +.sidebar-nav { + display: none; + margin: 0; + padding-bottom: 20px; + padding-left: 0; + + .sidebar-nav-active & { + display: block; + } + + li { + border-bottom: 1px solid transparent; + color: $sidebar-nav-color; + cursor: pointer; + display: inline-block; + font-size: $font-size-small; + + &.sidebar-nav-overview { + margin-left: 10px; + } + + &:hover { + color: $sidebar-nav-hover-color; + } + } +} + +.sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview { + border-bottom-color: $sidebar-highlight; + color: $sidebar-highlight; + + &:hover { + color: $sidebar-highlight; + } +} + +// Need for Sidebar/TOC inner scrolling if content taller then viewport. +.sidebar-panel-container { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} + +.sidebar-panel { + display: none; +} + +.sidebar-overview-active .site-overview-wrap { + // Flexbox layout makes it possible to reorder the child + // elements of .site-overview-item through the `order` CSS property + @include flex-column(); +} + +.sidebar-toc-active .post-toc-wrap { + display: block; +} diff --git a/assets/css/_common/outline/sidebar/sidebar-toc.scss b/assets/css/_common/outline/sidebar/sidebar-toc.scss new file mode 100644 index 0000000..c65ac64 --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-toc.scss @@ -0,0 +1,61 @@ +@if $cfg_toc_enable { + .post-toc { + font-size: $font-size-small; + + ol { + list-style: none; + margin: 0; + padding: 0 2px 5px 10px; + text-align: left; + + > ol { + padding-left: 0; + } + + a { + transition: all $transition-ease; + } + } + + .nav-item { + line-height: 1.8; + overflow: hidden; + text-overflow: ellipsis; + + @if not $cfg_toc_wrap { + white-space: nowrap; + } + } + + .nav { + .nav-child { + display: if($cfg_toc_expand_all, block, none); + } + + .active > .nav-child { + display: block; + } + + .active-current > .nav-child { + display: block; + + > .nav-item { + display: block; + } + } + + .active > a { + border-bottom-color: $sidebar-highlight; + color: $sidebar-highlight; + } + + .active-current > a { + color: $sidebar-highlight; + + &:hover { + color: $sidebar-highlight; + } + } + } + } +} diff --git a/assets/css/_common/outline/sidebar/sidebar-toggle.scss b/assets/css/_common/outline/sidebar/sidebar-toggle.scss new file mode 100644 index 0000000..68a4e31 --- /dev/null +++ b/assets/css/_common/outline/sidebar/sidebar-toggle.scss @@ -0,0 +1,21 @@ +.sidebar-toggle { + bottom: 45px; + height: 12px; + padding: 6px 5px; + width: 14px; + @include sidebar-toggle(); +} + +.sidebar-toggle:hover .toggle-line { + background: $sidebar-highlight; +} + +@media (any-hover: hover) { + body:not(.sidebar-active) .sidebar-toggle:hover { + @include toggle-arrow($cfg_sidebar_position); + } +} + +.sidebar-active .sidebar-toggle { + @include toggle-close($cfg_sidebar_position); +} diff --git a/assets/css/_common/outline/sidebar/site-state.scss b/assets/css/_common/outline/sidebar/site-state.scss new file mode 100644 index 0000000..cf22a19 --- /dev/null +++ b/assets/css/_common/outline/sidebar/site-state.scss @@ -0,0 +1,28 @@ +@if $cfg_site_state { + .site-state { + @include flex-wrap(); + line-height: 1.4; + } + + .site-state-item { + // Fix issue #103 + // The click area of the link becomes smaller + padding: 0 15px; + + a { + border-bottom: 0; + display: block; + } + } + + .site-state-item-count { + display: block; + font-size: $site-state-item-count-font-size; + font-weight: 600; + } + + .site-state-item-name { + color: $site-state-item-name-color; + font-size: $site-state-item-name-font-size; + } +} diff --git a/assets/css/_common/scaffolding/base.scss b/assets/css/_common/scaffolding/base.scss new file mode 100644 index 0000000..1a60de0 --- /dev/null +++ b/assets/css/_common/scaffolding/base.scss @@ -0,0 +1,99 @@ +::selection { + background: $selection-bg; + color: $selection-color; +} + +html, body { + height: 100%; +} + +body { + background: var(--body-bg-color); + box-sizing: border-box; + color: var(--text-color); + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $line-height-base; + min-height: 100%; + position: relative; + transition: padding $transition-ease; + + @if $cfg_bd_scrollbar_overlay { + overflow-x: hidden; + @supports (overflow-x: clip) { + overflow-x: clip; + } + width: 100vw; + } + + @if $cfg_bd_scrollbar_stable { + overflow-y: scroll; + } +} + +h1, h2, h3, h4, h5, h6 { + font-family: $font-family-headings; + font-weight: bold; + line-height: 1.5; + margin: 30px 0 15px; +} + +@for $headline from 1 through 6 { + h#{$headline} { + font-size: $font-size-headings-base - $font-size-headings-step * $headline; + } +} + +p { + margin: 0 0 20px; +} + +a { + border-bottom: 1px solid $link-decoration-color; + color: var(--link-color); + // For a:not(:any-link) + cursor: pointer; + outline: 0; + text-decoration: none; + @include word-wrap(); + + &:hover { + border-bottom-color: var(--link-hover-color); + color: var(--link-hover-color); + } +} + +iframe, img, video, embed { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} + +hr { + background-image: repeating-linear-gradient(-45deg, $grey-lighter, $grey-lighter 4px, transparent 4px, transparent 8px); + border: 0; + height: 3px; + margin: 40px 0; +} + +blockquote { + border-left: 4px solid $grey-lighter; + color: var(--blockquote-color); + margin: 0; + padding: 0 15px; + + cite::before { + content: '-'; + padding: 0 5px; + } +} + +dt { + font-weight: bold; +} + +dd { + margin: 0; + padding: 0; +} diff --git a/assets/css/_common/scaffolding/buttons.scss b/assets/css/_common/scaffolding/buttons.scss new file mode 100644 index 0000000..a54372f --- /dev/null +++ b/assets/css/_common/scaffolding/buttons.scss @@ -0,0 +1,26 @@ +.btn { + background: var(--btn-default-bg); + border: 2px solid var(--btn-default-border-color); + border-radius: $btn-default-radius; + color: var(--btn-default-color); + display: inline-block; + font-size: $font-size-small; + line-height: 2; + padding: 0 20px; + transition: background-color $transition-ease; + + &:hover { + background: var(--btn-default-hover-bg); + border-color: var(--btn-default-hover-border-color); + color: var(--btn-default-hover-color); + } + + + .btn { + margin: 0 0 8px 8px; + } + + .fa-fw { + text-align: left; + width: (18em / 14); + } +} diff --git a/assets/css/_common/scaffolding/comments.scss b/assets/css/_common/scaffolding/comments.scss new file mode 100644 index 0000000..8ace888 --- /dev/null +++ b/assets/css/_common/scaffolding/comments.scss @@ -0,0 +1,39 @@ +.comments { + margin-top: 60px; + overflow: hidden; +} + +.comment-button-group { + display: flex; + flex-wrap: wrap-reverse; + justify-content: center; + margin: 1em 0; + + .comment-button { + margin: .1em .2em; + + &.active { + background: var(--btn-default-hover-bg); + border-color: var(--btn-default-hover-border-color); + color: var(--btn-default-hover-color); + } + } +} + +.comment-position { + display: none; + + &.active { + display: block; + } +} + +.tabs-comment { + margin-top: 4em; + padding-top: 0; + + .comments { + margin-top: 0; + padding-top: 0; + } +} diff --git a/assets/css/_common/scaffolding/highlight/copy-code.scss b/assets/css/_common/scaffolding/highlight/copy-code.scss new file mode 100644 index 0000000..d0a1c83 --- /dev/null +++ b/assets/css/_common/scaffolding/highlight/copy-code.scss @@ -0,0 +1,55 @@ +.highlight:hover .copy-btn, pre:hover .copy-btn { + opacity: 1; +} + +.copy-btn { + color: $black-dim; + cursor: pointer; + line-height: 1.6; + opacity: 0; + padding: 2px 6px; + position: absolute; + transition: opacity $transition-ease; + + @if $cfg_codeblock_copy_btn_style == 'flat' { + background: white; + border: 0; + font-size: $font-size-smaller; + right: 0; + top: 0; + } @else if $cfg_codeblock_copy_btn_style == 'mac' { + color: var(--highlight-foreground); + font-size: 14px; + right: 0; + top: 2px; + } @else { + background-color: $gainsboro; + background-image: linear-gradient(#fcfcfc, $gainsboro); + border: 1px solid #d5d5d5; + border-radius: 3px; + font-size: $font-size-smaller; + right: 4px; + top: 8px; + } +} + +@if $cfg_codeblock_copy_btn_style == 'mac' { + figure.highlight { + border-radius: 5px; + box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); + padding-top: 30px; + + .table-container { + border-radius: 0 0 5px 5px; + } + + &::before { + background: #fc625d; + box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; + left: 12px; + margin-top: -20px; + position: absolute; + @include round-icon(12px); + } + } +} diff --git a/assets/css/_common/scaffolding/highlight/index.scss b/assets/css/_common/scaffolding/highlight/index.scss new file mode 100644 index 0000000..b373751 --- /dev/null +++ b/assets/css/_common/scaffolding/highlight/index.scss @@ -0,0 +1,141 @@ +// Use `@use` to fix issue #67 +// TODO Not understand how to import dymatic variable +// @import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null'; +// @import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null'; +// @import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null'; + +// @media (prefers-color-scheme: dark) { + // @import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null'; + // @import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null'; +// } + +// @import 'theme.codeblock.copy_button.enable ? "copy-code" : null'; + +// Placeholder: %code-inline %code-block +%code-inline { + background: var(--highlight-background); + color: var(--highlight-foreground); +} + +%code-block { + @extend %code-inline; + line-height: $line-height-code-block; + margin: 0 auto 20px; +} + +%figcaption { + background: var(--highlight-gutter-background); + color: var(--highlight-foreground); + display: flow-root; + font-size: $table-font-size; + line-height: 1.2; + padding: .5em; + + a { + color: var(--highlight-foreground); + float: right; + + &:hover { + border-bottom-color: var(--highlight-foreground); + } + } +} + +pre, code { + font-family: $code-font-family; +} + +code { + @extend %code-inline; + border-radius: 3px; + font-size: $table-font-size; + padding: 2px 4px; + @include word-wrap(); +} + +kbd { + @extend %code-inline; + border: 2px solid $grey-light; + border-radius: .2em; + box-shadow: .1em .1em .2em rgba(0, 0, 0, .1); + font-family: inherit; + padding: .1em .3em; + white-space: nowrap; +} + +// `highlight.line_number: false` and `highlight.wrap: false` +// in Hexo config generates code.highlight elements +figure.highlight { + @extend %code-block; + position: relative; + + pre { + border: 0; + margin: 0; + padding: 10px 0; + } + + table { + border: 0; + margin: 0; + width: auto; + } + + td { + border: 0; + padding: 0; + } + + figcaption { + @extend %figcaption; + } + + .gutter { + @include disable-user-select(); + + pre { + background: var(--highlight-gutter-background); + color: var(--highlight-gutter-foreground); + padding-left: 10px; + padding-right: 10px; + text-align: right; + } + } + + .code pre { + padding-left: 10px; + width: 100%; + } + + // See https://github.com/next-theme/hexo-theme-next/discussions/410 + .marked { + background: rgba(0, 0, 0, .3); + } +} + +// See https://github.com/hexojs/hexo-util/pull/229 +pre .caption, pre figcaption { + @extend %figcaption; + margin-bottom: 10px; +} + +.gist table { + width: auto; + + td { + border: 0; + } +} + +pre { + @extend %code-block; + overflow: auto; + padding: 10px; + position: relative; + + code { + background: none; + padding: 0; + text-shadow: none; + } +} diff --git a/assets/css/_common/scaffolding/index.scss b/assets/css/_common/scaffolding/index.scss new file mode 100644 index 0000000..aec7a8d --- /dev/null +++ b/assets/css/_common/scaffolding/index.scss @@ -0,0 +1,12 @@ +// +// Scaffolding +// ================================================== +@import 'normalize'; +@import 'base'; +@import 'tables'; +@import 'buttons'; +@import 'toggles'; +@import 'highlight'; +@import 'tags'; +@import 'pagination'; +@import 'comments'; diff --git a/assets/css/_common/scaffolding/normalize.scss b/assets/css/_common/scaffolding/normalize.scss new file mode 100644 index 0000000..beb43cf --- /dev/null +++ b/assets/css/_common/scaffolding/normalize.scss @@ -0,0 +1,289 @@ +/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document +========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections +========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: .67em 0; +} + +/* Grouping content +========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics +========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, kbd, samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -.25em; +} + +sup { + top: -.5em; +} + +/* Embedded content +========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms +========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, input, optgroup, select, textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, [type='button'], [type='reset'], [type='submit'] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: .35em .75em .625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type='checkbox'], [type='radio'] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type='search'] { + outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ +} + +/* Interactive +========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc +========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} diff --git a/assets/css/_common/scaffolding/pagination.scss b/assets/css/_common/scaffolding/pagination.scss new file mode 100644 index 0000000..0040500 --- /dev/null +++ b/assets/css/_common/scaffolding/pagination.scss @@ -0,0 +1,55 @@ +%page-number-basic { + display: inline-block; + margin: -1px 10px 0; + padding: 0 10px; + + @include mobile() { + margin: 0 5px; + } +} + +%page-number-current { + background: $pagination-active-bg; + border-color: $pagination-active-border; + color: $pagination-active-color; +} + +.pagination { + border-top: 1px solid $pagination-border; + margin: 120px 0 0; + text-align: center; + + .prev, .next, .page-number { + @extend %page-number-basic; + border-bottom: 0; + border-top: 1px solid $pagination-link-border; + transition: border-color $transition-ease; + + &:hover { + border-top-color: $pagination-link-hover-border; + } + } + + @include mobile() { + border-top: 0; + + .prev, .next, .page-number { + border-bottom: 1px solid $pagination-link-border; + border-top: 0; + + &:hover { + border-bottom-color: $pagination-link-hover-border; + } + } + } + + .space { + @extend %page-number-basic; + margin: 0; + padding: 0; + } + + .page-number.current { + @extend %page-number-current; + } +} diff --git a/assets/css/_common/scaffolding/tables.scss b/assets/css/_common/scaffolding/tables.scss new file mode 100644 index 0000000..9f1e866 --- /dev/null +++ b/assets/css/_common/scaffolding/tables.scss @@ -0,0 +1,39 @@ +.table-container { + overflow: auto; +} + +table { + border-collapse: collapse; + border-spacing: 0; + font-size: $table-font-size; + margin: 0 0 20px; + width: 100%; +} + +tbody tr { + &:nth-of-type(odd) { + background: var(--table-row-odd-bg-color); + } + + &:hover { + background: var(--table-row-hover-bg-color); + } +} + +caption, th, td { + padding: 8px; +} + +th, td { + border: 1px solid $table-border-color; + border-bottom: 3px solid $table-cell-border-bottom-color; +} + +th { + font-weight: 700; + padding-bottom: 10px; +} + +td { + border-bottom-width: 1px; +} diff --git a/assets/css/_common/scaffolding/tags/blockquote-center.scss b/assets/css/_common/scaffolding/tags/blockquote-center.scss new file mode 100644 index 0000000..2064506 --- /dev/null +++ b/assets/css/_common/scaffolding/tags/blockquote-center.scss @@ -0,0 +1,34 @@ +// Blockquote with all children centered. +.blockquote-center { + border-left: 0; + margin: 40px 0; + padding: 0; + position: relative; + text-align: center; + + &::before, &::after { + left: 0; + line-height: 1; + opacity: .6; + position: absolute; + width: 100%; + } + + &::before { + border-top: 1px solid $grey-light; + text-align: left; + top: -20px; + @include font-family-icons('\f10d'); + } + + &::after { + border-bottom: 1px solid $grey-light; + bottom: -20px; + text-align: right; + @include font-family-icons('\f10e'); + } + + p, div { + text-align: center; + } +} diff --git a/assets/css/_common/scaffolding/tags/group-pictures.scss b/assets/css/_common/scaffolding/tags/group-pictures.scss new file mode 100644 index 0000000..3d314b1 --- /dev/null +++ b/assets/css/_common/scaffolding/tags/group-pictures.scss @@ -0,0 +1,20 @@ +.group-picture { + margin-bottom: 20px; + + .group-picture-row { + display: flex; + gap: 3px; + margin-bottom: 3px; + } + + .group-picture-column { + flex: 1; + + img { + height: 100%; + margin: 0; + object-fit: cover; + width: 100%; + } + } +} diff --git a/assets/css/_common/scaffolding/tags/index.scss b/assets/css/_common/scaffolding/tags/index.scss new file mode 100644 index 0000000..fc8eadd --- /dev/null +++ b/assets/css/_common/scaffolding/tags/index.scss @@ -0,0 +1,8 @@ +@import 'blockquote-center'; +@import 'group-pictures'; +@import 'label'; +@import 'link-grid'; +@import 'mermaid'; +@import 'note'; +@import 'pdf'; +@import 'tabs'; diff --git a/assets/css/_common/scaffolding/tags/label.scss b/assets/css/_common/scaffolding/tags/label.scss new file mode 100644 index 0000000..44d464b --- /dev/null +++ b/assets/css/_common/scaffolding/tags/label.scss @@ -0,0 +1,12 @@ +//@use 'sass:map'; + +.post-body .label { + color: $text-color; + padding: 0 2px; + + @each $type in $note-types { + &.#{$type} { + background: map-get($label, $type); + } + } +} diff --git a/assets/css/_common/scaffolding/tags/link-grid.scss b/assets/css/_common/scaffolding/tags/link-grid.scss new file mode 100644 index 0000000..20a1d58 --- /dev/null +++ b/assets/css/_common/scaffolding/tags/link-grid.scss @@ -0,0 +1,113 @@ +.post-body .link-grid { + display: grid; + // https://caniuse.com/mdn-css_properties_gap_grid_context + grid-gap: 1.5rem; + gap: 1.5rem; + grid-template-columns: 1fr 1fr; + margin-bottom: 20px; + padding: 1rem; + + @include mobile() { + grid-template-columns: 1fr; + } + + .link-grid-container { + border: solid $grey-lighter; + box-shadow: 1rem 1rem .5rem rgba(0, 0, 0, .5); + min-height: 5rem; + // Fix issue #30 + min-width: 0; + padding: .5rem; + position: relative; + transition: background .3s; + + &:hover { + animation: next-shake .5s; + background: var(--card-bg-color); + } + + &:active { + box-shadow: .5rem .5rem .25rem rgba(0, 0, 0, .5); + transform: translate(.2rem, .2rem); + } + + .link-grid-image { + border: 1px solid $grey-lighter; + border-radius: 50%; + box-sizing: border-box; + height: 5rem; + padding: 3px; + position: absolute; + width: 5rem; + } + + p { + margin: 0 1rem 0 6rem; + + &:first-of-type { + font-size: 1.2em; + } + + &:last-of-type { + font-size: .8em; + line-height: 1.3rem; + opacity: .7; + } + } + + a { + border: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +@keyframes next-shake { + 0% { + transform: translate(1pt, 1pt) rotate(0deg); + } + + 10% { + transform: translate(-1pt, -2pt) rotate(-1deg); + } + + 20% { + transform: translate(-3pt, 0pt) rotate(1deg); + } + + 30% { + transform: translate(3pt, 2pt) rotate(0deg); + } + + 40% { + transform: translate(1pt, -1pt) rotate(1deg); + } + + 50% { + transform: translate(-1pt, 2pt) rotate(-1deg); + } + + 60% { + transform: translate(-3pt, 1pt) rotate(0deg); + } + + 70% { + transform: translate(3pt, 1pt) rotate(-1deg); + } + + 80% { + transform: translate(-1pt, -1pt) rotate(1deg); + } + + 90% { + transform: translate(1pt, 2pt) rotate(0deg); + } + + 100% { + transform: translate(1pt, -2pt) rotate(-1deg); + } +} diff --git a/assets/css/_common/scaffolding/tags/mermaid.scss b/assets/css/_common/scaffolding/tags/mermaid.scss new file mode 100644 index 0000000..4e20812 --- /dev/null +++ b/assets/css/_common/scaffolding/tags/mermaid.scss @@ -0,0 +1,6 @@ +@if $cfg_mermaid_enable { + .mermaid { + margin-bottom: 20px; + text-align: center; + } +} diff --git a/assets/css/_common/scaffolding/tags/note.scss b/assets/css/_common/scaffolding/tags/note.scss new file mode 100644 index 0000000..8a119ed --- /dev/null +++ b/assets/css/_common/scaffolding/tags/note.scss @@ -0,0 +1,114 @@ +//@use 'sass:map'; + +@if $cfg_note_style != 'disabled' { + .post-body .note { + $note-icons : $cfg_note_icons; + $note-style : $cfg_note_style; + + border-radius: $note-border-radius; + margin-bottom: 20px; + padding: 1em; + position: relative; + + @if $note-style == 'simple' { + border: 1px solid $gainsboro; + border-left-width: 5px; + } + + @if $note-style == 'modern' { + background: $whitesmoke; + border: 1px solid transparent; + } + + @if $note-style == 'flat' { + background: lighten($gainsboro, 65%); + border: initial; + border-left: 3px solid $gainsboro; + } + + summary { + cursor: pointer; + outline: 0; + + p { + display: inline; + } + } + + h2, h3, h4, h5, h6 { + border-bottom: initial; + margin: 0; + padding-top: 0; + } + + p, ul, ol, table, pre, blockquote, img { + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + @if $note-icons { + &:not(.no-icon) { + padding-left: 2.5em; + + &::before { + font-size: 1.5em; + left: .3em; + position: absolute; + top: calc(50% - 1em); + } + } + } + + @each $type in $note-types { + &.#{$type} { + @if $note-style == 'flat' { + background: map-get($note-bg, $type); + @if $cfg_darkmode { + @media (prefers-color-scheme: dark) { + background: mix(map-get($note-bg, $type), $body-bg-color-dark, 10%); + } + } + } + + @if $note-style == 'modern' { + background: map-get($note-modern-bg, $type); + border-color: map-get($note-modern-border, $type); + color: map-get($note-modern-text, $type); + + a:not(.btn) { + border-bottom-color: map-get($note-modern-text, $type); + color: map-get($note-modern-text, $type); + + &:hover { + border-bottom-color: map-get($note-modern-hover, $type); + color: map-get($note-modern-hover, $type); + } + } + } + + @if $note-style != 'modern' { + border-left-color: map-get($note-border, $type); + + h2, h3, h4, h5, h6 { + color: map-get($note-text, $type); + } + } + + @if $note-icons { + &:not(.no-icon)::before { + @include font-family-icons(map-get($note-icon, $type)); + + @if $note-style != 'modern' { + color: map-get($note-text, $type); + } + } + } + } + } + } +} diff --git a/assets/css/_common/scaffolding/tags/pdf.scss b/assets/css/_common/scaffolding/tags/pdf.scss new file mode 100644 index 0000000..2505369 --- /dev/null +++ b/assets/css/_common/scaffolding/tags/pdf.scss @@ -0,0 +1,8 @@ +@if $cfg_pdf_enable { + .pdfobject-container { + iframe, embed { + height: convert($cfg_pdf_height); + width: 100%; + } + } +} diff --git a/assets/css/_common/scaffolding/tags/tabs.scss b/assets/css/_common/scaffolding/tags/tabs.scss new file mode 100644 index 0000000..156ce27 --- /dev/null +++ b/assets/css/_common/scaffolding/tags/tabs.scss @@ -0,0 +1,103 @@ +.post-body .tabs { + margin-bottom: 20px; +} + +.post-body .tabs, .tabs-comment { + padding-top: 10px; + + ul.nav-tabs { + background: if(($scheme == 'Muse') or ($scheme == 'Mist'), var(--body-bg-color), var(--content-bg-color)); + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + position: -webkit-sticky; + position: sticky; + top: 0; + // Fix issue #398 + z-index: $zindex-0; + + @include mobile-smallest() { + display: block; + margin-bottom: 5px; + } + + li.tab { + border-bottom: 1px solid $grey-lighter; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-radius: $tbr $tbr 0 0; + border-top: 3px solid transparent; + flex-grow: 1; + list-style-type: none; + + @include mobile-smallest() { + border-bottom: 1px solid transparent; + border-left: 3px solid transparent; + border-right: 1px solid transparent; + border-top: 1px solid transparent; + } + + @include mobile-smallest() { + border-radius: $tbr; + } + + @if $cfg_tabs_trans_tabs { + transition: all $transition-ease-out; + } + + a { + border-bottom: initial; + display: block; + line-height: 1.8; + padding: .25em .75em; + text-align: center; + + i { + width: (18em / 14); + } + + @if $cfg_tabs_trans_labels { + transition: all $transition-ease-out; + } + } + + &.active { + border-bottom-color: transparent; + border-left-color: $table-border-color; + border-right-color: $table-border-color; + border-top-color: $orange; + + @include mobile-smallest() { + border-bottom-color: $table-border-color; + border-left-color: $orange; + border-right-color: $table-border-color; + border-top-color: $table-border-color; + } + + a { + cursor: default; + } + } + } + } + + .tab-content { + border: 1px solid $table-border-color; + border-radius: 0 0 $tbr $tbr; + border-top-color: transparent; + + @include mobile-smallest() { + border-radius: $tbr; + border-top-color: $table-border-color; + } + + .tab-pane { + padding: 20px 20px 0; + + &:not(.active) { + display: none; + } + } + } +} diff --git a/assets/css/_common/scaffolding/toggles.scss b/assets/css/_common/scaffolding/toggles.scss new file mode 100644 index 0000000..7683386 --- /dev/null +++ b/assets/css/_common/scaffolding/toggles.scss @@ -0,0 +1,26 @@ +.toggle { + line-height: 0; + + .toggle-line { + background: white; + display: block; + height: 2px; + left: 0; + position: relative; + top: 0; + transition: all .4s; + width: 100%; + + &:not(:first-child) { + margin-top: 3px; + } + } +} + +.toggle.toggle-arrow { + @include toggle-arrow($cfg_sidebar_position); +} + +.toggle.toggle-close { + @include toggle-close($cfg_sidebar_position); +} diff --git a/assets/css/_sitevars.scss b/assets/css/_sitevars.scss index 256615a..31aac4c 100644 --- a/assets/css/_sitevars.scss +++ b/assets/css/_sitevars.scss @@ -4,7 +4,8 @@ {{- $P := .Site.Params -}} -$cfg_scheme: {{ default $P.scheme "Gemini" }}; +// Base variables +$scheme: {{ default $P.scheme "Gemini" }}; $cfg_darkmode: {{ $P.darkmode }}; $cfg_thm_cor_light: {{ $P.themeColor.light }}; @@ -17,12 +18,79 @@ $cfg_font_title_size: {{ default $P.font.title.size 1 }}; $cfg_font_codes_size: {{ default $P.font.codes.size 1 }}; $cfg_font_posts_size: {{ default $P.font.posts.size 1 }}; +// TODO $cfg_hl_light_bg: #222; $cfg_hl_light_fg: #000; $cfg_hl_dark_bg: #000; $cfg_hl_dark_fg: #222; +$cfg_sidebar_width: {{ $P.sidebar.width }}; +$cfg_sidebar_position: {{ $P.sidebar.position }}; $cfg_sidebar_padding: {{ default $P.sidebar.padding 18 }}; $cfg_sidebar_offset: {{ default $P.sidebar.offset 12 }}; -$cfg_note_light_bg_offset: 0; \ No newline at end of file +// TODO +$cfg_note_light_bg_offset: 0; + +// Scaffolding Variables +$cfg_bd_scrollbar_overlay: {{ $P.bodyScrollbar.overlay }}; +$cfg_bd_scrollbar_stable: {{ $P.bodyScrollbar.stable }}; + +$cfg_codeblock_copy_btn_style: {{ $P.codeblock.copyBtn.style }}; + +$cfg_mermaid_enable: {{ $P.mermaid.enable }}; + +$cfg_note_style: {{ $P.note.style }}; +$cfg_note_icons: {{ $P.note.icons }}; + +$cfg_pdf_enable: {{ $P.pdf.enable }}; +$cfg_pdf_height: {{ $P.pdf.height }}; + +$cfg_tabs_trans_tabs: {{ $P.tabs.transition.tabs }}; +$cfg_tabs_trans_labels: {{ $P.tabs.transition.labels }}; + +// Outline Variables +$cfg_footer_icon_color: {{ $P.footer.icon.color }}; +$cfg_footer_icon_animated: {{ $P.footer.icon.animated }}; + +$cfg_footer_beian_enable: {{ $P.footer.beian.enable }}; + +$cfg_busuanzi_enable: {{ $P.busuanzi.enable }}; +$cfg_busuanzi_visitors: {{ $P.busuanzi.visitors }}; +$cfg_busuanzi_views: {{ $P.busuanzi.views }}; + +$cfg_bookmark_enable: {{ $P.bookmark.enable }}; +$cfg_bookmark_color: {{ $P.bookmark.color }}; + +$cfg_github_banner_enable: {{ $P.githubBanner.enable }}; + +$cfg_local_search_enable: {{ $P.localSearch.enable }}; +$cfg_algolia_search_enable: {{ $P.algoliaSearch.enable }}; + +$cfg_mobile_layout_economy: {{ $P.mobileLayoutEconomy }}; + +$cfg_note_icons: {{ $P.note.icons }}; + +$cfg_social_icons_only: {{ $P.socialIcons.iconsOnly }}; + +$cfg_avatar_rounded: {{ $P.avatar.rounded }}; +$cfg_avatar_rotated: {{ $P.avatar.rotated }}; + +$cfg_toc_enable: {{ $P.toc.enable }}; +$cfg_toc_wrap: {{ $P.toc.wrap }}; +$cfg_toc_expand_all: {{ $P.toc.expandAll }}; + +$cfg_site_state: {{ $P.siteState }}; + +// +$cfg_back2top_enable: {{ $P.backTop.enable }}; +$cfg_back2top_scrollpercent: {{ $P.backTop.scrollPercent }}; +$cfg_back2top_sidebar: {{ $P.backTop.sidebar }}; + +$cfg_reading_progress_enable: {{ $P.readingProgress.enable }}; +$cfg_reading_progress_color: {{ $P.readingProgress.color }}; +$cfg_reading_progress_height: {{ $P.readingProgress.height }}; +$cfg_reading_progress_reversed: {{ $P.readingProgress.reversed }}; +$cfg_reading_progress_start: {{ $P.readingProgress.start }}; +$cfg_reading_progress_position: {{ $P.readingProgress.position }}; + diff --git a/assets/css/_variables/Gemini.scss b/assets/css/_variables/Gemini.scss new file mode 100644 index 0000000..11e362b --- /dev/null +++ b/assets/css/_variables/Gemini.scss @@ -0,0 +1,18 @@ +// Variables of Gemini scheme +// ================================================== + +@import 'Pisces'; + +// Settings for some of the most global styles. +// -------------------------------------------------- +$body-bg-color : #eee; + +// Borders. +// -------------------------------------------------- +$box-shadow-inner : 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12); +$box-shadow : 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -1px .5px 0 rgba(0, 0, 0, .09); + +$border-radius-inner : initial; +$border-radius : initial; +// $border-radius-inner : 0 0 3px 3px; +// $border-radius : 3px; diff --git a/assets/css/_variables/Pisces.scss b/assets/css/_variables/Pisces.scss new file mode 100644 index 0000000..85d6284 --- /dev/null +++ b/assets/css/_variables/Pisces.scss @@ -0,0 +1,68 @@ +// Variables of Pisces scheme +// ================================================== + +// Settings for some of the most global styles. +// -------------------------------------------------- +$body-bg-color : #f5f7f9; + +$sidebar-width : if(type-of($cfg_sidebar_width) == number, $cfg_sidebar_width, 240); +$sidebar-desktop : $sidebar-width * 1px; +$content-wrap : calc(100% - #{$sidebar-width + $sidebar-offset}); + +$content-desktop : calc(100% - #{$content-desktop-padding / 2}); +$content-desktop-large : 1160px; +$content-desktop-largest : 73%; + + +// Borders +// -------------------------------------------------- +$box-shadow-inner : initial; +$box-shadow : initial; + +$border-radius-inner : initial; +$border-radius : initial; + + +// Header +// -------------------------------------------------- +$subtitle-color : $grey-lighter; + +// Sidebar +// -------------------------------------------------- +$sidebar-nav-color : var(--text-color); +$sidebar-nav-hover-color : $orange; +$sidebar-highlight : $orange; + +$site-author-image-width : 120px; +$site-author-image-border-width : 1px; +$site-author-image-border-color : $gainsboro; + +$site-author-name-margin : 0; +$site-author-name-color : var(--text-color); +$site-author-name-weight : 600; + +$site-description-font-size : $font-size-smaller; +$site-description-color : $grey-dark; +$site-description-margin-top : 0; + +$site-state-item-count-font-size : $font-size-medium; +$site-state-item-name-font-size : $font-size-smaller; +$site-state-item-name-color : $grey-dark; + + +// Components +// -------------------------------------------------- + +// Button +$btn-default-radius : 2px; +$btn-default-bg : white; +$btn-default-color : $text-color; +$btn-default-border-color : $text-color; +$btn-default-hover-bg : $black-deep; +$btn-default-hover-color : white; + +// Back to top +$b2t-opacity : .6; +$b2t-opacity-hover : .8; +$b2t-position-bottom : -100px; +$b2t-position-bottom-on : 30px; diff --git a/assets/css/main.scss b/assets/css/main.scss index 050f023..b7a6bd7 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,18 +1,19 @@ // CSS Style Guide: https://codeguide.co/#css -//$scheme : if(hexo-config('scheme'), hexo-config('scheme'), 'Muse'); +//$scheme : $cfg_scheme; // Variables Layer // -------------------------------------------------- @import '_variables/base'; -// @import '"_variables/" + theme.scheme'; +//@import '"_variables/" + theme.scheme'; +@import "_variables/Gemini"; // @import 'theme.injects.variable'; // Mixins Layer // -------------------------------------------------- -// @import '_mixins'; +@import '_mixins'; // @import 'theme.injects.mixin'; // Dark mode colors @@ -23,13 +24,13 @@ // -------------------------------------------------- // Scaffolding -// @import '_common/scaffolding'; +@import '_common/scaffolding'; // Layout -// @import '_common/outline'; +@import '_common/outline'; // Components -// @import '_common/components'; +//@import '_common/components'; // Schemes Layer diff --git a/assets/css/noscript.scss b/assets/css/noscript.scss new file mode 100644 index 0000000..2ca321f --- /dev/null +++ b/assets/css/noscript.scss @@ -0,0 +1,30 @@ +body { margin-top: 2rem; } + +.use-motion .menu-item, +.use-motion .sidebar, +.use-motion .post-block, +.use-motion .pagination, +.use-motion .comments, +.use-motion .post-header, +.use-motion .post-body, +.use-motion .collection-header { + visibility: visible; +} + +.use-motion header.header, +.use-motion .site-brand-container .toggle, +.use-motion .footer { opacity: initial; } + +.use-motion .site-title, +.use-motion .site-subtitle, +.use-motion .custom-logo-image { + opacity: initial; + top: initial; +} + +.use-motion .logo-line { + transform: scaleX(1); +} + +.search-pop-overlay, .sidebar-nav { display: none; } +.sidebar-panel { display: block; } diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index c4e3fff..d589468 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -71,6 +71,10 @@ params: # Dark Mode darkmode: true + # Browser header panel color. + themeColor: + light: "#000" + dark: "#222" #-------------------------------------- # Site Information Settings @@ -175,6 +179,19 @@ params: # No required in here and can be done by multilanguage # language: deed.zh + # Table of Contents in the Sidebar + # Front-matter variable (nonsupport wrap expand_all). + toc: + enable: true + # Automatically add list number to toc. + number: true + # If true, all words will placed on next lines if header width longer then sidebar width. + wrap: false + # If true, all level of TOC in a post will be displayed, rather than the activated part of it. + expandAll: false + # Maximum heading depth of generated toc. + maxDepth: 6 + footer: # Specify the year when the site was setup. If not defined, current year will be used. since: 2016 @@ -194,9 +211,141 @@ params: # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn beian: enable: true - icp: 粤ICP备18047355号 + icp: 粤ICP备18047355-1号 # The full num of gongan beian which use to query valid. gonganNum: 11010102001808 + # Override browsers' default behavior. + bodyScrollbar: + # Place the scrollbar over the content. + overlay: false + # Present the scrollbar even if the content is not overflowing. + stable: false + + backTop: + enable: true + # Back to top in sidebar. + sidebar: false + # Scroll percent label in b2t button. + scrollPercent: false + + # Reading progress bar + readingProgress: + enable: false + # Available values: left | right + start: left + # Available values: top | bottom + position: top + reversed: false + color: "#37c6c0" + height: 3px + + # Bookmark Support + bookmark: + enable: false + # Customize the color of the bookmark. + color: "#222" + # If auto, save the reading progress when closing the page or clicking the bookmark-icon. + # If manual, only save it by clicking the bookmark-icon. + save: auto + + # `Follow me on GitHub` banner in the top-right corner. + githubBanner: + enable: false + permalink: https://github.com/yourname + title: Follow me on GitHub + + codeblock: + # Code Highlight theme + # All available themes: https://theme-next.js.org/highlight/ + theme: + light: default + dark: stackoverflow-dark + prism: + light: prism + dark: prism-dark + # Add copy button on codeblock + copyBtn: + enable: false + # Available values: default | flat | mac + style: defalut + + # Mermaid tag + mermaid: + enable: false + # Available themes: default | dark | forest | neutral + theme: + light: default + dark: dark + + # Note tag (bootstrap callout) + note: + # Note tag style values: + # - simple bootstrap callout old alert style. Default. + # - modern bootstrap callout new (v2-v3) alert style. + # - flat flat callout style with background, like on Mozilla or StackOverflow. + # - disabled disable all CSS styles import of note tag. + style: simple + icons: false + # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). + # Offset also applied to label tag variables. This option can work with disabled note tag. + light_bg_offset: 0 + + # Tabs tag + tabs: + # Make the nav bar of tabs with long content stick to the top. + sticky: false + transition: + tabs: false + labels: true + + # PDF tag + # NexT will try to load pdf files natively, if failed, pdf.js will be used. + # So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers. + # Dependencies: https://github.com/next-theme/theme-next-pdf + pdf: + enable: false + # Default height + height: 500px + + # Show Views / Visitors of the website / page with busuanzi. + # For more information: http://ibruce.info/2015/04/04/busuanzi/ + busuanzi: + enable: false + visitors: true + visitorsIcon: fa fa-user + views: true + viewsIcon: fa fa-eye + postViews: true + postViewsIcon: far fa-eye + + # --------------------------------------------------------------- + # Search Services + # See: https://theme-next.js.org/docs/third-party-services/search-services + # --------------------------------------------------------------- + + # Algolia Search + # For more information: https://www.algolia.com + algoliaSearch: + enable: false + hits: + perPage: 10 + + # Local Search + # Dependencies: https://github.com/next-theme/hexo-generator-searchdb + localSearch: + enable: false + # If auto, trigger search by changing input. + # If manual, trigger search by pressing enter key or search button. + trigger: auto + # Show top n results per article, show all results by setting to -1 + #top_n_per_article: 1 + # Unescape html strings to the readable one. + unescape: false + # Preload the search data when the page loads. + preload: false + + # Reduce padding / margin indents on devices with narrow width. + mobileLayoutEconomy: false