comicsite/_sass/main.scss
2024-09-15 09:57:18 -05:00

160 lines
2.4 KiB
SCSS

@import "sidebar";
@import "statuscafe";
@import "fonts";
@import "mobile";
@import "background";
html {
background-color: #2196F3;
filter: blur(0.5px);
}
html::before {
content: "";
position: fixed;
top: 0px; left: 0px;
width: 100%; height: 100%;
pointer-events: none;
opacity: 0.2;
background-color: yellowgreen;
opacity: 0.8;
mix-blend-mode: multiply;
z-index: 100;
}
.truecolor { z-index: 100; position: relative; }
html, body {
color: black;
text-align: center;
margin: 1px;
cursor: url("/cursor.png"),auto;
}
:not(#sprite) {
transition: 0.3s ease-in-out;
scroll-behavior: smooth;
}
h1 {
margin: 1px;
padding: 8px;
background-color: blue;
}
h1 a { color: white; }
img {
width: auto;
height: auto;
margin: 2px;
}
.overlay, .background {
pointer-events: none;
position: fixed;
width: 100%;
height: 100%;
top: 0; bottom: 0;
left: 0; right: 0;
}
.overlay {
z-index: 1000001;
}
.inline {
height: 1em;
}
#flood {
z-index: -1 !important;
}
#flood-menu {
z-index: 9999999999 !important;
}
.blinkers {
max-height: 7vh;
min-height: 32px;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
#webring-disp {
display: flex;
background-color: white;
justify-content: center;
}
#player {
display: flex;
justify-content: flex-end;
position: fixed;
bottom: 10vh; left: -4vw;
padding: 10px;
gap: 10px;
width: 25vw;
background-color: black;
color: white;
transform: rotate(3deg);
z-index: 5;
}
#player * {
color: white;
text-decoration: none;
}
#player::after {
content: '';
border-style: solid;
border-width: 2.2em 0 0 40px;
border-color: transparent transparent transparent black;
position: absolute;
top: 0; right: -40px;
}
code {
display: inline-block;
background-color: gray;
border: 1px black solid;
padding: .5em;
margin: 0.5em 0.25em;
}
a:hover{
text-shadow: 0px 0px 3px #C8CEB0 ;
}
body::before {
content: "";
position: fixed;
left: 0px; top: 0px;
width: 100%; height: 100%;
opacity: 0.2;
pointer-events: none; z-index: 1000;
background-image: url("/assets/images/decor/overlay.png");
background-image: linear-gradient(#000000, #00000000, #000000);
background-size: 3px 3px;
animation-name: static;
animation-duration: 2s; animation-iteration-count: infinite;
animation-timing-function: steps(4);
z-index: 100000000;
}
@keyframes static {
0% { background-position: 0 0 }
100% { background-position: 0 4px }
}
#webring-disp { color: black; }
#webring-disp a { color: black; }