[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 cbd9154. * [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 <[email protected]> Co-authored-by: Elihuso Quigley <[email protected]> Co-authored-by: Linzh <[email protected]>
one-among-us · Mar 19, 2024 · dda7a25 · dda7a25
1 parent d9ec6c0
commit dda7a25
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 9 deletions.
diff --git 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
@@ -33,12 +33,22 @@
        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';
 }
 
 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
@@ -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
@@ -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
@@ -7,6 +7,28 @@
 <body dir="{{ default "ltr" .Site.Language.LanguageDirection }}">
   <input type="checkbox" class="hidden toggle" id="menu-control" />
   <input type="checkbox" class="hidden toggle" id="toc-control" />
+  <div class="navigation-bar">
+    <li><a class="placeholder"></a></li>
+    <li><img src="https://oau.edu.kg/[email protected]"></li>
+    <li><a class="title">Trans in Academia! </a></li>
+    <li><a class="placeholder"> </a></li>
+
+    <li><a href="https://oau.edu.kg" class="notcurrent">Events</a></li>
+
+    {{ $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 }}
+
+    <li><a href="https://lib.oau.edu.kg" class="{{ $libClass }}">Library</a></li>
+    <li><a href="https://uniguide.oau.edu.kg" class="{{ $guideClass }}">UniGuide</a></li>
+
+    <button onclick="toggle()">👁</button>
+  </div>
   <main class="container flex">
     <aside class="book-menu">
       <div class="book-menu-content">
@@ -81,3 +103,9 @@
 {{ define "toc" }}
   {{ partial "docs/toc" . }}
 {{ end }}
+
+  <script>
+    function toggle() {
+      document.body.classList.toggle("dark-mode");
+    }
+  </script>
diff --git a/layouts/partials/docs/footer.html b/layouts/partials/docs/footer.html
@@ -26,3 +26,18 @@
 {{ with $script.Content }}
   <script>{{ . | safeJS }}</script>
 {{ end }}
+
+<br>
+Copyright © 2023 by <a href="https://transacademic.org/">Trans in Academia!</a><br>
+
+<!-- We uses difference licenses for different sites -->
+{{ if eq .Site.Title "Transgender University Guidance" }}
+Licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
+{{ end }}
+{{ if eq .Site.Title "Trans in Academia! 文章资料库" }}
+Licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC 4.0</a>
+{{ end }}
+
+<br>
+Designed by <a href="https://github.com/alex-shpak/hugo-book">hugo-book</a>, powered by <a
+    href="https://gohugo.io/">Hugo</a>.