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

complete modulation of html

Browse Source
This commit is contained in:
Hugo LAMY
2026-03-17 18:16:21 +01:00
parent 704483f6e6
commit d728897805
27 changed files with 2990 additions and 1686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/banners.css
View File

@@ -91,11 +91,3 @@
--banner_height: calc(var(--base_banner_height) * 5);
--dot_size: calc(var(--base_dot_size) * 5);
}
/* specific banners */
#top_banner {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}

25
src/styles/base.css Normal file
View File

@@ -0,0 +1,25 @@
:root {
--base_font_size: 62.5%;
}
html {
font-size: var(--base_font_size);
}
body {
overflow-x: clip;
margin: auto;
width: fit-content;
background-color: #f6f6f6;
}
/* https://css-tricks.com/slow-movement/#h-you-can-implement-native-smooth-scrolling-in-css */
/* Animate scrolling only if users don’t prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
/* Add some spacing between the target and the top of the viewport */
:target {
scroll-margin-top: 0px;
}
}

38
src/styles/elements/cv.css
View File

@@ -1,38 +0,0 @@
#cv {
header {
height: 300px;
}
}
.cv {
display: flex;
flex-direction: column;
text-align: left;
width: auto;
max-width: 900px;
> *:last-child {
margin-bottom: 100px;
}
.cv_download {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.banner {
margin: 0px 0px 50px;
}
h2 {
margin-top: 100px;
}
ul {
border: 1px dashed black;
padding: 20px;
padding-left: 40px;
}
}

48
src/styles/elements/hero.css
View File

@@ -1,48 +0,0 @@
#hero {
min-height: 100vh;
grid-template-columns: 1fr auto 1fr;
/*
* WIP : trying to find a solution to have both qualities :
* - elements are spread across the page vertically ('hugo lamy developpeur' is not compacted on top)
* - the details element 'voir le cv' don't jump when we unroll it
*
grid-template-rows: 1fr auto 1fr;
grid-template-rows: auto auto 1fr;
*/
grid-template-rows: 50vh 1fr;
.title {
/*
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;
> *:first-child {
margin-bottom: 10px;
}
&#name {
margin: 30px 0px 20px 0px;
}
&#title {
margin: 20px 0px 20px 0px;
}
}
.subtitle {
text-align: center;
display: inline-block;
max-width: 700px;
margin: 0px auto;
}
}

6
src/styles/elements/infos.css
View File

@@ -1,6 +0,0 @@
#infos article {
display: flex;
flex-direction: column;
place-content: center;
height: 200px;
}

22
src/styles/elements/projects.css
View File

@@ -1,22 +0,0 @@
#projects {
header {
height: 300px;
}
}
#projects .projects_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
grid-template-columns: repeat(2, minmax(100px, auto));
grid-template-columns: repeat(2, minmax(100px, 500px));
grid-gap: 20px;
}
#projects .projects_grid figure {
}
#projects .projects_grid figure figcaption {
text-align: left;
margin-bottom: 100px;
}
#projects .mouse {
margin-top: 100px;
}

248
src/styles/global_style.css
View File

@@ -1,248 +0,0 @@
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* RESET CSS *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body * {
margin: 0px;
}
input,
button,
textarea,
select {
/* Remove built-in form typography styles */
font: inherit;
}
body {
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
/* Avoid text overflows
overflow-wrap: break-word;
*/
overflow-wrap: anywhere;
}
/* style details elements */
details summary {
cursor: pointer;
}
details summary > * {
/* allow to put h1 or anything inside the summary without breaking the line */
display: inline;
}
script,
style {
display: none;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* GLOBAL CSS *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
:root {
--base_font_size: 62.5%;
}
html {
font-size: var(--base_font_size);
}
body {
overflow-x: clip;
margin: auto;
width: fit-content;
background-color: #f6f6f6;
}
/* https://css-tricks.com/slow-movement/#h-you-can-implement-native-smooth-scrolling-in-css */
/* Animate scrolling only if users don’t prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
/* Add some spacing between the target and the top of the viewport */
:target {
scroll-margin-top: 0px;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* TEXT CSS *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@font-face {
font-family: "notomono";
src: url("./fonts/notomono/NotoMono-Dot.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body,
pre {
font-family: "notomono", monospace;
font-size: 1.5rem;
font-weight: normal;
font-style: normal;
}
@media screen and (min-width: 500px) {
html {
font-size: calc(var(--base_font_size) * 1.2);
}
}
ul {
display: block;
list-style-type: "• ";
padding-left: 25px;
/*
list-style-position: inside;
*/
list-style-position: outside;
}
li {
display: list-item;
}
li::marker {
font-size: 1.8rem;
}
a:empty::after {
content: attr(href);
}
h1 {
margin: 30px 0px;
font-size: 2.25rem;
}
h2 {
margin: 30px 0px;
font-size: 2rem;
}
h3 {
margin: 20px 0px;
font-size: 1.75rem;
}
h4 {
margin: 20px 0px;
font-size: 1.5rem;
}
h5 {
margin: 10px 0px;
font-size: 1.25rem;
}
h6 {
margin: 10px 0px;
font-size: 1rem;
}
.pre,
pre {
display: flex;
white-space: pre;
line-height: 0.8;
font-size: min(2.1vw, 1rem);
}
.pre_small {
font-size: min(1.5vw, 0.7rem);
}
a {
word-break: break-all;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* SECTIONS GLOBAL CSS *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section {
display: grid;
margin: 0px;
width: 100vw;
grid-template-columns: auto auto auto;
grid-auto-rows: auto;
grid-gap: 10px;
gap: 10px;
min-height: 100vh;
justify-items: center;
text-align: center;
> * {
grid-column: 2 / span 1;
}
> .grid_full_width {
grid-column: 1 / span 3;
}
header {
display: flex;
flex-direction: column;
place-content: center;
h1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
article {
text-align: left;
}
.banner {
overflow-x: hidden;
}
}

107
src/styles/global_variables.css
View File

@@ -1,107 +0,0 @@
/* https://stackoverflow.com/questions/62107074/how-to-hide-a-text-and-make-it-accessible-by-screen-reader */
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
outline: none;
box-shadow: none;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /* maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /* modern browsers, clip-path works inwards from each corner */
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space) */
}
.margin_top_small {
margin-top: 10px;
}
.margin_bottom_small {
margin-bottom: 10px;
}
.margin_top_big {
margin-top: 50px;
}
.margin_bottom_big {
margin-bottom: 50px;
}
/*
DATA-FLEX
direction width childrens childrens childrens
position main axis cross axis
[/]-horizontal [/]-parent [/]-center [/]-pack [/]-fit
[/] vertical [/] content [/] left [/]-wrap [/] stretch
[/] right [/] nowrap
[/] top [/] grow
[/] bottom [/] space
[/] spread
[/] gap
-> for GAP, you can custom the value with 'style="--gap:?px;"'
*/
[data-flex] {
display: flex;
justify-content: center;
align-items: center;
width: auto;
flex-wrap: nowrap;
}
[data-flex] > * {
flex-grow: 0;
}
/*
direction : -horizontal- vertical
*/
[data-flex~="horizontal"] { flex-direction: row; }
[data-flex~="vertical"] { flex-direction: column; }
/*
width : -parent- content
*/
[data-flex~="parent"] {
width: 100%;
width: -moz-available; /* WebKit-based browsers will ignore this. */
width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
width: fill-available;
}
[data-flex~="content"] { width: fit-content; }
/*
position : -center- left right top bottom
*/
[data-flex~="left"] ,[data-flex~="vertical"][data-flex~="left"] { align-items: flex-start; text-align: left; }
[data-flex~="right"] ,[data-flex~="vertical"][data-flex~="right"] { align-items: flex-end; text-align: right; }
[data-flex~="top"] ,[data-flex~="vertical"][data-flex~="top"] { justify-content: flex-start; }
[data-flex~="bottom"] ,[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
[data-flex~="center"] ,[data-flex~="vertical"][data-flex~="center"] { align-items: center; text-align: center; }
[data-flex~="horizontal"][data-flex~="left"] { justify-content: flex-start; }
[data-flex~="horizontal"][data-flex~="right"] { justify-content: flex-end; }
[data-flex~="horizontal"][data-flex~="top"] { align-items: flex-start; }
[data-flex~="horizontal"][data-flex~="bottom"] { align-items: flex-end; }
[data-flex~="horizontal"][data-flex~="center"] { }
/*
main axis : -pack- space spread grow wrap gap
*/
[data-flex~="pack"] > * ,[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
[data-flex~="space"] ,[data-flex~="vertical"][data-flex~="space"] { justify-content: space-around; }
[data-flex~="spread"] ,[data-flex~="vertical"][data-flex~="spread"] { justify-content: space-between; }
[data-flex~="grow"] > * ,[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
[data-flex~="horizontal"][data-flex~="pack"] > * { flex-grow: 0; }
[data-flex~="horizontal"][data-flex~="space"] { justify-content: space-around; }
[data-flex~="horizontal"][data-flex~="spread"] { justify-content: space-between; }
[data-flex~="horizontal"][data-flex~="grow"] > * { flex-grow: 1; }
[data-flex~="wrap"] { flex-wrap: wrap; }
/*
cross axis : -fit- stretch
*/
[data-flex~="horizontal"][data-flex~="fit"],
[data-flex~="vertical"][data-flex~="fit"] { }
[data-flex~="horizontal"][data-flex~="stretch"],
[data-flex~="vertical"][data-flex~="stretch"] { align-items: stretch; }

59
src/styles/language.css
View File

@@ -1,59 +0,0 @@
input#language {
display: none;
}
label#language_label {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
cursor: pointer;
z-index: 1;
.flag {
width: 20px;
}
}
/*
* SWITCH FLAG
*/
#language {
&:not(:checked) + #language_label {
#fr {
display: inline;
}
#en {
display: none;
}
}
&:checked + #language_label {
#fr {
display: none;
}
#en {
display: inline;
}
}
}
/*
* SWITCH LANGUAGE
*/
#language {
~ * .fr,
~ * .en {
display: none;
}
&:not(:checked) ~ * .en {
display: inline;
}
&:checked ~ * .fr {
display: inline;
}
}

