Ajout des écoles + changement CSS
This commit is contained in:
Esteban
+270
-33
@@ -9,11 +9,11 @@
|
||||
--surface-3: #202030;
|
||||
--border: #262638;
|
||||
--border-strong: #34344a;
|
||||
--accent: #6c63ff;
|
||||
--accent-strong: #574fe0;
|
||||
--accent-light: #8f88ff;
|
||||
--accent-soft: rgba(108, 99, 255, 0.14);
|
||||
--accent-border: rgba(108, 99, 255, 0.32);
|
||||
--accent: #ff7a1a;
|
||||
--accent-strong: #e8630a;
|
||||
--accent-light: #ffa155;
|
||||
--accent-soft: rgba(255, 122, 26, 0.14);
|
||||
--accent-border: rgba(255, 122, 26, 0.32);
|
||||
--text: #f2f2f8;
|
||||
--text-soft: #c7c7d6;
|
||||
--text-muted: #9b9bb2;
|
||||
@@ -25,9 +25,9 @@
|
||||
--radius-lg: 22px;
|
||||
--shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);
|
||||
--shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
|
||||
--shadow-accent: 0 14px 34px rgba(108, 99, 255, 0.22);
|
||||
--glow-1: rgba(108, 99, 255, 0.14);
|
||||
--glow-2: rgba(108, 99, 255, 0.07);
|
||||
--shadow-accent: 0 14px 34px rgba(255, 122, 26, 0.22);
|
||||
--glow-1: rgba(255, 122, 26, 0.14);
|
||||
--glow-2: rgba(255, 122, 26, 0.07);
|
||||
--header-bg: rgba(12, 12, 18, 0.78);
|
||||
--nav-bg: rgba(12, 12, 18, 0.97);
|
||||
--footer-bg: rgba(12, 12, 18, 0.6);
|
||||
@@ -44,17 +44,17 @@
|
||||
--surface-3: #e9e9f2;
|
||||
--border: #e3e3ee;
|
||||
--border-strong: #cfcfe0;
|
||||
--accent-light: #5a51e8;
|
||||
--accent-soft: rgba(108, 99, 255, 0.1);
|
||||
--accent-border: rgba(108, 99, 255, 0.3);
|
||||
--accent-light: #d95d00;
|
||||
--accent-soft: rgba(255, 122, 26, 0.1);
|
||||
--accent-border: rgba(255, 122, 26, 0.3);
|
||||
--text: #191924;
|
||||
--text-soft: #3c3c4e;
|
||||
--text-muted: #6d6d84;
|
||||
--shadow-sm: 0 4px 14px rgba(30, 30, 60, 0.08);
|
||||
--shadow: 0 14px 34px rgba(30, 30, 60, 0.12);
|
||||
--shadow-accent: 0 14px 34px rgba(108, 99, 255, 0.18);
|
||||
--glow-1: rgba(108, 99, 255, 0.1);
|
||||
--glow-2: rgba(108, 99, 255, 0.05);
|
||||
--shadow-accent: 0 14px 34px rgba(255, 122, 26, 0.18);
|
||||
--glow-1: rgba(255, 122, 26, 0.1);
|
||||
--glow-2: rgba(255, 122, 26, 0.05);
|
||||
--header-bg: rgba(255, 255, 255, 0.82);
|
||||
--nav-bg: rgba(255, 255, 255, 0.98);
|
||||
--footer-bg: rgba(255, 255, 255, 0.7);
|
||||
@@ -181,7 +181,7 @@ img {
|
||||
margin-left: 8px;
|
||||
color: white;
|
||||
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
box-shadow: 0 6px 18px rgba(108, 99, 255, 0.3);
|
||||
box-shadow: 0 6px 18px rgba(255, 122, 26, 0.3);
|
||||
}
|
||||
|
||||
.site-nav a.nav-cta:hover {
|
||||
@@ -306,15 +306,15 @@ img {
|
||||
max-width: 900px;
|
||||
width: calc(100% - 32px);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(255, 196, 0, 0.14), rgba(255, 140, 0, 0.08));
|
||||
border: 1px solid rgba(255, 196, 0, 0.3);
|
||||
color: #ffeeba;
|
||||
background: linear-gradient(135deg, rgba(108, 99, 255, 0.16), rgba(87, 79, 224, 0.1));
|
||||
border: 1px solid rgba(108, 99, 255, 0.35);
|
||||
color: #dcd9ff;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dev-cache-notice strong {
|
||||
color: #ffd86b;
|
||||
color: #b7b1ff;
|
||||
}
|
||||
|
||||
.dev-cache-notice::before {
|
||||
@@ -325,13 +325,13 @@ img {
|
||||
|
||||
/* Version thème clair du bandeau d'avertissement */
|
||||
[data-theme="light"] .dev-cache-notice {
|
||||
background: linear-gradient(135deg, rgba(255, 196, 0, 0.16), rgba(255, 140, 0, 0.1));
|
||||
border-color: rgba(190, 130, 0, 0.35);
|
||||
color: #7a5b00;
|
||||
background: linear-gradient(135deg, rgba(108, 99, 255, 0.12), rgba(87, 79, 224, 0.07));
|
||||
border-color: rgba(108, 99, 255, 0.35);
|
||||
color: #4a43c0;
|
||||
}
|
||||
|
||||
[data-theme="light"] .dev-cache-notice strong {
|
||||
color: #8a6400;
|
||||
color: #3a34a8;
|
||||
}
|
||||
|
||||
/* ---- Message admin en haut des listes ---- */
|
||||
@@ -383,12 +383,75 @@ img {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Reflet lumineux qui balaye le prénom en continu */
|
||||
.hero h1 .accent {
|
||||
background: linear-gradient(120deg, var(--accent-light), var(--accent));
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
var(--accent-light) 0%,
|
||||
var(--accent) 35%,
|
||||
#ffd9b3 50%,
|
||||
var(--accent) 65%,
|
||||
var(--accent-light) 100%
|
||||
);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
animation: heroShimmer 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Apparition en cascade des éléments du hero au chargement */
|
||||
.hero-badge,
|
||||
.hero h1,
|
||||
.hero p,
|
||||
.hero-actions {
|
||||
opacity: 0;
|
||||
animation: heroFadeUp 0.7s ease forwards;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
@keyframes heroFadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroShimmer {
|
||||
to {
|
||||
background-position: -200% center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Désactive les animations si l'utilisateur préfère un affichage sans mouvement */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-badge,
|
||||
.hero h1,
|
||||
.hero p,
|
||||
.hero-actions {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero h1 .accent {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hero p {
|
||||
@@ -421,13 +484,13 @@ img {
|
||||
.btn-primary {
|
||||
color: white;
|
||||
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
box-shadow: 0 10px 26px rgba(108, 99, 255, 0.32);
|
||||
box-shadow: 0 10px 26px rgba(255, 122, 26, 0.32);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
filter: brightness(1.08);
|
||||
box-shadow: 0 14px 32px rgba(108, 99, 255, 0.4);
|
||||
box-shadow: 0 14px 32px rgba(255, 122, 26, 0.4);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@@ -449,7 +512,8 @@ img {
|
||||
padding: 0 clamp(16px, 4vw, 40px);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
.page-header h1,
|
||||
.page-header h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: clamp(28px, 4.5vw, 42px);
|
||||
font-weight: 800;
|
||||
@@ -534,7 +598,7 @@ img {
|
||||
.login-card input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
|
||||
box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.2);
|
||||
}
|
||||
|
||||
.login-card input::placeholder {
|
||||
@@ -554,7 +618,7 @@ img {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
box-shadow: 0 10px 24px rgba(108, 99, 255, 0.28);
|
||||
box-shadow: 0 10px 24px rgba(255, 122, 26, 0.28);
|
||||
transition: transform 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -663,7 +727,7 @@ img {
|
||||
.project-form-card textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
|
||||
box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
|
||||
}
|
||||
|
||||
.project-form-card textarea {
|
||||
@@ -700,6 +764,24 @@ img {
|
||||
}
|
||||
}
|
||||
|
||||
/* Case à cocher (formulaire notification du panel admin) */
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-soft);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-row input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Bouton violet */
|
||||
.btn-submit {
|
||||
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
@@ -935,7 +1017,7 @@ img {
|
||||
|
||||
.contact-info {
|
||||
background:
|
||||
radial-gradient(400px 200px at 20% 0%, rgba(108, 99, 255, 0.16), transparent 70%),
|
||||
radial-gradient(400px 200px at 20% 0%, rgba(255, 122, 26, 0.16), transparent 70%),
|
||||
var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
@@ -1008,7 +1090,7 @@ img {
|
||||
.contact-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
|
||||
box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
|
||||
background-color: var(--surface-3);
|
||||
}
|
||||
|
||||
@@ -1024,7 +1106,7 @@ img {
|
||||
font-family: var(--font);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 24px rgba(108, 99, 255, 0.28);
|
||||
box-shadow: 0 10px 24px rgba(255, 122, 26, 0.28);
|
||||
transition: filter 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -1262,6 +1344,17 @@ img {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Boutons admin dans les cartes de compétences */
|
||||
.skill-category .admin-actions {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* Grille des compétences dans le panel admin : moins d'espace vertical que la page publique */
|
||||
.skills-section-admin {
|
||||
padding-top: 0;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
/* ---- PAGE CGU ---- */
|
||||
.cgu-page {
|
||||
max-width: 980px;
|
||||
@@ -1321,3 +1414,147 @@ img {
|
||||
.cgu-card br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==== ANIMATIONS & INTERACTIONS ==== */
|
||||
|
||||
/* Transition entre les pages : fondu de l'ancienne page vers la nouvelle
|
||||
(View Transitions API, navigateurs récents uniquement, sans effet ailleurs) */
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: pageOut 0.2s ease both;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: pageIn 0.3s ease both;
|
||||
}
|
||||
|
||||
@keyframes pageOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pageIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Entrée du contenu à chaque chargement de page (pour les navigateurs sans View Transitions) */
|
||||
main {
|
||||
animation: pageEnter 0.45s ease;
|
||||
}
|
||||
|
||||
@keyframes pageEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Si le navigateur gère les View Transitions on évite de cumuler les deux entrées */
|
||||
@supports (view-transition-name: root) {
|
||||
main {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apparition au défilement : la classe .reveal est posée en JS (footer),
|
||||
puis .visible est ajoutée quand l'élément entre dans l'écran */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(22px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
transition-delay: var(--reveal-delay, 0s);
|
||||
}
|
||||
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ---- Micro-interactions ---- */
|
||||
|
||||
/* Liens de navigation : légère élévation au survol */
|
||||
.site-nav a {
|
||||
transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.site-nav a:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Icône du bouton de thème : rotation au survol */
|
||||
.theme-toggle i {
|
||||
transition: transform 0.35s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover i {
|
||||
transform: rotate(40deg) scale(1.12);
|
||||
}
|
||||
|
||||
/* Tags : petite élévation au survol */
|
||||
.tag {
|
||||
transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Items de compétences : glissement vers la droite au survol */
|
||||
.skill-list li {
|
||||
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.skill-list li:hover {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Liens du footer : légère élévation au survol */
|
||||
.footer-links a,
|
||||
.footer-links .discord-handle {
|
||||
display: inline-block;
|
||||
transition: color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover,
|
||||
.footer-links .discord-handle:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Effet d'appui sur tous les boutons */
|
||||
.btn:active,
|
||||
.btn-submit:active,
|
||||
.login-card input[type="submit"]:active,
|
||||
.contact-form input[type="submit"]:active {
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
|
||||
/* On désactive tout si l'utilisateur préfère un affichage sans mouvement */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
main,
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.site-nav a:hover,
|
||||
.tag:hover,
|
||||
.skill-list li:hover,
|
||||
.footer-links a:hover,
|
||||
.footer-links .discord-handle:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user