mirror of https://gitlab.com/octtspacc/sitoctt
Divide website (postoctt) from static site generator (staticoso)
This commit is contained in:
commit
f27a91e84f
|
|
@ -0,0 +1 @@
|
||||||
|
public/*
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
image: alpine:latest
|
||||||
|
|
||||||
|
before_script:
|
||||||
|
- apk update
|
||||||
|
- apk add python3 py3-pip git
|
||||||
|
- pip3 install importlib-metadata
|
||||||
|
|
||||||
|
pages:
|
||||||
|
stage: deploy
|
||||||
|
script:
|
||||||
|
- git clone --depth 1 https://gitlab.com/octtspacc/staticoso
|
||||||
|
- mv staticoso/Source/* ./
|
||||||
|
- python3 Build.py
|
||||||
|
artifacts:
|
||||||
|
paths:
|
||||||
|
- public
|
||||||
|
rules:
|
||||||
|
- if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
|
||||||
|
|
@ -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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
% Template: Standard.html
|
||||||
|
|
||||||
|
# Ciao!!
|
||||||
|
|
||||||
|
Sei entrat<span class="BlinkA">a</span><span class="BlinkO">o</span>
|
||||||
|
nel...
|
||||||
|
|
||||||
|
% - Credits: https://codepen.io/jh3y/pen/WNrXqYz
|
||||||
|
<h1 class="WavyText" style="--x: 6; --y: -6;"><span style="--index: 0; --alpha-l: 0.125; --alpha-u: 0.25;">p</span><span style="--index: 1; --alpha-l: 0.125; --alpha-u: 0.25;">o</span><span style="--index: 2; --alpha-l: 0.125; --alpha-u: 0.25;">s</span><span style="--index: 3; --alpha-l: 0.125; --alpha-u: 0.25;">t</span><span style="--index: 4; --alpha-l: 0.125; --alpha-u: 0.25;">o</span><span style="--index: 5; --alpha-l: 0.125; --alpha-u: 0.25;">c</span><span style="--index: 6; --alpha-l: 0.125; --alpha-u: 0.25;">t</span><span style="--index: 7; --alpha-l: 0.125; --alpha-u: 0.25;">t</span>
|
||||||
|
</h1>
|
||||||
|
<h1 class="WavyText" style="--x: 3; --y: -3;"><span style="--index: 0; --alpha-l: 0.25; --alpha-u: 0.5;">p</span><span style="--index: 1; --alpha-l: 0.25; --alpha-u: 0.5;">o</span><span style="--index: 2; --alpha-l: 0.25; --alpha-u: 0.5;">s</span><span style="--index: 3; --alpha-l: 0.25; --alpha-u: 0.5;">t</span><span style="--index: 4; --alpha-l: 0.25; --alpha-u: 0.5;">o</span><span style="--index: 5; --alpha-l: 0.25; --alpha-u: 0.5;">c</span><span style="--index: 6; --alpha-l: 0.25; --alpha-u: 0.5;">t</span><span style="--index: 7; --alpha-l: 0.25; --alpha-u: 0.5;">t</span>
|
||||||
|
</h1>
|
||||||
|
<h1 class="WavyText"><span style="--index: 0; --alpha-l: 0.5; --alpha-u: 1;">p</span><span style="--index: 1; --alpha-l: 0.5; --alpha-u: 1;">o</span><span style="--index: 2; --alpha-l: 0.5; --alpha-u: 1;">s</span><span style="--index: 3; --alpha-l: 0.5; --alpha-u: 1;">t</span><span style="--index: 4; --alpha-l: 0.5; --alpha-u: 1;">o</span><span style="--index: 5; --alpha-l: 0.5; --alpha-u: 1;">c</span><span style="--index: 6; --alpha-l: 0.5; --alpha-u: 1;">t</span><span style="--index: 7; --alpha-l: 0.5; --alpha-u: 1;">t</span>
|
||||||
|
</h1>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Esatto, il **postoctt**, Letteralmente il mio posto, perchè io sono octt e quindi
|
||||||
|
posto + octt = postoctt.
|
||||||
|
Se preferisci, puoi chiamarlo postocto.
|
||||||
|
|
||||||
|
### Di che si tratta?
|
||||||
|
|
||||||
|
A breve.
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Footer
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<a href="/">Home</a>
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Header
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="[HTML:Page:CSS]">
|
||||||
|
<script src="/App.js"></script>
|
||||||
|
<title>[HTML:Page:Title] - postoctt</title>
|
||||||
|
<style>
|
||||||
|
[HTML:Page:Style]
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="Container">
|
||||||
|
<div id="TopBox">
|
||||||
|
[HTML:Part:Standard/TopBox.html]
|
||||||
|
</div>
|
||||||
|
<div id="MiddleBox">
|
||||||
|
<div id="LeftBox">
|
||||||
|
[HTML:Part:Standard/LeftBox.html]
|
||||||
|
</div>
|
||||||
|
<div id="RightBox">
|
||||||
|
[HTML:Page:RightBox]
|
||||||
|
</div>
|
||||||
|
<div id="MainBox">
|
||||||
|
[HTML:Page:MainBox]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="BottomBox">
|
||||||
|
[HTML:Part:Standard/BottomBox.html]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue