perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

split css into multiples files, and animations count only 4 frames now

Browse Source
This commit is contained in:
asus
2023-11-05 01:12:03 +01:00
parent d53e21b3be
commit aa022190eb
5 changed files with 132 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
index.html
View File

@@ -8,7 +8,9 @@
<title>hugulumu.fr</title>
<meta name="description" content="site web de hugo lamy, developpeur">
<script type="text/javascript" src="./scripts/load_html.js" defer></script>
<link href="./style.css" type="text/css" rel="stylesheet">
<link href="./style/style.css" type="text/css" rel="stylesheet">
<link href="./style/frames.css" type="text/css" rel="stylesheet">
<link href="./style/banners.css" type="text/css" rel="stylesheet">
<!--
-->
</head>
@@ -22,24 +24,8 @@
• • ••••• ••••• ••••• ••••• • • • • •
</pre>
<div class="mouse_container">
<pre class="mouse f1">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• • •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f2">
<div class="frames_container mouse_4">
<pre class="frame f1">
•
•
•• •
@@ -50,12 +36,12 @@
••••• • • •
• • •• •
• • •
• • ••
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f3">
<pre class="frame f2">
•
•
•• •
@@ -71,99 +57,23 @@
• •• •
••• ••••
</pre>
<pre class="mouse f4">
<pre class="frame f3">
•
•
•• •
• • •
•••••••••
• • ••
• • ••
• • •
••••• • • •
• • •• •
••••• • • •
• • •• •
• • •
• • ••
• • • •
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f5">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• • •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f6">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• • •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f7">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• • •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f8">
••
• • •
•• •
• • •
• • • •
••••• • ••
• • •••••••••
• • •
•• • ••• •
• • • •
• •• • •
••• ••••
</pre>
<pre class="mouse f9">
••
• • •
•• •
• • •
• • • •
••••• • ••
• • •••••••••
• • • •
• • ••• •
• • • •
• •• • •
••• ••••
</pre>
<pre class="mouse f10">
<pre class="frame f4">
••
• • •
@@ -179,21 +89,6 @@
••• ••••
</pre>
</div>
<!--
• -
•• • -- - ••
• • • - - - • • •
••••••••• --------- •• •
• • •• - - -- • • •
• • • - - - • • • •
••••• • • • ----- - - - ••••• • ••
• • •• • - - -- - • • •••••••••
• • - - • • •
• • •• - - -- •• • ••• •
• • • • - - - - • • • •
• •• • - -- - • •• • •
••• •••• --- ---- ••• ••••
-->
<pre>
•

122
style.css
View File

@@ -1,122 +0,0 @@
body {
/*
*/
overflow-x: hidden;
}
body * {
display: flex;
margin: auto;
}
script, style {
display: none;
}
p, pre {
line-height: 0.8;
font-size: 12px;
font-family: monospace;
}
pre {
margin: 10px 0px;
}
div.banner {
flex-wrap: wrap;
overflow: hidden;
width: 99vw;
margin: 10px 0px;
}
div.smallbanner {
height: 3.5ex;
}
div.bigbanner {
height: 21.5ex;
}
div.banner * {
margin: 0px;
}
div.banner p {
white-space: pre;
}
div.banner br {
display: block;
}
pre.banner {
position: relative;
margin-left: -100px;
animation-name: slide;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: linear;
animation-direction: normal;
}
pre.banner.pause {
animation-play-state: paused;
}
pre.banner.reverse {
animation-direction: reverse;
}
pre.banner.t0_5 {
animation-duration: 0.5s;
}
pre.banner.t1_0 {
animation-duration: 1s;
}
pre.banner.t1_5 {
animation-duration: 1.5s;
}
@keyframes slide {
from {left:0;}
to {left:2.4em;}
}
.mouse_container {
display: grid;
width: fit-content;
margin-left: 0px;
/*
border: 1px solid blue;
*/
}
pre.mouse {
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;
--tmouse: 2s;
animation-name: mouse;
animation-iteration-count: infinite;
animation-duration: var(--tmouse);
animation-timing-function: linear;
animation-direction: normal;
}
/*
pre.mouse:first-child {
position: relative;
}
*/
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 10/100);}
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 20/100);}
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 30/100);}
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 40/100);}
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 50/100);}
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 60/100);}
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 70/100);}
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 80/100);}
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
@keyframes mouse {
0% {opacity: 1;}
10% {opacity: 1;}
10.1% {opacity: 0;}
100% {opacity: 0;}
}

51
style/banners.css Normal file
View File

@@ -0,0 +1,51 @@
div.banner {
flex-wrap: wrap;
overflow: hidden;
width: 99vw;
margin: 10px 0px;
}
div.smallbanner {
height: 3.5ex;
}
div.bigbanner {
height: 21.5ex;
}
div.banner * {
margin: 0px;
}
div.banner p {
white-space: pre;
}
div.banner br {
display: block;
}
pre.banner {
position: relative;
margin-left: -100px;
animation-name: slide;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: linear;
animation-direction: normal;
}
pre.banner.pause {
animation-play-state: paused;
}
pre.banner.reverse {
animation-direction: reverse;
}
pre.banner.t0_5 {
animation-duration: 0.5s;
}
pre.banner.t1_0 {
animation-duration: 1s;
}
pre.banner.t1_5 {
animation-duration: 1.5s;
}
@keyframes slide {
from {left:0;}
to {left:2.4em;}
}

46
style/frames.css Normal file
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;}
}

22
style/style.css Normal file
View File

@@ -0,0 +1,22 @@
body {
/*
*/
overflow-x: hidden;
}
body * {
display: flex;
margin: auto;
}
script, style {
display: none;
}
p, pre {
line-height: 0.8;
font-size: 12px;
font-family: monospace;
}
pre {
margin: 10px 0px;
}