From cbfb8b8886b2bb3ce6bb1c67c00afa12466cab93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?cel=20=F0=9F=8C=B8?= <cel@blos.sm>
Date: Fri, 23 Jun 2023 16:47:07 +0100
Subject: [PATCH] finally fix styles for responsiveness (hopefully)

---
 static/style.css            | 36 ++++++++++++++++++++++--------------
 templates/base.html.tera    |  4 ----
 templates/contact.html.tera |  8 +++++---
 templates/home.html.tera    |  8 +++++---
 4 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/static/style.css b/static/style.css
index 0683c11..fc2d69e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,7 @@
+* {
+  word-break: break-word;
+}
+
 .panel {
   pointer-events: all;
 }
@@ -27,6 +31,7 @@ body {
 #page {
   /* padding: 6vw; */
   padding: 4vw;
+  gap: 4vw;
   max-width: 2000px;
   display: flex;
   flex-direction: column;
@@ -44,7 +49,7 @@ a {
   padding: 0.5em;
   border-radius: 2em;
   display: inline-block;
-  margin: 0.5em;
+  margin: 0;
 }
 
 a:hover {
@@ -59,17 +64,18 @@ a.active {
 img,
 video {
   max-width: 100%;
+  box-sizing: border-box;
   border: 4px solid #311f20;
 }
 
-ul {
+ul#nav {
   list-style-type: none;
-  margin: rem 0;
+  margin: 2vw 0;
   padding: 0;
 }
 
 .panel {
-  margin: 2vw;
+  margin: 0;
   border: 4px solid #311f20;
   padding: 2vw 4vw;
   position: relative;
@@ -87,7 +93,7 @@ nav {
   align-items: center;
   justify-content: start;
   flex-wrap: wrap;
-  gap: 0.2em;
+  gap: 1em;
   font-size: 1.1rem;
 }
 
@@ -121,6 +127,7 @@ header {
 
 main {
   display: flex;
+  gap: 4vw;
   flex-wrap: wrap;
   align-items: flex-start;
 }
@@ -138,6 +145,9 @@ main {
   /* z-index: 3; */
   z-index: 15;
   overflow-wrap: break-word;
+  display: flex;
+  flex-direction: column;
+  gap: 4vw;
 }
 
 .content {
@@ -145,6 +155,9 @@ main {
 }
 
 aside {
+  display: flex;
+  flex-direction: column;
+  gap: 4vw;
   flex: 1 1 30rem;
 }
 
@@ -179,12 +192,14 @@ footer {
 
 /* homepage css */
 
-#title {
+#title,
+#title * {
   z-index: 10;
   display: inline-block;
   font-family: 'kaeru kaeru';
   font-size: 2em;
-  padding: 0rem 4rem;
+  margin: 0;
+  padding: 1.5vw 2vw;
   background-color: #d16a84;
 }
 
@@ -318,13 +333,6 @@ iframe {
   gap: 1em;
 }
 
-.skweet-info h4 {
-  max-width: 40vw;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 .skweet-text {
   margin-top: 0.8em;
   margin-bottom: 0.8em;
diff --git a/templates/base.html.tera b/templates/base.html.tera
index a73fe4a..4f8aa3a 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -27,12 +27,8 @@
       
     <div id="page">
 
-      <header>
-      
         {% block header %}
         {% endblock header %}
-        
-      </header>
 
       <nav class="panel">
         <ul id="nav">
diff --git a/templates/contact.html.tera b/templates/contact.html.tera
index 5fd37b0..dc78959 100644
--- a/templates/contact.html.tera
+++ b/templates/contact.html.tera
@@ -4,9 +4,11 @@
 
 {% block header %}
 
-<div class="panel" id="title">
-  <h1>cel 🌸</h1>
-</div>
+<header>
+  <div class="panel" id="title">
+    <h1>cel 🌸</h1>
+  </div>
+</header>
 
 {% endblock header %}
 
diff --git a/templates/home.html.tera b/templates/home.html.tera
index 1a2a453..483c2f9 100644
--- a/templates/home.html.tera
+++ b/templates/home.html.tera
@@ -4,9 +4,11 @@
 
 {% block header %}
 
-<div class="panel" id="title">
-  <h1>cel 🌸</h1>
-</div>
+<header>
+  <div class="panel" id="title">
+    <h1>cel 🌸</h1>
+  </div>
+</header>
 
 {% if is_live %}
 <iframe