diff --git a/scripts/main_page.js b/scripts/main_page.js index 16dc02f..72e8953 100644 --- a/scripts/main_page.js +++ b/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"); diff --git a/styles/main_style.css b/styles/main_style.css index be0e25b..917c229 100644 --- a/styles/main_style.css +++ b/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; } diff --git a/styles/mobile_bar_style.css b/styles/mobile_bar_style.css index ee8ed00..4aed038 100644 --- a/styles/mobile_bar_style.css +++ b/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 { diff --git a/styles/projects_style.css b/styles/projects_style.css index d7d12b0..6dde277 100644 --- a/styles/projects_style.css +++ b/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; diff --git a/styles/sidebar_style.css b/styles/sidebar_style.css index adb8546..f19ee71 100644 --- a/styles/sidebar_style.css +++ b/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; }