blog/2025
1
Fork 0
Code Issues Activity

Uniformisation de la largeur du hero avec celle du footer

Browse Source
This commit is contained in:
Richard Dern
2025-09-20 16:28:18 +02:00
parent f166e112c0
commit 32bfb537a3
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
themes/default/assets/css/hero.css
View File

@@ -1,6 +1,6 @@
#hero { #hero {
width: 90%; width: 90%;
max-width: 1100px; max-width: 1200px;
margin: 2rem auto 1.25rem; margin: 2rem auto 1.25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -34,7 +34,7 @@
filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.35)); filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.35));
} }
#hero header > div { #hero header>div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.35rem; gap: 0.35rem;
@@ -52,7 +52,8 @@
color: var(--text-softest); color: var(--text-softest);
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
#hero > ul {
#hero>ul {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem; gap: 1rem;
@@ -61,7 +62,7 @@
list-style: none; list-style: none;
} }
#hero > ul li { #hero>ul li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.4rem; gap: 0.4rem;
@@ -72,7 +73,7 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
} }
#hero > ul li strong { #hero>ul li strong {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
text-transform: uppercase; text-transform: uppercase;
@@ -80,25 +81,25 @@
color: var(--text-muted2); color: var(--text-muted2);
} }
#hero > ul li span { #hero>ul li span {
color: var(--text-white); color: var(--text-white);
} }
#hero > ul li span, #hero>ul li span,
#hero > ul li time { #hero>ul li time {
font-size: 1.65rem; font-size: 1.65rem;
font-weight: 600; font-weight: 600;
color: var(--text-white); color: var(--text-white);
} }
#hero > nav { #hero>nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 0.75rem; gap: 0.75rem;
} }
#hero > nav a { #hero>nav a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -116,8 +117,8 @@
transition: color 160ms ease, background 160ms ease, border-color 160ms ease; transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
} }
#hero > nav a:hover, #hero>nav a:hover,
#hero > nav a:focus { #hero>nav a:focus {
color: var(--text-white); color: var(--text-white);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.25);
@@ -140,12 +141,12 @@
max-width: 140px; max-width: 140px;
} }
#hero > ul { #hero>ul {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0.75rem; gap: 0.75rem;
} }
#hero > nav a { #hero>nav a {
flex: 1 1 140px; flex: 1 1 140px;
} }
} }