381
src/styles/mouses.css
View File

@@ -1,26 +1,24 @@
@import "./mouses/mouse_1.css";
@import "./mouses/mouse_2.css";
@import "./mouses/mouse_3.css";
@import "./mouses/mouse_4.css";
.mouse {
margin: auto;
width: fit-content;
overflow: hidden;
}
.mouse .frames {
position: relative;
animation: mouse_move infinite 2s normal steps(4);
}
.mouse .frames::before {
position: relative;
top: 0px;
left: 0px;
}
.mouse .frames::after {
position: absolute;
top: 100%;
left: 0px;
margin: auto;
width: fit-content;
overflow: hidden;
.frames {
position: relative;
animation: mouse_move infinite 2s normal steps(4);
&::before {
position: relative;
top: 0px;
left: 0px;
}
&::after {
position: absolute;
top: 100%;
left: 0px;
}
}
}
/*
@@ -30,7 +28,342 @@
*
*/
@keyframes mouse_move {
0% {transform: translateY(0%);}
100% {transform: translateY(-400%);}
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-400%);
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 1 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.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
";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 2 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.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
";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 3 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.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
";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 4 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.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
";
}

72
src/styles/mouses/mouse_1.css
View File

@@ -1,72 +0,0 @@
.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
src/styles/mouses/mouse_2.css
View File

