styling fixes: added padding clamp

1 files changed, 26 insertions, 13 deletions

diff --git a/static/style.css b/static/style.css
index b777549..c7e6366 100644
--- a/static/style.css
+++ b/static/style.css
@@ -58,8 +58,8 @@ body {
 
 #page {
   /* padding: 6vw; */
-  padding: 4vw;
-  gap: 4vw;
+  padding: min(4vw, 100px);
+  gap: min(4vw, 100px);
   max-width: 1750px;
   display: flex;
   flex-direction: column;
@@ -102,14 +102,14 @@ video {
 
 ul#nav {
   list-style-type: none;
-  margin: 2vw 0;
+  margin: min(2vw, 50px) 0;
   padding: 0;
 }
 
 .panel {
   margin: 0;
   border: 4px solid #311f20;
-  padding: 2vw 4vw;
+  padding: min(2vw, 50px) min(4vw, 100px);
   position: relative;
 }
 
@@ -152,15 +152,16 @@ nav {
 }
 
 header {
+  flex: 1;
   display: flex;
   align-items: end;
   flex-wrap: wrap;
-  gap: 4vw;
+  gap: min(4vw, 100px);
 }
 
 main {
   display: flex;
-  gap: 4vw;
+  gap: min(4vw, 100px);
   flex-wrap: wrap;
   align-items: flex-start;
 }
@@ -180,7 +181,7 @@ main {
   overflow-wrap: break-word;
   display: flex;
   flex-direction: column;
-  gap: 4vw;
+  gap: min(4vw, 100px);
 }
 
 .content {
@@ -190,7 +191,7 @@ main {
 aside {
   display: flex;
   flex-direction: column;
-  gap: 4vw;
+  gap: min(4vw, 100px);
   flex: 1 1 30rem;
 }
 
@@ -226,17 +227,22 @@ footer {
 
 /* homepage css */
 
-#title,
-#title * {
+#title {
+  overflow-wrap: initial;
+  word-break: keep-all;
   z-index: 10;
   display: inline-block;
   font-family: 'kaeru kaeru';
   font-size: 2em;
   margin: 0;
-  padding: 1.5vw 2vw;
+  padding: min(3vw, 75px) min(4vw, 100px);
   background-color: #d16a84;
 }
 
+#title h1 {
+  margin: 0;
+}
+
 #stream,
 #scrobble {
   flex: 0 1 auto;
@@ -554,11 +560,18 @@ pre code {
   border: none;
 }
 
+#top {
+  display: flex;
+  gap: min(4vw, 100px);
+  flex-wrap: wrap-reverse;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
 #lang-select {
   background: #311f20;
-  float: right;
+  flex: 0 0 auto;
   padding: 0.5vw 1vw;
-  margin-left: 4vw;
 }
 
 /* branches */