refacor css and html

6 files changed, 202 insertions, 230 deletions

diff --git a/static/style.css b/static/style.css
index 4313657..658197c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,90 +1,34 @@
-body {
-  background-color: #80a7e3;
-  color: #311f20;
-  font-family: 'Go Mono';
-  padding: 0;
-  margin: 0;
+.panel {
+  pointer-events: all;
 }
 
-.page {
-  padding: 6vw;
-  display: flex;
-  flex-direction: column;
+.panel:hover {
+  z-index: 15 !important;
+  pointer-events: all;
 }
 
-img {
-  max-width: 100%;
-  border: 4px solid #311f20;
+#page,
+body {
+  pointer-events: none;
 }
 
-.label,
-.label * {
-  display: inline;
+body {
+  background-color: #80a7e3;
+  color: #311f20;
+  font-family: 'Go Mono';
   padding: 0;
-  border-radius: 0;
-  border: 0;
   margin: 0;
-  background-color: #0000;
 }
 
-header {
+#page {
+  padding: 6vw;
   display: flex;
-  align-items: end;
-  flex-wrap: wrap;
-}
-
-header>#stream,
-header>#scrobble {
-  flex: 0 1 auto;
-  font-family: 'Terminal Grotesque Open';
-  font-size: 1.5rem;
-}
-
-#stream {
-  background-color: #b52f6a;
-  max-width: 100%;
-  width: 550px;
-  aspect-ratio: 550/350;
-}
-
-.panel {
-  margin: 2vw;
-  border: 4px solid #311f20;
-  padding: 2rem 4rem;
-  position: relative;
-  pointer-events: all;
-}
-
-header,
-main,
-body {
-  pointer-events: none;
+  flex-direction: column;
 }
 
-#title {
-  z-index: 10;
-  display: inline-block;
-  font-family: 'kaeru kaeru';
+h2 {
   font-size: 2em;
-  padding: 0rem 4rem;
-  background-color: #d16a84;
-}
-
-#scrobble {
-  background-color: #eb743b;
-  border-radius: 0;
-  color: #353070;
-}
-
-iframe {
-  margin: 0;
-  padding: 0;
-}
-
-ul {
-  list-style-type: none;
-  margin: rem 0;
-  padding: 0;
+  font-family: PicNic;
 }
 
 a {
@@ -99,7 +43,6 @@ a {
 
 a:hover {
   font-style: italic;
-  // font-family: 'Avara';
 }
 
 a.active {
@@ -107,6 +50,24 @@ a.active {
   color: #311f20;
 }
 
+img {
+  max-width: 100%;
+  border: 4px solid #311f20;
+}
+
+ul {
+  list-style-type: none;
+  margin: rem 0;
+  padding: 0;
+}
+
+.panel {
+  margin: 2vw;
+  border: 4px solid #311f20;
+  padding: 2rem 4rem;
+  position: relative;
+}
+
 nav {
   padding: 1rem 4rem;
   background-color: #5faf87;
@@ -114,11 +75,7 @@ nav {
   font-family: 'Basteleur';
 }
 
-nav:hover {
-  z-index: 10;
-}
-
-ul#nav {
+#nav {
   display: flex;
   align-items: center;
   justify-content: start;
@@ -127,6 +84,15 @@ ul#nav {
   font-size: 1.1rem;
 }
 
+#nav img {
+  position: relative;
+  top: 0.2em;
+  border: none;
+  height: 1em;
+  width: 1em;
+  padding: 0;
+}
+
 #suscakke {
   margin: 0;
   padding: 0;
@@ -140,21 +106,103 @@ ul#nav {
   font-style: normal;
 }
 
-#nav img {
-  position: relative;
-  top: 0.2em;
-  border: none;
-  height: 1em;
-  width: 1em;
+header {
+  display: flex;
+  align-items: end;
+  flex-wrap: wrap;
+}
+
+main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.main-content {
+  flex: 12 1 0;
+  min-width: 50vw;
+  // z-index: 3;
+  z-index: 15;
+  overflow-wrap: break-word;
+}
+
+.content {
+  background-color: #d1a2e7;
+}
+
+aside {
+  flex: 1 1 30rem;
+}
+
+footer {
+  z-index: -1;
+  background-color: #e8d2c5;
+}
+
+.badge,
+.badge * {
+  display: inline;
+  padding: 0;
+  border-radius: 0;
+  border: 0;
+  margin: 4px 0;
+  background-color: #0000;
+}
+
+/* homepage css */
+
+#title {
+  z-index: 10;
+  display: inline-block;
+  font-family: 'kaeru kaeru';
+  font-size: 2em;
+  padding: 0rem 4rem;
+  background-color: #d16a84;
+}
+
+#stream,
+#scrobble {
+  flex: 0 1 auto;
+  font-size: 1.8rem;
+}
+
+#scrobble {
+  background-color: #eb743b;
+  font-family: 'Terminal Grotesque Open';
+  border-radius: 0;
+  color: #353070;
+}
+
+#stream {
+  background-color: #b52f6a;
+  max-width: 100%;
+  width: 550px;
+  aspect-ratio: 550/350;
+}
+
+iframe {
+  margin: 0;
   padding: 0;
 }
 
