feat(header): better responsiveness

1 files changed, 23 insertions, 2 deletions

diff --git a/src/scss/style.scss b/src/scss/style.scss
index bdb052a..0ae776d 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -5,7 +5,7 @@ $text: hsl(0, 0%, 100%);
 
 $bp-large: 1200px;
 $bp-mid: 1000px; // video disabled
-$bp-small: 750px;
+$bp-small: 630px;
 $bp-tiny: 500px;
 
 body {
@@ -86,12 +86,33 @@ header {
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
+  @media only screen and (max-width: $bp-small) {
+    text-align: center;
+  }
 }
 
 .tags {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem 1rem;
   font-size: 1.75rem;
+  @media only screen and (max-width: $bp-mid) {
+    flex-wrap: wrap;
+    & *:nth-child(2) {
+      display: none;
+    }
+    & *:nth-child(4) {
+      display: none;
+    }
+    & *:nth-child(6) {
+      display: none;
+    }
+    & *:nth-child(8) {
+      display: none;
+    }
+  }
+  @media only screen and (max-width: $bp-small) {
+    display: none;
+  }
 }
 
 section {