changed breakpoints, gap in content block, theme slider bug fixed

scripts/main_page.js

@@ -244,16 +244,23 @@ async function loadData() {
 
 loadData();
 
-function setupLangDropdown(buttonId, menuId, dropdownId, themeToggle) {
+function setupLangDropdown(buttonId, menuId, dropdownId, themeToggle, themeToggleOthers) {
     const toggle = document.getElementById(themeToggle);
+    const toggleElements = themeToggleOthers.map(id => document.getElementById(id));
 
     toggle.addEventListener("change", () => {
         document.documentElement.classList.toggle("dark", toggle.checked);
         if (toggle.checked) {
             setCookie("theme", "dark", 60 * 60 * 24 * 7);
+            toggleElements.forEach(element => {
+                element.checked = true;
+            });
         }
         else {
             setCookie("theme", "light", 60 * 60 * 24 * 7);
+            toggleElements.forEach(element => {
+                element.checked = false;
+            });
         }
 
     });
@@ -307,8 +314,8 @@ function setupLangDropdown(buttonId, menuId, dropdownId, themeToggle) {
         }
     });
 }
-setupLangDropdown("lang-button", "lang-menu", "lang-dropdown", "themeToggle");
-setupLangDropdown("lang-button2", "lang-menu2", "lang-dropdown2", "themeToggle2");
+setupLangDropdown("lang-button", "lang-menu", "lang-dropdown", "themeToggle", ["themeToggle2"]);
+setupLangDropdown("lang-button2", "lang-menu2", "lang-dropdown2", "themeToggle2", ["themeToggle"]);
 
 function create_navbar_entry(navbar, navbar_mobile_links, title, id, j) {
     const navbar_item = document.createElement("li");

styles/main_style.css

@@ -8,7 +8,7 @@
     --serif: Georgia, serif;
     --sans: system-ui, sans-serif;
     --nav-w: 230px;
-    --nav-mobile-w: 60vw;
+    --nav-mobile-w: min(60vw, 400px);
     --font-size: 1rem;
 }
 

styles/mobile_bar_style.css

@@ -18,22 +18,30 @@
 }
 
 #navbar-mobile::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: var(--bg);
-  opacity: 0.992;
-  z-index: -1;
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--bg);
+    opacity: 0.992;
+    z-index: -1;
 }
 
 #navbar-mobile.inactive {
     left: calc(var(--nav-mobile-w) * (-1))
 }
 
-@media (min-width: 1001px) {
+.button-mobile.no-navbar {
+    display: inline-block;
+}
+
+@media (min-width: 1001px) and (min-height: 701px) {
     #navbar-mobile {
         display: none;
     }
+
+    .button-mobile.no-navbar {
+        display: none;
+    }
 }
 
 #navbar-mobile-links {
@@ -146,8 +154,9 @@
     width: 100%;
 }
 
-.mobile-config .switch{
-    margin-left: 40px;;
+.mobile-config .switch {
+    margin-left: 40px;
+    ;
 }
 
 .mobile-config .lang-dropdown {

styles/projects_style.css

@@ -10,7 +10,7 @@
     }
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1000px) or (max-height: 700px) {
     .main-content {
         margin-left: 0;
         --margin-main-content: 20px;
@@ -42,6 +42,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     overflow: hidden;
+    margin-top: -1px;
 }
 
 .section-header {
@@ -80,12 +81,14 @@
     margin-right: var(--margin-main-content);
     border-left: 1px solid var(--border);
     justify-content: left;
+    margin-left: -0.5px;
 }
 
 .block-image.left {
     margin-left: var(--margin-main-content);
     border-right: 1px solid var(--border);
     justify-content: right;
+    margin-right: -0.5px;
 }
 
 .block-image img {
@@ -140,7 +143,7 @@
     color: var(--text);
 }
 
-.text-link::before{
+.text-link::before {
     content: "";
     width: 100%;
     height: 1.2px;

styles/sidebar_style.css

@@ -14,7 +14,7 @@
     --padding: 30px;
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1000px) or (max-height: 700px) {
     .sidebar {
         display: none;
     }