fixed small error in hero section : unrolling cv was creating a jump

This commit is contained in:
asus
2024-05-17 13:38:25 +02:00
parent 9302e725db
commit a40ab0b203
5 changed files with 12 additions and 18 deletions

View File

@@ -33,7 +33,6 @@
--> -->
<body id="body"> <body id="body">
<div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
@@ -42,6 +41,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">
@@ -133,6 +133,7 @@
               
</span> </span>
</h1> </h1>
<a href="https://bitbucket.org/hugogogo" target="_blank" rel="noopener noreferrer" title="link to git repositories on bitbucket"></a>
</header> </header>
<article> <article>

View File

@@ -82,16 +82,3 @@
background-image: url(../../docs/banners/banner_5.svg); background-image: url(../../docs/banners/banner_5.svg);
--banner_height: calc(var(--base_banner_height) * 5); --banner_height: calc(var(--base_banner_height) * 5);
} }
/*
* individual banners
*
*/
#top_banner {
position: absolute;
top: 0px;
left: 0px;
}

View File

@@ -3,8 +3,9 @@
max-width: 900px; max-width: 900px;
} }
details.cv { .cv {
display: flex; display: flex;
text-align: left;
summary { summary {
position: relative; position: relative;
list-style-position: outside; list-style-position: outside;

View File

@@ -1,10 +1,11 @@
#hero { #hero {
min-height: 100vh; min-height: 100vh;
grid-template-rows: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto auto 1fr;
.subtitle { .subtitle {
text-align: center; text-align: center;
} }
details { .cv {
#cv_download { #cv_download {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;

View File

@@ -2,12 +2,13 @@ section {
display: grid; display: grid;
margin: 0px; margin: 0px;
width: 100vw; width: 100vw;
grid-template-columns: 1fr auto 1fr; grid-auto-columns: auto;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-gap: 10px; grid-gap: 10px;
gap: 10px; gap: 10px;
min-height: 100vh; min-height: 100vh;
justify-items: center; justify-items: center;
text-align: center;
header { header {
display: flex; display: flex;
@@ -21,6 +22,9 @@ section {
justify-content: center; justify-content: center;
} }
} }
article {
text-align: left;
}
> * { > * {
grid-column: 2 / span 1; grid-column: 2 / span 1;