-#blog-list {
+/* posts sidebar widget */
+
+#posts {
+  z-index: -1;
+  background-color: #7f99e6;
+  font-family: 'Steps Mono'
+}
+
+#posts h2 {
+  font-family: 'Director';
+}
+
+#post-list {
   width: 100%;
   margin: 1em 0;
 }
 
-.blog-entry {
+.post-entry {
   height: 1.4em;
   display: flex;
   justify-content: space-between;
@@ -165,25 +213,20 @@ ul#nav {
   font-size: 1.1rem;
 }
 
-.blog-entry:hover {
+.post-entry:hover {
   font-family: 'Steps-Mono';
 }
 
+/* skinnyverse sidebar widget */
+
 #skinnyverse {
   font-family: 'Karrik';
   color: #e8c6e6;
   border-color: #bf42a0;
   background-color: #28446c;
-  flex: 1 1 15rem;
   z-index: -1;
 }
 
-.post-content>div>h2,
-.post-content>div>h3,
-.post-content>div>h4 {
-  font-family: 'Cherry Bomb' !important;
-}
-
 #latest-skweets {
   font-family: 'Cherry Bomb' !important;
   background-color: #0000;
@@ -193,135 +236,77 @@ ul#nav {
   color: #bf42a0;
 }
 
-#blogs {
-  z-index: -1;
-  background-color: #7f99e6;
-  font-family: 'Steps Mono'
-}
-
-h2 {
-  font-size: 2em;
-  font-family: PicNic;
-}
-
-#blogs h2 {
-  font-family: 'Director';
-}
-
-#footer {
-  z-index: -1;
-  background-color: #e8d2c5;
-}
-
-#footer>a {
-  border-radius: 0;
-  padding: 0;
-  background-color: #0000;
-}
-
-aside {
-  flex: 1 1 30rem;
-}
-
-#skinnyverse:hover,
-.content:hover,
-#blogs:hover,
-#footer:hover {
-  z-index: 10;
-}
-
-.post {
+.skweet {
   display: flex;
   gap: 2em;
   margin: 2em 0;
 }
 
-.post h4,
-h5 {
+.skweet h2,
+.skweet h3,
+.skweet h4,
+.skweet h5 {
+  font-family: 'Cherry Bomb' !important;
   margin: 0;
+  padding: 0;
 }
 
-.post>.profile {
+.skweet .profile {
   border: 4px solid #bf42a0;
   width: 48px;
   height: 48px;
 }
 
-.post-content {
+.skweet-content {
   flex: 1 1 auto;
 }
 
-.post>.post-content>div {
+.skweet-info {
   display: flex;
   justify-content: space-between;
 }
 
-.post>.post-content>.gallery {
+.skweet-gallery {
   display: flex;
   max-width: 100%;
   gap: 1em;
 }
 
-.post>.post-content>.gallery>img {
+.skweet-gallery img {
   border: 4px solid #bf42a0;
   flex: 1 1 auto;
   width: 10px;
 }
 
-.branch {
-  border: none;
-  width: 100vw;
-  position: absolute;
-  pointer-events: none;
-}
-
-main {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-.main-content {
-  flex: 12 1 0;
-  min-width: 50vw;
-  z-index: 3;
-  overflow-wrap: break-word;
-}
-
-.main-content:hover {
-  z-index: 10;
-}
+/* contact page */
 
 .p-name {
   display: none;
 }
 
-.content {
-  background-color: #d1a2e7;
-}
+/* branches */
 
-.content:hover {
-  z-index: 10;
+.branch {
+  border: none;
+  width: 100vw;
+  position: absolute;
+  pointer-events: none;
 }
 
 #branch6 {
   top: 200vw;
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
-  pointer-events: none;
 }
 
 #branch2 {
   top: 60vw;
-
   z-index: -2;
-  pointer-events: none;
 }
 
 #branch3 {
   top: 100vw;
   z-index: -2;
-  pointer-events: none;
 }
 
 #branch4 {
@@ -329,12 +314,10 @@ main {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   z-index: 0;
-  pointer-events: none;
 }
 
 #branch5 {
   top: 0vw;
-  pointer-events: none;
 }
 
 #branch1 {
@@ -342,17 +325,14 @@ main {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   z-index: -1;
-  pointer-events: none;
 }
 
 #branch7 {
   top: 180vw;
-  pointer-events: none;
 }
 
 #branch8 {
   top: 260vw;
-  pointer-events: none;
 }
 
 #branch9 {
@@ -360,31 +340,26 @@ main {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   z-index: 4;
-  pointer-events: none;
 }
 
 #branch10 {
   top: 100vw;
-  pointer-events: none;
 }
 
 #branch11 {
   top: 145vw;
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
-  pointer-events: none;
 }
 
 #branch12 {
   top: 180vw;
-  pointer-events: none;
   z-index: 4;
 }
 
 #branch13 {
   top: 15vw;
   z-index: -3;
