adrien-payet/actuel-inactuel
1
0
Fork 0
Code Issues 16 Pull requests Projects Releases Packages Wiki Activity Actions

refactoring avec claude + ajout scroll-margin-top et désaffichage du panel au click sur les liens du toc

Browse source
This commit is contained in:
antonin gallon 2026-02-17 18:10:04 +01:00
parent d51fc592ed
commit 01c5b098e4
14 changed files with 149 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

7
assets/css/src/article.css
View file

@ -30,11 +30,16 @@ article #main-content #chapo::after {
article #main-content li:not(.text) {
list-style-type: inherit;
}
article h3 {
scroll-margin-top: calc(var(--unit--vertical) * 1);
margin-top: calc(3 * var(--unit--vertical));
margin-bottom: calc(1 * var(--unit--vertical));
}
@media screen and (max-width: 640px) {
article h3 {
scroll-margin-top: calc(var(--unit--vertical) * 5);
}
}
article li, article ol{
margin-left: var(--unit--horizontal);

12
assets/css/src/footer.css
View file

@ -20,12 +20,14 @@
border-top: 1px solid var(--color-primary);
background-color: var(--color-background);
}
#main-footer .open-nav-wrapper_toc{
#main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
margin-right: 50px;
}
}
@media screen and (min-width: 1100px) {
#main-footer .open-nav-wrapper_toc{
/* On mobile > 1100px, le bouton sommaire n'est pas nécessaire car la TOC est visible */
#main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
display: none !important;
}
}
@ -52,16 +54,14 @@
@media screen and (max-width: 640px) {
#main-footer .open-nav {
display: flex;
justify-content: center;
outline: none;
font-size: var(--font-size-m);
background-color: var(--color-background);
color: var(--color-primary);
line-height: 1;
padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
}
[data-is_toc="false"] #main-footer .open-nav {
justify-content: center;
}
}
}
@media screen and (min-width: 640px) {

80
assets/css/src/toc.css
View file

@ -1,47 +1,39 @@
.toc{
display: flex;
flex-direction: column;
justify-content: center;
}
.page-cover .toc{
flex: 1;
}
@media (min-width: 1100px){
.page-cover .toc{
position: fixed;
width: calc(var(--body-padding) - var(--unit--horizontal) * 2) ;
left: 0;
top: 15vw;
padding-inline: var(--unit--horizontal);
padding-top: calc(var(--unit--vertical) / 2);
}
}
.page-cover .toc{
flex: 1;
}
.panel-toc .toc{
padding: var(--unit--vertical) var(--unit--horizontal);
}
.toc_label{
font-size: var(--font-size-m);
margin-bottom: calc(var(--unit--vertical) / 4); /*option 1*/
}
.toc ul{
display: flex;
flex-direction: column;
gap: calc(var(--unit--vertical) / 4); /*option 1*/
}
.toc li{
margin-left: 0;
/* text-indent: var(--unit--horizontal) hanging; */ /*option 2*/
/* list-style: square; */ /*option 3*/
.toc {
display: flex;
flex-direction: column;
justify-content: center;
}
[data-is_toc="false"] .if_toc,
[data-is_toc="false"] #main-footer li.if_toc{ /*obliger d'être si précis car si non pas la priorité*/
display: none !important;
.page-cover .toc {
flex: 1;
}
@media (min-width: 1100px) {
.page-cover .toc {
position: fixed;
width: calc(var(--body-padding) - var(--unit--horizontal) * 2);
left: 0;
top: 15vw;
padding-inline: var(--unit--horizontal);
padding-top: calc(var(--unit--vertical) / 2);
}
}
.panel-toc .toc {
padding: var(--unit--vertical) var(--unit--horizontal);
}
.toc_label {
font-size: var(--font-size-m);
margin-bottom: calc(var(--unit--vertical) / 4);
}
.toc ul {
display: flex;
flex-direction: column;
gap: calc(var(--unit--vertical) / 4);
}
.toc li {
margin-left: 0;
}