studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

rapport styles aside
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-13 11:42:22 +01:00
parent 3e9f68e248
commit 9444a59260
4 changed files with 66 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

44
assets/css/style.css
View file

@ -1840,15 +1840,16 @@ body main {
} }
} }
:root { :root {
--rapport-w: 280px; --rapport-w: 290px;
} }
#rapport { #rapport {
margin-bottom: 20vh; margin-bottom: 20vh;
padding-left: var(--rapport-w); padding-left: calc(var(--rapport-w) + var(--padding-body) * 1);
padding-bottom: 10vh; padding-bottom: 10vh;
margin: 0 auto; margin: 0 auto;
max-width: calc(var(--max-w-content) + var(--rapport-w)); max-width: calc(var(--max-w-content) + var(--rapport-w) + var(--padding-body));
margin-top: calc(var(--spacing) * -1);
} }
#rapport .rapport__header { #rapport .rapport__header {
@ -1870,7 +1871,6 @@ body main {
#rapport .rapport__header .rapport__title-group .subtitle { #rapport .rapport__header .rapport__title-group .subtitle {
font-size: var(--fs-big); font-size: var(--fs-big);
line-height: var(--leading-tight); line-height: var(--leading-tight);
margin-top: calc(var(--spacing) * 0.5);
font-weight: normal; font-weight: normal;
} }
#rapport .rapport__header .rapport__figure { #rapport .rapport__header .rapport__figure {
@ -1886,12 +1886,10 @@ body main {
object-fit: cover; object-fit: cover;
} }
#rapport .rapport__header .rapport__dl { #rapport .rapport__header .rapport__dl {
align-self: start;
font-size: var(--fs-small); font-size: var(--fs-small);
border-bottom: var(--border-light); border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start; align-items: flex-start;
margin-top: calc(var(--spacing) * 0.5); margin-top: calc(var(--spacing) * 1);
} }
#rapport .rapport__header .rapport__dl .dl__group { #rapport .rapport__header .rapport__dl .dl__group {
display: grid; display: grid;
@ -1915,14 +1913,20 @@ body main {
gap: calc(var(--spacing) * 0.5); gap: calc(var(--spacing) * 0.5);
position: relative; position: relative;
} }
#rapport .rapport__header label { #rapport .rapport__header .modal--share {
position: relative; max-width: 240px;
}
#rapport .rapport__header .modal-share {
max-width: 220px;
position: absolute; position: absolute;
top: 30px; height: 250px;
left: 0px; top: calc(var(--h-block) * 1.5);
left: 260px;
}
#rapport .rapport__header .modal--share::before {
content: "◀";
transform: rotate(90deg);
font-size: 10px;
position: absolute;
top: -10px;
right: calc(var(--h-block) * 1.5);
} }
#rapport .rapport__header .thumbnail { #rapport .rapport__header .thumbnail {
max-width: 260px; max-width: 260px;
@ -1994,11 +1998,12 @@ body main {
position: fixed; position: fixed;
top: calc(var(--header-h) + var(--padding-body)); top: calc(var(--header-h) + var(--padding-body));
left: var(--padding-body); left: var(--padding-body);
--border-aside: var(--border-light);
height: calc(100vh - var(--header-h) - var(--padding-body) * 4); height: calc(100vh - var(--header-h) - var(--padding-body) * 4);
} }
#rapport__aside .tabs { #rapport__aside .tabs {
display: flex; display: flex;
border: var(--border-light); border: var(--border-aside);
height: calc(var(--h-block) * 1.25); height: calc(var(--h-block) * 1.25);
} }
#rapport__aside .tabs .tab { #rapport__aside .tabs .tab {
@ -2011,7 +2016,7 @@ body main {
} }
#rapport__aside .tabs .tab[for=tab-print] { #rapport__aside .tabs .tab[for=tab-print] {
width: calc(var(--h-block) * 1.5); width: calc(var(--h-block) * 1.5);
border-right: var(--border-light); border-right: var(--border-aside);
padding-left: 0; padding-left: 0;
justify-content: center; justify-content: center;
} }
@ -2023,7 +2028,7 @@ body main {
padding: var(--padding-body); padding: var(--padding-body);
height: calc(100% - var(--h-block) * 1.25); height: calc(100% - var(--h-block) * 1.25);
overflow: scroll; overflow: scroll;
border: var(--border-light); border: var(--border-aside);
border-top: none; border-top: none;
} }
#rapport__aside #toc ul { #rapport__aside #toc ul {
@ -2031,11 +2036,16 @@ body main {
} }
#rapport__aside #toc li { #rapport__aside #toc li {
font-size: var(--fs-small); font-size: var(--fs-small);
color: var(--color-txt-light);
}
#rapport__aside #toc li a {
display: block;
padding: 5px 1ch; padding: 5px 1ch;
padding-top: 7px; padding-top: 7px;
} }
#rapport__aside #toc li.selected { #rapport__aside #toc li.selected {
background-color: var(--grey-800); background-color: var(--grey-800);
color: var(--color-txt);
} }
#rapport__aside #toc li:hover { #rapport__aside #toc li:hover {
background-color: var(--grey-800); background-color: var(--grey-800);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

