refacor css and html

1 files changed, 157 insertions, 183 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