octospacc/sitoctt
1
0
Fork 0
mirror of https://gitlab.com/octtspacc/sitoctt synced 2025-06-05 22:09:20 +02:00
Code Issues Projects Releases Wiki Activity

Divide website (postoctt) from static site generator (staticoso)

Browse Source
This commit is contained in:
octospacc
2022-05-17 13:00:20 +02:00
commit f27a91e84f
8 changed files with 199 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
Assets/Standard.css Executable file
View File

@@ -0,0 +1,119 @@
:root {
--ScreenBorderPadding: 4px;
--ContentPadding: 8px;
}
* {
Box-Sizing: Border-Box;
}
Body {
Margin: 0;
//Padding: var(--ScreenBorderPadding);
Box-Sizing: Border-Box;
Width: 100vw;
Position: Absolute;
Left: Auto;
Right: Auto;
Background: #eeddff;
Font-Family: "Liberation Mono";
}
#Container {
Box-Sizing: Border-Box;
}
#TopBox {
Border: 2px Solid Purple;
Padding: var(--ContentPadding);
}
#LeftBox {
Float: Left;
Padding: var(--ContentPadding);
//Border: 2px Solid Purple;
user-select: none;
}
#RightBox {
//Position: Inherit;
//Border: 2px Solid Purple;
//Top: 16px;
//Right: 16px;
// Margin: 0;
Padding: var(--ContentPadding);
Float: Right;
user-select: none;
}
#MainBox {
//Text-Align: Center;
Margin: Auto;
Position: Absolute;
Z-Index: -1;
Left: 0;
Right: 0;
Width: 80%;
}
#BottomBox {
Box-Sizing: Border-Box;
Border: 2px Solid Purple;
Position: Fixed;
Bottom: 0; //var(--ScreenBorderPadding);
//Margin: var(--ScreenBorderPadding);
Left: 0;
Right: 0;
Padding: var(--ContentPadding);
Width: 100vw;
Text-Align: Right;
}
@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%, 10%, 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%, 20%, var(--alpha-u));
transform: translate(0, -15%);
}
}