finally fix styles for responsiveness (hopefully)

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;

templates/base.html.tera

@@ -27,13 +27,9 @@
       
     <div id="page">
 
-      <header>
-      
         {% block header %}
         {% endblock header %}
 
-      </header>
-
       <nav class="panel">
         <ul id="nav">
           <li><a class="{% block nav_home %}{% endblock %}" href="/">home</a></li>

templates/contact.html.tera

@@ -4,9 +4,11 @@
 
 {% block header %}
 
+<header>
   <div class="panel" id="title">
     <h1>cel 🌸</h1>
   </div>
+</header>
 
 {% endblock header %}
 

templates/home.html.tera

@@ -4,9 +4,11 @@
 
 {% block header %}
 
+<header>
   <div class="panel" id="title">
     <h1>cel 🌸</h1>
   </div>
+</header>
 
 {% if is_live %}
 <iframe