amélioration du style

This commit is contained in:
Didictateur 2025-12-16 10:23:19 +01:00
parent 65c09752ea
commit 214a9bcd54

View file

@ -1,11 +1,13 @@
:root{
--bg: linear-gradient(135deg, #f6f8fb 0%, #e6f3ff 50%, #eefaf9 100%);
--card: #ffffff;
--bg: linear-gradient(135deg, #f5f0ff 0%, #f0e6ff 50%, #ede0ff 100%);
--card: #fafaf9;
--muted: #6b7280;
--accent: #2563eb;
--accent-2: #10b981;
--accent: #8b5cf6;
--accent-2: #a855f7;
--text: #0f172a;
--radius: 12px;
--purple-light: #ede9fe;
--purple-dark: #6d28d9;
}
*{box-sizing:border-box}
@ -36,9 +38,9 @@ body{
}
.site-header{
background: linear-gradient(90deg, rgba(16,185,129,0.06), rgba(37,99,235,0.04));
background: linear-gradient(90deg, rgba(168,85,247,0.08), rgba(139,92,246,0.06));
backdrop-filter: blur(4px);
border-bottom:1px solid rgba(15,23,42,0.06);
border-bottom:1px solid rgba(139,92,246,0.1);
}
.site-header .container{
display:flex;
@ -60,7 +62,7 @@ body{
align-items:center;
}
.nav a{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px}
.nav a:hover{color:var(--accent); background:rgba(37,99,235,0.08)}
.nav a:hover{color:var(--accent); background:rgba(139,92,246,0.08)}
.profile-card{position:relative; overflow:visible}
.profile-card::before{
@ -72,7 +74,7 @@ body{
background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.main-card{border-top:6px solid; border-top-color:rgba(16,185,129,0.12)}
.main-card{border-top:6px solid; border-top-color:rgba(139,92,246,0.2)}
.layout{display:grid; grid-template-columns: 350px 1fr; gap:24px; align-items:start}
@ -118,7 +120,7 @@ body{
}
.profile-card > a img{display:block}
.profile-card > a:focus{
outline: 2px dashed rgba(37,99,235,0.28);
outline: 2px dashed rgba(139,92,246,0.28);
outline-offset: 3px;
}
@ -153,9 +155,6 @@ li{margin:8px 0}
@media (max-width:900px){
.layout{grid-template-columns:1fr}
/* On mobile, empile le header et affiche la navigation verticalement
au lieu de la masquer. Cela permet d'avoir les liens "Accueil", "Syllabus",
etc. visibles sur petit écran. */
.site-header .container{
flex-direction:column;
align-items:flex-start;
@ -175,12 +174,12 @@ li{margin:8px 0}
border-radius:8px;
color:var(--muted);
}
.nav a:hover{color:var(--accent); background:rgba(37,99,235,0.06)}
.nav a:hover{color:var(--accent); background:rgba(139,92,246,0.06)}
.container{padding:16px}
}
.muted{color:var(--muted)}
.pill{display:inline-block; padding:6px 10px; background:rgba(37,99,235,0.08); color:var(--accent); border-radius:999px; font-size:13px}
.pill{display:inline-block; padding:6px 10px; background:rgba(139,92,246,0.08); color:var(--accent); border-radius:999px; font-size:13px}
a#easteregg,
a#easteregg:link,
@ -194,7 +193,7 @@ a#easteregg:active{
}
#easteregg:focus{
outline: 2px dashed rgba(37,99,235,0.28);
outline: 2px dashed rgba(139,92,246,0.28);
outline-offset: 3px;
}
@ -207,7 +206,7 @@ a#easteregg:active{
.markdown-content ul{padding-left:1.2rem; margin-bottom:12px}
.markdown-content li{margin-bottom:6px}
.markdown-content pre{background:rgba(15,23,42,0.03); padding:12px; border-radius:8px; overflow:auto}
.markdown-content blockquote{border-left:4px solid rgba(16,185,129,0.12); padding:8px 12px; color:var(--muted); background:rgba(16,185,129,0.02); border-radius:6px}
.markdown-content blockquote{border-left:4px solid rgba(139,92,246,0.3); padding:8px 12px; color:var(--muted); background:rgba(139,92,246,0.06); border-radius:6px}
/* Projects grid */
@ -242,9 +241,9 @@ a#easteregg:active{
height:34px;
line-height: 30px;
text-align: center;
background:#6e98f3;
background:#a855f7;
border-radius:6px;
box-shadow:0 6px 18px rgba(37,99,235,0.12);
box-shadow:0 6px 18px rgba(168,85,247,0.2);
pointer-events:none;
z-index:2;
opacity:0.98;
@ -253,7 +252,7 @@ a#easteregg:active{
}
.lang-toggle{color:var(--muted); text-decoration:none; padding:4px 6px; border-radius:6px}
.lang-toggle.active{background:rgba(37,99,235,0.08); color:var(--accent);}
.lang-toggle.active{background:rgba(139,92,246,0.08); color:var(--accent);}
@media (max-width:900px){