-  pointer-events: none;
 }
 
 #branch14 {
@@ -392,5 +367,4 @@ main {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   z-index: 4;
-  pointer-events: none;
 }
\ No newline at end of file
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 06758ea..05f07cd 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -2,29 +2,29 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8"/>
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="fonts.css">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/fonts.css">
     <title>cel's garden</title>
   </head>
     
   <body>
 
-    <img class="branch" id="branch1" src="branches/branch837-1.png" alt="cherry blossom branch">
-    <img class="branch" id="branch2" src="branches/branch878.png" alt="cherry blossom branch">
-    <img class="branch" id="branch3" src="branches/branch837-2.png" alt="cherry blossom branch">
-    <img class="branch" id="branch4" src="branches/branch840.png" alt="cherry blossom branch">
-    <img class="branch" id="branch5" src="branches/branch869.png" alt="cherry blossom branch">
-    <img class="branch" id="branch6" src="branches/branch871.png" alt="cherry blossom branch">
-    <img class="branch" id="branch7" src="branches/branch879.png" alt="cherry blossom branch">
-    <img class="branch" id="branch8" src="branches/branch880.png" alt="cherry blossom branch">
-    <img class="branch" id="branch9" src="branches/branch881-1.png" alt="cherry blossom branch">
-    <img class="branch" id="branch10" src="branches/branch881-2.png" alt="cherry blossom branch">
-    <img class="branch" id="branch11" src="branches/branch882-1.png" alt="cherry blossom branch">
-    <img class="branch" id="branch12" src="branches/branch882-2.png" alt="cherry blossom branch">
-    <img class="branch" id="branch13" src="branches/branch883-1.png" alt="cherry blossom branch">
-    <img class="branch" id="branch14" src="branches/branch883-2.png" alt="cherry blossom branch">
+    <img class="branch" id="branch1" src="/branches/branch837-1.png" alt="cherry blossom branch">
+    <img class="branch" id="branch2" src="/branches/branch878.png" alt="cherry blossom branch">
+    <img class="branch" id="branch3" src="/branches/branch837-2.png" alt="cherry blossom branch">
+    <img class="branch" id="branch4" src="/branches/branch840.png" alt="cherry blossom branch">
+    <img class="branch" id="branch5" src="/branches/branch869.png" alt="cherry blossom branch">
+    <img class="branch" id="branch6" src="/branches/branch871.png" alt="cherry blossom branch">
+    <img class="branch" id="branch7" src="/branches/branch879.png" alt="cherry blossom branch">
+    <img class="branch" id="branch8" src="/branches/branch880.png" alt="cherry blossom branch">
+    <img class="branch" id="branch9" src="/branches/branch881-1.png" alt="cherry blossom branch">
+    <img class="branch" id="branch10" src="/branches/branch881-2.png" alt="cherry blossom branch">
+    <img class="branch" id="branch11" src="/branches/branch882-1.png" alt="cherry blossom branch">
+    <img class="branch" id="branch12" src="/branches/branch882-2.png" alt="cherry blossom branch">
+    <img class="branch" id="branch13" src="/branches/branch883-1.png" alt="cherry blossom branch">
+    <img class="branch" id="branch14" src="/branches/branch883-2.png" alt="cherry blossom branch">
       
