feat(ui): harmoniser navigation pages d’entrée et recherche
This commit is contained in:
@@ -65,20 +65,94 @@ a:hover { text-decoration: underline; }
|
||||
header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
z-index: 1000;
|
||||
isolation: isolate;
|
||||
|
||||
background: rgba(255,255,255,.92);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgba(0,0,0,.82);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
|
||||
border-bottom: 1px solid rgba(127,127,127,0.35);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(127,127,127,0.28);
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light){
|
||||
header{
|
||||
background: rgba(255,255,255,.90);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
header{ background: rgba(0,0,0,.72); }
|
||||
}
|
||||
|
||||
.site-nav { font-size: 14px; opacity: 0.9; }
|
||||
.site-nav{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.site-nav span[aria-hidden="true"]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
color: #00d9ff;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
opacity: .94;
|
||||
transition:
|
||||
transform 120ms var(--ease-out),
|
||||
background 120ms var(--ease-out),
|
||||
border-color 120ms var(--ease-out),
|
||||
opacity 120ms var(--ease-out);
|
||||
}
|
||||
|
||||
.site-nav a:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(0,217,255,.08);
|
||||
border-color: rgba(0,217,255,.22);
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-nav a:active{
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.site-nav{
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.site-nav a{
|
||||
min-height: 28px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.site-nav{
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.site-nav a{
|
||||
min-height: 24px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
}
|
||||
|
||||
main { padding: 0; }
|
||||
|
||||
.reading {
|
||||
@@ -90,12 +164,10 @@ main { padding: 0; }
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
|
||||
.reading h1 {
|
||||
line-height: 1.2;
|
||||
margin: 0 0 10px;
|
||||
|
||||
/* polish */
|
||||
letter-spacing: -0.01em;
|
||||
.reading > h1{
|
||||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.reading p { margin: 0 0 12px; }
|
||||
@@ -626,4 +698,320 @@ html{ scroll-behavior: smooth; }
|
||||
|
||||
.glossary-alpha-group h3{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ==========================
|
||||
Landing pages
|
||||
========================== */
|
||||
|
||||
.reading:has(> .landing){
|
||||
max-width: min(1180px, calc(100vw - 32px));
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.landing{
|
||||
display: grid;
|
||||
gap: clamp(18px, 3vw, 30px);
|
||||
width: 100%;
|
||||
padding: 14px 0 10px;
|
||||
}
|
||||
|
||||
.landing-hero,
|
||||
.landing-section,
|
||||
.edition-note{
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(0,217,255,0.12), transparent 36%),
|
||||
rgba(127,127,127,0.045);
|
||||
}
|
||||
|
||||
.landing-hero{
|
||||
padding: clamp(24px, 4vw, 46px);
|
||||
}
|
||||
|
||||
.landing-kicker{
|
||||
margin: 0 0 8px;
|
||||
color: #00d9ff;
|
||||
font-size: .78rem;
|
||||
line-height: 1.2;
|
||||
font-weight: 850;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.landing-hero h1{
|
||||
margin: 0;
|
||||
font-size: clamp(2.45rem, 7vw, 5.4rem);
|
||||
line-height: .95;
|
||||
letter-spacing: -.055em;
|
||||
text-shadow: 0 0 34px rgba(0,217,255,.10);
|
||||
}
|
||||
|
||||
.landing-lead{
|
||||
max-width: 66ch;
|
||||
margin: 18px 0 0;
|
||||
font-size: clamp(1.02rem, 2vw, 1.28rem);
|
||||
line-height: 1.55;
|
||||
opacity: .94;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.landing-actions{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.landing-btn{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 38px;
|
||||
padding: 7px 14px;
|
||||
border: 1px solid rgba(127,127,127,0.38);
|
||||
border-radius: 999px;
|
||||
background: rgba(127,127,127,0.06);
|
||||
font-weight: 850;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 120ms var(--ease-out),
|
||||
background 120ms var(--ease-out),
|
||||
border-color 120ms var(--ease-out);
|
||||
}
|
||||
|
||||
.landing-btn:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.11);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.landing-btn--primary{
|
||||
border-color: rgba(0,217,255,0.42);
|
||||
background: rgba(0,217,255,0.10);
|
||||
color: #00d9ff;
|
||||
}
|
||||
|
||||
.landing-section,
|
||||
.edition-note{
|
||||
padding: clamp(18px, 3vw, 28px);
|
||||
}
|
||||
|
||||
.landing-section__head,
|
||||
.edition-note .landing-kicker{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.landing-section h2,
|
||||
.edition-note h2{
|
||||
margin: 0;
|
||||
font-size: clamp(1.45rem, 3vw, 2.25rem);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -.035em;
|
||||
}
|
||||
|
||||
.edition-note p:not(.landing-kicker){
|
||||
max-width: 78ch;
|
||||
margin: 14px 0 0;
|
||||
line-height: 1.62;
|
||||
opacity: .93;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.landing-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.landing-card{
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 18px;
|
||||
background: rgba(127,127,127,0.045);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 120ms var(--ease-out),
|
||||
background 120ms var(--ease-out),
|
||||
border-color 120ms var(--ease-out);
|
||||
}
|
||||
|
||||
.landing-card:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.075);
|
||||
border-color: rgba(0,217,255,0.24);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.landing-card strong{
|
||||
color: #00d9ff;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.landing-card span{
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.landing-card small{
|
||||
color: #00d9ff;
|
||||
font-weight: 800;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.presentation-next{
|
||||
margin-top: 42px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(127,127,127,0.25);
|
||||
}
|
||||
|
||||
body[data-edition-key="commencer"] .commencer-title{
|
||||
font-size: clamp(2.6rem, 6vw, 4.8rem);
|
||||
line-height: .98;
|
||||
letter-spacing: -.055em;
|
||||
margin: 18px 0 28px;
|
||||
text-shadow: 0 0 34px rgba(0,217,255,.10);
|
||||
}
|
||||
|
||||
body[data-edition-key="commencer"] .reading h2{
|
||||
margin-top: 34px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(127,127,127,.18);
|
||||
font-size: clamp(1.35rem, 2.3vw, 1.85rem);
|
||||
letter-spacing: -.025em;
|
||||
}
|
||||
|
||||
body[data-edition-key="commencer"] .reading h2:first-of-type{
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.reading:has(> .landing){
|
||||
max-width: none;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.landing{
|
||||
gap: 18px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.landing-hero,
|
||||
.landing-section,
|
||||
.edition-note{
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.landing-hero,
|
||||
.landing-section,
|
||||
.edition-note{
|
||||
padding: 18px 16px;
|
||||
}
|
||||
|
||||
.landing-hero h1{
|
||||
font-size: clamp(2.15rem, 13vw, 3.25rem);
|
||||
}
|
||||
|
||||
.landing-lead{
|
||||
font-size: .98rem;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.landing-grid{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.landing-card{
|
||||
padding: 14px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.edition-note p:not(.landing-kicker){
|
||||
line-height: 1.52;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 460px){
|
||||
.landing-actions{
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.landing-btn{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.reading:has(> .landing){
|
||||
max-width: none;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.landing{
|
||||
gap: 14px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.landing-hero,
|
||||
.landing-section,
|
||||
.edition-note{
|
||||
padding: 14px 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.landing-hero h1{
|
||||
font-size: clamp(2.2rem, 6vw, 4.6rem);
|
||||
}
|
||||
|
||||
.landing-lead{
|
||||
margin-top: 12px;
|
||||
font-size: .94rem;
|
||||
line-height: 1.38;
|
||||
}
|
||||
|
||||
.landing-actions{
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.edition-note p:not(.landing-kicker){
|
||||
margin-top: 10px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
}
|
||||
|
||||
.search-hero h1{
|
||||
font-size: clamp(1.9rem, 4.5vw, 2.8rem);
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.reading h1{
|
||||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.landing-hero h1{
|
||||
font-size: clamp(2rem, 10vw, 3.2rem);
|
||||
}
|
||||
|
||||
.search-hero h1{
|
||||
font-size: clamp(1.7rem, 7vw, 2.3rem);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user