website redesign pt. 2

css/style.css

@@ -6,15 +6,12 @@
     --color: #000;
 }
 
-html,
-body {
-    width: 100%;
-    height: 100%;
-}
-
 body {
     margin: 0;
-    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     color: var(--color);
     background-color: var(--background);
     font-family: 'Inconsolata', sans-serif;
@@ -22,14 +19,8 @@ body {
 }
 
 #container {
-    display: flex;
+    max-width: 50%;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-
     text-align: center;
-    height: 100%;
-    width: 100%;
 }
 
 #shadow {
@@ -46,7 +37,7 @@ body {
     justify-content: center;
 }
 
-.tags > * {
+.tags>* {
     border: 2px solid var(--color);
     padding: 10px 20px 10px 20px;
 }
@@ -54,4 +45,23 @@ body {
 #switch_theme {
     cursor: pointer;
     text-decoration: underline;
+
+    position: fixed;
+    margin: 10px;
+    bottom: 0;
+    right: 0;
+
+    display: block;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    border: 1px solid var(--color);
+}
+
+#switch_theme > img {
+    width: 50px;
+}
+
+a {
+    color: var(--color);
 }

css/style.dark.css

@@ -17,5 +17,17 @@ body.dark .tags > * {
 }
 
 body.dark #shadow {
-    box-shadow: 0 0 30em 10em rgba(255, 189, 184, 1);
+    box-shadow: 0 0 30em 10em rgb(161, 148, 147);
+}
+
+body.dark a {
+    color: var(--background);
+}
+
+body.dark #switch_theme {
+    border: 1px solid var(--background) !important;
+}
+
+body.dark #switch_theme > img {
+    filter: invert() !important;
 }

index.html

@@ -20,9 +20,10 @@
         <div class="tags">
             <span>Franek</span>
             <span><span id="age">???</span> years old</span>
+            <span>introvert</span>
         </div>
 
-        <h3>what i like</h3>
+        <h3>what are my hobbies</h3>
         <div class="tags">
             <span>IT</span>
             <span>old automotive</span>
@@ -36,16 +37,34 @@
             <span>program various apps and scripts</span>
         </div>
 
-        <h3>what i'm listening to</h3>
+        <h3>what music genres do I like</h3>
+        <div class="tags">
+            <span>black metal</span>
+            <span>depressive suicidal black metal</span>
+            <span>doom metal</span>
+            <span>nu metal</span>
+            <span>rock</span>
+        </div>
+
+        <h3>what bands/singers do I like</h3>
         <div class="tags">
             <span>Mgła</span>
             <span>Behemoth</span>
+            <span>Burzum</span>
             <span>Venom</span>
             <span>Darkthrone</span>
+            <span>Ancient North</span>
+            <span>Rammstein</span>
+            <span>None</span>
+            <span>Decalius</span>
             <span>Slipknot</span>
             <span>Lil Peep</span>
+            <span>ABBA</span>
             <span>Alphaville</span>
+            <span>MGMT</span>
             <span>Depeche Mode</span>
+            <span>Evanescence</span>
+            <span>Loreen</span>
         </div>
 
         <h3>on which platforms I am on</h3>
@@ -55,12 +74,33 @@
             <a href="https://git.sador.me/sadorowo">gitea</a>
         </div>
 
+        <h3>what tools/frameworks do I know</h3>
+        <div class="tags">
+            <span>React</span>
+            <span>Flutter</span>
+            <span>JavaScript</span>
+            <span>TypeScript</span>
+            <span>Rust</span>
+            <span>Go</span>
+        </div>
+        
+        <h3>what software I'm using</h3>
+        <div class="tags">
+            <span>Arch Linux + Hyprland</span>
+            <span>Firefox</span>
+            <span>VSCodium</span>
+            <span>YouTube Music</span>
+            <span>LibreOffice</span>
+            <span>Thunderbird</span>
+        </div>
         <a href="mailto:contact@sador.me">
-            <h3>write an letter to me</h3>
+            <h3>write a letter to me</h3>
         </a>
 
         <h4>maybe i'll write something interesting here soon. who knows.</h4>
-        <h3 id="switch_theme">switch theme</h3>
+        <div id="switch_theme">
+            <img src="assets/palette.png" alt="palette logo">
+        </div>
     </div>
 </body>