1056 lines
17 KiB
CSS
1056 lines
17 KiB
CSS
/* Reset */
|
|
|
|
html,
|
|
body,
|
|
div,
|
|
span,
|
|
applet,
|
|
object,
|
|
iframe,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
blockquote,
|
|
pre,
|
|
a,
|
|
abbr,
|
|
acronym,
|
|
address,
|
|
big,
|
|
cite,
|
|
code,
|
|
del,
|
|
dfn,
|
|
em,
|
|
img,
|
|
ins,
|
|
kbd,
|
|
q,
|
|
s,
|
|
samp,
|
|
small,
|
|
strike,
|
|
strong,
|
|
sub,
|
|
sup,
|
|
tt,
|
|
var,
|
|
b,
|
|
u,
|
|
i,
|
|
center,
|
|
dl,
|
|
dt,
|
|
dd,
|
|
ol,
|
|
ul,
|
|
li,
|
|
fieldset,
|
|
form,
|
|
label,
|
|
legend,
|
|
table,
|
|
caption,
|
|
tbody,
|
|
tfoot,
|
|
thead,
|
|
tr,
|
|
th,
|
|
td,
|
|
article,
|
|
aside,
|
|
canvas,
|
|
details,
|
|
embed,
|
|
figure,
|
|
figcaption,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
menu,
|
|
nav,
|
|
output,
|
|
ruby,
|
|
section,
|
|
summary,
|
|
time,
|
|
mark,
|
|
audio,
|
|
video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* HTML5 display-role reset for older browsers */
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
menu,
|
|
nav,
|
|
section {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
line-height: 1;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
blockquote,
|
|
q {
|
|
quotes: none;
|
|
}
|
|
|
|
blockquote:before,
|
|
blockquote:after,
|
|
q:before,
|
|
q:after {
|
|
content: "";
|
|
content: none;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/* Animations */
|
|
|
|
@keyframes fadeInNOut {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes woopwoop {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(-2deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px) rotate(2deg);
|
|
}
|
|
}
|
|
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
@keyframes woopwoopmove {
|
|
to {
|
|
background-position: 200% center;
|
|
}
|
|
}
|
|
|
|
@keyframes scanlines {
|
|
0% {
|
|
background-position: 0 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes boing {
|
|
0%,
|
|
100% {
|
|
transform: translateY(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
transform: none;
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "AH";
|
|
src: url("assets/fonts/ah.ttf") format("truetype");
|
|
}
|
|
|
|
:root {
|
|
--lavender: #cdb4db;
|
|
--light-pink: #ffc8dd;
|
|
--pink: #ffafcc;
|
|
--light-blue: #bde0fe;
|
|
--blue: #a2d2ff;
|
|
--darker-pink: #ff75a7;
|
|
--darkerer-pink: #ff4287;
|
|
--win-bg-grey: #c0c0c0;
|
|
--grey-500: oklch(55.1% 0.027 264.364);
|
|
}
|
|
|
|
::selection {
|
|
text-shadow: 0px 0px 3px var(--darkerer-pink);
|
|
}
|
|
|
|
body {
|
|
background-size: cover;
|
|
background-position: center;
|
|
min-height: 100lvh;
|
|
width: 100lvw;
|
|
overflow: auto;
|
|
font-family: "DotGothic16", sans-serif;
|
|
font-size: 1rem;
|
|
|
|
&:has(#content home-content) {
|
|
background-image: url(assets/images/tiledbgpink.webp);
|
|
}
|
|
|
|
&:has(#content music) {
|
|
background-image: url(assets/gifs/hmmmbg.gif);
|
|
background-size: auto;
|
|
}
|
|
|
|
&:has(#content katcenkat) {
|
|
background-image: url(assets/images/tiledbgpink.webp);
|
|
}
|
|
|
|
&:has(#content about) {
|
|
background-image: url(assets/gifs/flowerzdark.png);
|
|
}
|
|
|
|
main {
|
|
padding-top: 8rem;
|
|
}
|
|
|
|
marquee {
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
marquee inner {
|
|
display: inline-block;
|
|
animation: marquee 8s linear infinite;
|
|
}
|
|
|
|
cute-container {
|
|
background-image: url(assets/gifs/weirdstone.png);
|
|
width: min(90svw, 1000px);
|
|
min-height: 70svh;
|
|
height: auto;
|
|
border: 5px solid var(--lavender);
|
|
padding: 1rem 2rem;
|
|
box-sizing: border-box;
|
|
|
|
img {
|
|
width: 80%;
|
|
display: block;
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CRT Effect */
|
|
|
|
crt {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 9999;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
z-index: 2147483647;
|
|
}
|
|
|
|
&::before {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 50%,
|
|
rgba(0, 0, 0, 0.2) 51%
|
|
);
|
|
background-size: 100% 4px;
|
|
animation: scanlines 1s steps(60) infinite;
|
|
}
|
|
|
|
&::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* persistent-ui */
|
|
persistent-ui {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100svw;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
miniplayer-container {
|
|
display: block;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* Navbar */
|
|
navbar {
|
|
font-family: "VT323", monospace;
|
|
font-size: clamp(1.25rem, 4svw, 1.5rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
#nav-toggle-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
navbar-toggle {
|
|
display: none;
|
|
padding: 0.5rem;
|
|
background-color: var(--win-bg-grey);
|
|
|
|
.hamburger {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
width: 30px;
|
|
padding: 4px 8px;
|
|
border: 2px solid black;
|
|
background: var(--win-bg-grey);
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
|
|
span {
|
|
display: block;
|
|
height: 3px;
|
|
background: #000;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
&:active {
|
|
border-color: #808080 #ffffff #ffffff #808080;
|
|
}
|
|
}
|
|
|
|
&:has(#nav-toggle-checkbox:checked) {
|
|
.hamburger span:nth-child(1) {
|
|
transform: translateY(7px) rotate(45deg);
|
|
}
|
|
|
|
.hamburger span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger span:nth-child(3) {
|
|
transform: translateY(-7px) rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
navbar-content {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
padding: 0.5rem;
|
|
background-color: var(--win-bg-grey);
|
|
flex-wrap: wrap;
|
|
|
|
input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border: 2px solid black;
|
|
background: var(--win-bg-grey);
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
|
|
&:has(+ input:checked) {
|
|
background: #ff75a7;
|
|
color: #ffffff;
|
|
border-color: #808080 #ffffff #ffffff #808080;
|
|
}
|
|
|
|
&:active {
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
padding: 5px 7px 3px 9px;
|
|
border-color: #808080 #ffffff #ffffff #808080;
|
|
}
|
|
|
|
&:hover {
|
|
background: #0004;
|
|
}
|
|
}
|
|
}
|
|
|
|
pink-statusbar {
|
|
height: 1.5rem;
|
|
flex-shrink: 0;
|
|
background-color: var(--darker-pink);
|
|
border-bottom: 2px solid #000;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 0.5rem;
|
|
gap: 0.5rem;
|
|
|
|
status-dot {
|
|
display: block;
|
|
animation: fadeInNOut 2s infinite;
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #00ff00;
|
|
border: 1px solid #008000;
|
|
}
|
|
|
|
current-date {
|
|
margin-left: auto;
|
|
padding-right: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Home */
|
|
home-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
welcome {
|
|
margin-bottom: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
boxes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: min(90svw, 850px);
|
|
gap: 1rem;
|
|
|
|
box {
|
|
border-radius: 0.4rem;
|
|
box-shadow:
|
|
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
background-color: white;
|
|
padding: 1rem;
|
|
|
|
&#bigbox {
|
|
flex: 1;
|
|
}
|
|
|
|
&#smallbox {
|
|
flex: 0.3;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 1rem;
|
|
|
|
> socials-header {
|
|
color: var(--darkerer-pink);
|
|
}
|
|
|
|
socials {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
}
|
|
|
|
bibou-message {
|
|
font-style: italic;
|
|
color: var(--grey-500);
|
|
}
|
|
|
|
bibou-container {
|
|
position: relative;
|
|
display: block;
|
|
width: 100px;
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
&:hover .bibou {
|
|
opacity: 1;
|
|
}
|
|
|
|
.bibou {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover .boubou {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
bibou-text {
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&#newsbox {
|
|
website-news {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 0.6rem;
|
|
|
|
& > img {
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
article-entry {
|
|
padding-top: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
|
|
time {
|
|
color: var(--darkerer-pink);
|
|
font-weight: bold;
|
|
}
|
|
|
|
article-body {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
img {
|
|
margin: auto;
|
|
}
|
|
|
|
article-body {
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
ominous-message {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
badges {
|
|
margin-top: 0.8rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
|
|
> img {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
> img:nth-last-child(-n + 3) {
|
|
flex: 1 1 30%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
pronouns {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.15rem 0.55rem;
|
|
border-radius: 9999px;
|
|
background-color: var(--blue);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: white;
|
|
white-space: nowrap;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
darkerer-pink {
|
|
color: var(--darkerer-pink);
|
|
}
|
|
|
|
boing {
|
|
display: inline-block;
|
|
color: var(--darkerer-pink);
|
|
animation: boing 0.8s infinite;
|
|
}
|
|
|
|
shitty {
|
|
color: #753b00;
|
|
}
|
|
|
|
woopwoop span {
|
|
display: inline-block;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--blue),
|
|
var(--darker-pink),
|
|
var(--darkerer-pink),
|
|
var(--lavender),
|
|
var(--light-blue),
|
|
var(--light-pink),
|
|
var(--pink)
|
|
);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation:
|
|
woopwoop 1.2s ease-in-out infinite,
|
|
woopwoopmove 2s linear infinite;
|
|
}
|
|
|
|
chibis {
|
|
img {
|
|
position: fixed;
|
|
z-index: 999;
|
|
pointer-events: none;
|
|
|
|
&#me {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 10svw;
|
|
}
|
|
|
|
&#raplapla {
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 15svw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Music */
|
|
music {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
|
|
vertical-marquee {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100svh;
|
|
width: 100svw;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
font-size: 10rem;
|
|
animation: fadeInNOut 10s infinite;
|
|
|
|
vertical-marquee-inner {
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
text {
|
|
display: block;
|
|
font-family: "AH", sans-serif;
|
|
font-size: 1.1rem;
|
|
line-height: 24px;
|
|
color: red;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
box {
|
|
border-radius: 0.4rem;
|
|
box-shadow:
|
|
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
background-color: white;
|
|
padding: 1rem;
|
|
}
|
|
|
|
> cute-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/* 404 */
|
|
katcenkat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100svh;
|
|
padding: 1rem;
|
|
gap: 1rem;
|
|
|
|
img {
|
|
max-width: 100svw;
|
|
height: auto;
|
|
object-fit: contain;
|
|
transition:
|
|
opacity 5s ease,
|
|
transform 5s ease-out;
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
transform: translateY(500px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Mini player */
|
|
mini-player {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 100;
|
|
width: min(240px, 90svw);
|
|
background-color: var(--win-bg-grey);
|
|
border: 2px solid;
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
box-shadow: 2px 2px 0 #000;
|
|
transition:
|
|
opacity 0.3s,
|
|
translate 0.3s;
|
|
font-size: clamp(0.625rem, 2svw, 0.75rem);
|
|
|
|
ominous-message {
|
|
display: block;
|
|
padding: 0.5rem;
|
|
font-style: italic;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
title-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2px solid;
|
|
border-color: #808080 #ffffff #ffffff #808080;
|
|
padding: 0.25rem 0.5rem;
|
|
|
|
track-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
max-width: 60%;
|
|
overflow: hidden;
|
|
|
|
track-title {
|
|
font-weight: bold;
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
track-artist {
|
|
font-size: 0.625rem;
|
|
color: #555;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
time-display {
|
|
font-size: 0.625rem;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
progress-bar-container {
|
|
padding: 0.25rem 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
|
|
.progress-input {
|
|
display: block;
|
|
width: 90%;
|
|
height: 0.2rem;
|
|
appearance: none;
|
|
background: #fff;
|
|
border: 1px solid #808080;
|
|
outline: none;
|
|
cursor: pointer;
|
|
|
|
&::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--win-bg-grey);
|
|
border: 2px solid;
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--win-bg-grey);
|
|
border: 2px solid;
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
controls-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.25rem 0.5rem;
|
|
|
|
transport-controls {
|
|
display: flex;
|
|
gap: 1px;
|
|
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.25rem;
|
|
background: var(--win-bg-grey);
|
|
border: 2px solid;
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #0002;
|
|
}
|
|
|
|
&:active {
|
|
border-color: #808080 #ffffff #ffffff #808080;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid #000;
|
|
}
|
|
|
|
img {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
volume-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
|
|
.volume-input {
|
|
width: 4rem;
|
|
height: 4px;
|
|
appearance: none;
|
|
background: #fff;
|
|
border: 1px solid #808080;
|
|
outline: none;
|
|
cursor: pointer;
|
|
|
|
&::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--win-bg-grey);
|
|
border: 2px solid;
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--win-bg-grey);
|
|
border: 2px solid;
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
audio {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Responsive... */
|
|
@media (max-width: 480px) {
|
|
body {
|
|
main {
|
|
padding-top: 6rem;
|
|
}
|
|
}
|
|
|
|
/* Navbar */
|
|
navbar {
|
|
font-size: 1.125rem;
|
|
|
|
navbar-toggle {
|
|
display: block;
|
|
background-color: transparent;
|
|
|
|
.hamburger {
|
|
padding: 4px 8px;
|
|
border: 2px solid black;
|
|
background: var(--win-bg-grey);
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
|
|
&:active {
|
|
border-color: #808080 #ffffff #ffffff #808080;
|
|
}
|
|
}
|
|
}
|
|
|
|
#nav-toggle-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
navbar-content {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
border-top: 1px solid #000;
|
|
z-index: 101;
|
|
|
|
a {
|
|
padding: 1rem 0.5rem;
|
|
border-bottom: 1px solid #808080;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:has(#nav-toggle-checkbox:checked) {
|
|
navbar-content {
|
|
display: flex;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
|
|
pink-statusbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Music page */
|
|
|
|
/* Miniplayer */
|
|
|
|
mini-player {
|
|
display: none;
|
|
width: 95svw;
|
|
max-width: 280px;
|
|
|
|
title-bar {
|
|
track-info {
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
controls-bar {
|
|
volume-controls {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress-input {
|
|
width: 85%;
|
|
}
|
|
|
|
/* Home */
|
|
|
|
home-content boxes {
|
|
flex-direction: column;
|
|
|
|
box {
|
|
width: 90%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Page-specific backgrounds */
|
|
|
|
/* Context Menu */
|
|
helo {
|
|
position: fixed;
|
|
background: var(--win-bg-grey);
|
|
border: 2px solid;
|
|
border-color: #ffffff #808080 #808080 #ffffff;
|
|
box-shadow: 2px 2px 0 #000;
|
|
border-radius: 4px;
|
|
padding: 0.5rem 0;
|
|
min-width: 150px;
|
|
z-index: 9999;
|
|
font-family: "VT323", monospace;
|
|
font-size: 1.2rem;
|
|
|
|
helo-content {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 5svw;
|
|
}
|
|
}
|
|
}
|