From 5b59cf9299f0bf401fdd05dfc16b57ce4426f5f4 Mon Sep 17 00:00:00 2001 From: hotjuicew Date: Sun, 23 Apr 2023 01:10:45 +0800 Subject: [PATCH] refactor: refactored css code --- assets/scss/_about.scss | 0 assets/scss/_archive.scss | 0 assets/scss/_darkmode.scss | 130 ++++++++++++++++++ assets/scss/_footer.scss | 0 assets/scss/_header.scss | 17 +++ assets/scss/_index.scss | 0 assets/scss/_normalize.scss | 0 assets/scss/_pagination.scss | 0 assets/scss/_single.scss | 0 assets/scss/_summary.scss | 0 assets/scss/_taxonomy.scss | 0 assets/scss/_terms.scss | 0 assets/scss/_toc.scss | 0 assets/scss/_variables.scss | 13 ++ static/css/style.css => assets/scss/main.scss | 10 +- assets/scss/style.scss | 1 + 16 files changed, 169 insertions(+), 2 deletions(-) create mode 100644 assets/scss/_about.scss create mode 100644 assets/scss/_archive.scss create mode 100644 assets/scss/_darkmode.scss create mode 100644 assets/scss/_footer.scss create mode 100644 assets/scss/_header.scss create mode 100644 assets/scss/_index.scss create mode 100644 assets/scss/_normalize.scss create mode 100644 assets/scss/_pagination.scss create mode 100644 assets/scss/_single.scss create mode 100644 assets/scss/_summary.scss create mode 100644 assets/scss/_taxonomy.scss create mode 100644 assets/scss/_terms.scss create mode 100644 assets/scss/_toc.scss create mode 100644 assets/scss/_variables.scss rename static/css/style.css => assets/scss/main.scss (93%) create mode 100644 assets/scss/style.scss diff --git a/assets/scss/_about.scss b/assets/scss/_about.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_archive.scss b/assets/scss/_archive.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_darkmode.scss b/assets/scss/_darkmode.scss new file mode 100644 index 0000000..bc19c47 --- /dev/null +++ b/assets/scss/_darkmode.scss @@ -0,0 +1,130 @@ +@import "_variables"; +.dark-mode { + color: $dark-font; + background-color: $dark-background; +} + +.dark-mode .navbar.is-light { + background-color: $dark-navbar; + color: $dark-font; +} + +.dark-mode .navbar.is-light { + background-color: $dark-navbar; + color: $dark-font; +} + +.dark-mode .navbar.is-light { + color: $dark-font; +} + +.dark-mode .navbar.is-light .navbar-brand > .navbar-item { + color: $dark-font; + background-color: $dark-navbar; +} + +.dark-mode .navbar.is-light .navbar-start > .navbar-item { + color: $dark-font; +} + +.dark-mode .navbar-menu { + background-color: $dark-navbar; + color: $dark-font; +} + +.dark-mode a { + color: $dark-font; +} + +.dark-mode .title { + color: $dark-font; +} + +.dark-mode .icon { + color: $dark-font; +} + +.dark-mode #searchResults li { + background-color: $dark-navbar; + border-bottom: 1px solid $dark-font; + border-left: 1px solid $dark-font; + border-right: 1px solid $dark-font; +} + +.dark-mode #searchResults li:first-child { + border-top: 1px solid $dark-font; +} + +.dark-mode #searchResults li:hover { + color: $dark-font; + background-color: $dark-background; +} + + +.dark-mode #post-container { + background-color: $dark-navbar; + color: $dark-font; +} + +.dark-mode hr { + background-color: $dark-navbar; +} + +.dark-mode .footer { + background-color: $dark-navbar; +} + +.dark-mode .archive { + color: $dark-font; +} + +.dark-mode .content h1, .dark-mode .content h2, .dark-mode .content h3, .dark-mode .content h4, .dark-mode .content h5, .dark-mode .content h6 { + color: $dark-font; +} + +.dark-mode code { + background-color: $dark-background; +} + +.dark-mode .content blockquote { + color: $dark-font; + background-color: $dark-background; +} + +.dark-mode strong { + color: white; +} + +.dark-mode .content table thead td, .dark-mode .content table thead th { + color: $dark-font; +} + +.dark-mode .card { + background-color: $dark-navbar; +} + +.dark-mode .button { + background-color: $dark-navbar; + color: $dark-font; + border-color: $dark-navbar; +} + +.dark-mode .navbar.is-light .navbar-burger { + color: $dark-font; +} + +.dark-mode .icon:hover { + color: $main-orange; +} + +.dark-mode pre { + color: #f8f8f2; + background-color: #272822; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} +.dark-mode .navbar.is-light .navbar-brand>a.navbar-item:hover,.dark-mode .navbar.is-light .navbar-start > a.navbar-item:hover{ + background-color: $dark-navbar; + color: $dark-font; +} \ No newline at end of file diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss new file mode 100644 index 0000000..6d0f6fd --- /dev/null +++ b/assets/scss/_header.scss @@ -0,0 +1,17 @@ +.navbar { + height: 6vmin; + .navbar-brand { + padding: 0px 15px; + .logo h1 { + font-size: 1.5rem; + } + } +} +.author-avatar { + object-fit: cover; + border-radius: 50%; + width: 10rem; + height: 10rem; + text-align: center; + margin: 2rem auto 0 auto; +} diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_normalize.scss b/assets/scss/_normalize.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_pagination.scss b/assets/scss/_pagination.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_summary.scss b/assets/scss/_summary.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_taxonomy.scss b/assets/scss/_taxonomy.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_terms.scss b/assets/scss/_terms.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_toc.scss b/assets/scss/_toc.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..ad68a43 --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,13 @@ +--main-black: #363636; +--main-orange: #FAB005; +--main-light: #f5f5f5; +--main-grey: rgb(142, 139, 139); +--dark-background: #1F1F1F; +--dark-navbar: #2D2F31; +--dark-font: #E3E3E3; +--font-size-home-title: 2.5rem; +--font-size-article-title: 2.5rem; +--font-size-article-title-mobile: 1.8rem; +--font-size-content: 1rem; +--font-size-content-larger: 1.3rem; +--font-size-archive-title: 1.9rem; \ No newline at end of file diff --git a/static/css/style.css b/assets/scss/main.scss similarity index 93% rename from static/css/style.css rename to assets/scss/main.scss index 2f70125..bf91e4f 100644 --- a/static/css/style.css +++ b/assets/scss/main.scss @@ -540,7 +540,7 @@ a { padding: 0 } - .post-toc { + .toc-container { display: none; } @@ -801,7 +801,13 @@ a { main a { color: #6086b4; } + /* Let the sun icon not be next to the top*/ .theme-toggle { margin-top: 5px; -} \ No newline at end of file +} +/* Solve the problem that mobile pages generate shadows when clicking on icons or buttons */ +html{ + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; +} diff --git a/assets/scss/style.scss b/assets/scss/style.scss new file mode 100644 index 0000000..a93cc06 --- /dev/null +++ b/assets/scss/style.scss @@ -0,0 +1 @@ +@import "main"; \ No newline at end of file