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

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

File diff suppressed because one or more lines are too long

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

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

2
site/templates/investigation.php
View file

@ -47,7 +47,7 @@
<span class="text">Télégarcher le&nbsp;PDF</span>
</a>
</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="text">Partager</span>
</label>