styling fixes: added padding clamp

3 files changed, 31 insertions, 19 deletions

diff --git a/src/i18n.rs b/src/i18n.rs
index 964aaa3..751a0ea 100644
--- a/src/i18n.rs
+++ b/src/i18n.rs
@@ -21,7 +21,6 @@ pub async fn set_language<E: Endpoint>(next: E, mut req: Request) -> poem::Resul
             .get::<Session>()
             .expect("To use the `set_language` middleware, the `Session` data is required.");
         session.set("lang", params.lang);
-        println!("{:?}", session.get::<String>("lang"))
     }
     next.call(req).await
 }
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 */
diff --git a/templates/base.html b/templates/base.html
index 366d42a..aae9da2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -29,7 +29,10 @@
 
   <div id="page">
 
-    <div>
+    <div id="top">
+      {% block header %}
+      {% endblock header %}
+
       <div id="lang-select" class="panel">
         <a href="?lang=de">de</a>
         <a href="?lang=en">en</a>
@@ -38,9 +41,6 @@
         <a href="?lang=pt">pt</a>
         <a href="?lang=zh">zh</a>
       </div>
-
-      {% block header %}
-      {% endblock header %}
     </div>
 
     <nav class="panel">
@@ -100,4 +100,4 @@
   </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file