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">
|
<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,19 +30,21 @@
|
|||||||
: 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>
|
<nav>
|
||||||
<a href="#top">accueil</a>
|
<a href="#top">accueil</a>
|
||||||
<a href="#projects">projets</a>
|
<a href="#projects">projets</a>
|
||||||
<a href="#cv">cv</a>
|
<a href="#cv">cv</a>
|
||||||
<a href="#infos">contact</a>
|
<a href="#infos">contact</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
@@ -52,14 +53,14 @@
|
|||||||
<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">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -159,25 +160,7 @@
|
|||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<div id="banner_1" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
|
||||||
<pre class="banner" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@@ -206,7 +189,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>
|
||||||
@@ -296,19 +279,7 @@
|
|||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<div id="banner_2" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||||
<pre class="banner reverse t05" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -463,13 +434,7 @@
|
|||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<div id="banner_3" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||||
<pre class="banner t15 reverse" aria-hidden="true">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
</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(../img/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(../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 {
|
#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 {
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,33 +5,25 @@
|
|||||||
}
|
}
|
||||||
.frames_container {
|
.frames_container {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
/*
|
|
||||||
border: 1px solid blue;
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
pre.frame.hide {
|
pre.frame.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
pre.frame {
|
pre.frame {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
justify-items: start;
|
||||||
|
align-items: end;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
margin: auto auto 0px 0px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
|
|
||||||
border: 1px solid red;
|
|
||||||
*/
|
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
--tframes: 2s;
|
--tframes: 2s;
|
||||||
animation-name: ascii_frame;
|
animation-name: ascii_frame;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-duration: var(--tframes);
|
animation-duration: var(--tframes);
|
||||||
animation-timing-function: linear;
|
animation-timing-function: steps(3);
|
||||||
animation-direction: normal;
|
animation-direction: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
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 {
|
:root {
|
||||||
--base_font_size: 62.5%;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
font-size: var(--base_font_size);
|
|
||||||
}
|
}
|
||||||
body, main {
|
body, main {
|
||||||
overflow-x: clip;
|
overflow-x: clip;
|
||||||
|
|||||||
@@ -6,17 +6,31 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
/*
|
html {
|
||||||
*/
|
font-size: 62.5%;
|
||||||
body, pre {
|
}
|
||||||
|
body * {
|
||||||
font-family: "notomono", monospace;
|
font-family: "notomono", monospace;
|
||||||
font-size: 1.5rem;
|
font-size: 1.8rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: 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) {
|
@media screen and (min-width: 500px) {
|
||||||
html {
|
body {
|
||||||
font-size: calc(var(--base_font_size) * 1.2);
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
@@ -57,10 +71,3 @@ h4 { margin: 20px 0px; font-size: 1.5rem; }
|
|||||||
h5 { margin: 10px 0px; font-size: 1.25rem; }
|
h5 { margin: 10px 0px; font-size: 1.25rem; }
|
||||||
h6 { margin: 10px 0px; font-size: 1.0rem; }
|
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