-    <div class="page">
+    <div id="page">
 
       <header>
       
@@ -33,15 +33,15 @@
         
       </header>
 
-      <nav class="panel" id="nav">
+      <nav class="panel">
         <ul id="nav">
           <li><a class="{% block nav_home %}{% endblock %}" href="/">home</a></li>
           <li><a class="{% block nav_contact %}{% endblock %}" style="font-family: 'Compagnon Roman';" href="/contact">kontakt</a></li>
           <li><a class="{% block nav_projects %}{% endblock %}" style="font-family: 'DeGerm LoCase';" href="/projects">projetos</a></li>
-          <li><a class="{% block nav_sound %}{% endblock %}" href="/sound">音</a></li>
+          <li><a class="{% block nav_sound %}{% endblock %}" style="font-family: 'kirieji'" href="/sound">音</a></li>
           <li><a class="{% block nav_listens %}{% endblock %}" style="font-family: 'Darumadrop One'" href="/listens">きいてます</a></li>
           <li><a href="https://bimbo.video" style="font-family: 'Mon Hugo In'">video</a></li>
-          <li><a href="https://live.blos.sm" style="font-family: ukikusa" >🔴 ライブ</a></li>
+          <li><a href="https://live.blos.sm" style="font-family: id_kana018" >🔴ライブ</a></li>
           <li><a class="{% block nav_pix %}{% endblock %}" style="font-family: Minecraftia" href="/pix">pix</a></li>
           <li><a class="{% block nav_shodo %}{% endblock %}" href="/shodo">書道</a></li>
           <li><a class="{% block nav_thoughts %}{% endblock %}" style="font-family: 'MAZIUS REVIEW 20.09';" href="/thoughts">thoughts</a></li>
@@ -71,13 +71,11 @@
           
       </main>
 
-      <footer>
-        <div class="panel" id="footer">
-          <a href="https://skinnyver.se"><img src="https://skinnyver.se/instance/skinnyversebadge.png"></a>
-          <a href="https://social.xenofem.me/"><img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/4520d16b-565c-4956-b1f0-dd18afcdf906/xenofemme.png"></a>
-          <a href="https://asbestos.cafe"><img src="https://asbestos.cafe/instance/asbestoscafesisterinstance.png"></a>
-          <a href="https://worm.pink"><img src="https://worm.pink/instance/wormpinksistersite.png"></a>
-        </div>
+      <footer class="panel">
+          <a class="badge" href="https://skinnyver.se"><img src="https://skinnyver.se/instance/skinnyversebadge.png"></a>
+          <a class="badge" href="https://social.xenofem.me/"><img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/4520d16b-565c-4956-b1f0-dd18afcdf906/xenofemme.png"></a>
+          <a class="badge" href="https://asbestos.cafe"><img src="https://asbestos.cafe/instance/asbestoscafesisterinstance.png"></a>
+          <a class="badge" href="https://worm.pink"><img src="https://worm.pink/instance/wormpinksistersite.png"></a>
       </footer>
       
     </div>
diff --git a/templates/home.html.tera b/templates/home.html.tera
index 3396894..1d5d7da 100644
--- a/templates/home.html.tera
+++ b/templates/home.html.tera
@@ -28,7 +28,7 @@
 
 {% block content %}
 
-<div class="content panel">
+<div class="panel content">
   <h2>hallo i am celeste welcome 2 my site 🌟</h2>
   <p>this is where i dump everything</p>
   <p>i wish u a wonderful day</p>
@@ -44,7 +44,7 @@
 
 <aside>
 
