diff --git a/README.md b/README.md
index fa4faad..5eef74d 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,34 @@ scripts/
projects.js project entries with image / text blocks
```
-Styles are split the same way (`styles/`): global variables and theming, sidebar, mobile bar, projects and career sections. Colours, spacing and fonts are CSS custom properties, and dark mode is a single class that overrides them.
+The stylesheets are organised the same way. `styles/main.css` imports the individual files in cascade order:
+
+```
+styles/
+ main.css entry point, imports everything below
+ base/
+ variables.css colours, fonts and sizes as CSS custom properties (light and dark)
+ base.css resets and typography
+ utilities.css helper classes
+ layout/
+ sidebar.css fixed desktop sidebar
+ navbar.css desktop navigation links
+ mobile_bar.css slide-in mobile navigation
+ main_content.css page margins and breakpoints
+ components/
+ theme_switch.css light / dark toggle
+ lang_dropdown.css language picker
+ mobile_menu_button.css
+ tags.css
+ text_link.css
+ sections/
+ introduction.css
+ section_header.css shared header of work and project sections
+ project_blocks.css image / text blocks
+ work.css career entries
+```
+
+Colours, spacing and fonts are CSS custom properties, and dark mode is a single class that overrides them.
## Project structure
@@ -61,7 +88,7 @@ Styles are split the same way (`styles/`): global variables and theming, sidebar
├── lang/ en.json, de.json – all page content
├── config/ img_config.json – image ids, paths and crop positions
├── scripts/ ES modules (see above)
-├── styles/ stylesheets
+├── styles/ stylesheets (see above)
├── images/, images_jpg/ screenshots and diagrams for the projects
├── pdfs/ seminar paper, talk slides, user and developer handbooks
├── Dockerfile NGINX image serving the site
diff --git a/index.html b/index.html
index 9d27b72..fd26982 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,7 @@
-
-
-
-
-
+
diff --git a/styles/base/base.css b/styles/base/base.css
new file mode 100644
index 0000000..e5777af
--- /dev/null
+++ b/styles/base/base.css
@@ -0,0 +1,34 @@
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ background: linear-gradient(135deg, var(--bg), var(--bg2));
+ margin: 0;
+}
+
+p,
+span,
+li,
+a {
+ color: var(--muted);
+ line-height: 1.7;
+ font-size: var(--font-size);
+ font-family: var(--sans);
+}
+
+h1,
+h2,
+h3 {
+ color: var(--text);
+ font-family: var(--serif);
+}
+
+a {
+
+ text-decoration: none;
+}
+
+* {
+ box-sizing: border-box;
+}
diff --git a/styles/base/utilities.css b/styles/base/utilities.css
new file mode 100644
index 0000000..dd0e421
--- /dev/null
+++ b/styles/base/utilities.css
@@ -0,0 +1,3 @@
+.hidden {
+ display: none;
+}
diff --git a/styles/main_style.css b/styles/base/variables.css
similarity index 51%
rename from styles/main_style.css
rename to styles/base/variables.css
index 9259120..be52741 100644
--- a/styles/main_style.css
+++ b/styles/base/variables.css
@@ -20,38 +20,3 @@
--muted: #C5C1D1;
--border: #726684;
}
-
-html {
- scroll-behavior: smooth;
-}
-
-body {
- background: linear-gradient(135deg, var(--bg), var(--bg2));
- margin: 0;
-}
-
-p,
-span,
-li,
-a {
- color: var(--muted);
- line-height: 1.7;
- font-size: var(--font-size);
- font-family: var(--sans);
-}
-
-h1,
-h2,
-h3 {
- color: var(--text);
- font-family: var(--serif);
-}
-
-a {
-
- text-decoration: none;
-}
-
-* {
- box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/styles/components/lang_dropdown.css b/styles/components/lang_dropdown.css
new file mode 100644
index 0000000..c7a23ca
--- /dev/null
+++ b/styles/components/lang_dropdown.css
@@ -0,0 +1,73 @@
+/* Language Dropdown*/
+
+.lang-dropdown {
+ user-select: none;
+ display: flex;
+ gap: 3px;
+ width: 91px;
+ height: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: none;
+ background: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: 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);
+}
+
+@media (hover: hover) and (pointer: fine) {
+ .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;
+}
+
+@media (hover: hover) and (pointer: fine) {
+ .lang-button:hover {
+ border-color: var(--text);
+ color: var(--text);
+ }
+}
diff --git a/styles/components/mobile_menu_button.css b/styles/components/mobile_menu_button.css
new file mode 100644
index 0000000..d89bf5f
--- /dev/null
+++ b/styles/components/mobile_menu_button.css
@@ -0,0 +1,72 @@
+.button-mobile.no-navbar {
+ display: inline-block;
+}
+
+/* Hidden together with the mobile bar (mobile_bar.css) on large screens */
+@media (min-width: 1001px) and (min-height: 701px) {
+ .button-mobile.no-navbar {
+ display: none;
+ }
+}
+
+.button-mobile {
+ position: relative;
+ width: 40px;
+ height: 40px;
+ background: var(--surface);
+ border: none;
+ margin-top: 20px;
+ cursor: pointer;
+ border: 1px solid var(--border);
+}
+
+.button-mobile.navbar {
+ margin-bottom: 20px;
+}
+
+.button-mobile::before {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 30%;
+ background: var(--muted);
+ height: 2px;
+ width: 60%;
+ transform: translateX(-50%);
+}
+
+.button-mobile::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 65%;
+ background: var(--muted);
+ height: 2px;
+ width: 60%;
+ transform: translateX(-50%);
+}
+
+.button-mobile:hover::after {
+ background: var(--text);
+}
+
+.button-mobile:hover::before {
+ background: var(--text);
+}
+
+.button-mobile:hover {
+ width: 40px;
+ height: 40px;
+ background: var(--bg2);
+}
+
+.button-mobile.no-navbar {
+ position: fixed;
+ top: 5px;
+ left: 5px;
+ margin-top: 0;
+}
+
+.button-mobile.no-navbar.inactive {
+ display: none;
+}
diff --git a/styles/components/tags.css b/styles/components/tags.css
new file mode 100644
index 0000000..a568a06
--- /dev/null
+++ b/styles/components/tags.css
@@ -0,0 +1,18 @@
+.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;
+}
diff --git a/styles/components/text_link.css b/styles/components/text_link.css
new file mode 100644
index 0000000..aceddf6
--- /dev/null
+++ b/styles/components/text_link.css
@@ -0,0 +1,33 @@
+.text-link:hover {
+ border-color: var(--text);
+}
+
+.text-link {
+ display: inline-block;
+ width: fit-content;
+ font-size: var(--text-size);
+ font-weight: bolder;
+ text-decoration: none;
+ 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);
+}
diff --git a/styles/components/theme_switch.css b/styles/components/theme_switch.css
new file mode 100644
index 0000000..a8c55a7
--- /dev/null
+++ b/styles/components/theme_switch.css
@@ -0,0 +1,57 @@
+/* Color Switch */
+
+.switch {
+ user-select: none;
+ 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);
+}
+
+@media (hover: hover) and (pointer: fine) {
+ .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);
+}
diff --git a/styles/layout/main_content.css b/styles/layout/main_content.css
new file mode 100644
index 0000000..495b7c6
--- /dev/null
+++ b/styles/layout/main_content.css
@@ -0,0 +1,19 @@
+.main-content {
+ margin-left: var(--nav-w);
+ --margin-main-content: 7vw;
+ --margin-top: 100px;
+}
+
+@media (max-width: 1500px) {
+ .main-content {
+ --margin-main-content: 4vw;
+ }
+}
+
+@media (max-width: 1000px) or (max-height: 700px) {
+ .main-content {
+ margin-left: 0;
+ --margin-main-content: 20px;
+ --margin-top: 50px;
+ }
+}
diff --git a/styles/mobile_bar_style.css b/styles/layout/mobile_bar.css
similarity index 61%
rename from styles/mobile_bar_style.css
rename to styles/layout/mobile_bar.css
index 4aed038..de09d6e 100644
--- a/styles/mobile_bar_style.css
+++ b/styles/layout/mobile_bar.css
@@ -30,18 +30,11 @@
left: calc(var(--nav-mobile-w) * (-1))
}
-.button-mobile.no-navbar {
- display: inline-block;
-}
-
+/* Hidden together with the menu button (mobile_menu_button.css) on large screens */
@media (min-width: 1001px) and (min-height: 701px) {
#navbar-mobile {
display: none;
}
-
- .button-mobile.no-navbar {
- display: none;
- }
}
#navbar-mobile-links {
@@ -54,68 +47,6 @@
height: fit-content;
}
-.button-mobile {
- position: relative;
- width: 40px;
- height: 40px;
- background: var(--surface);
- border: none;
- margin-top: 20px;
- cursor: pointer;
- border: 1px solid var(--border);
-}
-
-.button-mobile.navbar {
- margin-bottom: 20px;
-}
-
-.button-mobile::before {
- content: "";
- position: absolute;
- left: 50%;
- top: 30%;
- background: var(--muted);
- height: 2px;
- width: 60%;
- transform: translateX(-50%);
-}
-
-.button-mobile::after {
- content: "";
- position: absolute;
- left: 50%;
- top: 65%;
- background: var(--muted);
- height: 2px;
- width: 60%;
- transform: translateX(-50%);
-}
-
-.button-mobile:hover::after {
- background: var(--text);
-}
-
-.button-mobile:hover::before {
- background: var(--text);
-}
-
-.button-mobile:hover {
- width: 40px;
- height: 40px;
- background: var(--bg2);
-}
-
-.button-mobile.no-navbar {
- position: fixed;
- top: 5px;
- left: 5px;
- margin-top: 0;
-}
-
-.button-mobile.no-navbar.inactive {
- display: none;
-}
-
.navbar-item-mobile {
width: 100%;
height: 8vh;
@@ -161,4 +92,4 @@
.mobile-config .lang-dropdown {
margin-left: 19.5px;
-}
\ No newline at end of file
+}
diff --git a/styles/layout/navbar.css b/styles/layout/navbar.css
new file mode 100644
index 0000000..dec9caf
--- /dev/null
+++ b/styles/layout/navbar.css
@@ -0,0 +1,62 @@
+/* Navbar */
+
+#navbar {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ padding: var(--padding);
+}
+
+.navbar-group {
+ margin-top: 25px;
+ margin-bottom: 5px;
+ font-size: calc(var(--font-size) + 0.1rem);
+ font-family: var(--serif);
+}
+
+.navbar-item {
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: relative;
+ font-weight: normal;
+ margin: 5px 0px 5px 0px;
+ user-select: none;
+}
+
+.nav-link {
+ font-size: 0.75rem;
+}
+
+@media (hover: hover) and (pointer: fine) {
+ .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;
+}
diff --git a/styles/layout/sidebar.css b/styles/layout/sidebar.css
new file mode 100644
index 0000000..d9821a1
--- /dev/null
+++ b/styles/layout/sidebar.css
@@ -0,0 +1,89 @@
+.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;
+}
+
+@media (max-width: 1000px) or (max-height: 700px) {
+ .sidebar {
+ display: none;
+ }
+}
+
+/* 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;
+}
+
+/* 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;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+/* 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);
+}
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..e4d62cf
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,27 @@
+/* Entry point. Order matters: later rules win at equal specificity. */
+
+/* Base */
+@import "base/variables.css";
+@import "base/base.css";
+
+/* Layout */
+@import "layout/sidebar.css";
+@import "layout/navbar.css";
+@import "layout/mobile_bar.css";
+@import "layout/main_content.css";
+
+/* Components */
+@import "components/theme_switch.css";
+@import "components/lang_dropdown.css";
+@import "components/mobile_menu_button.css";
+@import "components/tags.css";
+@import "components/text_link.css";
+
+/* Sections */
+@import "sections/introduction.css";
+@import "sections/section_header.css";
+@import "sections/project_blocks.css";
+@import "sections/work.css";
+
+/* Utilities */
+@import "base/utilities.css";
diff --git a/styles/projects_style.css b/styles/projects_style.css
deleted file mode 100644
index 6dde277..0000000
--- a/styles/projects_style.css
+++ /dev/null
@@ -1,168 +0,0 @@
-.main-content {
- margin-left: var(--nav-w);
- --margin-main-content: 7vw;
- --margin-top: 100px;
-}
-
-@media (max-width: 1500px) {
- .main-content {
- --margin-main-content: 4vw;
- }
-}
-
-@media (max-width: 1000px) or (max-height: 700px) {
- .main-content {
- margin-left: 0;
- --margin-main-content: 20px;
- --margin-top: 50px;
- }
-}
-
-#introduction {
- margin-top: var(--margin-top);
- 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);
-}
-
-.content-block {
- height: 600px;
- display: grid;
- grid-template-columns: 1fr 1fr;
- overflow: hidden;
- margin-top: -1px;
-}
-
-.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;
- 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 {
- 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-link:hover {
- border-color: var(--text);
-}
-
-.text-link {
- display: inline-block;
- width: fit-content;
- font-size: var(--text-size);
- font-weight: bolder;
- text-decoration: none;
- 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 {
- margin: var(--margin-main-content);
- margin-top: 30px;
-}
-
-.hidden {
- display: none;
-}
\ No newline at end of file
diff --git a/styles/sections/introduction.css b/styles/sections/introduction.css
new file mode 100644
index 0000000..1d34cee
--- /dev/null
+++ b/styles/sections/introduction.css
@@ -0,0 +1,14 @@
+#introduction {
+ margin-top: var(--margin-top);
+ 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;
+}
diff --git a/styles/sections/project_blocks.css b/styles/sections/project_blocks.css
new file mode 100644
index 0000000..9c6637b
--- /dev/null
+++ b/styles/sections/project_blocks.css
@@ -0,0 +1,66 @@
+.content-block {
+ height: 600px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ overflow: hidden;
+ margin-top: -1px;
+}
+
+.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;
+ 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 {
+ 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;
+}
+
+.link-row {
+ margin: var(--margin-main-content);
+ margin-top: 30px;
+}
diff --git a/styles/sections/section_header.css b/styles/sections/section_header.css
new file mode 100644
index 0000000..2b2ceaf
--- /dev/null
+++ b/styles/sections/section_header.css
@@ -0,0 +1,9 @@
+.project-section {
+ border-top: 1px solid var(--border);
+}
+
+.section-header {
+ margin: 80px;
+ margin-left: var(--margin-main-content);
+ margin-right: var(--margin-main-content);
+}
diff --git a/styles/work_style.css b/styles/sections/work.css
similarity index 100%
rename from styles/work_style.css
rename to styles/sections/work.css
diff --git a/styles/sidebar_style.css b/styles/sidebar_style.css
deleted file mode 100644
index 98eb3a8..0000000
--- a/styles/sidebar_style.css
+++ /dev/null
@@ -1,284 +0,0 @@
-.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;
-}
-
-@media (max-width: 1000px) or (max-height: 700px) {
- .sidebar {
- display: none;
- }
-}
-
-/* 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: 25px;
- margin-bottom: 5px;
- font-size: calc(var(--font-size) + 0.1rem);
- font-family: var(--serif);
-}
-
-.navbar-item {
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
- position: relative;
- font-weight: normal;
- margin: 5px 0px 5px 0px;
- user-select: none;
-}
-
-.nav-link {
- font-size: 0.75rem;
-}
-
-@media (hover: hover) and (pointer: fine) {
- .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;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-/* Color Switch */
-
-.switch {
- user-select: none;
- 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);
-}
-
-@media (hover: hover) and (pointer: fine) {
- .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 {
- user-select: none;
- display: flex;
- gap: 3px;
- width: 91px;
- height: 40px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: none;
- background: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: 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);
-}
-
-@media (hover: hover) and (pointer: fine) {
- .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;
-}
-
-@media (hover: hover) and (pointer: fine) {
- .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