From 087ee81f31b46dca6a66ef858d4a9c747fb6012d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= <koro.no.omo@gmail.com>
Date: Thu, 7 May 2026 17:44:51 +0200
Subject: [PATCH] css clean up

---
 index.html                |  12 +-
 styles/main_style.css     | 393 ++------------------------------------
 styles/projects_style.css | 138 +++++++++++++
 styles/sidebar_style.css  | 258 +++++++++++++++++++++++++
 4 files changed, 417 insertions(+), 384 deletions(-)
 create mode 100644 styles/projects_style.css
 create mode 100644 styles/sidebar_style.css
diff --git a/index.html b/index.html
index e863993..c6a8c2c 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
   <meta charset="UTF-8">
   <title id="website_title"></title>
   <link rel="stylesheet" href="styles/main_style.css">
+  <link rel="stylesheet" href="styles/sidebar_style.css">
+  <link rel="stylesheet" href="styles/projects_style.css">
 </head>
 
 <body>
@@ -21,6 +23,12 @@
 
     <div class="sidebar-bottom-margin">
       <div class="website-config">
+        <label class="switch">
+          <input type="checkbox" id="themeToggle">
+          <span class="slider"></span>
+        </label>
+
+
         <div class="lang-dropdown" id="lang-dropdown">
           <button id="lang-button">Sprache</button>
 
@@ -30,10 +38,6 @@
           </div>
         </div>
 
-        <label class="switch">
-          <input type="checkbox" id="themeToggle">
-          <span class="slider"></span>
-        </label>
       </div>
 
       <div id="sidebar-bottom">
diff --git a/styles/main_style.css b/styles/main_style.css
index c192ba3..83c3e9c 100644
--- a/styles/main_style.css
+++ b/styles/main_style.css
@@ -5,11 +5,10 @@
     --surface: #3e3261;
     --muted: #C5C1D1;
     --border: #20192a;
-    --serif: 'Instrument Serif', Georgia, serif;
-    --sans: 'DM Sans', system-ui, sans-serif;
+    --serif: Georgia, serif;
+    --sans: system-ui, sans-serif;
     --nav-w: 230px;
