aboutsummaryrefslogtreecommitdiffstats
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--static/style.css340
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
generated by cgit (git 2.34.1) at 2024-11-22 01:42:06 +0000