Compare commits
26 Commits
simple_htm
...
new_banner
| Author | SHA1 | Date | |
|---|---|---|---|
|
3747762c4f | ||
|
|
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 |
55
index.html
55
index.html
@@ -2,7 +2,7 @@
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<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 -->
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||
<title>hugulumu.fr</title>
|
||||
@@ -23,7 +23,6 @@
|
||||
</head>
|
||||
|
||||
<!--
|
||||
|
||||
original : • 8226 U+2022
|
||||
: 57442 U+E062
|
||||
: 57443 U+E063
|
||||
@@ -31,19 +30,21 @@
|
||||
: 57445 U+E065
|
||||
actual : 57446 U+E066
|
||||
: 57447 U+E067
|
||||
|
||||
-->
|
||||
|
||||
<body id="body">
|
||||
<main id="top">
|
||||
|
||||
|
||||
<!--
|
||||
NAV
|
||||
<nav>
|
||||
<a href="#top">accueil</a>
|
||||
<a href="#projects">projets</a>
|
||||
<a href="#cv">cv</a>
|
||||
<a href="#infos">contact</a>
|
||||
</nav>
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
@@ -52,14 +53,14 @@
|
||||
<section class="section hero" id="hero">
|
||||
<header>
|
||||
<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 aria-hidden="true" class="pre">
|
||||
<span aria-hidden="true" class="pre pre_small">
|
||||
|
||||
|
||||
|
||||
@@ -159,25 +160,7 @@
|
||||
|
||||
</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>
|
||||
<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -206,7 +189,7 @@
|
||||
<h2>projets réalisés</h2>
|
||||
<figure class="project" id="ljdp">
|
||||
<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>
|
||||
<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>
|
||||
@@ -296,19 +279,7 @@
|
||||
|
||||
</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>
|
||||
<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -463,13 +434,7 @@
|
||||
|
||||
</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>
|
||||
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||
|
||||
</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 {
|
||||
position: relative;
|
||||
margin: 10px 0px 10px -100px;
|
||||
animation-name: slide;
|
||||
background-image: url(../img/banner_1.svg); /*default*/
|
||||
background-size: contain;
|
||||
background-repeat: repeat;
|
||||
background-position-x: 0%;
|
||||
|
||||
animation-duration: 10s; /*default*/
|
||||
animation-name: slide_svg;
|
||||
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.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;}
|
||||
@keyframes slide_svg {
|
||||
from {background-position-x: 0%;}
|
||||
to {background-position-x: 100%;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* 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(../img/banner_1.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 1);
|
||||
}
|
||||
.banner_size_2 {
|
||||
background-image: url(../img/banner_2.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 2);
|
||||
}
|
||||
.banner_size_3 {
|
||||
background-image: url(../img/banner_3.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 3);
|
||||
}
|
||||
.banner_size_4 {
|
||||
background-image: url(../img/banner_4.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 4);
|
||||
}
|
||||
.banner_size_5 {
|
||||
background-image: url(../img/banner_5.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 5);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
|
||||
#hero {
|
||||
grid-template-rows: 1fr auto auto;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
/*
|
||||
grid-template-rows: 1fr 50px auto auto;
|
||||
*/
|
||||
}
|
||||
#hero header {
|
||||
padding-top: 50px;
|
||||
}
|
||||
#hero .mouse {
|
||||
}
|
||||
|
||||
@@ -5,33 +5,25 @@
|
||||
}
|
||||
.frames_container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
width: fit-content;
|
||||
/*
|
||||
border: 1px solid blue;
|
||||
*/
|
||||
}
|
||||
pre.frame.hide {
|
||||
display: none;
|
||||
}
|
||||
pre.frame {
|
||||
position: relative;
|
||||
justify-items: start;
|
||||
align-items: end;
|
||||
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-timing-function: steps(3);
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,10 +8,11 @@ nav {
|
||||
background-color: #f6f6f6;
|
||||
z-index: 1;
|
||||
width: 100vw;
|
||||
font-size: min(4vw, 1.5rem);
|
||||
}
|
||||
nav a {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
padding: 10px min(5%, 20px);
|
||||
height: fit-content;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
@@ -9,7 +9,7 @@ section {
|
||||
margin: 0px;
|
||||
width: 100vw;
|
||||
grid:
|
||||
' . header . ' 1fr
|
||||
' . header . ' auto
|
||||
' . article . ' auto
|
||||
' . mouse . ' auto
|
||||
' banner banner banner ' auto
|
||||
@@ -35,3 +35,7 @@ section header h1 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section .banner {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,6 +6,21 @@
|
||||
margin:20px 0px 20px 0px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
BIN
styles/fonts/notomono/NotoMono_6dots.woff
Normal file
BIN
styles/fonts/notomono/NotoMono_6dots.woff
Normal file
Binary file not shown.
BIN
styles/fonts/notomono/NotoMono_6dotsNspace.woff
Normal file
BIN
styles/fonts/notomono/NotoMono_6dotsNspace.woff
Normal file
Binary file not shown.
BIN
styles/fonts/notomono/NotoMono_e066.woff
Normal file
BIN
styles/fonts/notomono/NotoMono_e066.woff
Normal file
Binary file not shown.
32
styles/img/banner_1.svg
Normal file
32
styles/img/banner_1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
35
styles/img/banner_2.svg
Normal file
35
styles/img/banner_2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
38
styles/img/banner_3.svg
Normal file
38
styles/img/banner_3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
40
styles/img/banner_4.svg
Normal file
40
styles/img/banner_4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
43
styles/img/banner_5.svg
Normal file
43
styles/img/banner_5.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
@@ -1,9 +1,5 @@
|
||||
|
||||
:root {
|
||||
--base_font_size: 62.5%;
|
||||
}
|
||||
html {
|
||||
font-size: var(--base_font_size);
|
||||
}
|
||||
body, main {
|
||||
overflow-x: clip;
|
||||
|
||||
@@ -6,17 +6,31 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/*
|
||||
*/
|
||||
body, pre {
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
body * {
|
||||
font-family: "notomono", monospace;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.pre, pre {
|
||||
display: flex;
|
||||
white-space: pre;
|
||||
line-height: 0.8;
|
||||
font-size: min(2.1vw, 1.0rem);
|
||||
}
|
||||
.pre_small {
|
||||
font-size: min(1.5vw, 0.7rem);
|
||||
}
|
||||
|
||||
/*
|
||||
for screen larger than 500px
|
||||
*/
|
||||
@media screen and (min-width: 500px) {
|
||||
html {
|
||||
font-size: calc(var(--base_font_size) * 1.2);
|
||||
body {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
@@ -57,10 +71,3 @@ h4 { margin: 20px 0px; font-size: 1.5rem; }
|
||||
h5 { margin: 10px 0px; font-size: 1.25rem; }
|
||||
h6 { margin: 10px 0px; font-size: 1.0rem; }
|
||||
|
||||
.pre, pre {
|
||||
display: flex;
|
||||
white-space: pre;
|
||||
line-height: 0.8;
|
||||
font-size: min(2.1vw, 1.0rem);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user