Compare commits
30 Commits
simple_htm
...
mouses_in_
| Author | SHA1 | Date | |
|---|---|---|---|
|
f042247cbb | ||
|
|
b517d26ece | ||
|
|
668aad3c59 | ||
|
|
3747762c4f | ||
|
|
ac1d84fc9a | ||
|
|
7a07e2dbdd | ||
|
|
cd42bf0f2b | ||
|
|
ed75f330a1 | ||
|
|
553c93a7d1 | ||
|
|
7484bd8697 | ||
|
|
62d7b45822 | ||
|
|
3cfa8cfeba | ||
|
|
d3db7774fe | ||
|
|
1315132b9d | ||
|
|
b99a47985b | ||
|
|
ca1da07048 | ||
|
|
9c0895f589 | ||
|
|
70ae41f7d4 | ||
|
|
a6979b8d23 | ||
|
|
0903a4b9c2 | ||
|
|
c84d6bd5af | ||
|
|
d00efa943c | ||
|
|
ce8b1a10f3 | ||
|
|
ced0b84247 | ||
|
|
962eea4ace | ||
|
|
8e8b6f4e1c | ||
|
|
8012ddb0a4 | ||
|
|
48c1ff96ae | ||
|
|
520472da51 | ||
|
|
cbbde4fdac |
@@ -1,4 +1,10 @@
|
|||||||
|
|
||||||
|
start it with a server, like : `alive-server`
|
||||||
|
- https://www.npmjs.com/package/alive-server
|
||||||
|
- install : `npm install -g alive-server`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
difficulties :
|
difficulties :
|
||||||
|
|
||||||
- [accessibility with ascii art titles](https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible)
|
- [accessibility with ascii art titles](https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible)
|
||||||
@@ -220,4 +226,3 @@ projects :
|
|||||||
. .
|
. .
|
||||||
. . . . . . . . . . . . . . . . . . .
|
. . . . . . . . . . . . . . . . . . .
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
31
docs/banners/banner_1.svg
Normal file
31
docs/banners/banner_1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
34
docs/banners/banner_2.svg
Normal file
34
docs/banners/banner_2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
37
docs/banners/banner_3.svg
Normal file
37
docs/banners/banner_3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
40
docs/banners/banner_4.svg
Normal file
40
docs/banners/banner_4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
43
docs/banners/banner_5.svg
Normal file
43
docs/banners/banner_5.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
44
docs/mouses/mouse_1/mouse_1_1.svg
Normal file
44
docs/mouses/mouse_1/mouse_1_1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 KiB |
360
index.html
360
index.html
@@ -2,7 +2,7 @@
|
|||||||
<html lang="fr" dir="ltr">
|
<html lang="fr" dir="ltr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<!-- create "fake" favicon : https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests -->
|
<!-- create "fake" favicon : https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests -->
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||||
<title>hugulumu.fr</title>
|
<title>hugulumu.fr</title>
|
||||||
@@ -23,7 +23,6 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
original : • 8226 U+2022
|
original : • 8226 U+2022
|
||||||
: 57442 U+E062
|
: 57442 U+E062
|
||||||
: 57443 U+E063
|
: 57443 U+E063
|
||||||
@@ -31,13 +30,11 @@
|
|||||||
: 57445 U+E065
|
: 57445 U+E065
|
||||||
actual : 57446 U+E066
|
actual : 57446 U+E066
|
||||||
: 57447 U+E067
|
: 57447 U+E067
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<body id="body">
|
<body id="body">
|
||||||
<main id="top">
|
<main id="top">
|
||||||
|
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#top">accueil</a>
|
<a href="#top">accueil</a>
|
||||||
<a href="#projects">projets</a>
|
<a href="#projects">projets</a>
|
||||||
@@ -46,20 +43,22 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
HERO SECTION
|
HERO SECTION
|
||||||
-->
|
-->
|
||||||
<section class="section hero" id="hero">
|
<section class="section hero" id="hero">
|
||||||
<header>
|
<header>
|
||||||
<h1 aria-label="hugo lamy" id="name" class="title">
|
<h1 aria-label="hugo lamy" id="name" class="title">
|
||||||
<span aria-hidden="true" class="pre">
|
<span aria-hidden="true" class="pre pre_small">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span aria-hidden="true" class="pre">
|
<span aria-hidden="true" class="pre pre_small">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -69,115 +68,18 @@
|
|||||||
</h1>
|
</h1>
|
||||||
<h1 aria-label="programmeur informatique" id="title" class="title">
|
<h1 aria-label="programmeur informatique" id="title" class="title">
|
||||||
<span aria-hidden="true" class="pre">
|
<span aria-hidden="true" class="pre">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<span aria-hidden="true" class="pre">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art">
|
<div class="mouse"><div class="mouse_1"></div></div>
|
||||||
<pre class="frame f1" aria-hidden="true">
|
<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f2" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f3" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f4" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
<div id="banner_1" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
|
||||||
<pre class="banner" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@@ -206,7 +108,7 @@
|
|||||||
<h2>projets réalisés</h2>
|
<h2>projets réalisés</h2>
|
||||||
<figure class="project" id="ljdp">
|
<figure class="project" id="ljdp">
|
||||||
<figcaption class="project_description">
|
<figcaption class="project_description">
|
||||||
<h3>extension worpress :</h3><p>extension wordpress affichant les articles du site sur une carte, et permettant d'affiner la selection avec des critères</p>
|
<h3>extension wordpress :</h3><p>extension wordpress affichant les articles du site sur une carte, et permettant d'affiner la selection avec des critères</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>lien du site : <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer" title="link to the webpage the running plugin"></a></li>
|
<li>lien du site : <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer" title="link to the webpage the running plugin"></a></li>
|
||||||
<li>lien du code : <a href="incomming" target="_blank" rel="noopener noreferrer" title="link to the source code of the plugin"></a></li>
|
<li>lien du code : <a href="incomming" target="_blank" rel="noopener noreferrer" title="link to the source code of the plugin"></a></li>
|
||||||
@@ -222,93 +124,8 @@
|
|||||||
</figure>
|
</figure>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<div class="frames_container mouse" id="mouse_2" role="img" aria-label="mouse animated in ASCII art">
|
<div class="mouse"><div class="mouse_2"></div></div>
|
||||||
<pre class="frame f1" aria-hidden="true">
|
<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f2" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f3" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f4" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
<div id="banner_2" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
|
||||||
<pre class="banner reverse t05" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -337,7 +154,7 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<h2 id="cv_download"><a href="downloads/hugo_lamy_2023_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2>
|
<h2 id="cv_download"><a href="docs/hugo_lamy_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2>
|
||||||
<details>
|
<details>
|
||||||
<summary>
|
<summary>
|
||||||
<h3>Outils informatiques</h3>
|
<h3>Outils informatiques</h3>
|
||||||
@@ -398,78 +215,8 @@
|
|||||||
</details>
|
</details>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<div class="frames_container mouse" id="mouse_3" role="img" aria-label="mouse animated in ASCII art">
|
<div class="mouse"><div class="mouse_3"></div></div>
|
||||||
<pre class="frame f1" aria-hidden="true">
|
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f2" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f3" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f4" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
<div id="banner_3" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
|
||||||
<pre class="banner t15 reverse" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -489,74 +236,7 @@
|
|||||||
<p>hugogogo@protonmail.com</p>
|
<p>hugogogo@protonmail.com</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<div class="frames_container mouse" id="mouse_4" role="img" aria-label="mouse animated in ASCII art">
|
<div class="mouse"><div class="mouse_4"></div></div>
|
||||||
<pre class="frame f1" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f2" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f3" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="frame f4" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
<div class="banner">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -1,33 +1,76 @@
|
|||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
--base_banner_height: 24px;
|
||||||
|
--banner_height: var(--base_banner_height); /*default*/
|
||||||
|
height: min(26vw, var(--banner_height));
|
||||||
|
|
||||||
pre.banner {
|
background-image: url(../../docs/banners/banner_1.svg); /*default*/
|
||||||
position: relative;
|
background-size: contain;
|
||||||
margin: 10px 0px 10px -100px;
|
background-repeat: repeat;
|
||||||
animation-name: slide;
|
background-position-x: 0%;
|
||||||
|
|
||||||
|
animation-duration: 10s; /*default*/
|
||||||
|
animation-name: slide_svg;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-duration: 2s;
|
|
||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
animation-direction: normal;
|
animation-direction: normal;
|
||||||
}
|
}
|
||||||
pre.banner.pause {
|
@keyframes slide_svg {
|
||||||
animation-play-state: paused;
|
from {background-position-x: 0%;}
|
||||||
}
|
to {background-position-x: 100%;}
|
||||||
pre.banner.reverse {
|
|
||||||
animation-direction: reverse;
|
|
||||||
}
|
|
||||||
pre.banner.t05 {
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
}
|
|
||||||
pre.banner.t10 {
|
|
||||||
animation-duration: 1s;
|
|
||||||
}
|
|
||||||
pre.banner.t15 {
|
|
||||||
animation-duration: 1.5s;
|
|
||||||
}
|
|
||||||
pre.banner.t20 {
|
|
||||||
animation-duration: 2s;
|
|
||||||
}
|
|
||||||
@keyframes slide {
|
|
||||||
from {left:0;}
|
|
||||||
to {left:2.4em;}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* speeds
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.banner_pause {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
.banner_reverse {
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
.banner_speed_10 {
|
||||||
|
animation-duration: 10s;
|
||||||
|
}
|
||||||
|
.banner_speed_20 {
|
||||||
|
animation-duration: 20s;
|
||||||
|
}
|
||||||
|
.banner_speed_30 {
|
||||||
|
animation-duration: 30s;
|
||||||
|
}
|
||||||
|
.banner_speed_40 {
|
||||||
|
animation-duration: 40s;
|
||||||
|
}
|
||||||
|
.banner_speed_50 {
|
||||||
|
animation-duration: 50s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* sizes
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.banner_size_1 {
|
||||||
|
background-image: url(../../docs/banners/banner_1.svg);
|
||||||
|
--banner_height: calc(var(--base_banner_height) * 1);
|
||||||
|
}
|
||||||
|
.banner_size_2 {
|
||||||
|
background-image: url(../../docs/banners/banner_2.svg);
|
||||||
|
--banner_height: calc(var(--base_banner_height) * 2);
|
||||||
|
}
|
||||||
|
.banner_size_3 {
|
||||||
|
background-image: url(../../docs/banners/banner_3.svg);
|
||||||
|
--banner_height: calc(var(--base_banner_height) * 3);
|
||||||
|
}
|
||||||
|
.banner_size_4 {
|
||||||
|
background-image: url(../../docs/banners/banner_4.svg);
|
||||||
|
--banner_height: calc(var(--base_banner_height) * 4);
|
||||||
|
}
|
||||||
|
.banner_size_5 {
|
||||||
|
background-image: url(../../docs/banners/banner_5.svg);
|
||||||
|
--banner_height: calc(var(--base_banner_height) * 5);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
|
|
||||||
#hero {
|
#hero {
|
||||||
grid-template-rows: 1fr auto auto;
|
grid-template-rows: 1fr auto auto;
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
/*
|
/*
|
||||||
grid-template-rows: 1fr 50px auto auto;
|
grid-template-rows: 1fr 50px auto auto;
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
#hero header {
|
#hero header {
|
||||||
|
padding-top: 50px;
|
||||||
}
|
}
|
||||||
#hero .mouse {
|
#hero .mouse {
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,61 +1,48 @@
|
|||||||
|
@import "./mouses/mouse_1.css";
|
||||||
|
@import "./mouses/mouse_2.css";
|
||||||
|
@import "./mouses/mouse_3.css";
|
||||||
|
@import "./mouses/mouse_4.css";
|
||||||
|
|
||||||
.mouse {
|
.mouse {
|
||||||
position: relative;
|
margin: auto;
|
||||||
margin: 20px 0px;
|
|
||||||
}
|
|
||||||
.frames_container {
|
|
||||||
display: grid;
|
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
/*
|
overflow: hidden;
|
||||||
border: 1px solid blue;
|
|
||||||
*/
|
> div {
|
||||||
}
|
|
||||||
pre.frame.hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
pre.frame {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-column: 1;
|
top: 0%;
|
||||||
grid-row: 1;
|
|
||||||
margin: auto auto 0px 0px;
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
width: fit-content;
|
* for pseudo elements ::before and ::after
|
||||||
height: fit-content;
|
* for some reason it does not work when applied to them directly
|
||||||
|
* if they are not position absolute
|
||||||
border: 1px solid red;
|
|
||||||
*/
|
*/
|
||||||
|
white-space: pre;
|
||||||
|
line-height: 0.8;
|
||||||
|
font-size: 1.0rem;
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
--tframes: 2s;
|
--tframes: 2s;
|
||||||
animation-name: ascii_frame;
|
animation-name: mouse_move;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-duration: var(--tframes);
|
animation-duration: var(--tframes);
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-direction: normal;
|
animation-direction: normal;
|
||||||
}
|
animation-timing-function: steps(1);
|
||||||
|
}
|
||||||
|
> div::before {
|
||||||
|
position: relative;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
> div::after {
|
||||||
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
position: absolute;
|
||||||
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
top: 100%;
|
||||||
|
left: 0px;
|
||||||
@keyframes ascii_frame {
|
}
|
||||||
0% {opacity: 1;}
|
|
||||||
25% {opacity: 1;}
|
|
||||||
25.1% {opacity: 0;}
|
|
||||||
100% {opacity: 0;}
|
|
||||||
}
|
}
|
||||||
|
@keyframes mouse_move {
|
||||||
#mouse_1 {
|
0% {top: 0%;}
|
||||||
place-self: center;
|
25% {top: -100%;}
|
||||||
|
50% {top: -200%;}
|
||||||
|
75% {top: -300%;}
|
||||||
}
|
}
|
||||||
#mouse_2 {
|
|
||||||
left: 10%;
|
|
||||||
}
|
|
||||||
#mouse_3 {
|
|
||||||
left: 60%;
|
|
||||||
}
|
|
||||||
#mouse_4 {
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
72
styles/elements/mouses/mouse_1.css
Normal file
72
styles/elements/mouses/mouse_1.css
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
.mouse_1::before {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
|
.mouse_1::after {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
72
styles/elements/mouses/mouse_2.css
Normal file
72
styles/elements/mouses/mouse_2.css
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
.mouse_2::before {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
|
.mouse_2::after {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
64
styles/elements/mouses/mouse_3.css
Normal file
64
styles/elements/mouses/mouse_3.css
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
.mouse_3::before {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
|
.mouse_3::after {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
64
styles/elements/mouses/mouse_4.css
Normal file
64
styles/elements/mouses/mouse_4.css
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
.mouse_4::before {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
|
.mouse_4::after {
|
||||||
|
content:'\
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
\a
|
||||||
|
';
|
||||||
|
}
|
||||||
@@ -8,10 +8,11 @@ nav {
|
|||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
font-size: min(4vw, 1.5rem);
|
||||||
}
|
}
|
||||||
nav a {
|
nav a {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 20px;
|
padding: 10px min(5%, 20px);
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ section {
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
grid:
|
grid:
|
||||||
' . header . ' 1fr
|
' . header . ' auto
|
||||||
' . article . ' auto
|
' . article . ' auto
|
||||||
' . mouse . ' auto
|
' . mouse . ' auto
|
||||||
' banner banner banner ' auto
|
' banner banner banner ' auto
|
||||||
@@ -35,3 +35,7 @@ section header h1 {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section .banner {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,21 @@
|
|||||||
margin:20px 0px 20px 0px;
|
margin:20px 0px 20px 0px;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
gap:10px 30px;
|
/*
|
||||||
|
older safari doesn't not support flex gap
|
||||||
|
I could use a workaround :
|
||||||
|
https://stackoverflow.com/questions/65452057/flexbox-gap-workaround-for-safari
|
||||||
|
but it doesn't work with wrap
|
||||||
|
so instead I make them in columns and add a margin
|
||||||
|
|
||||||
|
gap: 10px 30px;
|
||||||
|
*/
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title > *:first-child {
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
--base_font_size: 62.5%;
|
--base_font_size: 62.5%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,14 +6,14 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
*/
|
|
||||||
body, pre {
|
body, pre {
|
||||||
font-family: "notomono", monospace;
|
font-family: "notomono", monospace;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
|
*/
|
||||||
@media screen and (min-width: 500px) {
|
@media screen and (min-width: 500px) {
|
||||||
html {
|
html {
|
||||||
font-size: calc(var(--base_font_size) * 1.2);
|
font-size: calc(var(--base_font_size) * 1.2);
|
||||||
@@ -63,4 +63,7 @@ h6 { margin: 10px 0px; font-size: 1.0rem; }
|
|||||||
line-height: 0.8;
|
line-height: 0.8;
|
||||||
font-size: min(2.1vw, 1.0rem);
|
font-size: min(2.1vw, 1.0rem);
|
||||||
}
|
}
|
||||||
|
.pre_small {
|
||||||
|
font-size: min(1.5vw, 0.7rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user