55
assets/css/template/_rapport.scss
View file

@ -1,14 +1,15 @@
:root{ :root{
--rapport-w: 280px; --rapport-w: 290px;
} }
#rapport{ #rapport{
margin-bottom: 20vh; margin-bottom: 20vh;
padding-left: var(--rapport-w); padding-left: calc(var(--rapport-w) + var(--padding-body)*1);
padding-bottom: 10vh; padding-bottom: 10vh;
margin: 0 auto; margin: 0 auto;
max-width: calc(var(--max-w-content) + var(--rapport-w)); max-width: calc(var(--max-w-content) + var(--rapport-w) + var(--padding-body));
margin-top: calc(var(--spacing)*-1);
} }
#rapport .rapport__header{ #rapport .rapport__header{
@ -32,7 +33,7 @@
.subtitle{ .subtitle{
font-size: var(--fs-big); font-size: var(--fs-big);
line-height: var(--leading-tight); line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*0.5); // margin-top: calc(var(--spacing)*0.25);
font-weight: normal; font-weight: normal;
} }
@ -53,12 +54,12 @@
} }
.rapport__dl{ .rapport__dl{
align-self: start; // align-self: start;
font-size: var(--fs-small); font-size: var(--fs-small);
border-bottom: var(--border-light); border-bottom: var(--border-light);
flex-grow: 2; // flex-grow: 2;
align-items: flex-start; align-items: flex-start;
margin-top: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*1);
.dl__group{ .dl__group{
@include grid-content(); @include grid-content();
border-top: var(--border-light); border-top: var(--border-light);
@ -88,14 +89,25 @@
} }
label{ label{
position: relative; // position: relative;
} }
.modal-share{ .modal--share{
max-width: 220px; max-width: 240px;
position: absolute; position: absolute;
top: 30px; height: 250px;
left: 0px; top: calc(var(--h-block) * 1.5);
left: 260px;
&::before{
content: "◀";
transform: rotate(90deg);
font-size: 10px;
position: absolute;
top: -10px;
right: calc(var(--h-block) * 1.5);
}
} }
.thumbnail{ .thumbnail{
@ -197,13 +209,14 @@
position: fixed; position: fixed;
top: calc(var(--header-h) + var(--padding-body)); top: calc(var(--header-h) + var(--padding-body));
left: var(--padding-body); left: var(--padding-body);
--border-aside: var(--border-light);
// border-radius: var(--radius-small); // border-radius: var(--radius-small);
height: calc(100vh - var(--header-h) - var(--padding-body)*4); height: calc(100vh - var(--header-h) - var(--padding-body)*4);
.tabs{ .tabs{
display: flex; display: flex;
border: var(--border-light); border: var(--border-aside);
height: calc(var(--h-block)*1.25); height: calc(var(--h-block)*1.25);
.tab{ .tab{
@ -217,7 +230,7 @@
.tab[for="tab-print"]{ .tab[for="tab-print"]{
width: calc(var(--h-block)*1.5); width: calc(var(--h-block)*1.5);
border-right: var(--border-light); border-right: var(--border-aside);
padding-left: 0; padding-left: 0;
justify-content: center; justify-content: center;
.icon{ .icon{
@ -234,7 +247,7 @@
padding: var(--padding-body); padding: var(--padding-body);
height: calc(100% - var(--h-block)*1.25); height: calc(100% - var(--h-block)*1.25);
overflow: scroll; overflow: scroll;
border: var(--border-light); border: var(--border-aside);
border-top: none; border-top: none;
} }
@ -244,15 +257,21 @@
li{ li{
font-size: var(--fs-small); font-size: var(--fs-small);
padding: 5px 1ch;
padding-top: 7px; color: var(--color-txt-light);
a{
display: block;
padding: 5px 1ch;
padding-top: 7px;
}
} }
li.selected{ li.selected{
// color: var(--color-accent);
background-color: var(--grey-800); background-color: var(--grey-800);
color: var(--color-txt);
} }
li:hover{ li:hover{

2
site/templates/investigation.php
View file

@ -47,7 +47,7 @@
<span class="text">Télégarcher le&nbsp;PDF</span> <span class="text">Télégarcher le&nbsp;PDF</span>
</a> </a>
</button> </button>
<label for="share-banner__aside" class="btn--bold-inline no-link"> <label for="share-banner__aside" class="btn--bold-inline btn--light no-link">
<span class="icon"><?= svg('assets/icons/share.svg') ?></span> <span class="icon"><?= svg('assets/icons/share.svg') ?></span>
<span class="text">Partager</span> <span class="text">Partager</span>
</label> </label>