valentin_le_moignandClaude Opus 5
167950c627
Les règles `.scroll-spinner` et leurs keyframes étaient enfermées dans le bloc `/* … */` legacy de `_category.scss` : Sass recopie ces commentaires verbatim, les trois points n'avaient donc aucun style et restaient invisibles pendant le chargement AJAX. Bloc sorti du commentaire (le legacy reste en place), points allégés (5 px, gris) et marge haute élargie. Le modifieur `--reserve` réserve la place en permanence et n'anime que l'opacité, au lieu de basculer `display` : plus de saut de mise en page ni à l'apparition ni à la disparition. `infiniteScroll.js` bascule désormais la classe `is-loading`. Le `rootMargin` de l'observer passe à 700 px pour que la requête parte plus tôt, et le loader de l'agenda est supprimé (markup + JS). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WQLwtNFa1LNaN7QTAbYkZx
615 lines
14 KiB
SCSS
615 lines
14 KiB
SCSS
// Category archive pages
|
|
|
|
.category-archive {
|
|
margin-top: 0;
|
|
.category-header-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
.breadcrumb {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 1.5rem;
|
|
text-transform: uppercase;
|
|
line-height: 1.3;
|
|
|
|
&__separator {
|
|
margin: 0 0.4rem;
|
|
}
|
|
}
|
|
@media ($tablet) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-family: Gelasio;
|
|
font-weight: normal;
|
|
font-size: 1.8rem;
|
|
position: relative;
|
|
margin-top: 2rem;
|
|
display: inline-block;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
height: 6px;
|
|
width: 100%;
|
|
bottom: -1.2rem;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
@media ($tablet) {
|
|
font-size: 2.6rem;
|
|
&::after {
|
|
bottom: -0.4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category--le-laboratoire h1::after {
|
|
background: linear-gradient(to bottom, transparent 0%, $laboratoire 50%);
|
|
}
|
|
|
|
.category--manifestations-scientifiques h1::after {
|
|
background: linear-gradient(to bottom, transparent 0%, $manifestations 50%);
|
|
}
|
|
|
|
.category--publications-et-productions h1::after {
|
|
background: linear-gradient(to bottom, transparent 0%, $publications 50%);
|
|
}
|
|
|
|
.category--mediation-scientifique h1::after {
|
|
background: linear-gradient(to bottom, transparent 0%, $mediations 50%);
|
|
}
|
|
|
|
.category--ressources h1::after {
|
|
background: linear-gradient(to bottom, transparent 0%, $ressources 50%);
|
|
}
|
|
|
|
}
|
|
|
|
// Breadcrumb: non-category links (Accueil, etc.) underlined in muted gray
|
|
.breadcrumb a:not(.breadcrumb__cat) { text-decoration: underline; text-decoration-color: $less-light-gray; text-underline-offset: 3px; }
|
|
|
|
// Breadcrumb category color underlines — links and current page indicator
|
|
.category--le-laboratoire .breadcrumb__cat,
|
|
.category--le-laboratoire .breadcrumb__current { text-decoration: underline; text-decoration-color: $laboratoire; text-underline-offset: 3px; }
|
|
.category--manifestations-scientifiques .breadcrumb__cat,
|
|
.category--manifestations-scientifiques .breadcrumb__current { text-decoration: underline; text-decoration-color: $manifestations; text-underline-offset: 3px; }
|
|
.category--publications-et-productions .breadcrumb__cat,
|
|
.category--publications-et-productions .breadcrumb__current { text-decoration: underline; text-decoration-color: $publications; text-underline-offset: 3px; }
|
|
.category--mediation-scientifique .breadcrumb__cat,
|
|
.category--mediation-scientifique .breadcrumb__current { text-decoration: underline; text-decoration-color: $mediations; text-underline-offset: 3px; }
|
|
.category--ressources .breadcrumb__cat,
|
|
.category--ressources .breadcrumb__current { text-decoration: underline; text-decoration-color: $ressources; text-underline-offset: 3px; }
|
|
|
|
.category-archive {
|
|
|
|
.taxonomy-description {
|
|
font-family: $font-primary;
|
|
margin-top: 2rem;
|
|
line-height: 1.6;
|
|
max-width: 70ch;
|
|
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.6;
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
&:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
|
|
ul, ol {
|
|
line-height: 1.6;
|
|
padding-left: 0.8rem;
|
|
}
|
|
|
|
ul {
|
|
list-style: inside "· ";
|
|
}
|
|
|
|
ol {
|
|
list-style: inside decimal;
|
|
}
|
|
|
|
blockquote{
|
|
padding-left: 1rem;
|
|
margin-left: 1.5rem;
|
|
border-left: solid 1px $light-gray;
|
|
}
|
|
}
|
|
|
|
.subcategory-section {
|
|
margin-top: 5rem;
|
|
&:first-of-type {
|
|
margin-top: 2rem;
|
|
}
|
|
.subcategory-section__title {
|
|
font-family: NewsCycle;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-bottom: 2rem;
|
|
font-size: 1.2rem;
|
|
|
|
&::after {
|
|
@include yellow-gradient-after(10px);
|
|
bottom: -10px;
|
|
}
|
|
}
|
|
|
|
.post-grid {
|
|
display: grid;
|
|
align-items: start;
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
width: 100%;
|
|
|
|
.post-card {
|
|
min-width: 0;
|
|
}
|
|
|
|
@media ($tablet) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media ($desktop) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.category-section-footer {
|
|
margin-top: 3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
.category-header {
|
|
width: 100%;
|
|
margin-bottom: 3vh;
|
|
|
|
&__back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
margin-bottom: 1rem;
|
|
|
|
i {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
|
|
@media ($tablet) {
|
|
font-size: 2.5rem;
|
|
}
|
|
}
|
|
|
|
&__description {
|
|
color: $less-dark-gray;
|
|
}
|
|
}
|
|
|
|
// Sub-category sections on parent category page
|
|
.subcategory-section {
|
|
width: 100%;
|
|
margin-bottom: 4vh;
|
|
|
|
&__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 2vh;
|
|
border-bottom: 2px solid $publications;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 1.5rem;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&__see-all {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__empty {
|
|
color: $less-less-light-gray;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
// Post grid
|
|
.post-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
width: 100%;
|
|
|
|
@media ($tablet) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media ($desktop) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
// Post card
|
|
.post-card {
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
&__image {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 1.1rem;
|
|
line-height: 1.3;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&__subtitle {
|
|
font-size: 0.9rem;
|
|
color: $less-dark-gray;
|
|
font-style: italic;
|
|
}
|
|
|
|
&__date {
|
|
font-size: 0.8rem;
|
|
color: $less-less-light-gray;
|
|
}
|
|
|
|
&__authors {
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.2rem;
|
|
|
|
.post-card__author {
|
|
&:not(:last-child)::after {
|
|
content: ',';
|
|
}
|
|
}
|
|
|
|
&--external {
|
|
color: $less-dark-gray;
|
|
}
|
|
}
|
|
|
|
&__role,
|
|
&__publisher,
|
|
&__journal {
|
|
font-size: 0.85rem;
|
|
color: $less-dark-gray;
|
|
}
|
|
|
|
&__axes,
|
|
&__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
&__axe,
|
|
&__tag {
|
|
font-size: 0.75rem;
|
|
background-color: $light-gray;
|
|
padding: 0.15rem 0.5rem;
|
|
}
|
|
|
|
&__axe {
|
|
border-left: 2px solid $publications;
|
|
}
|
|
|
|
&__links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
&__link {
|
|
font-size: 0.8rem;
|
|
|
|
&--hal {
|
|
color: $publications;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Infinite scroll spinner
|
|
.scroll-spinner {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 2rem 0;
|
|
|
|
&__dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: $publications;
|
|
animation: scroll-spinner-bounce 1.2s infinite ease-in-out;
|
|
|
|
&:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes scroll-spinner-bounce {
|
|
0%, 80%, 100% {
|
|
transform: scale(0.6);
|
|
opacity: 0.4;
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
*/
|
|
|
|
// ── Infinite scroll spinner ───────────────────────────────────────────────────
|
|
|
|
.scroll-spinner {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 3.5rem 0 1.5rem;
|
|
|
|
&__dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background-color: $less-less-light-gray;
|
|
animation: scroll-spinner-bounce 1.2s infinite ease-in-out;
|
|
|
|
&:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
}
|
|
|
|
// Scroll infini : la place est réservée en permanence (on ne bascule pas
|
|
// display), sinon l'apparition des points décale la mise en page juste
|
|
// avant l'insertion des cards
|
|
&--reserve {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.15s ease;
|
|
|
|
.scroll-spinner__dot {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
&.is-loading {
|
|
opacity: 1;
|
|
|
|
.scroll-spinner__dot {
|
|
animation-play-state: running;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes scroll-spinner-bounce {
|
|
0%, 80%, 100% {
|
|
transform: scale(0.6);
|
|
opacity: 0.4;
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// ── Agenda slider view ────────────────────────────────────────────────────────
|
|
|
|
.agenda-view-container {
|
|
display: none;
|
|
margin-top: 3rem;
|
|
&.is-active { display: block; }
|
|
}
|
|
|
|
.agenda-view-title {
|
|
font-family: NewsCycle;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-bottom: 2rem;
|
|
font-size: 1.2rem;
|
|
|
|
&::after {
|
|
@include yellow-gradient-after(10px);
|
|
bottom: -10px;
|
|
}
|
|
}
|
|
|
|
.agenda-swiper-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.agenda-swiper {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.agenda-swiper-prev,
|
|
.agenda-swiper-next {
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
padding: 0.4rem;
|
|
color: $dark-gray;
|
|
line-height: 1;
|
|
|
|
&:hover { color: black; }
|
|
|
|
&.swiper-button-disabled {
|
|
opacity: 0.25;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.agenda-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid $light-gray;
|
|
height: 100%;
|
|
position: relative;
|
|
transition: transform 0.2s ease-out;
|
|
margin-right: 0 !important;
|
|
|
|
// Timeline line running through the center of the date boxes
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 1.7rem;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background-color: $less-light-gray;
|
|
z-index: 0;
|
|
width: calc(100% + 20px);
|
|
@media ($tablet) {
|
|
width: calc(100% + 24px);
|
|
}
|
|
@media ($desktop) {
|
|
width: calc(100% + 32px);
|
|
}
|
|
}
|
|
|
|
&:hover { transform: scale(0.98); }
|
|
|
|
&__dates {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
&__body { flex: 1; }
|
|
|
|
&__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem 0.8rem;
|
|
font-family: $font-primary;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
opacity: 0.65;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
&__title {
|
|
font-family: $font-heading;
|
|
font-size: 1rem;
|
|
line-height: 1.35;
|
|
}
|
|
}
|
|
|
|
// Category-specific accent color on agenda card border + date box gradient
|
|
.category--manifestations-scientifiques .agenda-card { border-bottom-color: $manifestations; }
|
|
.category--le-laboratoire .agenda-card { border-bottom-color: $laboratoire; }
|
|
.category--publications-et-productions .agenda-card { border-bottom-color: $publications; }
|
|
.category--mediation-scientifique .agenda-card { border-bottom-color: $mediations; }
|
|
.category--ressources .agenda-card { border-bottom-color: $ressources; }
|
|
|
|
.category--manifestations-scientifiques .agenda-date-box { @include category-gradient($manifestations); }
|
|
.category--le-laboratoire .agenda-date-box { @include category-gradient($laboratoire); }
|
|
.category--publications-et-productions .agenda-date-box { @include category-gradient($publications); }
|
|
.category--mediation-scientifique .agenda-date-box { @include category-gradient($mediations); }
|
|
.category--ressources .agenda-date-box { @include category-gradient($ressources); }
|
|
|
|
.agenda-date-box {
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: $light-gray;
|
|
font-family: $font-primary;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
padding: 0.4rem 0.55rem;
|
|
flex-shrink: 0;
|
|
min-width: 2.6rem;
|
|
|
|
.agenda-date-day { display: block; font-size: 1.3rem; line-height: 1; }
|
|
.agenda-date-month { display: block; font-size: 0.65rem; margin-top: 2px; }
|
|
.agenda-date-year { display: block; font-size: 0.6rem; opacity: 0.65; }
|
|
|
|
sup {
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
|
|
.agenda-date-arrow {
|
|
font-size: 0.85rem;
|
|
opacity: 0.5;
|
|
} |