diff --git a/blog/sass/css/edition-2/main.scss b/blog/sass/css/edition-2/main.scss
index c5f8ed52..d8b8867b 100644
--- a/blog/sass/css/edition-2/main.scss
+++ b/blog/sass/css/edition-2/main.scss
@@ -982,103 +982,96 @@ img {
 
 /* Manual switch between dark and light mode */
 
-@mixin light-switch-light {
-    // icon: https://icons.getbootstrap.com/icons/moon-fill/ (MIT licensed)
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004' class='bi bi-moon' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.53 10.53a7 7 0 0 1-9.058-9.058A7.003 7.003 0 0 0 8 15a7.002 7.002 0 0 0 6.53-4.47z'/%3E%3C/svg%3E");
-}
+.theme-switch {
+    margin-bottom: 1rem;
 
-@mixin light-switch-dark {
-    // icon: https://icons.getbootstrap.com/icons/brightness-high-fill/ (MIT licensed)
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9' class='bi bi-brightness-high-fill' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E");
+    @media (min-width: 80rem) {
+        position: fixed;
+        left: 2rem;
+        bottom: 2rem;
+        margin-bottom: 0rem;
+    }
 }
 
 .light-switch {
+    @mixin light-switch-light {
+        // icon: https://icons.getbootstrap.com/icons/moon-fill/ (MIT licensed)
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004' class='bi bi-moon' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.53 10.53a7 7 0 0 1-9.058-9.058A7.003 7.003 0 0 0 8 15a7.002 7.002 0 0 0 6.53-4.47z'/%3E%3C/svg%3E");
+    }
+
+    @mixin light-switch-dark {
+        // icon: https://icons.getbootstrap.com/icons/brightness-high-fill/ (MIT licensed)
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9' class='bi bi-brightness-high-fill' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E");
+    }
+
+    display: inline-block;
     @include light-switch-light();
-}
 
-[data-theme="dark"] .light-switch {
-    @include light-switch-dark();
-}
-
-@media (prefers-color-scheme: dark) {
-    .light-switch {
-        @include light-switch-dark();
-    }
-
-    [data-theme="light"] .light-switch {
-        @include light-switch-light();
-    }
-}
-
-.light-switch {
-    position: fixed;
-    left: 2rem;
-    bottom: 2rem;
     background-repeat: no-repeat;
     width: 2rem;
     height: 2rem;
     cursor: pointer;
     opacity: 0.6;
-}
 
-.light-switch:hover {
-    transform: scale(1.3);
-    transition: 200ms ease-out;
-    opacity: 1;
+    &:hover {
+        transform: scale(1.3);
+        transition: 200ms ease-out;
+        opacity: 1;
+    }
+
+    [data-theme="dark"] & {
+        @include light-switch-dark();
+    }
+
+    @media (prefers-color-scheme: dark) {
+        @include light-switch-dark();
+
+        [data-theme="light"] & {
+            @include light-switch-light();
+        }
+    }
 }
 
 /* Clear theme override and go back to system theme */
 
-@mixin light-switch-reset-light {
-    // icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
-}
-
-@mixin light-switch-reset-dark {
-    // icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
-}
-
 .light-switch-reset {
+    @mixin light-switch-reset-light {
+        // icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    }
+
+    @mixin light-switch-reset-dark {
+        // icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    }
+
     @include light-switch-reset-light();
-}
-
-.light-switch-reset {
-    display: none;
-}
-
-[data-theme="light"] .light-switch-reset {
-    display: block;
-}
-
-[data-theme="dark"] .light-switch-reset {
-    @include light-switch-reset-dark();
-    display: block;
-}
-
-@media (prefers-color-scheme: dark) {
-    .light-switch-reset {
-        @include light-switch-reset-dark();
-    }
-
-    [data-theme="light"] .light-switch-reset {
-        @include light-switch-reset-light();
-    }
-}
-
-.light-switch-reset {
-    position: fixed;
-    left: 5rem;
-    bottom: 1.5rem;
+    vertical-align: bottom;
+    margin-left: 0.5rem;
     background-repeat: no-repeat;
     width: 2rem;
     height: 2rem;
     cursor: pointer;
     opacity: 0.6;
-}
 
-.light-switch-reset:hover {
-    transform: scale(1.1);
-    transition: 200ms ease-out;
-    opacity: 1;
+    display: none;
+    [data-theme="light"] & {
+        display: inline-block;
+    }
+    [data-theme="dark"] & {
+        @include light-switch-reset-dark();
+        display: inline-block;
+    }
+
+    @media (min-width: 80rem) {
+        position: fixed;
+        left: 4.5rem;
+        bottom: 2rem;
+    }
+
+    &:hover {
+        transform: scale(1.1);
+        transition: 200ms ease-out;
+        opacity: 1;
+    }
 }
diff --git a/blog/templates/edition-2/base.html b/blog/templates/edition-2/base.html
index da415b22..d2b9f81a 100644
--- a/blog/templates/edition-2/base.html
+++ b/blog/templates/edition-2/base.html
@@ -41,6 +41,11 @@
             </div>
         </header>
 
+        <div class="theme-switch">
+            <div class="light-switch" onclick="toggle_lights()" title="Switch between light and dark theme"></div>
+            <div class="light-switch-reset" onclick="clear_theme_override()" title="Clear the theme override and go back to the system theme"></div>
+        </div>
+
         <div>
             {% block toc_aside %}{% endblock toc_aside %}
             <main>{% block main %}{% endblock main %}</main>
@@ -57,9 +62,6 @@
         </footer>
     </div>
 
-    <div class="light-switch" onclick="toggle_lights()" title="Switch between light and dark theme"></div>
-    <div class="light-switch-reset" onclick="clear_theme_override()" title="Clear the theme override and go back to the system theme"></div>
-
     <script data-goatcounter="https://phil-opp.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
 </body>