-
+
+
-
diff --git a/scripts/main_page.js b/scripts/main_page.js
index 39b0c85..16dc02f 100644
--- a/scripts/main_page.js
+++ b/scripts/main_page.js
@@ -6,6 +6,8 @@ if (lang != "en" && lang != "de") {
lang = "en";
}
+document.documentElement.lang = lang;
+
history.scrollRestoration = "manual";
function saveScroll() {
@@ -80,7 +82,7 @@ async function loadData() {
const button_mobile = document.getElementById("button-mobile");
button_navbar_mobile.textContent = "";
button_mobile.textContent = "";
- button_navbar_mobile.classList = "button-mobile";
+ button_navbar_mobile.classList = "button-mobile navbar";
navbar_mobile_links.appendChild(button_navbar_mobile);
button_navbar_mobile.addEventListener("click", () => {
navbar_mobile.classList.toggle("inactive");
diff --git a/styles/main_style.css b/styles/main_style.css
index 941d37c..be0e25b 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: 200px;
+ --nav-mobile-w: 60vw;
--font-size: 1rem;
}
diff --git a/styles/mobile_bar_style.css b/styles/mobile_bar_style.css
index 137b30a..ee8ed00 100644
--- a/styles/mobile_bar_style.css
+++ b/styles/mobile_bar_style.css
@@ -10,11 +10,20 @@
align-items: center;
border-right: 1px solid var(--border);
gap: 10px;
- background: var(--bg);
transition: left 0.3s;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
+ z-index: 10;
+}
+
+#navbar-mobile::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: var(--bg);
+ opacity: 0.992;
+ z-index: -1;
}
#navbar-mobile.inactive {
@@ -32,7 +41,9 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
- gap: 10px;
+ width: 100%;
+ border-bottom: 1px solid var(--border);
+ height: fit-content;
}
.button-mobile {
@@ -46,6 +57,10 @@
border: 1px solid var(--border);
}
+.button-mobile.navbar {
+ margin-bottom: 20px;
+}
+
.button-mobile::before {
content: "";
position: absolute;
@@ -82,28 +97,31 @@
background: var(--bg2);
}
-#button-mobile {
+.button-mobile.no-navbar {
position: fixed;
top: 5px;
left: 5px;
margin-top: 0;
}
-#button-mobile.inactive {
+.button-mobile.no-navbar.inactive {
display: none;
}
.navbar-item-mobile {
width: 100%;
- height: 80px;
+ height: 8vh;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
+ border-top: 1px solid var(--border);
}
-.navbar-item-mobile:hover {
- background: var(--surface);
+@media (hover: hover) and (pointer: fine) {
+ .navbar-item-mobile:hover {
+ background: var(--surface);
+ }
}
.nav-link-mobile {
@@ -115,4 +133,23 @@
justify-content: center;
align-items: center;
padding: 10px;
+}
+
+.mobile-config {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-top: auto;
+ margin-bottom: 20px;
+ gap: 20px;
+ height: fit-content;
+ width: 100%;
+}
+
+.mobile-config .switch{
+ margin-left: 40px;;
+}
+
+.mobile-config .lang-dropdown {
+ margin-left: 19.5px;
}
\ No newline at end of file
diff --git a/styles/projects_style.css b/styles/projects_style.css
index 71fabfe..d7d12b0 100644
--- a/styles/projects_style.css
+++ b/styles/projects_style.css
@@ -1,19 +1,25 @@
.main-content {
margin-left: var(--nav-w);
- --margin-main-content: 100px;
+ --margin-main-content: 7vw;
--margin-top: 100px;
}
+@media (max-width: 1500px) {
+ .main-content {
+ --margin-main-content: 4vw;
+ }
+}
+
@media (max-width: 1000px) {
.main-content {
margin-left: 0;
--margin-main-content: 20px;
- --margin-top: 30px;
+ --margin-top: 50px;
}
}
#introduction {
- padding-top: var(--margin-top);
+ margin-top: var(--margin-top);
margin-left: var(--margin-main-content);
margin-bottom: 60px;
margin-right: var(--margin-main-content);
@@ -29,7 +35,6 @@
.project-section {
border-top: 1px solid var(--border);
- border-bottom: 1px solid var(--border);
}
.content-block {
@@ -116,11 +121,6 @@
display: inline;
}
-.text-content a {
- font-size: var(--font-size);
- font-weight: normal;
-}
-
.text-link:hover {
border-color: var(--text);
}
@@ -128,13 +128,31 @@
.text-link {
display: inline-block;
width: fit-content;
- font-size: 0.90rem;
- font-weight: 500;
+ font-size: var(--text-size);
+ font-weight: bolder;
text-decoration: none;
- border-bottom: 1px solid var(--border);
- padding-bottom: 2px;
transition: border-color 0.15s;
white-space: nowrap;
+ position: relative;
+}
+
+.text-link:hover {
+ color: var(--text);
+}
+
+.text-link::before{
+ content: "";
+ width: 100%;
+ height: 1.2px;
+ background: var(--muted);
+ left: 0;
+ bottom: 2px;
+ position: absolute;
+ border-radius: 16px;
+}
+
+.text-link:hover::before {
+ background: var(--text);
}
.link-row {
diff --git a/styles/sidebar_style.css b/styles/sidebar_style.css
index deb2b11..adb8546 100644
--- a/styles/sidebar_style.css
+++ b/styles/sidebar_style.css
@@ -82,8 +82,10 @@
font-size: 0.75rem;
}
-.nav-link:hover {
- color: var(--text);
+@media (hover: hover) and (pointer: fine) {
+ .nav-link:hover {
+ color: var(--text);
+ }
}
.nav-link.active {
@@ -162,8 +164,10 @@
border: 1px solid var(--border);
}
-.slider:hover {
- border: 1px solid var(--text);
+@media (hover: hover) and (pointer: fine) {
+ .slider:hover {
+ border: 1px solid var(--text);
+ }
}
.slider:before {
@@ -233,9 +237,11 @@ input:checked+.slider:before {
color: var(--muted);
}
-.lang-item:hover {
- border-color: var(--text);
- color: var(--text);
+@media (hover: hover) and (pointer: fine) {
+ .lang-item:hover {
+ border-color: var(--text);
+ color: var(--text);
+ }
}
.lang-button {
@@ -255,9 +261,11 @@ input:checked+.slider:before {
font-size: 14px;
}
-.lang-button:hover {
- border-color: var(--text);
- color: var(--text);
+@media (hover: hover) and (pointer: fine) {
+ .lang-button:hover {
+ border-color: var(--text);
+ color: var(--text);
+ }
}
/* Contact */