index-main/assets/css/template/_report.scss

// LAOUT -----------------------------------


@media #{$small}{
    [data-template="report"] {

        #toggle-panel{
            display: none;
        }

        #report__aside{
            width: 100vw;
            position: fixed;
            top: 0px;
            height: 100vh;
            left: -100vw;
            z-index: calc(var(--z-header) + 10);
            transition: left .4s ease-in;
            background: var(--color-bg);


              .panel__header{
                margin: 0 var(--padding-body);
                border-bottom: var(--border-aside);
                height: var(--header-h);
            }

            .panel__content{
                height: calc(100dvh - var(--header-h));
                height: calc(100vh - var(--header-h));
                padding-bottom: 30vh;
            }

            .btn--group{
                display: none;
            }
        
        }

        .panel-open  #report__aside{
            left: 0px;
        }

    }
}



@media #{$small-up}{
[data-template="report"] {


    .report__header {
        margin-inline: auto;
        margin-top: calc(var(--spacing)*1);
        max-width: var(--max-w-cards);
        margin-bottom: calc(var(--spacing)*2.5);
       
    }

    .report__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--padding-body);


        .report__txt {
            max-width: var(--max-w-content);
        }

        .report__medias {
            background-color: yellow;
        }

    }



    #toggle-panel {
        position: fixed;
        top:  var(--header-h);
        left: var(--padding-body);
        z-index: calc(var(--z-header) + 100);
    }

    #report__aside {
        position: fixed;
        top: var(--header-h);
        left: var(--padding-body);
         width: var(--panel-w);
        height: calc(100vh - var(--header-h));
        z-index: calc(var(--z-header) + 200);
        background-color: var(--color-bg);
        box-shadow: 4px 0px 4px 1px var(--color-bg);

        .panel__header{
                border: var(--border-aside);
            height: calc(var(--h-block)*1.5);
        }

    .panel__content {
        height: calc(100% - var(--h-block)*4.25);
                    padding-bottom: 80px;

           }
     
    }


     #report__aside {
        left: calc(var(--panel-w)*-1);
        transition: left ease-in-out .5s;
    }
      #report {
        padding-left: calc(var(--padding-body)*2);
          transition: padding-left ease-in-out .5s;
    }


    .panel-open{

         #report__aside{
               left: var(--padding-body);
         }
          #report {
            padding-left: calc(var(--panel-w) + var(--padding-body)*1);
        }

    }





}

}

// HEADER -------------------------------------------------------------------------

.report__header {


    display: grid;
    column-gap: var(--padding-inner);
    row-gap: calc(var(--spacing)*1);
    grid-template-columns: 65% 35%;
    grid-template-rows: auto auto 1fr;
    position: relative;

    .report__title-group {
        grid-row: 1;
        grid-column: span 2;

        .title {
            text-transform: uppercase;
            font-weight: normal;
            font-size: var(--fs-big);
            line-height: var(--leading-tight);
            font-weight: normal;
            margin-top: calc(var(--spacing)*1);
            text-wrap: balance;
        }

        .subtitle {
            font-size: var(--fs-big);
            line-height: var(--leading-tight);
            font-weight: normal;
            text-wrap: balance;

        }

    }

    @include figure-16-9();

    figure {
        grid-row: 2;
        grid-column: 2;
    }

    .report__dl {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
        font-size: var(--fs-small);
        border-bottom: var(--border-light);
        align-items: flex-start;

        .dl__group {
            @include grid-content();
            border-top: var(--border-light);
            padding: calc(var(--spacing)*0.5) 0;
        }

        dt {
            color: var(--color-txt-light);
            padding-right: 1ch;
        }
    }


    .btn--group {
        position: relative;
        grid-row: 3;
        grid-column: 1/3;

        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        align-items: start;
        gap: calc(var(--spacing)*0.25);

    }
}





// CONTENT -------------------------------------------------------------------------------



.report__content {



    .section-content {
        margin-bottom: calc(var(--spacing)*3);
        &:target{
            padding-top: calc(var(--header-h) + var(--spacing)*2);
            @media #{$small}{   padding-top: calc(var(--header-h) + var(--spacing)*0.5);  }
        }

    }

    .section-title {
        font-size: var(--fs-medium);
        margin-bottom: var(--spacing);
        font-weight: normal;
        text-transform: uppercase;
    }

    p {
        margin: calc(var(--spacing)*0.5) 0;
    }

    ul {
        padding-left: 3ch;
    }
}

.report__content:target {
    padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
}



/// PANEL-LEFT  --------------------------------------------



#toggle-panel {
    width: calc(var(--h-block) * 1);
    padding: 0;
}

#report__aside {
    --border-aside: var(--border-light);

    .panel__header {
        display: flex;
    
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5ch;

        .icon {
            width: calc(var(--h-block)*1.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        svg {
            width: 16px;
            fill: var(--color-txt);
        }

        .text {
            padding-top: 5px;
        }

        .close {
            position: absolute;
            right: 0;

            svg {
                width: 10px;
                fill: var(--grey-600);
            }

        
        }

            cursor: pointer;

            &:hover {
                .close svg {
                    fill: var(--color-txt);
                }
            }


    }

    .panel__content {
        padding: var(--padding-body);
        overflow: scroll;
        @include hide-scroll();
        border: var(--border-aside);
        border-top: none;
    }


    #toc {
        ul {
            list-style: none;
        }

        li {
            font-size: var(--fs-small);

            color: var(--color-txt-light);

            a {
                display: block;
                padding: 5px 1ch;
                padding-top: 7px;
            }


        }

        li.selected {
            background-color: var(--grey-800);
            color: var(--color-txt);
        }

        li:hover {
            background-color: var(--grey-800);
        }

        .toc-level-1 {
            margin-bottom: calc(var(--spacing)*0.5);
            font-weight: bold;
        }

        .toc-level-2 {
            margin-bottom: calc(var(--spacing)*0.25);
            padding-left: 4ch;
        }

        a {
            text-decoration: none;
        }

    }

    .btn--group {
        margin-top: calc(var(--spacing)*0.5);
        display: flex;
        gap: var(--padding-inner);

        button {
            flex-grow: 1;
        }
    }




}






#report {
    --fig-outside: calc(var(--spacing)*2);

    .container-figure {
        width: 100%;
        display: none;
    }

    .fig-simple {
        height: calc(100vh - var(--header-h) - var(--spacing)*2);

        figure {
            height: 100%;
            width: 100%;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
}