From dda7a2510b222332ae026b05df05f915fb3394dc Mon Sep 17 00:00:00 2001 From: artificialUsagi <41666068+artefaritaKuniklo@users.noreply.github.com> Date: Wed, 20 Mar 2024 00:36:21 +0800 Subject: [PATCH] [F] sync commits (#3) * [+] Add navigation bar * [F] Fix typo * [U] Update License * [F] Fix padding * [U] Update uniguide url * [F] Fix mobile display * [S] better navigation bar * [R] Revert "[S] better navigation bar" This reverts commit cbd9154d06f14c75e075bc9078a1c3aa8a379cf6. * [U] Update logo * [F] Fix padding * [U] Add toggle button for dark/light mode * [F] Fix dark mode toggle button * [U] optimize style selection logic (#1) * [U] optimize logic of confirming current site * [U] support different languages of Uniguide * [U] alter navbar style --------- Co-authored-by: sauricat Co-authored-by: Elihuso Quigley Co-authored-by: Linzh --- assets/_defaults.scss | 2 + assets/_fonts.scss | 12 ++++- assets/_main.scss | 81 ++++++++++++++++++++++++++++--- assets/themes/_auto.scss | 8 +++ layouts/_default/baseof.html | 28 +++++++++++ layouts/partials/docs/footer.html | 15 ++++++ 6 files changed, 137 insertions(+), 9 deletions(-) diff --git a/assets/_defaults.scss b/assets/_defaults.scss index a197327d0..8d397cd6e 100644 --- a/assets/_defaults.scss +++ b/assets/_defaults.scss @@ -20,6 +20,8 @@ $header-height: 3.5rem !default; $menu-width: 16rem !default; $toc-width: 16rem !default; +$nav-bar: 3.5rem !default; + $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default; $hint-colors: ( diff --git a/assets/_fonts.scss b/assets/_fonts.scss index b102109b7..b5f7316a2 100644 --- a/assets/_fonts.scss +++ b/assets/_fonts.scss @@ -33,8 +33,16 @@ url('fonts/SourceHanSerif/SourceHanSerifSC-Regular.otf') format('opentype'); } +@font-face { + font-family: 'EB Garamond'; + font-style: italic; + font-display: swap; + src: local(''), + url('fonts/EBGaramond/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype'); +} + body { - font-family: 'EB Garamond', 'Source Han Serif SC', serif; + font-family: 'EB Garamond', 'Source Han Serif SC', 'Noto Sans Symbols 2', serif; font-variant-ligatures: common-ligatures; font-feature-settings: 'liga'; } @@ -42,3 +50,5 @@ body { code { font-family: 'Roboto Mono', monospace; } + +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2'); diff --git a/assets/_main.scss b/assets/_main.scss index 874574b86..c1b2f6269 100644 --- a/assets/_main.scss +++ b/assets/_main.scss @@ -5,6 +5,7 @@ html { } body { + padding-top: $nav-bar; min-width: $body-min-width; color: var(--body-font-color); background: var(--body-background); @@ -43,6 +44,7 @@ img { } aside nav ul { + padding-top: 10em; padding: 0; margin: 0; list-style: none; @@ -81,6 +83,63 @@ ul.pagination { margin: 0 auto; } +.navigation-bar { + position: fixed; + top: 0; + width: 100%; + height: $nav-bar / 1.5; + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + z-index: 10000; + // border: 1px solid #e7e7e7; + background-color: whitesmoke; + img { + width: $nav-bar / 1.5; + height: $nav-bar / 1.5; + } + li { + float: left; + .title { + color: gray; + } + .notcurrent { + background-color: whitesmoke; + color: gray; + } + .current { + color: #000000; + } + } + button { + font-family: 'Noto Sans Symbols 2', serif; + background-color: whitesmoke; + color: #ffffff; + float: right; + border: 0px; + outline: none; + padding-top: $nav-bar / 13; + padding-left: $padding-16 / 2; + padding-right: $padding-16 / 2; + height: $nav-bar / 1.5; + text-decoration: none; + transition-duration: 0.3s; + } + button:hover { + background-color: #a1d5fb; + color: #000000; + } + a { + display: block; + padding-top: $nav-bar / 6.5; + padding-left: $padding-16 / 2; + padding-right: $padding-16 / 2; + height: $nav-bar / 1.5; + text-decoration: none; + } +} + .book-icon { filter: var(--icon-filter); } @@ -102,7 +161,6 @@ ul.pagination { .book-menu-content { width: $menu-width; - padding: $padding-16; background: var(--body-background); @include fixed; @@ -232,7 +290,6 @@ body[dir="rtl"] .book-menu { .book-toc-content { width: $toc-width; - padding: $padding-16; @include fixed; } @@ -308,6 +365,9 @@ body[dir="rtl"] .book-menu { display: block; } + .navigation-bar li .title { + display: none; + } #menu-control:focus ~ main label[for="menu-control"] { @include outline; } @@ -355,10 +415,15 @@ body[dir="rtl"] .book-menu { } // Extra space for big screens -@media screen and (min-width: $container-max-width) { - .book-page, - .book-menu .book-menu-content, - .book-toc .book-toc-content { - padding: $padding-16 * 2 $padding-16; - } +// @media screen and (min-width: $container-max-width) { +// .book-page, +// .book-menu .book-menu-content, +// .book-toc .book-toc-content { +// padding: $nav-bar $padding-16; +// } +// } + +.book-menu .book-menu-content, +.book-toc .book-toc-content { + padding: $nav-bar $padding-16; } diff --git a/assets/themes/_auto.scss b/assets/themes/_auto.scss index 31d7f9ac4..fbdd83468 100644 --- a/assets/themes/_auto.scss +++ b/assets/themes/_auto.scss @@ -2,8 +2,16 @@ @include theme-light; } +:root .dark-mode { + @include theme-dark; +} + @media (prefers-color-scheme: dark) { :root { @include theme-dark; } + + :root .dark-mode { + @include theme-light; + } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 49a31217c..56a9af219 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,6 +7,28 @@ +
+
    • +
    • +
  • Trans in Academia!
    • +
    • + +
  • Events
    • + + {{ $libClass := "notcurrent" }} + {{ $guideClass := "notcurrent" }} + + {{ if eq .Site.Title "Trans in Academia! 文章资料库" }} + {{ $libClass = "current" }} + {{ else if or (eq .Site.Title "Transgender University Guidance") (eq .Site.Title "跨性别选校手册") (eq .Site.Title "跨性別選校手冊") }} + {{ $guideClass = "current" }} + {{ end }} + +
  • Library
    • +
  • UniGuide
    • + + +