/* Theme Name: Twenty Twenty-Five - Crosne Taekwondo Club Theme URI: https://www.crosne-taekwondo-club.fr/ Description: Theme enfant de Twenty Twenty-Five pour le site du Crosne Taekwondo Club. Accueille les styles propres au club et les eventuelles fonctions PHP. La palette, la typographie et les styles des titres sont dans theme.json ; cette feuille ne porte que ce que theme.json ne sait pas exprimer. Author: 2GCI Author URI: https://www.2gci.fr/ Template: twentytwentyfive Version: 1.23.0 Requires at least: 6.7 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyfive-ctc */ /* --------------------------------------------------------------------------- Reperes de couleurs. Les memes valeurs que theme.json, redites ici pour que cette feuille reste lisible seule. Direction noir et doré du 25/09 (todo 04), teintes relevées sur le logo Taegeuk Kwan : doré médian #daa34c sur noir pur. doré du logo #daa34c doré foncé #8a6420 doré clair #f4c85d doré pâle #f7ecd6 ivoire #f6f2ea gris de texte #6b6b6b noir #000000 noir doux #1a1a1a Le doré du logo ne donne que 2,25 pour 1 sur blanc : il sert sur fond noir (9,3) et pour les filets. Sur fond clair, les textes prennent le doré foncé (5,35 sur blanc, 4,75 sur ivoire). --------------------------------------------------------------------------- */ /* En-tete : bandeau noir, le fond du logo, detache de l'ivoire de la page. Le fond du bandeau ne peut pas venir de theme.json, qui ne cible pas les parties de modele. */ header.wp-block-template-part { background-color: #000; border-bottom: 1px solid rgba(218, 163, 76, 0.35); } /* Menu principal : doré du logo (theme.json), l'entree de la page courante et le survol en doré clair. theme.json ne sait pas viser .current-menu-item. */ .wp-block-navigation .current-menu-item > a, .wp-block-navigation .current_page_item > a, .wp-block-navigation .current-menu-ancestor > a { color: #f4c85d; } .wp-block-navigation a:hover { color: #f4c85d; } /* Sous-menus : fond noir et filet doré, sinon ils heritent de l'ivoire de la page, sur lequel le doré du menu est illisible. */ .wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container, .wp-block-navigation__submenu-container { background-color: #000; border: 1px solid rgba(218, 163, 76, 0.35); } /* Pied de page : bandeau noir, symetrique de l'en-tete. Texte en ivoire, titres et liens en doré du logo : theme.json leur donne le doré foncé, lisible sur clair seulement (3,9 pour 1 sur noir). */ footer.wp-block-template-part { background-color: #000; border-top: 1px solid rgba(218, 163, 76, 0.35); color: #f6f2ea; } footer.wp-block-template-part h1, footer.wp-block-template-part h2, footer.wp-block-template-part h3, footer.wp-block-template-part h4, footer.wp-block-template-part a { color: #daa34c; } footer.wp-block-template-part a:hover { color: #f4c85d; } /* Logos d'affiliation du pied de page : des PNG transparents dessinés pour un fond blanc, dont le texte sombre disparaît sur le noir. Une pastille blanche les porte. */ footer.wp-block-template-part .wp-block-image img { background-color: #fff; border-radius: 6px; padding: 6px; } /* Titres : le site d'origine centrait les titres de page et de section. Le :not() laisse la main a Solveig, un alignement choisi dans l'editeur pose une classe has-text-align-* qui l'emporte sur cette regle. */ h2.wp-block-heading:not([class*="has-text-align"]) { text-align: center; } /* Encadre du club : le lexique technique du site d'origine presentait ses sections dans un cadre a filet bleu. Style de bloc applicable a un groupe depuis l'editeur (Groupe > Styles > Encadre du club). Valeurs relevees sur la production, page des poumses : filet de 2 px, rayon de 8 px, retrait de 2,5 rem et fond bleu tres pale. Depuis le 25/09, filet doré du logo et fond doré pâle. */ .wp-block-group.is-style-encadre-club { border: 2px solid #daa34c; border-radius: 8px; padding: 2.5rem; background-color: #f7ecd6; } /* Cadre de lexique : le filet bleu qui entoure la grille de vignettes des pages techniques. A ne pas confondre avec l'encadre du club ci-dessus, qui porte un fond : celui-ci laisse voir le gris de la page, comme en production. Valeurs relevees au navigateur sur la production, page des frappes : filet de 2 px #0566b5, rayon de 6 px, fond transparent, retrait horizontal de 28 px. Le retrait vertical est le seul ajout, le theme d'origine s'en remettait aux marges de ses rangees. Filet doré du logo depuis le 25/09. */ .wp-block-group.is-style-cadre-lexique { border: 2px solid #daa34c; border-radius: 6px; padding: 1.75rem; background-color: transparent; } /* Fiche du club : le fond bleu pale des vignettes de lexique. La production le pose sur les paragraphes eux-memes, sans retrait, le texte affleurant le bord du fond ; le leger retrait ajoute ici est la seule difference. Fond doré pâle depuis le 25/09. */ .wp-block-group.is-style-fiche-club, .wp-block-column.is-style-fiche-club { background-color: #f7ecd6; border-radius: 6px; padding: 1rem 1.25rem; } p.is-style-fiche-club { background-color: #f7ecd6; border-radius: 6px; padding: 0.5rem 0.75rem; } /* Bouton de rubrique : les cases qui mènent aux rubriques du site, sur la page « Technique » pour le lexique et sur « Le club » pour ses trois pages. Valeurs relevées au navigateur sur la production : fond blanc, filet de 2 px, rayon de 6 px, retrait de 28 px, titre centré. Le filet est bleu pour le lexique, rouge pour le club, c'est la seule différence entre les deux styles. Posés dans une disposition Grille, ces boutons prennent tous la hauteur de la ligne : le titre est donc centré verticalement, ce que le thème d'origine ne savait pas faire, ses cases étant de hauteurs inégales. Depuis le 25/09, le filet bleu devient doré du logo et le rouge devient noir : le nom du style « rouge » est gardé, les pages l'emploient. */ .wp-block-group.is-style-bouton-rubrique, .wp-block-group.is-style-bouton-rubrique-rouge { display: flex; align-items: center; justify-content: center; background-color: #fff; border: 2px solid #daa34c; border-radius: 6px; padding: 1.75rem 1rem; text-align: center; } .wp-block-group.is-style-bouton-rubrique-rouge { border-color: #000; } /* Le titre d'un bouton est seul dans sa case : les marges que theme.json donne aux titres le décaleraient vers le bas. */ .wp-block-group.is-style-bouton-rubrique h2, .wp-block-group.is-style-bouton-rubrique h3, .wp-block-group.is-style-bouton-rubrique h4, .wp-block-group.is-style-bouton-rubrique p, .wp-block-group.is-style-bouton-rubrique-rouge h2, .wp-block-group.is-style-bouton-rubrique-rouge h3, .wp-block-group.is-style-bouton-rubrique-rouge h4, .wp-block-group.is-style-bouton-rubrique-rouge p { margin: 0; } /* Encadré voilé : le cadre que la production pose autour de ses listes de liens et de ses blocs d'information, sur « Technique », « Le club » et « Horaires et tarifs ». Relevé au navigateur : un voile noir à 10 %, un filet blanc de 2 px et un rayon de 8,5 px. Le voile prend la teinte de ce qu'il y a derrière, gris sur le fond de la page, bleu sur une bande bleue : c'est ce qui permet au même cadre de servir dans les deux cas, comme en production. */ .wp-block-group.is-style-encadre-voile { background-color: rgba(0, 0, 0, 0.1); border: 2px solid #fff; border-radius: 8px; padding: 1.5rem 2.5rem; } /* Encadré voilé blanc : les trois encadrés d'horaires que la production pose sur la photo de tatami du hero, en haut de l'accueil. Relevé au navigateur : un voile blanc à 80 %, un filet blanc de 2 px, un rayon de 5 px et un retrait de 28 px. La couleur du texte est fixée ici parce que le bloc Bannière met tout son contenu en blanc : sur ce voile clair, il faut le gris foncé de la production, sans quoi le texte disparaît. */ .wp-block-group.is-style-encadre-voile-blanc { background-color: rgba(255, 255, 255, 0.8); border: 2px solid #fff; border-radius: 5px; color: #444; padding: 28px; } .wp-block-group.is-style-encadre-voile-blanc p, .wp-block-group.is-style-encadre-voile-blanc li { color: #444; } /* Les trois cadres rouges de la production, relevés au navigateur. « Notre discipline » pose son chapeau dans un cadre rose et ses sections dans des cadres blancs ; « Règlement intérieur » n'encadre ses sections que d'un filet, sans fond, comme « Cadre de lexique » le fait en bleu. Les trois partagent le filet de 2 px et le rayon, seul le fond les distingue. Depuis le 25/09, filet doré du logo, et le rose devient doré pâle. Les noms des styles sont gardés, les pages les emploient. */ .wp-block-group.is-style-encadre-rose, .wp-block-group.is-style-encadre-blanc-rouge, .wp-block-group.is-style-cadre-rouge { border: 2px solid #daa34c; border-radius: 8px; padding: 1.5rem 2.5rem; } .wp-block-group.is-style-encadre-rose { background-color: #f7ecd6; } /* Sur la photo du gymnase de « Nous trouver », l'encadré porte l'adresse en blanc : le doré pâle le rendrait illisible, il y devient un voile noir. */ .wp-block-group.is-style-bande-photo .wp-block-group.is-style-encadre-rose { background-color: rgba(0, 0, 0, 0.7); } .wp-block-group.is-style-encadre-blanc-rouge { background-color: #fff; } .wp-block-group.is-style-cadre-rouge { background-color: transparent; } /* Bande bleue du club : la bande pleine largeur que la production pose derrière les listes de liens de la page « Technique », un aplat bleu à cercles concentriques posé sur le bleu du club. La couleur de fond est ici, l'image reste dans les réglages du bloc : si elle ne charge pas, le bleu tient seul et le texte reste lisible. Titres, textes, liens et legendes d'image y passent en blanc, ce que theme.json ne peut pas exprimer puisqu'il fixe leur couleur sans condition ; la legende, qui est un figcaption et non un paragraphe, y restait grise et donc illisible. Depuis le 25/09, la bande bleue est noire, sans texture : titres et liens en doré du logo (9,3 pour 1), texte en blanc. Le nom du style est gardé. */ .wp-block-group.is-style-bande-bleue { background-color: #000; } .wp-block-group.is-style-bande-bleue p, .wp-block-group.is-style-bande-bleue li, .wp-block-group.is-style-bande-bleue figcaption { color: #fff; } .wp-block-group.is-style-bande-bleue h1, .wp-block-group.is-style-bande-bleue h2, .wp-block-group.is-style-bande-bleue h3, .wp-block-group.is-style-bande-bleue h4, .wp-block-group.is-style-bande-bleue a { color: #daa34c; } /* Les deux autres bandes de la production, le rouge du règlement et des horaires et l'orange des mentions légales, mêmes aplats à cercles concentriques. Leur texte est en noir et non en blanc comme en production. Depuis le 25/09, sans texture : la rouge devient doré du logo (noir dessus : 9,3 pour 1) et l'orange doré pâle. Les liens y sont soulignés, faute de pouvoir se distinguer par la couleur. */ .wp-block-group.is-style-bande-rouge { background-color: #daa34c; } .wp-block-group.is-style-bande-orange { background-color: #f7ecd6; } .wp-block-group.is-style-bande-rouge h1, .wp-block-group.is-style-bande-rouge h2, .wp-block-group.is-style-bande-rouge h3, .wp-block-group.is-style-bande-rouge h4, .wp-block-group.is-style-bande-rouge p, .wp-block-group.is-style-bande-rouge li, .wp-block-group.is-style-bande-rouge a, .wp-block-group.is-style-bande-orange h1, .wp-block-group.is-style-bande-orange h2, .wp-block-group.is-style-bande-orange h3, .wp-block-group.is-style-bande-orange h4, .wp-block-group.is-style-bande-orange p, .wp-block-group.is-style-bande-orange li, .wp-block-group.is-style-bande-orange a, .wp-block-group.is-style-bande-rouge figcaption, .wp-block-group.is-style-bande-orange figcaption { color: #000; } .wp-block-group.is-style-bande-rouge a, .wp-block-group.is-style-bande-orange a { text-decoration: underline; } /* Bande photo du club : la bande pleine largeur de « Nous trouver », sur l'accueil. Elle ne porte qu'une photo, sans aplat de couleur derrière, et son texte passe en blanc comme en production - ce que theme.json ne peut pas exprimer puisqu'il fixe la couleur des titres sans condition. */ .wp-block-group.is-style-bande-photo h1, .wp-block-group.is-style-bande-photo h2, .wp-block-group.is-style-bande-photo h3, .wp-block-group.is-style-bande-photo h4, .wp-block-group.is-style-bande-photo p, .wp-block-group.is-style-bande-photo li, .wp-block-group.is-style-bande-photo a, .wp-block-group.is-style-bande-photo figcaption { color: #fff; } /* Actualité du club : le contenant d'une actualité de l'accueil. Il ne se voit pas ; il retient le flottement de son image, qui sans lui déborderait sur l'actualité suivante - ce que la production laissait d'ailleurs faire, l'image de la seconde venant se ranger à côté de celle de la première. */ .wp-block-group.is-style-actualite-club { display: flow-root; } .wp-block-group.is-style-actualite-club + .wp-block-group.is-style-actualite-club { margin-top: 2.5rem; } /* Cadre de légende : le cadre blanc que le thème d'origine posait autour d'une image légendée, à la manière d'un tirage photo - filet gris très clair sur fond blanc, coins à peine arrondis. Il fait tenir la photo et sa légende sur l'aplat d'une bande colorée, où sans lui elles flottent à même la couleur. Relevé sur la production, page « Actualités club » : fond blanc, filet de 1 px à 15 % de noir, rayon 3 px, retrait 5 px, rayon de 2 px sur l'image et légende centrée. La production en posait deux, l'un dans l'autre, la conversion ayant imbriqué deux fois la même balise de légende ; un seul est repris. Sa légende est à 13 px, là où la production la donnait à 10 px, même écart de corps que le reste du site. */ .wp-block-image.is-style-cadre-legende { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; padding: 5px; } .wp-block-image.is-style-cadre-legende img { border-radius: 2px; } .wp-block-image.is-style-cadre-legende figcaption { margin-bottom: 0; padding: 0 0.75rem; text-align: center; } /* Le cadre pose un fond blanc par-dessus la bande, sa legende ne peut donc pas suivre la couleur de texte de celle-ci : sur la bande bleue de l'accueil, ou les deux memes actualites sont reprises, elle serait blanche sur blanc, donc invisible. Elle reste noire, comme elle l'est deja dans le cadre de la bande orange d'actualites-club. La regle passe devant celle des bandes par sa specificite, trois classes contre deux. */ .wp-block-group .wp-block-image.is-style-cadre-legende figcaption { color: #000; } /* L'image mise en avant d'un article, dans la liste d'« actualites-club » : elle reprend le cadre de légende, que WordPress ne propose pas pour ce bloc, et l'écart au texte d'une image flottante. Les actualités sont des articles depuis le 25/09 (todo 02). */ .wp-block-group.is-style-actualite-club .wp-block-post-featured-image { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; padding: 5px; margin-right: 1.5rem; margin-bottom: 1rem; /* Le bloc pose sa largeur de 300 px sur l'image, pas sur la figure : sans cela le cadre prend toute la ligne et le texte n'a plus de place à côté. */ width: fit-content; } /* La date prend sinon le gris secondaire du thème parent, illisible sur la bande orange. */ .wp-block-group.is-style-actualite-club .wp-block-post-date { color: inherit; } .wp-block-group.is-style-actualite-club .wp-block-post-featured-image img { border-radius: 2px; } /* Vignettes de lexique : le theme d'origine posait ses images en « rounded », soit un rayon de 6 px, dans les grilles de vignettes seulement. La regle est donc portee par la disposition Grille et ne touche pas les autres images. */ .wp-block-group.is-layout-grid .wp-block-image img { border-radius: 6px; } /* Dans ces memes vignettes, le fond bleu du texte suivait l'image de pres : la marge basse generale de 1,25 rem ouvrait une bande claire que la production n'avait pas. */ .wp-block-group.is-layout-grid .wp-block-image { margin-bottom: 0.5rem; } /* Images : le site d'origine n'ajoutait ni cadre ni ombre, mais laissait respirer les visuels entre deux paragraphes. */ .wp-block-image { margin-top: 1.25rem; margin-bottom: 1.25rem; } /* La conversion a aussi écrit des
à l'intérieur de paragraphes centrés, sur « Le club » et « Mentions légales ». Le navigateur ferme le paragraphe avant la figure, qui se retrouve donc à côté de lui et non dedans : elle perd le centrage voulu et le logo reste collé à gauche, alors que la production le centre. La règle vise ce motif exact, un paragraphe centré suivi d'une figure, et ne touche donc pas les images des grilles du lexique. */ main p[style*="center"] + figure.wp-block-image img { display: block; margin-inline: auto; } /* La conversion depuis le theme X a laisse des bruts dans des paragraphes, avec leur largeur d'origine en attribut : la carte de l'accueil fait 640 px et le logo du hero 400 px, donc ils debordaient de l'ecran sur telephone. Le max-width des themes de blocs ne vise que les blocs image, pas ces . */ main img, .wp-block-cover img:not(.wp-block-cover__image-background) { max-width: 100%; height: auto; } /* Videos : la page des poumses porte des iframes YouTube larges de 560 px, heritees telles quelles du site d'origine. Elles debordaient sur telephone. */ main iframe { max-width: 100%; } main iframe[src*="youtube.com"], main iframe[src*="youtube-nocookie.com"], main iframe[src*="youtu.be"] { width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9; } /* Liens du contenu : soulignes au survol seulement (theme.json), mais toujours visibles au clavier. */ a:focus-visible { outline: 2px solid #daa34c; outline-offset: 2px; } /* Barre supérieure, reprise du site d'origine : « Adhérer » à gauche, le lien Facebook à droite. Mesures relevées au navigateur sur la production, le lien y est souligné d'un filet pointillé et non d'un soulignement plein. */ .ctc-barre-haute p { margin: 0; } .ctc-barre-haute a { color: #daa34c; text-decoration: none; white-space: nowrap; } .ctc-barre-haute p a { border-bottom: 1px dotted #daa34c; padding-bottom: 2px; } /* Icône de groupe devant « Adhérer », comme sur le site d'origine. Elle est dessinée ici plutôt que reprise du thème X, dont la police d'icônes n'a pas été conservée : embarquer une police entière pour un seul pictogramme ne se justifie pas. Posée en masque, elle prend la couleur du lien et reste hors du contenu, donc à l'abri d'une édition dans l'éditeur. */ .ctc-barre-haute p a::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.45em; vertical-align: -0.2em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,") no-repeat center / contain; mask: url("data:image/svg+xml,") no-repeat center / contain; } .ctc-barre-haute p a:hover, .ctc-barre-haute p a:focus-visible { border-bottom-style: solid; } /* Carte du gymnase, section « Nous trouver » de l'accueil. L'iframe officielle d'OpenStreetMap remplace l'image Google Static Maps du site d'origine, qui portait la clé d'API du club en clair. Une iframe sans dimensions tomberait à 300 × 150 px : la taille est donnée ici plutôt que dans le contenu, pour que le bloc reste simple dans l'éditeur. */ .ctc-carte { margin: 0 auto; max-width: 640px; } .ctc-carte iframe { display: block; width: 100%; height: 400px; border: 0; } .ctc-carte figcaption { margin-top: 0.5rem; text-align: center; } /* Hero de l'accueil (todo 09, 25/09) : la grande photo du dojang avec le logo, à la manière des exemples envoyés par Solveig. Il remplit l'écran sous l'en-tête, qui mesure 169 px à 1440 px de large ; svh plutôt que vh pour que la barre d'adresse d'un téléphone ne pousse pas le bas de la photo hors de l'écran. Le bouton est celui du thème, mais son doré foncé disparaîtrait sur la photo voilée de noir : il y prend le doré du logo. */ .wp-block-cover.ctc-hero { min-height: calc(100svh - 169px); } .ctc-hero .wp-block-button__link { border-color: #daa34c; color: #daa34c; } .ctc-hero .wp-block-button__link:hover, .ctc-hero .wp-block-button__link:focus { background-color: #daa34c; color: #000; } /* Section Horaires, juste sous le hero : ses trois encadrés gardent leurs titres colorés, les colonnes s'étirent pour que les cadres aient la même hauteur. */ .ctc-horaires .wp-block-column > .wp-block-group { height: 100%; } /* Une section de l'accueil par écran (todo 10, 25/09) : Horaires, Actualités et Nous trouver prennent la hauteur de l'écran, contenu centré, comme dans les exemples de Solveig. L'en-tête ne suit pas le défilement, une section dispose donc de tout l'écran. Sur ordinateur seulement : sous 782 px, là où les colonnes s'empilent, le défilement reste celui d'une page ordinaire. Le centrage passe par une colonne flex ; ses enfants y reprennent toute la largeur, que la mise en page contrainte borne à 1140 px et centre. */ /* Les sections de l'accueil se touchent (todo 12, 28/09) : l'écart de 24 px que WordPress met entre deux blocs de la page laissait voir l'ivoire du fond entre deux bandes, visible entre Actualités et Nous trouver depuis la todo 10, puis entre Le club en chiffres et Actualités. */ .wp-block-group.ctc-ecran, .wp-block-group.ctc-chiffres { margin-block-start: 0; } @media (min-width: 782px) { .wp-block-group.ctc-ecran { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .wp-block-group.ctc-ecran > * { width: 100%; } /* Le logo du hero rapetisse sur un écran bas : à 340 px, le hero dépassait de 38 px l'écran de 1366 x 768. Le reste du hero mesure environ 300 px. */ .ctc-hero .ctc-hero-logo img { width: clamp(180px, calc(100svh - 169px - 320px), 340px) !important; } } /* Carrousel des actualités de l'accueil (todo 11, 25/09) : la boucle de requête des derniers articles, en cartes que l'on fait défiler à gauche et à droite. Défilement natif en scroll-snap, sans extension : au doigt, à la molette avec Maj, ou par les flèches qu'ajoute assets/js/carrousel.js, qui ne s'affichent que si toutes les cartes ne tiennent pas. Trois cartes par écran sur ordinateur ; sur téléphone, une carte et le bord de la suivante, pour montrer qu'il y en a d'autres. */ .ctc-carrousel .wp-block-post-template { display: flex; gap: 1.5rem; margin: 0; padding: 0 0 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: #daa34c transparent; scrollbar-width: thin; } .ctc-carrousel .wp-block-post-template > li { flex: 0 0 calc((100% - 3rem) / 3); margin: 0; scroll-snap-align: start; } /* Moins de cartes que de places : elles se centrent. Les marges automatiques tombent à zéro dès que les cartes débordent, le défilement n'est pas gêné, là où un justify-content: center rendrait la première inaccessible. */ .ctc-carrousel .wp-block-post-template > li:first-child { margin-left: auto; } .ctc-carrousel .wp-block-post-template > li:last-child { margin-right: auto; } @media (max-width: 781px) { .ctc-carrousel .wp-block-post-template > li { flex-basis: 85%; } } /* La carte : fond noir à peine relevé et filet doré, dans la bande noire dont elle garde les couleurs de texte et de liens. */ .ctc-actu-carte { display: flex; flex-direction: column; height: 100%; background-color: #141414; border: 1px solid #daa34c; border-radius: 6px; overflow: hidden; } .ctc-actu-carte .wp-block-post-featured-image { margin: 0; } /* Les photos d'actualité sont souvent en portrait : le recadrage en 3/2 garde le haut, où sont les visages. */ .ctc-actu-carte .wp-block-post-featured-image img { object-position: 50% 20%; } .ctc-actu-texte { margin-top: 0; padding: 1rem 1.25rem 1.25rem; } .ctc-actu-texte > * { text-align: left; } .ctc-actu-texte .wp-block-post-date { margin: 0; color: #d9d9d9; font-size: var(--wp--preset--font-size--small); } .ctc-actu-texte .wp-block-post-title { margin: 0.25rem 0 0.75rem; font-size: var(--wp--preset--font-size--large); } .ctc-actu-texte .wp-block-post-title a { text-decoration: none; } .ctc-actu-texte .wp-block-post-excerpt { margin: 0; font-size: var(--wp--preset--font-size--small); } .ctc-actu-texte .wp-block-post-excerpt__more-text { margin-top: 0.75rem; } /* Les flèches se posent de part et d'autre des cartes, à mi-hauteur, sur un rond noir : placées dessous, elles faisaient dépasser la section de l'écran de 1366 x 768. */ .ctc-carrousel { position: relative; } .ctc-carrousel-nav { position: absolute; inset: 0 -22px 1rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .ctc-carrousel-nav button { pointer-events: auto; } /* Sur téléphone, pas de flèches : la marge de la page est trop étroite, elles masqueraient le texte des cartes, et le bord de la carte suivante invite à glisser du doigt. */ @media (max-width: 781px) { .ctc-carrousel-nav { display: none; } } .ctc-carrousel-nav button:disabled { visibility: hidden; } /* Le bouton « Toutes les actualités » prend le doré du logo, comme celui du hero : le filet doré foncé du thème disparaîtrait sur le noir. */ .ctc-actualites .wp-block-button__link { border-color: #daa34c; color: #daa34c; } .ctc-actualites .wp-block-button__link:hover, .ctc-actualites .wp-block-button__link:focus { background-color: #daa34c; color: #000; } .ctc-carrousel-nav[hidden] { display: none; } /* Annonce du changement de nom (todo 15, 28/09), entre le titre des Actualités et le carrousel, à la demande de Solveig : centrée comme le titre, sauf alignement choisi dans l'éditeur. Son lien mène à « Le club », où la mention est détaillée avec les deux logos. Rapprochée du titre comme un sous-titre : avec l'écart de 24 px entre blocs, la section dépassait de 16 px l'écran de 1366 x 768. */ .ctc-annonce-nom:not([class*="has-text-align"]) { text-align: center; } .ctc-actualites .ctc-annonce-nom { margin-block-start: 0.5rem; } .ctc-carrousel-nav button { width: 44px; height: 44px; border: 1px solid #daa34c; border-radius: 50%; background: #000; color: #daa34c; font-size: 1.5rem; line-height: 1; cursor: pointer; } .ctc-carrousel-nav button:hover:not(:disabled), .ctc-carrousel-nav button:focus-visible { background-color: #daa34c; color: #000; } .ctc-carrousel-nav button:disabled { opacity: 0.3; cursor: default; } /* Le club en chiffres (todo 12, 28/09) : bande dorée entre Horaires et Actualités, en hauteur réduite, sans la classe ctc-ecran : quatre chiffres dans un écran entier faisaient vide. Chaque chiffre est un groupe de deux paragraphes, le nombre puis son libellé. Les règles visent cette structure et non des classes posées sur chaque paragraphe, pour qu'un chiffre dupliqué ou ajouté depuis l'éditeur prenne la même forme. La rangée passe à la ligne d'elle-même : quatre chiffres par ligne sur ordinateur, deux sur téléphone, et un cinquième trouve sa place sans réglage. La base de 9rem est ce qui laisse tenir deux chiffres dans les 330 px de contenu d'un écran de 390. */ .wp-block-group.ctc-chiffres-liste { gap: 2rem 1.5rem; margin-top: 2rem; } .ctc-chiffres-liste > .wp-block-group { flex: 1 1 9rem; max-width: 16rem; margin: 0; text-align: center; } .ctc-chiffres-liste > .wp-block-group > p { margin: 0; line-height: 1.4; } /* Le nombre, en grand et en gras, souligné d'un court filet noir. */ .ctc-chiffres-liste > .wp-block-group > p:first-child { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 700; line-height: 1; } .ctc-chiffres-liste > .wp-block-group > p:first-child::after { content: ""; display: block; width: 2.5rem; height: 2px; margin: 0.75rem auto; background-color: currentColor; } /* Nous contacter, en fin de « Horaires et tarifs » (todo 21, 28/09) : les coordonnées dans une disposition Grille. Trois depuis le retrait du téléphone (todo 27, 29/09) : e-mail, Facebook, gymnase. L'adresse e-mail, 202 px sans coupure possible, touche le bord de sa colonne à 800 px avec trois colonnes : la grille passe donc à deux sous 860 px, la dernière coordonnée prenant alors toute la largeur plutôt que de rester seule à gauche, puis à une sous 600 px. Ces règles l'emportent, à ces largeurs, sur le nombre de colonnes réglé dans l'éditeur. */ @media (max-width: 860px) { .wp-block-group.ctc-coordonnees.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wp-block-group.ctc-coordonnees.is-layout-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 600px) { .wp-block-group.ctc-coordonnees.is-layout-grid { grid-template-columns: minmax(0, 1fr); } } /* Telephone : l'ancien site n'etait pas concu pour, le nouveau doit l'etre. Les titres centres restent centres, les marges hautes se resserrent. */ @media (max-width: 600px) { h2.wp-block-heading { margin-top: 2rem; } .wp-block-group.is-style-encadre-club, .wp-block-group.is-style-cadre-lexique, .wp-block-group.is-style-encadre-voile, .wp-block-group.is-style-encadre-rose, .wp-block-group.is-style-encadre-blanc-rouge, .wp-block-group.is-style-cadre-rouge, .wp-block-group.is-style-encadre-voile-blanc { padding: 1rem; } /* L'image d'une actualité cesse de flotter : à cette largeur, le texte qui l'entoure ne tiendrait plus à côté d'elle. */ .wp-block-group.is-style-actualite-club .wp-block-image.alignleft, .wp-block-group.is-style-actualite-club .wp-block-post-featured-image.alignleft { float: none; margin-right: 0; } .ctc-carte iframe { height: 300px; } /* Mention de l'ancien nom sur « Le club » : les deux logos de 160 px et la flèche ne tiennent pas sur une ligne. La largeur est posée par le bloc dans un attribut style, d'où le !important. */ .ctc-ancien-nom .wp-block-image img { width: 120px !important; } }