From 56c867b5bb460755480e3ba95f6f028e7cd35a6a Mon Sep 17 00:00:00 2001 From: Filip Wandzio Date: Sun, 28 Sep 2025 20:55:35 +0200 Subject: Change background color to smoky black in dark mode Signed-off-by: Filip Wandzio --- src/app.css | 137 ++++++++++++++++++++--------------------- src/lib/components/Main.svelte | 35 +++-------- 2 files changed, 77 insertions(+), 95 deletions(-) (limited to 'src') diff --git a/src/app.css b/src/app.css index 829967c..f99121b 100644 --- a/src/app.css +++ b/src/app.css @@ -11,11 +11,49 @@ @media (prefers-color-scheme: dark) { :root { - --bg-color: #000c18; + --bg-color: #100c08; --text-color: #b7b8b9; } } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +} + +a { + color: var(--accent-color); + font-weight: 700; + text-decoration: underline; + text-decoration-color: transparent; + text-underline-offset: 4px; + text-decoration-thickness: 2px; + transition: color 0.3s, text-decoration-color 0.3s; +} + +a:hover, +a:focus { + color: var(--accent-hover); + text-decoration-color: currentColor; +} + +a:focus-visible { + outline: 3px solid var(--accent-color); + outline-offset: 4px; + border-radius: 3px; +} + +.highlight { + background: var(--accent-hover); + color: #fcfdfe; +} + body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, @@ -42,17 +80,17 @@ h2 { } @media (max-width: 768px) { - h1 { + h1, h2 { font-size: 1.75rem; } +} - h2 { - font-size: 1.75rem; - } +section { + margin-bottom: 3em; + padding: 0 2%; } -header, -footer { +header { padding: 0.5em; text-align: center; background: var(--bg-color); @@ -63,30 +101,6 @@ header h1 { padding-left: 1rem; } -main { - flex-grow: 1; - max-width: 900px; - margin: 0 auto; - padding: 2em; -} - -@media (max-width: 768px) { - main { - padding: 1.5em; - } -} - -footer { - text-align: center; - font-size: 1.05rem; - color: var(--text-color); -} - -section { - margin-bottom: 3em; - padding: 0 2%; -} - .header-top { display: flex; justify-content: center; @@ -99,6 +113,13 @@ section { justify-content: space-between; text-align: left; } + + header { + position: sticky; + top: 0; + z-index: 1000; + background: var(--bg-color); + } } nav ul { @@ -140,49 +161,25 @@ nav a { nav ul.open { display: flex; } - - header { - position: sticky; - top: 0; - z-index: 1000; - background: var(--bg-color); - } -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0 0 0 0); - border: 0; } -a { - color: var(--accent-color); - font-weight: 700; - text-decoration: underline; - text-decoration-color: transparent; - text-underline-offset: 4px; - text-decoration-thickness: 2px; - transition: color 0.3s, text-decoration-color 0.3s; -} - -a:hover, -a:focus { - color: var(--accent-hover); - text-decoration-color: currentColor; +main { + flex-grow: 1; + max-width: 900px; + margin: 0 auto; + padding: 2em; } -a:focus-visible { - outline: 3px solid var(--accent-color); - outline-offset: 4px; - border-radius: 3px; +@media (max-width: 768px) { + main { + padding: 1.5em; + } } -.highlight { - background: var(--accent-hover); - color: #fcfdfe; +footer { + padding: 0.5em; + text-align: center; + font-size: 1.05rem; + color: var(--text-color); + background: var(--bg-color); } diff --git a/src/lib/components/Main.svelte b/src/lib/components/Main.svelte index d5c6269..d5861c6 100644 --- a/src/lib/components/Main.svelte +++ b/src/lib/components/Main.svelte @@ -1,53 +1,38 @@
-

đź’ˇ About

+

About

- I’m a software engineer who makes tools that are simple, practical, - and useful. Right now I mostly work with web applications, mobile - development, and general software design. -

-

- Outside of programming, I spend time with music. + I’m a software engineer who builds practical tools. I mostly work on web and mobile apps, and general software development.

-

👨‍💻 Projects

+

Projects

- Side projects are hosted on my git repository. They are experiments, prototypes, and actual working solutions - used on my personal machine. Here you can also find materials used - on my prelections. + >. They include experiments, prototypes, and working tools I use personally. You can also find materials from my talks and presentations.

-

🔬 Research

+

Research

- Currently I am an undergraduate / master’s student in Computer - Science with a interest in - Cybersecurity, Operating Systems and Network Engineering. My academic work has focused on learning core concepts, exploring - how technology can be made more accessible, and experimenting with - practical projects that bridge theory and application. + I am an undergraduate / master’s student in Computer Science, interested in Cybersecurity, Operating Systems, and Networks. I focus on learning core concepts and building practical projects that connect theory to practice.

- I am not yet a professional researcher, but I enjoy reviewing - academic papers, and building prototypes. My long-term goal is to - pursue further graduate studies where I can deepen my expertise. + I enjoy reviewing papers and creating prototypes. I plan to continue my studies to deepen my expertise.

-

✉️ Contact

+

Contact

- If you’d like to get in touch, send me an email: contact@philw.dev. -- cgit v1.2.3