mirror of https://gitlab.com/octtspacc/sitoctt
150 lines
3.0 KiB
CSS
150 lines
3.0 KiB
CSS
:root {
|
|
--ScreenBorderPadding: 4px;
|
|
--ContentPadding: 8px;
|
|
}
|
|
* {
|
|
Box-Sizing: Border-Box;
|
|
}
|
|
Body {
|
|
Margin: 0;
|
|
Box-Sizing: Border-Box;
|
|
Width: 100%;
|
|
Max-Width: 100%;
|
|
Position: Absolute;
|
|
Left: Auto;
|
|
Right: Auto;
|
|
Color: #04040c;
|
|
Background: #eeddff;
|
|
Font-Family: Consolas, "Liberation Mono", Courier, monospace, monospace;
|
|
}
|
|
#Container {
|
|
Box-Sizing: Border-Box;
|
|
}
|
|
|
|
#LeftBox, #RightBox {
|
|
Background: #300030;
|
|
Color: #fafaf0;
|
|
}
|
|
#LeftBox a, #RightBox a {
|
|
Color: #eeddff;
|
|
}
|
|
#TopBox {
|
|
Border: 2px Solid Purple;
|
|
Padding: var(--ContentPadding);
|
|
}
|
|
#LeftBox, #LeftBoxContainer {
|
|
Float: Left;
|
|
Padding: var(--ContentPadding);
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
#RightBox, #RightBoxContainer {
|
|
Padding: var(--ContentPadding);
|
|
Float: Right;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
#MainBox {
|
|
Margin: Auto;
|
|
Position: Absolute;
|
|
Z-Index: -1;
|
|
Left: 0;
|
|
Right: 0;
|
|
Width: 80%;
|
|
Padding-Bottom: calc(var(--ContentPadding) + 32px);
|
|
}
|
|
#BottomBox {
|
|
Box-Sizing: Border-Box;
|
|
Border: 2px Solid Purple;
|
|
Position: Fixed;
|
|
Bottom: 0;
|
|
Left: 0;
|
|
Right: 0;
|
|
Padding: var(--ContentPadding);
|
|
Width: 100%;
|
|
Text-Align: Right;
|
|
}
|
|
|
|
#LeftBoxCheck, #LeftBoxLabel {
|
|
Float: Left;
|
|
Left: 0;
|
|
Margin: var(--ScreenBorderPadding);
|
|
}
|
|
#RightBoxCheck, #RightBoxLabel {
|
|
Float: Right;
|
|
Right: 0;
|
|
Margin: var(--ScreenBorderPadding);
|
|
}
|
|
#LeftBoxCheck, #RightBoxCheck {
|
|
Position: Fixed;
|
|
Opacity: 0;
|
|
}
|
|
:Checked ~ .ToggleBox {
|
|
Display: None;
|
|
Visibility: Hidden;
|
|
}
|
|
|
|
/*
|
|
@Media (Max-Width: 800px) {
|
|
#LeftBox {Display: None;}
|
|
#RightBox {Display: None;}
|
|
}
|
|
*/
|
|
|
|
.BlinkA {
|
|
Animation: BlinkerA 0.25s Step-Start Infinite;
|
|
}
|
|
@keyframes BlinkerA {
|
|
0% {Position: Absolute; Visibility: Hidden;}
|
|
50% {Position: Static; Visibility: Visible;}
|
|
100% {Position: Absolute; Visibility: Hidden;}
|
|
}
|
|
.BlinkO {
|
|
Animation: BlinkerO 0.25s Step-Start Infinite;
|
|
}
|
|
@keyframes BlinkerO {
|
|
0% {Position: Static; Visibility: Visible;}
|
|
50% {Position: Absolute; Visibility: Hidden;}
|
|
100% {Position: Static; Visibility: Visible;}
|
|
}
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap");
|
|
:root {
|
|
--lower: 100;
|
|
--upper: 700;
|
|
}
|
|
|
|
/* Credits: https://codepen.io/jh3y/pen/WNrXqYz */
|
|
.WavyText {
|
|
font-family: 'Roboto Mono', monospace;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
white-space: nowrap;
|
|
transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
|
|
font-variation-settings: 'wght' var(--lower);
|
|
margin: 0;
|
|
}
|
|
.WavyText span {
|
|
color: hsla(300, 100%, 20%, var(--alpha-l));
|
|
animation: rise 2.25s infinite ease-in-out;
|
|
animation-delay: calc((var(--index) - 6) * 0.225s);
|
|
display: inline-block;
|
|
}
|
|
@keyframes rise {
|
|
50% {
|
|
font-variation-settings: 'wght' var(--upper);
|
|
color: hsla(300, 100%, 30%, var(--alpha-u));
|
|
transform: translate(0, -15%);
|
|
}
|
|
}
|
|
|