From 26f67a80712f5b65774fd2abdcce8a3c5b4cf634 Mon Sep 17 00:00:00 2001
From: Liu Xiaoyi <circuitcoder0@gmail.com>
Date: Sun, 31 Mar 2024 20:28:36 +0800
Subject: [PATCH] Correctly place toggle for smaller screens

---
 _includes/nav.html    | 42 +++++++++++++++++++++---------------------
 static/css/_dark.scss | 40 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index a057b82..4caecff 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,14 +1,6 @@
 <div class="navbar navbar-default" role="navigation">
   <div class="container">
     <div class="navbar-header">
-      {% unless page.legacy %}
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      {% endunless %}
 			<a class="navbar-brand" href="/">
 				<span class="thuhidden">
 					{% if site.logo %}
@@ -74,20 +66,20 @@
 					{{ site.school }}</span>开源软件镜像站
 			</a>
     </div>
-		<div class="nav-right">
-			<div class="dark-switch" data-mode="light">
-				<div class="dark-switch-inner" data-mode="light">
-					<span class="dark-switch-icon" data-active="light">{% fa_svg fas.fa-sun %}</span>
-					<span class="dark-switch-icon" data-active="dark">{% fa_svg fas.fa-moon %}</span>
-					<span class="dark-switch-icon" data-active="darker">{% fa_svg fas.fa-lightbulb %}</span>
-					<span class="dark-switch-icon" data-active="lighter">{% fa_svg fas.fa-fire %}</span>
-				</div>
-
-				<div class="dark-switch-hint dark-switch-hint-ack">
-					<strong>主题切换键<sup>Beta</sup></strong><br/>
-					TUNA Mirrors 现已支持在 Light / Dark / Darker / Lighter 模式之间自由切换了！
-				</div>
+		<div class="dark-switch" data-mode="light">
+			<div class="dark-switch-inner" data-mode="light">
+				<span class="dark-switch-icon" data-active="light">{% fa_svg fas.fa-sun %}</span>
+				<span class="dark-switch-icon" data-active="dark">{% fa_svg fas.fa-moon %}</span>
+				<span class="dark-switch-icon" data-active="darker">{% fa_svg fas.fa-lightbulb %}</span>
+				<span class="dark-switch-icon" data-active="lighter">{% fa_svg fas.fa-fire %}</span>
 			</div>
+
+			<div class="dark-switch-hint dark-switch-hint-ack">
+				<strong>主题切换键<sup>Beta</sup></strong><br/>
+				TUNA Mirrors 现已支持在 Light / Dark / Darker / Lighter 模式之间自由切换了！
+			</div>
+		</div>
+		<div class="nav-right">
 			<div class="{% unless page.legacy %}navbar-collapse collapse {% endunless %}navbar-right">
 				<ul class="nav navbar-nav" role="menubar">
 					{% unless site.hide_navbar %}
@@ -105,6 +97,14 @@
 					{% endunless %}
 				</ul>
 			</div><!--/.nav-collapse -->
+      {% unless page.legacy %}
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      {% endunless %}
 		</div>
   </div>
 </div>
diff --git a/static/css/_dark.scss b/static/css/_dark.scss
index d28cbe7..4330872 100644
--- a/static/css/_dark.scss
+++ b/static/css/_dark.scss
@@ -1,9 +1,16 @@
-// TODO: < 768 px width
+// .nav-right {
+//   display: flex;
+//   flex-direction: row;
+//   align-items: center;
+// }
 
-.nav-right {
+.navbar .container {
   display: flex;
-  flex-direction: row;
   align-items: center;
+
+  > * {
+    float: none;
+  }
 }
 
 .dark-switch {
@@ -12,6 +19,13 @@
   position: relative;
   height: 36px;
 
+  @media (max-width: 991px) and (min-width: 768px) {
+    margin-right: -20px;
+  }
+
+  @media (max-width: 767.999px) {
+  }
+
   &-inner {
     height: 36px;
     width: 36px;
@@ -59,6 +73,11 @@
       right: 100%;
       bottom: 50%;
       opacity: 0;
+      @media (max-width: 991px) and (min-width: 768px) {
+        right: unset;
+        bottom: calc(100% - 10px);
+        right: 50%;
+      }
     }
   }
 
@@ -103,11 +122,26 @@
           }
         }
 
+        @keyframes hint-reveal-top {
+          0% {
+            transform: translate(50%, 0);
+            opacity: 1;
+          }
+
+          100% {
+            transform: translate(50%, -10px);
+            opacity: 0;
+          }
+        }
+
         &::after {
           content: "#{$mode}";
           animation-fill-mode: both;
           animation-iteration-count: 1;
           animation-name: hint-reveal;
+          @media (max-width: 991px) and (min-width: 768px) {
+            animation-name: hint-reveal-top;
+          }
           animation-duration: .2s;
           animation-delay: 2s;
           @if $mode == "darker" {