marvin/MarvinKrausser.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed mobile navbar responsivenes

Browse Source
This commit is contained in:
marvin
2026-05-09 21:46:40 +02:00
parent 194b55fff4
commit dcdb48db84
6 changed files with 56 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -12,7 +12,7 @@
</head>
<body>
<button id="button-mobile" class="button-mobile">22</button>
<button id="button-mobile" class="button-mobile no-navbar">22</button>
<div id="navbar-mobile">
<div id="navbar-mobile-links">
</div>
scripts/main_page.js
+1 -1
View File
@@ -80,7 +80,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");
styles/main_style.css
+1 -1
View File
@@ -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;
}
styles/mobile_bar_style.css
+34 -9
View File
@@ -10,7 +10,6 @@
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;
@@ -18,6 +17,15 @@
z-index: 10;
}
#navbar-mobile::before {
content: "";
position: absolute;
inset: 0;
background: var(--bg);
opacity: 0.992;
z-index: -1;
}
#navbar-mobile.inactive {
left: calc(var(--nav-mobile-w) * (-1))
}
@@ -33,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 {
@@ -47,6 +57,10 @@
border: 1px solid var(--border);
}
.button-mobile.navbar {
margin-bottom: 20px;
}
.button-mobile::before {
content: "";
position: absolute;
@@ -83,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: 60px;
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 {
@@ -121,10 +138,18 @@
.mobile-config {
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
margin-top: auto;
margin-bottom: 20px;
gap: 20px;
height: fit-content;
width: fit-content;
width: 100%;
}
.mobile-config .switch{
margin-left: 40px;;
}
.mobile-config .lang-dropdown {
margin-left: 19.5px;
}
styles/projects_style.css
+1 -1
View File
@@ -14,7 +14,7 @@
.main-content {
margin-left: 0;
--margin-main-content: 20px;
--margin-top: 30px;
--margin-top: 50px;
}
}
styles/sidebar_style.css
+18 -10
View File
@@ -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 */