-  {% include "latestblogs" %}
+  {% include "latestposts" %}
   {% include "latestskweets" %}
 
 </aside>
diff --git a/templates/latestblogs.html.tera b/templates/latestblogs.html.tera
deleted file mode 100644
index 966a728..0000000
--- a/templates/latestblogs.html.tera
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="panel" id="blogs">
-  <h2>latest blogs <a class="label" href="/feed.xml"><img class="label" src="https://cinni.net/images/icon/rssbadge.png" alt="rss newsfeed"></a></h2>
-  <table id="blog-list">
-    <tr>
-      <td><a class="blog-entry" href="/thoughts/fedi">fedi<span class="blog-date">2023-02-04</span></a></td>
-    </tr>
-    <tr>
-      <td><a class="blog-entry" href="/thoughts/fedi">slaying<span class="blog-date">2023-01-20</span></a></td>
-    </tr>
-  </table>
-</div>
\ No newline at end of file
diff --git a/templates/latestposts.html.tera b/templates/latestposts.html.tera
new file mode 100644
index 0000000..101fbb9
--- /dev/null
+++ b/templates/latestposts.html.tera
@@ -0,0 +1,11 @@
+<div class="panel" id="posts">
+  <h2>latest posts <a class="badge" href="/feed.xml"><img class="badge" src="/rssbadge.png" alt="rss newsfeed"></a></h2>
+  <table id="post-list">
+    <tr>
+      <td><a class="post-entry" href="/thoughts/fedi">fedi<span class="post-date">2023-02-04</span></a></td>
+    </tr>
+    <tr>
+      <td><a class="post-entry" href="/thoughts/fedi">slaying<span class="post-date">2023-01-20</span></a></td>
+    </tr>
+  </table>
+</div>
\ No newline at end of file
diff --git a/templates/latestskweets.html.tera b/templates/latestskweets.html.tera
index 15a413c..bcdc2fa 100644
--- a/templates/latestskweets.html.tera
+++ b/templates/latestskweets.html.tera
@@ -1,19 +1,19 @@
 <div class="panel" id="skinnyverse">
   <h2><a id="latest-skweets" href="https://skinnyver.se/cel">latest skweets</a></h2>
-  <div class="post">
+  <div class="skweet">
     <img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile">
-    <div class="post-content">
-      <div><h4>@cel</h4><h5>2h ago</h5></div>
+    <div class="skweet-content">
+      <div class="skweet-info"><h4>@cel</h4><h5>2h ago</h5></div>
       <p>@nyx @lain ikr? omg we have no choice but to stan our skinny legend</p>
-      <div class="gallery"><img src="https://skinnyver.se/media/22aca0d1-441c-425f-b9b2-7501a29d8e9c/lain_skinny2.png"><img src="https://skinnyver.se/media/4f6344de-b334-417e-b202-f1daf3207986/vlcsnap-2022-06-15-09h55m17s937.png"></div>
+      <div class="skweet-gallery"><img src="https://skinnyver.se/media/22aca0d1-441c-425f-b9b2-7501a29d8e9c/lain_skinny2.png"><img src="https://skinnyver.se/media/4f6344de-b334-417e-b202-f1daf3207986/vlcsnap-2022-06-15-09h55m17s937.png"></div>
     </div>
   </div>
-  <div class="post">
+  <div class="skweet">
     <img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile">
-    <div class="post-content">
+    <div class="skweet-content">
       <div><h4>@cel</h4><h5>2h ago</h5></div>
       <p>@nyx @lain ikr? omg we have no choice but to stan our skinny legend</p>
-      <div class="gallery"><img src="https://skinnyver.se/media/22aca0d1-441c-425f-b9b2-7501a29d8e9c/lain_skinny2.png"><img src="https://skinnyver.se/media/4f6344de-b334-417e-b202-f1daf3207986/vlcsnap-2022-06-15-09h55m17s937.png"></div>
+      <div class="skweet-gallery"><img src="https://skinnyver.se/media/22aca0d1-441c-425f-b9b2-7501a29d8e9c/lain_skinny2.png"><img src="https://skinnyver.se/media/4f6344de-b334-417e-b202-f1daf3207986/vlcsnap-2022-06-15-09h55m17s937.png"></div>
     </div>
   </div>
 </div>
\ No newline at end of file