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

wip adding php include

Browse Source
This commit is contained in:
Hugo LAMY
2026-03-17 14:09:41 +01:00
parent cd97001cc0
commit 704483f6e6
64 changed files with 1351 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
styles/elements/banners.css
View File

@@ -1,102 +0,0 @@
.banner {
width: 100%;
--base_banner_height: 24px;
--banner_height: var(--base_banner_height); /*default*/
--base_dot_size: 4.2vw;
--dot_size: var(--base_dot_size); /*default*/
height: min(var(--dot_size), var(--banner_height));
background-image: url(../../docs/banners/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-timing-function: linear;
animation-direction: normal;
}
@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_0 {
background-image: url(../../docs/banners/banner_0.svg);
--banner_height: calc(var(--base_banner_height) * 1);
--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_00 {
background-image: url(../../docs/banners/banner_00.svg);
--banner_height: calc(var(--base_banner_height) * 1);
--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_1 {
background-image: url(../../docs/banners/banner_1.svg);
--banner_height: calc(var(--base_banner_height) * 1);
--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_2 {
background-image: url(../../docs/banners/banner_2.svg);
--banner_height: calc(var(--base_banner_height) * 2);
--dot_size: calc(var(--base_dot_size) * 2);
}
.banner_size_3 {
background-image: url(../../docs/banners/banner_3.svg);
--banner_height: calc(var(--base_banner_height) * 3);
--dot_size: calc(var(--base_dot_size) * 3);
}
.banner_size_4 {
background-image: url(../../docs/banners/banner_4.svg);
--banner_height: calc(var(--base_banner_height) * 4);
--dot_size: calc(var(--base_dot_size) * 4);
}
.banner_size_5 {
background-image: url(../../docs/banners/banner_5.svg);
--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%;
}

38
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;
}
}

19
styles/elements/hero.css
View File

@@ -1,19 +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;
}
#hero .subtitle {
text-align: center;
display: inline-block;
max-width: 700px;
margin: 0px auto;
}

6
styles/elements/infos.css
View File

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

59
styles/elements/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;
}
}

36
styles/elements/mouses.css
View File

@@ -1,36 +0,0 @@
@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;
}
/*
* using 'transform' instead of 'top', because 'top' needs
* the parent to have an explicit height
* but in this case its height is according to the children
*
*/
@keyframes mouse_move {
0% {transform: translateY(0%);}
100% {transform: translateY(-400%);}
}

72
styles/elements/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
styles/elements/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
styles/elements/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
styles/elements/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
';
}

22
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;
}

26
styles/elements/title.css
View File

@@ -1,26 +0,0 @@
#name {
margin:30px 0px 20px 0px;
}
#title {
margin:20px 0px 20px 0px;
}
.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;
}
.title > *:first-child {
margin-bottom: 10px;
}