- used data attributes for global flex css

- started grid layout
This commit is contained in:
asus
2023-11-18 23:50:34 +01:00
parent 0dfafb81d2
commit 12e5204051
10 changed files with 163 additions and 135 deletions

View File

@@ -0,0 +1,46 @@
.frames_container {
display: grid;
width: fit-content;
margin-left: 0px;
/*
border: 1px solid blue;
*/
}
pre.frame.hide {
display: none;
}
pre.frame {
position: relative;
grid-column: 1;
grid-row: 1;
margin: auto auto 0px 0px;
/*
width: fit-content;
height: fit-content;
border: 1px solid red;
*/
opacity: 0;
--tframes: 2s;
animation-name: ascii_frame;
animation-iteration-count: infinite;
animation-duration: var(--tframes);
animation-timing-function: linear;
animation-direction: normal;
}
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
@keyframes ascii_frame {
0% {opacity: 1;}
25% {opacity: 1;}
25.1% {opacity: 0;}
100% {opacity: 0;}
}