/* ========================================================= Global ========================================================= */ /* (Optionnel) variables de couleur*/ :root{ --accent-pink: #ff2a2a; --text-muted: #555; } /* Liens en mode dark (même couleur que jchiquet.github.io) */ body.quarto-dark{ --bs-link-color: #2698ba; --bs-link-color-rgb: 38, 152, 186; --bs-link-hover-color: #2698ba; --bs-link-hover-color-rgb: 38, 152, 186; } /* /* ========================================================= Navbar ========================================================= */ /* Agrandir le logo de la navbar */ .navbar-brand img{ max-height: 48px; /* augmente : 48 -> 64 -> 80 */ width: auto; } /* Navbar en mode dark (Quarto ajoute la classe sur , pas sur ) */ body.quarto-dark #quarto-header .navbar { --bs-navbar-bg: #0f2537; background-color: var(--bs-navbar-bg) !important; border-bottom: 1px solid #374151; } body.quarto-dark #quarto-header { background-color: #0f2537 !important; } body.quarto-dark #quarto-header .navbar .navbar-brand, body.quarto-dark #quarto-header .navbar .nav-link { color: #f9fafb !important; } /* ========================================================= Footer ========================================================= */ .quarto-footer{ font-size: 0.85rem; color: #777; display: inline-flex; align-items: center; gap: 6px; } .quarto-footer-icon{ height: 18px; width: auto; opacity: 0.7; vertical-align: middle; } /* ========================================================= Home page (hero + portrait) ========================================================= */ .home-hero{ display: grid; grid-template-columns: 1fr 220px; /* texte | photo */ gap: 12px; align-items: start; } .home-photo{ justify-self: end; } .profile-pic{ width: 180px; height: 180px; object-fit: cover; border-radius: 50%; /* border: 3px solid var(--accent-pink); */ /* active si tu veux un contour */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* Mobile : photo en dessous */ @media (max-width: 700px){ .home-hero{ grid-template-columns: 1fr; } .home-photo{ justify-self: start; } } /* ========================================================= Publications listing (template + icône PDF) ========================================================= */ /* Liste sans puces */ .pub-list{ list-style: none; padding-left: 0; } /* Publication list: image à gauche, texte à droite */ .pub-item { display: flex; align-items: flex-start; gap: 12px; /* espace entre image et texte */ margin: 12px 0; } .pub-image img { max-width: 120px; height: auto; border-radius: 4px; flex-shrink: 0; /* empêche l'image de se réduire */ } .pub-content { flex: 1; /* prend le reste de l'espace */ } /* Responsive: image passe au dessus du texte sur petits écrans */ @media (max-width: 600px) { .pub-item { flex-direction: column; align-items: flex-start; } .pub-image { margin-bottom: 8px; } } .pub-year{ font-weight: 600; } .pub-main{ position: relative; } /* Lien PDF : on masque le texte, on affiche une icône */ /* PDF badge button */ .pub-pdf{ font-size: 0.75rem; font-weight: 500; margin-left: 8px; padding: 2px 8px; border-radius: 6px; text-decoration: none; color: var(--bs-link-color); border: 1px solid var(--bs-link-color); vertical-align: middle; } .pub-pdf:hover{ background: var(--bs-link-color); color: white; } .pub-code{ font-size: 0.75rem; font-weight: 500; margin-left: 8px; padding: 2px 8px; border-radius: 6px; text-decoration: none; color: var(--accent-pink); border: 1px solid var(--accent-pink); vertical-align: middle; } .pub-code:hover{ background: var(--accent-pink); color: #fff; } /* remove old icon behaviour */ .pub-pdf::before{ content: none; } .pub-title{ font-weight: 600; } /* ========================================================= Embedded courses (iframe wrapper) ========================================================= */ .course-frame{ width: 100%; height: calc(100vh - 120px); /* ~hauteur navbar */ border: none; } /* ========================================================= Typography helpers ========================================================= */ /* Classe appliquée au title block -> cible le h1 du titre, voir la page principale index.qmd */ .light-title .quarto-title h1.title, .light-title h1.title { font-weight: 300; color: var(--text-muted); } /* Light section titles (h2) */ .light-title h2, .light-title .quarto-content h2 { font-weight: 300; color: var(--text-muted); } /*CSS for the section headers (add to `styles.css`)*/ .pubtype-header{ grid-column: 1 / -1; margin: 32px 0 12px 0; padding: 0 0 6px 0; list-style: none; } .pubtype-header h2{ margin: 0; font-size: 1.5rem; font-weight: 300; color: var(--text-muted); /* border-bottom: 2px solid rgba(0,0,0,0.15); */ }