amélioration du style
This commit is contained in:
parent
65c09752ea
commit
214a9bcd54
1 changed files with 18 additions and 19 deletions
37
style.css
37
style.css
|
|
@ -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){
|
||||
|
|
|
|||
Loading…
Reference in a new issue