Agg. Devlogs, Home; Lavoro tema WM

This commit is contained in:
2022-08-29 15:41:44 +02:00
parent a8e94cbd44
commit 878825774b
9 changed files with 233 additions and 103 deletions

View File

@@ -0,0 +1,41 @@
.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;}
}
/*--- Credits: https://codepen.io/jh3y/pen/WNrXqYz ---*/
.WavyText {
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%);
}
}
/*--- -------------------------------------------- ---*/

View File

@@ -6,7 +6,7 @@
--WindowPadding: 4px;
--WindowBorderSize: 4px;
--TitleBarHeight: 28px;
--TitleBarHeight: 32px;
--TitleBarForeground: #FFFFFF;
--TitleBarBackground: #2A0A3A;
@@ -23,8 +23,10 @@ Body {
Margin: 0;
Padding: 0;
Overflow-Y: Hidden;
Background-Image: url(/home/octt/Dev/sitoctt-assets/public/Media/Backgrounds/Circles-Purple.png);
Background-Repeat: Repeat;
}
.NoDisplay {
Display: None;
}
/*--------------------------------------------------------*/
@@ -42,8 +44,8 @@ Body {
Background: #EEE0FF;
}
.WindowContent {
Min-Width: Calc(100% + Var(--WindowPadding) + Var(--WindowPadding) + Var(--WindowBorderSize) + Var(--WindowBorderSize));
Padding: Var(--WindowPadding);
Min-Width: Calc(100% + Var(--WindowPadding)*2 + Var(--WindowBorderSize)*2);
Padding: Calc(Var(--WindowPadding)*2);
Overflow-Y: Auto;
Margin-Left: Calc(0px - Var(--WindowPadding) - Var(--WindowBorderSize));
Margin-Top: Var(--WindowBorderSize);
@@ -59,14 +61,17 @@ Body {
Padding: Var(--WindowPadding);
Color: Var(--TitleBarForeground);
Background: Var(--TitleBarBackground);
Text-Align: Center;
Vertical-Align: Top;
Max-Height: Var(--TitleBarHeight);
}
.TitleBar > span:nth-child(1) {
.TitleBarContent {
Text-Align: Center;
}
.TitleBarContent > Span:Nth-Child(1) {
Float: Left;
}
.TitleBar > span:nth-child(4) {
.TitleBarContent > Span:Nth-Child(3) {
Float: Right;
}
@@ -85,15 +90,38 @@ Body {
Position: Fixed;
Left: 0px;
Bottom: Var(--TaskBarHeight);
Padding: Var(--WindowPadding);
Padding: Calc(Var(--WindowPadding)*2);
Color: Var(--TaskBarForeground);
Background: Var(--TaskBarBackground);
Max-Height: Calc(90vh - Var(--TaskBarHeight));
Overflow-Y: Scroll;
}
.TaskBarMenu A {
Color: #DDCCFF !Important;
}
.MenuButton {
Display: Inline-Block;
Height: 100%;
}
/*--- "Shade window" button --------------------------*/
.CheckToggle {
Position: Fixed;
Opacity: 0;
Visibility: Hidden;
}
.CheckLabel:Before {
Content: '🔼';
}
:Checked ~ .TitleBarContent > Span > .CheckLabel:Before {
Content: '🔽' !Important;
}
:Checked ~ .ToggleBox {
Display: None;
Visibility: Hidden;
}
/**** -------------------------------------------- ****/
/*--------------------------------------------------------*/
@@ -102,25 +130,9 @@ Body {
* Fritto Misto - Andrebbe ordinato *
*--------------------------------------------------------*/
.CheckLabel:Before {
Content: '🔼';
}
#MainWindowCheck {
Position: Fixed;
Opacity: 0;
}
:Checked ~ Span > .CheckLabel:Before {
Content: '🔽' !Important;
}
:Checked ~ .ToggleBox {
Display: None;
Visibility: Hidden;
}
/* No selezione */
.NoSelect,
.TitleBar,
.TitleBarContent,
.TaskBar,
#TitlesWindow {
-webkit-touch-callout: none;
@@ -139,7 +151,7 @@ Body {
Max-Height: 90vh;
Z-Index: 16;
}
#MainWindow > .WindowContent {
#MainWindow .WindowContent {
Max-Height: Calc(90vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding));
}
@@ -151,7 +163,7 @@ Body {
Max-Height: 60vh;
Z-Index: 8;
}
#TitlesWindow > .WindowContent {
#TitlesWindow .WindowContent {
Max-Height: Calc(60vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding));
}

View File

@@ -32,6 +32,13 @@ Body {
Overflow-Wrap: Break-Word;
}
.NoDisplay {
Display: None;
}
.NoCol {
Color: Transparent !Important;
}
/*--------------------------------------------------------*/
@@ -55,12 +62,6 @@ Summary > H1, Summary > H2, Summary > H3, Summary > H4, Summary > H5, Summary >
Display: Inline;
}
.NoDisplay {
Display: None;
}
.NoCol {
Color: Transparent !Important;
}
A {
Color: #D000D0;
}
@@ -96,16 +97,16 @@ Pre.Code, .CodeScroll {
Padding-Bottom: 16px;
}
#MainBox A:not(
#MainBox A:Not(
.NoLinkLink, .NoLinkLink A,
.SectionLink A,
#StatCounter A,
#RingsDiv A,
.SectionTitle > A
)::Before {
#RingsDiv A
):Before {
Content: '🔗 ';
}
/* Clickable link at the left of every section title */
.SectionTitle:Target {
Color: #EEDDFF !Important;
Background: #700070 !Important;
@@ -407,29 +408,4 @@ H1, H2, H3, A, Img, Video, Summary {
100% {Position: Static; Visibility: Visible;}
}
/*--- Credits: https://codepen.io/jh3y/pen/WNrXqYz ---*/
.WavyText {
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%);
}
}
/*--- -------------------------------------------- ---*/
/*--------------------------------------------------------*/