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

Merge branch 'main' of https://github.com/MarvinKrausser/MarvinKrausser.github.io

Browse Source
This commit is contained in:
marvin
2026-05-11 19:00:22 +02:00
parent 104fd844e2 e73773cd71
commit 33cbd7e81e
6 changed files with 109 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+3 -1
View File
@@ -12,11 +12,12 @@
</head> </head>
<body> <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">
<div id="navbar-mobile-links"> <div id="navbar-mobile-links">
</div> </div>
<div class="mobile-config">
<label class="switch"> <label class="switch">
<input type="checkbox" id="themeToggle2"> <input type="checkbox" id="themeToggle2">
<span class="slider"></span> <span class="slider"></span>
@@ -31,6 +32,7 @@
<div class="lang-item hidden" data-lang="en">en</div> <div class="lang-item hidden" data-lang="en">en</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<aside class="sidebar"> <aside class="sidebar">
scripts/main_page.js
+3 -1
View File
@@ -6,6 +6,8 @@ if (lang != "en" && lang != "de") {
lang = "en"; lang = "en";
} }
document.documentElement.lang = lang;
history.scrollRestoration = "manual"; history.scrollRestoration = "manual";
function saveScroll() { function saveScroll() {
@@ -80,7 +82,7 @@ async function loadData() {
const button_mobile = document.getElementById("button-mobile"); const button_mobile = document.getElementById("button-mobile");
button_navbar_mobile.textContent = ""; button_navbar_mobile.textContent = "";
button_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); navbar_mobile_links.appendChild(button_navbar_mobile);
button_navbar_mobile.addEventListener("click", () => { button_navbar_mobile.addEventListener("click", () => {
navbar_mobile.classList.toggle("inactive"); navbar_mobile.classList.toggle("inactive");
styles/main_style.css
+1 -1
View File
@@ -8,7 +8,7 @@
--serif: Georgia, serif; --serif: Georgia, serif;
--sans: system-ui, sans-serif; --sans: system-ui, sans-serif;
--nav-w: 230px; --nav-w: 230px;
--nav-mobile-w: 200px; --nav-mobile-w: 60vw;
--font-size: 1rem; --font-size: 1rem;
} }
styles/mobile_bar_style.css
+43 -6
View File
@@ -10,11 +10,20 @@
align-items: center; align-items: center;
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
gap: 10px; gap: 10px;
background: var(--bg);
transition: left 0.3s; transition: left 0.3s;
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
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 { #navbar-mobile.inactive {
@@ -32,7 +41,9 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 10px; width: 100%;
border-bottom: 1px solid var(--border);
height: fit-content;
} }
.button-mobile { .button-mobile {
@@ -46,6 +57,10 @@
border: 1px solid var(--border); border: 1px solid var(--border);
} }
.button-mobile.navbar {
margin-bottom: 20px;
}
.button-mobile::before { .button-mobile::before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -82,28 +97,31 @@
background: var(--bg2); background: var(--bg2);
} }
#button-mobile { .button-mobile.no-navbar {
position: fixed; position: fixed;
top: 5px; top: 5px;
left: 5px; left: 5px;
margin-top: 0; margin-top: 0;
} }
#button-mobile.inactive { .button-mobile.no-navbar.inactive {
display: none; display: none;
} }
.navbar-item-mobile { .navbar-item-mobile {
width: 100%; width: 100%;
height: 80px; height: 8vh;
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-top: 1px solid var(--border);
} }
.navbar-item-mobile:hover { @media (hover: hover) and (pointer: fine) {
.navbar-item-mobile:hover {
background: var(--surface); background: var(--surface);
}
} }
.nav-link-mobile { .nav-link-mobile {
@@ -116,3 +134,22 @@
align-items: center; align-items: center;
padding: 10px; 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;
}
styles/projects_style.css
+31 -13
View File
@@ -1,19 +1,25 @@
.main-content { .main-content {
margin-left: var(--nav-w); margin-left: var(--nav-w);
--margin-main-content: 100px; --margin-main-content: 7vw;
--margin-top: 100px; --margin-top: 100px;
} }
@media (max-width: 1500px) {
.main-content {
--margin-main-content: 4vw;
}
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
.main-content { .main-content {
margin-left: 0; margin-left: 0;
--margin-main-content: 20px; --margin-main-content: 20px;
--margin-top: 30px; --margin-top: 50px;
} }
} }
#introduction { #introduction {
padding-top: var(--margin-top); margin-top: var(--margin-top);
margin-left: var(--margin-main-content); margin-left: var(--margin-main-content);
margin-bottom: 60px; margin-bottom: 60px;
margin-right: var(--margin-main-content); margin-right: var(--margin-main-content);
@@ -29,7 +35,6 @@
.project-section { .project-section {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
} }
.content-block { .content-block {
@@ -116,11 +121,6 @@
display: inline; display: inline;
} }
.text-content a {
font-size: var(--font-size);
font-weight: normal;
}
.text-link:hover { .text-link:hover {
border-color: var(--text); border-color: var(--text);
} }
@@ -128,13 +128,31 @@
.text-link { .text-link {
display: inline-block; display: inline-block;
width: fit-content; width: fit-content;
font-size: 0.90rem; font-size: var(--text-size);
font-weight: 500; font-weight: bolder;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid var(--border);
padding-bottom: 2px;
transition: border-color 0.15s; transition: border-color 0.15s;
white-space: nowrap; 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 { .link-row {
styles/sidebar_style.css
+12 -4
View File
@@ -82,8 +82,10 @@
font-size: 0.75rem; font-size: 0.75rem;
} }
.nav-link:hover { @media (hover: hover) and (pointer: fine) {
.nav-link:hover {
color: var(--text); color: var(--text);
}
} }
.nav-link.active { .nav-link.active {
@@ -162,8 +164,10 @@
border: 1px solid var(--border); border: 1px solid var(--border);
} }
.slider:hover { @media (hover: hover) and (pointer: fine) {
.slider:hover {
border: 1px solid var(--text); border: 1px solid var(--text);
}
} }
.slider:before { .slider:before {
@@ -233,9 +237,11 @@ input:checked+.slider:before {
color: var(--muted); color: var(--muted);
} }
.lang-item:hover { @media (hover: hover) and (pointer: fine) {
.lang-item:hover {
border-color: var(--text); border-color: var(--text);
color: var(--text); color: var(--text);
}
} }
.lang-button { .lang-button {
@@ -255,9 +261,11 @@ input:checked+.slider:before {
font-size: 14px; font-size: 14px;
} }
.lang-button:hover { @media (hover: hover) and (pointer: fine) {
.lang-button:hover {
border-color: var(--text); border-color: var(--text);
color: var(--text); color: var(--text);
}
} }
/* Contact */ /* Contact */