blossom/static/style.css

390 lines
4.8 KiB
CSS

.panel {
pointer-events: all;
}
.panel:hover {
z-index: 15 !important;
pointer-events: all;
}
#page,
body {
pointer-events: none;
}
body {
background-color: #80a7e3;
color: #311f20;
font-family: 'Go Mono';
padding: 0;
margin: 0;
font-size: 14pt;
}
#page {
padding: 6vw;
display: flex;
flex-direction: column;
}
h2 {
font-size: 2em;
font-family: PicNic;
}
a {
text-decoration: none;
color: #edc953;
background-color: #311f20;
padding: 0.5em;
border-radius: 2em;
display: inline-block;
margin: 0.5em;
}
a:hover {
font-style: italic;
}
a.active {
background-color: #edc953;
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;
z-index: -1;
font-family: 'Basteleur';
}
#nav {
display: flex;
align-items: center;
justify-content: start;
flex-wrap: wrap;
gap: 0.2em;
font-size: 1.1rem;
}
#nav img {
position: relative;
top: 0.2em;
border: none;
height: 1em;
width: 1em;
padding: 0;
}
#suscakke {
margin: 0;
padding: 0;
line-spacing: 0;
line-height: 0;
aspect-ratio: 1/1;
height: 2em;
}
#suscakke:hover {
font-style: normal;
}
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;
}
/* 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;
}
.post-entry {
height: 1.4em;
display: flex;
justify-content: space-between;
background-color: #0000;
border-radius: 0;
padding: 0;
margin: 0;
font-size: 1.1rem;
}
.post-entry:hover {
font-family: 'Steps-Mono';
}
/* skinnyverse sidebar widget */
#skinnyverse {
font-family: 'Karrik';
color: #e8c6e6;
border-color: #bf42a0;
background-color: #28446c;
z-index: -1;
}
#skinnyverse h5 {
margin: 0;
padding: 0;
}
#latest-skweets {
font-family: 'Cherry Bomb' !important;
background-color: #0000;
padding: 0;
margin: 0;
border-radius: 0;
color: #bf42a0;
}
.skweet {
display: flex;
gap: 2em;
margin: 2em 0;
}
.skweet a {
padding: 0;
border: 0;
margin: 0;
border-radius: 0;
background-color: #0000;
color: #bf42a0;
font-family: Karrik;
}
.skweet h2,
.skweet h3,
.skweet h4 {
font-family: 'Cherry Bomb' !important;
margin: 0;
padding: 0;
}
.skweet .profile {
border: 4px solid #bf42a0;
width: 48px;
height: 48px;
}
.skweet-content {
flex: 1 1 auto;
}
.skweet-info {
display: flex;
justify-content: space-between;
}
.skweet-text {
margin-top: 0.8em;
margin-bottom: 0.8em;
}
.skweet-gallery {
display: flex;
max-width: 100%;
gap: 1em;
}
.skweet-gallery img {
border: 4px solid #bf42a0;
flex: 1 1 auto;
width: 10px;
}
/* contact page */
.p-name {
display: none;
}
/* branches */
.branch {
border: none;
width: 100vw;
position: absolute;
pointer-events: none;
}
#branch6 {
top: 200vw;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#branch2 {
top: 60vw;
z-index: -2;
}
#branch3 {
top: 100vw;
z-index: -2;
}
#branch4 {
top: 270vw;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
z-index: 0;
}
#branch5 {
top: 0vw;
}
#branch1 {
top: 0vw;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
z-index: -1;
}
#branch7 {
top: 180vw;
}
#branch8 {
top: 260vw;
}
#branch9 {
top: 50vw;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
z-index: 4;
}
#branch10 {
top: 100vw;
}
#branch11 {
top: 145vw;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#branch12 {
top: 180vw;
z-index: 4;
}
#branch13 {
top: 15vw;
z-index: -3;
}
#branch14 {
top: 105vw;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
z-index: 4;
}