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

wip design is mobile first with some bugs

Browse Source
This commit is contained in:
asus
2024-05-19 12:26:30 +02:00
parent 527424df53
commit 00485dbc70
5 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -11,10 +11,10 @@
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/global.css" type="text/css" rel="stylesheet"> <link href="./styles/global.css" type="text/css" rel="stylesheet">
<link href="./styles/text.css" type="text/css" rel="stylesheet"> <link href="./styles/text.css" type="text/css" rel="stylesheet">
<link href="./styles/sections.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/banners.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/banners.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/title.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/hero.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/hero.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/projects.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/projects.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/cv.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/cv.css" type="text/css" rel="stylesheet">
@@ -33,6 +33,12 @@
<body id="body"> <body id="body">
<!--
maybe move this outside, so that i can change my mind to put it or not wihtout having to change the grid rows height ?
or else, if all rows can be the same, like 1fr or auto, it will also works
-->
<div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
@@ -40,7 +46,7 @@
HERO SECTION HERO SECTION
--> -->
<section class="section hero" id="hero"> <section class="section hero" id="hero">
<div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
<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 pre_small"> <span aria-hidden="true" class="pre pre_small">

9
styles/elements/banners.css
View File

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

9
styles/elements/hero.css
View File

@@ -1,7 +1,14 @@
#hero { #hero {
min-height: 100vh; min-height: 100vh;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto 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' dont jump when we unroll it
*
grid-template-rows: 1fr auto 1fr;
*/
grid-template-rows: auto auto 1fr;
.subtitle { .subtitle {
text-align: center; text-align: center;
} }

18
styles/elements/projects.css
View File

@@ -5,15 +5,29 @@
article { article {
display: grid; display: grid;
grid-gap: 20px; grid-gap: 20px;
grid-auto-columns: repeat(auto-fill, minmax(500px, 1fr)); /*
* trying to create a responsive design, but still some bugs
* so for now stick to mobile first
*
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
*/
grid-template-columns: auto;
p { p {
grid-column: 1 / span 2; grid-column: 1 / span 2;
grid-column: 1;
}
img:first-of-type {
grid-column: 1;
} }
img { img {
width: 600px;
/*
min-width: 300px;
width: 100%;
max-height: 500px; max-height: 500px;
max-width: 500px; max-width: 500px;
width: 100%;
margin: 0px auto; margin: 0px auto;
*/
} }
} }
.mouse { .mouse {

0
styles/elements/sections.css → styles/sections.css
View File