@@ -1,72 +0,0 @@
.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
src/styles/mouses/mouse_3.css
View File

@@ -1,64 +0,0 @@
.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
src/styles/mouses/mouse_4.css
View File

@@ -1,64 +0,0 @@
.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
';
}

47
src/styles/reset.css Normal file
View File

@@ -0,0 +1,47 @@
body * {
margin: 0px;
}
input,
button,
textarea,
select {
/* Remove built-in form typography styles */
font: inherit;
}
body {
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
/* Avoid text overflows
overflow-wrap: break-word;
*/
overflow-wrap: anywhere;
}
/* style details elements */
details summary {
cursor: pointer;
}
details summary > * {
/* allow to put h1 or anything inside the summary without breaking the line */
display: inline;
}
script,
style {
display: none;
}

76
src/styles/text.css Normal file
View File

@@ -0,0 +1,76 @@
@font-face {
font-family: "notomono";
src: url("./fonts/notomono/NotoMono-Dot.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body,
pre {
font-family: "notomono", monospace;
font-size: 1.5rem;
font-weight: normal;
font-style: normal;
}
@media screen and (min-width: 500px) {
html {
font-size: calc(var(--base_font_size) * 1.2);
}
}
ul {
display: block;
list-style-type: "• ";
padding-left: 25px;
/*
list-style-position: inside;
*/
list-style-position: outside;
}
li {
display: list-item;
}
li::marker {
font-size: 1.8rem;
}
a:empty::after {
content: attr(href);
}
h1 {
margin: 30px 0px;
font-size: 2.25rem;
}
h2 {
margin: 30px 0px;
font-size: 2rem;
}
h3 {
margin: 20px 0px;
font-size: 1.75rem;
}
h4 {
margin: 20px 0px;
font-size: 1.5rem;
}
h5 {
margin: 10px 0px;
font-size: 1.25rem;
}
h6 {
margin: 10px 0px;
font-size: 1rem;
}
.pre,
pre {
display: flex;
white-space: pre;
line-height: 0.8;
font-size: min(2.1vw, 1rem);
}
.pre_small {
font-size: min(1.5vw, 0.7rem);
}
a {
word-break: break-all;
}