-    --font-size: 18px;
-    --margin-main-content: 100px;
+    --font-size: 1rem;
 }
 
 .dark {
@@ -32,392 +31,26 @@ body {
 
 p,
 span,
-li {
+li,
+a {
     color: var(--muted);
     line-height: 1.7;
     font-size: var(--font-size);
+    font-family: var(--sans);
 }
 
 h1,
 h2,
-h3,
-a {
+h3 {
     color: var(--text);
+    font-family: var(--serif);
+}
+
+a {
+
+    text-decoration: none;
 }
 
 * {
     box-sizing: border-box;
-}
-
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 52px;
-    height: 28px;
-}
-
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--surface);
-    border-radius: 26px;
-    border: 1px solid var(--border);
-}
-
-.slider:hover {
-    border: 1px solid var(--text);
-}
-
-.slider:before {
-    position: absolute;
-    content: "";
-    height: 20px;
-    width: 20px;
-    left: 3px;
-    bottom: 3px;
-    background-color: var(--muted);
-    transition: 0.4s;
-    border-radius: 50%;
-}
-
-input:checked+.slider:before {
-    background-color: var(--bg);
-}
-
-input:checked+.slider {
-    background-color: var(--surface);
-}
-
-input:checked+.slider:before {
-    transform: translateX(24px);
-}
-
-.website-config {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.sidebar {
-    background-color: var(--bg);
-    margin-top: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    border-right: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    width: 230px;
-}
-
-.lang-dropdown {
-    display: flex;
-    gap: 3px;
-    margin-top: 10px;
-    width: 91px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: none;
-    background: none;
-    margin-bottom: 10px;
-}
-
-.lang-dropdown.show-border {
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    background: var(--bg2);
-}
-
-.lang-menu {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-}
-
-.lang-item {
-    cursor: pointer;
-    background-color: var(--surface);
-    width: 40px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    color: var(--muted);
-}
-
-.lang-item:hover {
-    border-color: var(--text);
-    color: var(--text);
-}
-
-#lang-button {
-    width: 40px;
-    height: 30px;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-
-    cursor: pointer;
-    background-color: var(--surface);
-    color: var(--muted);
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    padding: 3px 6px;
-
-    font-size: 14px;
-}
-
-#lang-button:hover {
-    border-color: var(--text);
-    color: var(--text);
-}
-
-option {
-    border: 1px solid var(--border);
-    border-radius: 8px;
-}
-
-#sidebar-top {
-    padding: 36px 32px 20px;
-    border-bottom: 1px solid var(--border);
-}
-
-#sidebar-top-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-}
-
-#sidebar-top-content p {
-    margin: 0;
-    pad: 0;
-    font-size: 13px;
-}
-
-#navbar {
-    padding: 36px 1px 28px 32px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    list-style: none;
-}
-
-.navbar-group {
-    margin-top: 10px;
-}
-
-.nav-link {
-    position: relative;
-    text-decoration: none;
-    color: var(--muted);
-    font-size: 13px;
-}
-
-.nav-link:hover {
-    color: var(--text);
-}
-
-.nav-link.active {
-    color: var(--text);
-    font-weight: bold;
-}
-
-.nav-link::before {
-    content: '';
-    position: absolute;
-    left: -32px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 2px;
-    height: 0;
-    background: var(--text);
-    border-radius: 0 2px 2px 0;
-    transition: height 0.18s;
-}
-
-.nav-link.active::before {
-    height: 14px;
-}
-
-.nav-link .idx {
-    color: var(--muted);
-    font-weight: normal;
-    font-size: 13px;
-}
-
-.sidebar-bottom-margin {
-    margin-top: auto;
-    display: flex;
-    flex-direction: column;
-}
-
-#sidebar-bottom {
-    padding: 36px 32px 28px;
-    border-top: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-}
-
-#sidebar-bottom a {
-    color: var(--muted);
-    text-decoration: none;
-    font-size: 0.84rem
-}
-
-.main-content {
-    margin-left: 230px;
-}
-
-.website-config {
-    margin-bottom: 15px;
-}
-
-#introduction {
-    padding-top: 100px;
-    margin-left: var(--margin-main-content);
-    margin-bottom: 60px;
-    margin-right: var(--margin-main-content);
-}
-
-#introduction p {
-    color: var(--text);
-}
-
-.text-link.introduction {
-    margin-top: 20px;
-}
-
-.project-section {
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-}
-
-.content-block {
-    height: 600px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    overflow: hidden;
-}
-
-.section-header {
-    margin: 80px;
-    margin-left: var(--margin-main-content);
-    margin-right: var(--margin-main-content);
-}
-
-.tags {
-    margin-top: 30px;
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-
-.tag {
-    color: var(--muted);
-    background: var(--surface);
-    border: 1px solid var(--border);
-    padding: 3px 10px;
-    border-radius: 3px;
-    font-size: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.block-image {
-    overflow: hidden;
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    display: flex;
-}
-
-.block-image.right {
-    margin-right: var(--margin-main-content);
-    border-left: 1px solid var(--border);
-    justify-content: left;
-}
-
-.block-image.left {
-    margin-left: var(--margin-main-content);
-    border-right: 1px solid var(--border);
-    justify-content: right;
-}
-
-.block-image img {
-    height: 100%;
-    width: 100%;
-    max-width: 700px;
-    max-height: 700px;
-    object-fit: cover;
-}
-
-.block-image img.left {
-    object-position: left;
-}
-
-.block-image img.center {
-    object-position: center;
-}
-
-.block-image img.right {
-    object-position: right;
-}
-
-.block-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: hidden;
-    margin-right: var(--margin-main-content);
-    padding-left: var(--margin-main-content);
-}
-
-.text-content {
-    display: inline;
-}
-
-.text-content a {
-    font-size: var(--font-size);
-    font-weight: normal;
-}
-
-.text-link:hover {
-    border-color: var(--text);
-}
-
-.text-link {
-    display: inline-block;
-    width: fit-content;
-    font-size: 0.90rem;
-    font-weight: 500;
-    text-decoration: none;
-    border-bottom: 1px solid var(--border);
-    padding-bottom: 2px;
-    transition: border-color 0.15s;
-    white-space: nowrap;
-}
-
-.link-row {
-    margin: var(--margin-main-content);
-    margin-top: 30px;
-}
-
-.hidden {
-    display: none;
 }
\ No newline at end of file
diff --git a/styles/projects_style.css b/styles/projects_style.css
new file mode 100644
index 0000000..693a8d4
--- /dev/null
+++ b/styles/projects_style.css
@@ -0,0 +1,138 @@
+.main-content {
+    margin-left: var(--nav-w);
+    --margin-main-content: 100px;
+}
+
+#introduction {
+    padding-top: 100px;
+    margin-left: var(--margin-main-content);
+    margin-bottom: 60px;
+    margin-right: var(--margin-main-content);
+}
+
+#introduction p {
+    color: var(--text);
+}
+
+.text-link.introduction {
+    margin-top: 20px;
+}
+
+.project-section {
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
+.content-block {
+    height: 600px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    overflow: hidden;
+}
+
+.section-header {
+    margin: 80px;
+    margin-left: var(--margin-main-content);
+    margin-right: var(--margin-main-content);
+}
+
+.tags {
+    margin-top: 30px;
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.tag {
+    color: var(--muted);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    padding: 3px 10px;
+    border-radius: 3px;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.block-image {
+    overflow: hidden;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+}
+
+.block-image.right {
+    margin-right: var(--margin-main-content);
+    border-left: 1px solid var(--border);
+    justify-content: left;
+}
+
+.block-image.left {
+    margin-left: var(--margin-main-content);
+    border-right: 1px solid var(--border);
+    justify-content: right;
+}
+
+.block-image img {
+    height: 100%;
+    width: 100%;
+    max-width: 700px;
+    max-height: 700px;
+    object-fit: cover;
+}
+
+.block-image img.left {
+    object-position: left;
+}
+
+.block-image img.center {
+    object-position: center;
+}
+
+.block-image img.right {
+    object-position: right;
+}
+
+.block-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    margin-right: var(--margin-main-content);
+    padding-left: var(--margin-main-content);
+}
+
+.text-content {
+    display: inline;
+}
+
+.text-content a {
+    font-size: var(--font-size);
+    font-weight: normal;
+}
+
+.text-link:hover {
+    border-color: var(--text);
+}
+
+.text-link {
+    display: inline-block;
+    width: fit-content;
+    font-size: 0.90rem;
+    font-weight: 500;
+    text-decoration: none;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 2px;
+    transition: border-color 0.15s;
+    white-space: nowrap;
+}
+
+.link-row {
+    margin: var(--margin-main-content);
+    margin-top: 30px;
+}
+
+.hidden {
+    display: none;
+}
\ No newline at end of file
diff --git a/styles/sidebar_style.css b/styles/sidebar_style.css
new file mode 100644
index 0000000..5340803
--- /dev/null
+++ b/styles/sidebar_style.css
@@ -0,0 +1,258 @@
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    border-right: 1px solid var(--border);
+    width: var(--nav-w);
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg);
+
+    --padding: 30px;
+}
+
+/* Sidebar Top */
+
+#sidebar-top {
+    border-bottom: 1px solid var(--border);
+    padding: var(--padding);
+    padding-top: calc(var(--padding) * 2);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+#sidebar-top-head {
+    padding: 0;
+    margin: 0;
+}
+
+#sidebar-top-content {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+}
+
+#sidebar-top-content p {
+    font-size: calc(var(--font-size) - 0.15rem);
+    margin: 0;
+    padding: 0;
+    height: fit-content;
+    width: fit-content;
+}
+
+/* Navbar */
+
+#navbar {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    padding: var(--padding);
+}
+
+.navbar-group {
+    margin-top: 15px;
+    margin-bottom: 5px;
+    font-size: calc(var(--font-size) + 0.1rem);
+    font-family: var(--serif);
+}
+
+.navbar-item {
+    position: relative;
+    font-weight: normal;
+    margin: 5px 0px 5px 0px;
+}
+
+.nav-link {
+    font-size: 0.75rem;
+}
+
+.nav-link:hover {
+    color: var(--text);
+}
+
+.nav-link.active {
+    color: var(--text);
+    font-weight: bold;
+}
+
+.nav-link::before {
+    content: "";
+    position: absolute;
+    background: var(--text);
+    width: 2px;
+    height: 0px;
+    top: 50%;
+    transform: translateY(-50%);
+    left: calc(var(--padding) * (-1) + 1px);
+    border-radius: 20px;
+    transition: height 0.18s;
+}
+
+.nav-link.active::before {
+    height: 14px;
+}
+
+.idx {
+    font-weight: normal;
+    font-size: 0.75rem;
+}
+
+/* Sidebar Bottom */
+
+.sidebar-bottom-margin {
+    margin-top: auto;
+}
+
+/* Language and Color */
+
+.website-config {
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 20px;
+    gap: 20px;
+}
+
+/* Color Switch */
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 52px;
+    height: 28px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--surface);
+    border-radius: 26px;
+    border: 1px solid var(--border);
+}
+
+.slider:hover {
+    border: 1px solid var(--text);
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: var(--muted);
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider:before {
+    background-color: var(--bg);
+}
+
+input:checked+.slider {
+    background-color: var(--surface);
+}
+
+input:checked+.slider:before {
+    transform: translateX(24px);
+}
+
+/* Language Dropdown*/
+
+.lang-dropdown {
+    display: flex;
+    gap: 3px;
+    width: 91px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    background: none;
+}
+
+.lang-dropdown.show-border {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg2);
+}
+
+.lang-menu {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+.lang-item {
+    cursor: pointer;
+    background-color: var(--surface);
+    width: 40px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--muted);
+}
+
+.lang-item:hover {
+    border-color: var(--text);
+    color: var(--text);
+}
+
+#lang-button {
+    width: 40px;
+    height: 30px;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    cursor: pointer;
+    background-color: var(--surface);
+    color: var(--muted);
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    padding: 3px 6px;
+
+    font-size: 14px;
+}
+
+#lang-button:hover {
+    border-color: var(--text);
+    color: var(--text);
+}
+
+/* Contact */
+
+#sidebar-bottom {
+    height: 100px;
+    padding: calc(var(--padding) / 2);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: flex-start;
+}
+
+#sidebar-bottom a {
+    font-size: calc(var(--font-size) - 0.15rem);
+}
\ No newline at end of file
