make somewhat reactive

index.css

@@ -24,6 +24,7 @@ html, body {
     background-color: var(--background);
     color: var(--text);
     height: 100vh;
+    width: 100vw;
     overflow: hidden;
     margin: 0;
     padding: 0;
@@ -35,7 +36,7 @@ a { color: unset; text-decoration: none; }
   display: flex; 
   flex-direction: column;
 }
-.flex-h { display: flex; }
+.flex-h, .r-flex-h { display: flex; }
 .center-v { align-items: center; }
 .center-h { justify-content: center; }
 
@@ -74,8 +75,14 @@ a { color: unset; text-decoration: none; }
   border-bottom: 1px solid var(--text);
 }
 .page-bar[bottom="true"] {
+  display: none;
   border-top: 1px solid var(--text);
 }
+.logo-big {
+  width: 10vw;
+  aspect-ratio: 1;
+  margin-right: 5em;
+}
 .scroll-hint {
   position: relative;
   height: 10%;
@@ -93,12 +100,19 @@ a { color: unset; text-decoration: none; }
 }
 
 ul.h-list {
-  display: inline;
+  display: inline-block;
   circle: list;
 }
 .h-list li {
   display: inline;
   margin-right: 0.5em;
+  whitespace: no-wrap;
+}
+.h-list.pilled li {
+  padding: 0.5em 1em;
+  background-color: var(--primary);
+  border-radius: 20px;
+  color: var(--background);
 }
 
 .product {
@@ -164,13 +178,41 @@ ul.h-list {
 .socials-tile[variant="mastodon"] { mask-image: url("https://api.iconify.design/mdi:mastodon.svg"); }
 .socials-tile[variant="email"] { mask-image: url("https://api.iconify.design/mdi:email.svg"); }
 .socials-tile[variant="discord"] { mask-image: url("https://api.iconify.design/mdi:discord.svg"); }
-.socials-tile:hover {
-}
 
 .txt-list div {
   margin-left: 2em;
 }
 
+@media(max-width: 800px) {
+  .r-flex-h {
+    display: flex;
+    flex-direction: column;
+  }
+  .page { padding: 1em; }
+  .h-list { padding-left: unset; }
+  .logo-big {
+    width: 25vw;
+    margin-right: unset;
+  }
+  .separator {
+    height: 2px;
+    width: 100%;
+    background-color: var(--text);
+    margin: 2em 0;
+  }
+  .socials-tile {
+    width: 2em;
+    height: 2em;
+  }
+  .page-bar[bottom="true"] {
+    border-top: unset;
+  }
+  .product[placeholder="true"],
+  .page-bar[bottom="true"] > * {
+    display: none;
+  }
+}
+
 #ts { color: #3178c6; }
 #rs { color: #dea584; }
 #html { color: #e34c26; }

index.html

@@ -28,8 +28,8 @@
       </div>
     <div class="page" first="true">
       <div></div>
-      <div class="flex-h center-h center-v"> 
-        <img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="width: 10vw; aspect-ratio: 1; margin-right: 5em">
+      <div class="r-flex-h center-h center-v"> 
+        <img class="logo-big" src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo"> 
         <div>
           <h2>Hi, I'm bread</h2>
           <p>I'm a computer science student from Germany. I'm interested in</p>
@@ -101,7 +101,7 @@
     <div class="page">
       <div class="flex-v center-v center-h">
         <h2>Live Services</h2>
-        <div class="flex-h"> 
+        <div class="r-flex-h"> 
           <a href="https://fixiv.net">
             <div class="product">
               <div class="flex-h center-v">
@@ -142,10 +142,10 @@
     <div class="page" first="true">
       <div></div>
       <div class="flex-v center-h center-v">
-        <div class="flex-h center-h center-v">
+        <div class="r-flex-h center-h center-v">
           <div class="flex-v center-h center-v">
             <h2>Friends</h2>
-            <ul class="h-list">
+            <ul class="h-list pilled">
               <li><a href="https://henhaa.art">Henrik</a></li>
               <li><a href="https://emma.pizza">Emma</a></li>
             </ul>