edited text blurb and minor things on main page

src/lib/banner2.svelte

@@ -115,6 +115,8 @@
         flex-direction: row;
         flex-wrap: wrap;
         margin-bottom: 4px;
+
+        --color-tag-filters-bg: var(--color-background-highlight-alt);
     }
 
     .date-container {

src/lib/lists/blog-gallery.svelte

@@ -119,6 +119,8 @@
         gap: 4px;
         flex-direction: row;
         flex-wrap: wrap;
+
+        --color-tag-filters-bg: var(--color-background-highlight-alt);
     }
 
     @media screen and (max-width: 900px) {

src/routes/+layout.svelte

@@ -460,7 +460,7 @@
         .post-tag {
             font-family: var(--font-mono);
             font-size: 0.8rem;
-            background-color: var(--color-background-highlight-alt);
+            background-color: var(--color-tag-filters-bg);
             margin: 0;
             padding: 4px;
             border-radius: 8px;
@@ -468,13 +468,29 @@
             font-weight: 600;
         }
         
+        /* container for all tag stuff that only holds the colour */
+        .tag-filters {
+            --color-tag-filters: var(--color-highlight);
+            --color-tag-filters-bg: var(--color-background-highlight);
+            --color-tag-filters-bg-hover: var(--color-background-highlight-hover);
+            --color-tag-filters-text: var(--color-text-highlight);
+            --color-tag-filters-text-active: var(--color-text-dark);
+        }
+        .tag-filters-alt {
+            --color-tag-filters: var(--color-highlight-alt);
+            --color-tag-filters-bg: var(--color-background-highlight-alt);
+            --color-tag-filters-bg-hover: var(--color-background-highlight-hover-alt);
+            --color-tag-filters-text: var(--color-text-highlight-alt);
+            --color-tag-filters-text-active: var(--color-text);
+        }
+
         .tag-filter-header {
             font-family: var(--font-mono);
             font-size: 0.9rem;
             /* margin-left: 10px;    
             margin-right: 10px; */
             margin: 12px 10px 4px;
-            color: var(--color-text-highlight-alt);
+            color: var(--color-tag-filters-text);
         }
 
         .tag-filter-container {
@@ -495,11 +511,12 @@
         }
 
         .tag-filter-selected {
-            background-color: var(--color-highlight-alt);
+            color: var(--color-tag-filters-text-active);
+            background-color: var(--color-tag-filters);
         }
 
         .tag-filter:hover {
-            background-color: var(--color-background-highlight-hover-alt);
+            background-color: var(--color-tag-filters-bg-hover);
         }
 
         @media screen and (max-width: 600px) {

src/routes/+page.svelte

@@ -37,14 +37,14 @@
     const galleryTopRow: GalleryRowEntry[] = [
         {
             title: "Homesick – devlog",
-            description: `My active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
+            description: `my active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
             img: "projects/projectn5/banner2.webp",
             altText: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
             link: "projects/projectn5",
         },
         {
             title: "Projects",
-            description: "<b>[updated]</b> An overview of all my projects!",
+            description: "<b>[updated]</b> an overview of all my projects!",
             img: "projects/banner.webp",
             altText: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
             link: "projects",
@@ -54,21 +54,21 @@
     const galleryBottomRow: GalleryRowEntry[] = [
         {
             title: "Creative Feed",
-            description: `The small things I make find a home here`,
+            description: `the small things I make find a home here.`,
             img: "feed/banner.webp",
             altText: "A blue screen with the text 'how do you do art ? 1. face your fears 2. become your heroes'. The 'art' looks to have been edited in. The music artist Porter Robinson is standing in the bottom right corner.",
             link: "feed",
         },
         {
             title: "Blog",
-            description: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
+            description: `a place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
             img: "blog/robert.webp",
             altText: "View at a tram bridge rising and then curving to the left.",
             link: "blog",
         },
         {
             title: "Files",
-            description: "Find things I've put for download on my copyparty instance",
+            description: "find things I've put for download on my copyparty instance.",
             img: "main/hypertext.webp",
             altText: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenbur ger tor!' is displayed.",
             link: "https://files.natconf.dev/public/",
@@ -91,24 +91,20 @@
         <div>
             <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
 
-            <p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction because I'm REALLY bad at this type of stuff.</p>
+            <p>Hi! I'm Deniz. Welcome to my website! This is my little sanctuary where I post about all my creative projects as well as some of my thoughts.</p>
 
-            <p>I made this website because I really don't like modern social media and I wanted a more creative way of expressing myself without giving in to the attention economy or submitting all my data including my soul to some megacorp. That's why you'll find a bunch of stuff here that interests me: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I am also posting random things on my blog, both of which you can find linked above and below.</p>
+            <p>I made this website because I dislike modern social media and I wanted a more liberating and creative way of expressing myself without giving in to the attention economy by submitting all of my data including my soul to some megacorp. That's why you'll find a mix of all kinds of things that interest me here: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I also post on the <a href="/projects">projects</a> and <a href="/feed">feed</a> pages, depending on which page is more suitable for a given project.</p>
 
-            <p>I listen to A LOT of music (fav artists: <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a>, <a href="https://blender.org/">Blender</a>, and <a href="https://krita.org/">Krita</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
+            <p>I listen to <b>a lot</b> of music. My favourite artists are <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>, but you can <a href="/meta/music-rotation">find my current rotation here</a>. I also enjoy dabbling around in cool FOSS tools like <a href="https://godotengine.org/">Godot</a>, <a href="https://blender.org/">Blender</a>, and <a href="https://krita.org/">Krita</a> which I use under <a href="https://fedoraproject.org/">Fedora KDE</a>. If you want to know more about me and this website, <a href="/meta/about">go here</a>!</p>
 
-            <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
+            <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher, but between you and me; I may end up doing something else :).</p>
         </div>
 
         <div>
             <div class="sidebox-container blurred-background">
                 <h4 class="sidebox-header">heads-up</h4>
                 
-                <p>This website works best on Firefox and other Gecko-based browsers! It is also nearly 100% mobile-friendly!</p>
+                <p>This website works best on Firefox and other Gecko-based browsers! It is also nearly 100% mobile-friendly! All pages are largely functional without JavaScript but I recommend you enable it (some elements won't work without it)! Links may change but I will set up redirects, promise.</p>
-                
-                <p>All pages are functional without JavaScript but I recommend you enable it (some elements won't work without it)!</p>
-
-                <p>Links may change but I will set up redirects, promise.</p>
 
                 <hr>
 

src/routes/blog/+page.svelte

@@ -32,6 +32,7 @@
         bannerAlt="View at a tram bridge rising and then curving to the left." />
 
     <!-- TODO descriptions on filter click -->
+    <div class="tag-filters-alt">
         <p class="tag-filter-header"># filter posts by tag:</p>
         <div class="tag-filter-container">
             {#each Object.values(BlogPostTag) as tag}
@@ -42,6 +43,7 @@
                 {/if}
             {/each}
         </div>
+    </div>
 
     <BlogGallery posts={filterPosts()} />
 </Content>

src/routes/projects/+page.svelte

@@ -40,9 +40,8 @@
 
     <p>Welcome to my 💫new💫 projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!</p>
 
-    <p>I'll add some more of my past projects, new projects, and more details about individual projects. Maybe I'll also split the content into pages.</p>
-
     <!-- TODO it would be nice if these were green here to separate them from the red tags on the blog page -->
+    <div class="tag-filters">
         <p class="tag-filter-header"># filter projects by category:</p>
         <div class="tag-filter-container">
             {#each Object.values(ProjectCategory) as tag}
@@ -53,6 +52,7 @@
                 {/if}
             {/each}
         </div>
+    </div>
 
     <div class="project-container">
         {#each filterProjects() as p}