website new

2026-04-26 00:22:07 +02:00
parent 38ed72109e
commit 7d71d8a3f4
18 changed files with 432 additions and 0 deletions
@@ -0,0 +1,141 @@
+:root {
+    --bg: #5E4C93;
+    --bg2: #1b162a;
+    --text: #FFFFFF;
+    --surface: #3e3261;
+    --muted: #C5C1D1;
+    --border: #20192a;
+    --serif: 'Instrument Serif', Georgia, serif;
+    --sans: 'DM Sans', system-ui, sans-serif;
+    --nav-w: 230px;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #5E4C93;
+        --bg2: #1b162a;
+        --text: #FFFFFF;
+        --surface: #3e3261;
+        --muted: #C5C1D1;
+        --border: #20192a;
+    }
+}
+
+body {
+    background: linear-gradient(135deg, var(--bg), var(--bg2));
+}
+
+p {
+    color: var(--muted);
+}
+
+h1, h2, h3, a {
+    color: var(--text);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+#introduction {
+    margin-top: 100px;
+    margin-left: 100px;
+    margin-bottom: 150px;
+}
+
+#introduction p {
+    color: var(--text);
+}
+
+.project-section {
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
+.content-block {
+    height: 400px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.section-header {
+    margin: 80px;
+    margin-left: 100px;
+}
+
+.tags {
+    margin-top: 40px;
+    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;
+}
+
+
+.block-image {
+    overflow: hidden;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
+.block-image.right {
+    margin-right: 100px;
+    border-left: 1px solid var(--border);
+}
+
+.block-image.left {
+    margin-left: 100px;
+    border-right: 1px solid var(--border);
+}
+
+.block-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-top: 1px solid var(--border);
+}
+
+.block-text.right {
+    margin-right: 100px;
+    padding-left: 50px;
+}
+
+.block-text.left {
+    padding-right: 50px;
+    margin-left: 100px;
+}
+
+.block-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.text-link:hover {
+    border-color: var(--text);
+}
+
+.text-link {
+    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: 100px;
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}