figureslibres.cc/user/themes/figureslibres-v2/scss/style.scss

// GENERAL STYLES
  .picto {
    display: block;
    cursor: pointer;
    background-color: $mainColor;
  }
  .picto-url {
    display: inline-block;
    width: $pictoInlineWidth;
    height: $pictoInlineHeight;
  }
  h1, h2 {
    font-family: $titleFont;
    font-size: $titleFontSizeMobile;
    line-height: $titleLineHeight;
  }
  p, ul, figcaption {
    font-family: $mainFont;
    font-size: $currentSize;
    line-height: $currentLineHeight;
  }
  strong {
    font-weight: bold;
    font-family: $titleFont;
  }
  em {
    font-style: italic;
  }

// CASCADE
  body {
    overflow-x: hidden;
    color: $mainColor;
    background-color: $bgColor;
    header {
      position: fixed;
      top: 0;
      z-index: 1;
      width: 100%;
      box-sizing: border-box;
      #nav-container {
        height: $navHeight;
        background-color: $bgColor;
        padding: 0 $bodyMarginMobile;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h1 {
          cursor: pointer;
        }
        #burger {
          width: $pictoSmallWidth;
          height: $pictoSmallHeight;
        }
      }
      nav {
        position: absolute;
        background-color: $mainColor;
        top: -100vh;
        width: 100%;
        height: calc(100vh - #{$footerHeightMobile});
        display: flex;
        align-items: center;
        opacity: 0;
        @include transition-ease-out(opacity, top 0.7s);
        #crossMenu {
          position: absolute;
          top: 2vh;
          right: $bodyMarginMobile;
          background-color: $bgColor;
          width: $pictoSmallWidth;
          height: $pictoSmallHeight;
        }
        ul {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;
          li {
            text-align: center;
            color: $bgColor;
            a {
              display: block;
              margin: 4vh 0;
              padding: 2.5vh 0;
              width: 100%;
              font-family: $titleFont;
              font-size: $bigFontSizeMobile;
            }
          }
          li.selected a {
            color: $mainColor;
            background-color: $bgColor;
          }
        }
      }
      nav.mobile-nav-open {
        top: 0;
        opacity: 1;
      }
    }
    header:after {
      content: "";
      display: block;
      width: 100%;
      height: $navGradientHeightMobile;
      background: $bgGradientToBottom
    }
    main {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      margin-top: calc(#{$navHeight} + #{$navGradientHeightMobile});
      z-index: 0;
      .content {
        position: absolute;
        padding: 0 $bodyMarginMobile;
        h2, p, ul{
          margin-bottom: $sectionSpacing;
          a {
            text-decoration: underline;
            text-underline-offset: 0.1em;
            @include transition-ease-out(text-underline-offset);
          }
          a:hover {
            text-underline-offset: 0.15em;
          }
        }
        .projet-card {
          cursor: pointer;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: $sectionSpacing;
          img, video {
            border-radius: 10px;
            width: 100%;
          }
          .loader {
            min-height: 200px;
            width: 20px;
            opacity: $transparency;
          }
          a {
            width: 100%;
            figcaption {  
                color: $mainColor;
                background-color: transparent;
                padding: 0;
                margin-top: 5px;
                position: relative;
                font-size: $smallSize;
  
              @include transition-ease-out(opacity);
              .publique-title {
                @include publique-font;
              }
              .sociale-title {
                @include sociale-font;
              }
              .culturelle-title {
                @include culturelle-font;
              }
            }
          }
        }
        .card-displayed {
          display: block;
        }
        .card-hidden {
          display: none;
        }
      }
      #index-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        #loader-index {
          position: absolute;
          height: 80vh;
          width: 100vw;
          background-color: $bgColor;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        #main-p-index {
          p {
            font-size: $bigFontSizeMobile;
          }
          #figureslibres {
            @include figures-libres-font;
          }
          #publique {
            @include publique-font;
          }
          #sociale {
            @include sociale-font;
          }
          #culturelle {
            @include culturelle-font;
          }
          #logicielslibres {
            @include logiciels-libres-font;
          }
        }
        #extrait-projets {
          >div {
            max-height: 0vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0px 20px;
            align-items: flex-start;
            div {
              figure {
                align-items: flex-start;
              }
            }
            div:last-of-type {
              width: auto;
              margin-top: 1vh;
              text-align: center;
              font-size: $currentSize;
              grid-column-end: span 2;
              p{
                cursor: pointer;
                margin-bottom: 5px;
                width: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                  border-bottom: solid 1px $mainColor;
                  padding-bottom: 1px;
                  #publique-link {
                    @include publique-font;
                  }
                  #sociale-link {
                    @include sociale-font;
                  }
                  #culturelle-link {
                    @include culturelle-font;
                  }
                }
                .picto {
                  display: inline-block;
                  height: $pictoInlineHeight;
                  width: $pictoSmallWidth;
                  margin-left: 8px;
                  @include transition-ease-out(margin-left);
                }
              }
              p:first-of-type:hover + p .picto, p:last-of-type:hover .picto {
                margin-left: 13px;
              }
            }
          }
        }
        #second-p-index {
          p {
            font-size: $bigFontSizeMobile;
          }
          #commanditaires {
            @include commanditaires-font;
          }
          #projets {
            @include projets-font;
          }
        }
        #commanditaires-grid {
          width: 85vw;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 25px 40px;
          align-items: center;
          img {
            filter: grayscale(100%);
            opacity: 0.7;
            width: 100%;
          }
        }
        #arrow-container {
          margin-top: $sectionSpacing;
          margin-bottom: 0vh;
          @include transition-ease-out(transform 0.8s, margin-bottom 0.4s);
          .picto {
            width: $pictoLargeWidth;
            height: $pictoLargeHeight;
          }
          #arrowIndex {
            animation: arrowIndex 4s infinite ease-out;
          }
        }
        .container {
          overflow-y: hidden;
          height: auto;
          max-height: 0vh;
          margin-top: 0vh;
          opacity: 0;
          @include transition-ease-out(opacity, 0.7s, max-height 1.2s, margin-top 1s);
        }
        a {
          text-decoration: none;
        }
      }
      #projets-index {
        width: 100%;
        #filter-index {
          text-align: center;
          width: 100%;
          margin-bottom: $sectionSpacing;
          .filter-button {
            cursor: pointer;
            opacity: $transparency;
            @include transition-ease-out(opacity);
          }
          p {
            margin-bottom: 0;
          }
          #publique-filter {
            @include publique-font;
          }
          #sociale-filter {
            @include sociale-font;
          }
          #culturelle-filter {
            @include culturelle-font;
          }
        }
        hr {
          width: 66%;
          margin-bottom: 4vh;
          opacity: $transparency;
        }
        .projets-grid {
          width: calc(100vw - $bodyMarginMobile * 2);
          display: flex;
          flex-direction: column;
          align-items: center;
          >div {
            width: 80%;
          }
        }
        .title-category {
          cursor: pointer;
          display: flex;
          align-items: center;
          margin-bottom: $sectionSpacing;
          h2 {
            margin: 0;
            max-width: 60%;
          }
          .chevron-category {
            display: inline-block;
            width: $pictoSmallWidth;
            height: $pictoSmallHeight;
            max-height: 10px;
            margin-left: 6px;
            @include transition-ease-out(transform);
          }
          .close {
            transform: rotate(180deg);
          }
        }
      }
      #text-content {
        display: flex;
        flex-direction: column-reverse;
        img {
          width: 100%;
        }
      }
      #reader {
        display: flex;
        flex-direction: column;
        align-items: center;
        figure {
          width: 100%;
          min-height: 200px;
          display: flex;
          justify-content: center;
        }
        img, video {
          cursor: pointer;
          max-width: 100%;
        }
        .loader {
          max-width: 20px;
        }
        #header-project {
          z-index: 1;
          display: block;
          position: fixed;
          height: 6vh;
          width: 100%;
          background-color: $bgColor;
          top: -9vh;
          @include transition-ease-out(top);
          .info-project-publique {
            span {
              @include publique-font;
            }
          }
          .info-project-sociale {
            span  {
              @include sociale-font;
            }
          }
          .info-project-culturelle {
            span {
              @include culturelle-font;
            }
          }
          h2 {
            overflow: hidden;
            position: absolute;
            width: 80%;
            padding: 3px 0;
            margin-top: 1.8vh;
            margin-left: $bodyMarginMobile;
            font-size: $currentSize;
            span {
              transform: translate(0, 0);
              display: inline-block;
              white-space: nowrap;
            }
            .scrollText:after {
              content: attr(data-text);
              padding-left: 20px;
              white-space: nowrap;
            }
          }
          #gradient-long-title {
            position: absolute;
            height: 4vh;
            width: 40px;
            top: 1.5vh;
            right: 16.5%;
            background: $bgGradientToLeft;
          }
        }
        #header-project:after {
          position: absolute;
          top: 6vh;
          content: '';
          height: 4vh;
          width: 100%;
          background: linear-gradient($bgColor, rgba($bgColor, 0));
        }
        #header-project + a {
          z-index: 2;
        }
        #close-project {
          position: fixed;
          right: $bodyMarginMobile;
          top: 2.3vh;
          width: calc(#{$pictoSmallWidth} - 5px);
          height: calc(#{$pictoSmallHeight} - 5px);
        }
        #cover-image-mobile {
          margin-top: -2vh;
          margin-bottom: 2vh;
        }
        #cover-image {
          display: none;
        }
        #info-project {
          align-self: flex-start;
          h2 {
            margin-top: 2vh;
            margin-bottom: 0;
            font-size: 1.6em;
            line-height: $titleLineHeight;
          }
          >div {
            margin-top: 0.3em;
            margin-bottom: 2.5vh;
            font-weight: normal;
            line-height: $currentLineHeight;
          }
        }
        .info-project-publique {
          h2, >div {
            @include publique-font;
          }
        }
        .info-project-sociale {
          h2, >div {
            @include sociale-font;
          }
        }
        .info-project-culturelle {
          h2, >div {
            @include culturelle-font;
          }
        }
        #project-description {
          margin-top: 2.2vh;
        }
        #project-images-grid {
          figure {
            margin-top: 3vh;
          }
        }
        hr {
          margin-bottom: 2vh;
          width: 66%;
          opacity: 0.5;
          color: $mainColor;
          background-color: $mainColor;
        }
        #related-pages {
          margin-top: 5vh;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          h3 {
            text-align: center;
            font-size: $titleFontSizeMobile;
            font-family: $titleFont;
            margin-bottom: 2vh;
            margin-top: 2vh;
          }
          #related-grid {
            margin-bottom: 5vh;
            width: 80%;
            .card-displayed {
              margin-top: 1.5vh;
            }
          }
        }
        .swiper {
          position: fixed;
          top: 0;
          left: 0;
          height: 100vh;
          width: 100vw;
          background-color: rgba(255, 255, 255, 0.75);
          backdrop-filter: blur(2px);
          box-sizing: border-box;
          z-index: 3;
          display: none;
          opacity: 0;
          transition: opacity 0.3s ease-out;
          .swiper-wrapper {
            z-index: 9;
            display: flex;
            align-items: center;
            .swiper-slide {
              height: 100%;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                max-height: 100%;
                max-width: 100%;
                object-fit: cover;
              }
            }
          }
          .swiper-button-next, .swiper-button-prev {
            color: $mainColor;
            padding: 2rem;
            bottom: 5vh;
            top: unset;
          }
          #close-carousel {
            width: calc(#{$pictoSmallWidth} - 5px);
            height: calc(#{$pictoSmallHeight} - 5px);
            position: absolute;
            top: 5vh;
            right: 5vh;
            z-index: 10;
          }
        }
      }
    }
    footer {
      display: none;
      position: fixed;
      height: $footerHeightMobile;
      bottom: 0;
      align-items: center;
      justify-content: center;
      z-index: 1;
      width: 100vw;
      p {
        width: 100%;
        height: 100%;
        text-align: center;
        color: $bgColor;
        a {
          display: block;
          background: $mainColor;
          height: 100%;
          width: 100%;
          font-family: $titleFont;
          padding: $smallSize 0;
          color: $bgColor;
        }
      }
    }
  }

  @media only screen and (min-width: $minScreenWidthS) {
    body {
      header {
        nav {
          height: 100vh;
        }
      }
      .content {
        .card-displayed figure a figcaption {
          opacity: 0;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
          background: $mainColor;
          color: $bgColor;
          font-size: $tinySize;
          border-radius: 0 0 10px 10px;
        }
      }
      .card-displayed:hover figure a figcaption {
        opacity: 1;
      }
      main {
        #index-content {
          min-height: 80vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          #extrait-projets {
            >div {
              grid-template-columns: 1fr 1fr 1fr 1fr;
              div:last-of-type {
                overflow-x: hidden;
                text-align: right;
                grid-column-end: span 4;
                p {
                  display: inline-block;
                  .picto {
                    margin-right: -6px;
                  }
                }
                p:last-of-type span:first-of-type {
                  margin-left: -5px;
                  padding-left: 5px;
                }
              }
            }
          }
          #commanditaires-grid {
            width: auto;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
          }
        }
        #projets-index {
          width: auto;
          #filter-index {
            display: flex;
            flex-direction: row;
            max-width: 100%;
            p:last-of-type {
              margin-left: 8px;
            }
          }
          hr {
            margin-left: 0;
            width: 75%;
          }
          .projets-grid {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 0 10px;
            >div {
              width: 100%;
            }
          }
        }
        #reader {
          #header-project {
            h2 {
              margin-top: 1vh;
            }
          }
          #close-project {
            width: $pictoInlineWidth;
            height: $pictoInlineHeight;
            top: 2.5vh;
          }
          #cover-image-mobile {
            display: none !important;
          }
          #cover-image {
            display: flex !important;
            margin-bottom: 5vh;
          }
          h2#main-project-title {
            font-size: $bigFontSizeDesktop;
          }
          #info-project {
            margin-top: -6vh;
            div {
              margin-top: 0;
              margin-bottom: 8vh;
            }
          }
          #project-description {
            font-size: $smallSize;
            margin-bottom: 5vh;
          }
          #project-images-grid {
            width: auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 1em;
            figure {
              margin-top: 0;
              width: 100%;
              min-width: 40vw;
              img:not(.loader) {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            figure:last-child:nth-child(odd) {
              grid-column: span 2;
            }
          }
          #related-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            width: auto !important;
            grid-column-gap: 10%;
            margin-bottom: 6vh !important;
            .card-displayed {
              margin-top: 2vh !important;
              figure {
                min-height: 80px !important;
                min-width: 15vw;
              }
            }
          }
          .swiper {
            .swiper-button-next, .swiper-button-prev {
              bottom: unset;
              top: var(--swiper-navigation-top-offset,50%);
            }
          }
        }
      }
      footer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 0 15px;
        height: $footerHeightDesktop;
        right: $bodyMarginMobile;
        border-radius: 20px 20px 0 0;
        background-color: $mainColor;
        p {
          height: auto;
          font-size: $smallSize;
          a {
            padding: 0;
            background-color: transparent;
          }
        }
      }
    }
  }

  @media only screen and (min-width: $minScreenWidthM) {
    body {
      header {
        #nav-container {
          display: none;
        }
        nav {
          position: relative;
          top: 0;
          opacity: 1;
          height: $navHeight;
          background-color: $bgColor;
          justify-content: center;
          #crossMenu {
            display: none;
          }
          ul {
            width: calc(#{$bodyWidth} - 12px);
            max-width: $maxBodyWidth;
            flex-direction: row;
            li {
              width: auto;
              color: $mainColor;
              height: $smallSize;
              z-index: 0;
              a {
                display: inline;
                font-size: $smallSize;
                width: auto;
                margin: 0;
                padding: 0;
                @include transition-ease-out(color);
              }
            }
            li:hover a {
              color: $bgColor;
            }
            li.selected {
              a {
                color: $bgColor;
                background-color: transparent;
              }
            }
            li:after {
              content: "";
              display: block;
              position: relative;
              opacity: 0;
              height: 100%;
              width: 100%;
              $paddingX: 12px;
              $paddingY: 4px;
              padding: $paddingY $paddingX;
              transform: translateX(-#{$paddingX}) translateY(calc(-100% - 2px + #{$paddingY}));
              background-color: $mainColor;
              border-radius: 15px;
              z-index: -1;
              @include transition-ease-out(opacity);
            }
            .selected:after, li:hover:after {
              opacity: 1;
            }
          }
        }
      }
      header:after {
        height: $navGradientHeightDesktop;
      }
      main {
        display: flex;
        justify-content: center;
        margin-top: calc(#{$navHeight} + #{$navGradientHeightDesktop} + #{$sectionSpacing});
        .content {
          width: $bodyWidth;
          padding: 0;
        }
        #index-content {
          #commanditaires-grid {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
          }
        }
        #projets-index {
          width: $bodyWidth;
          #filter-index {
            .filter-button:hover {
              opacity: 1 !important;
            }
          }
        }
        #text-content {
          .text-item {
            width: 70%;
          }
          .text-item:first-of-type {
            position: fixed;
            top: calc(#{$navHeight} + #{$navGradientHeightDesktop} + #{$sectionSpacing});
            width: 20%;
            left: 70%;
            img {
              width: 70%;
              margin-bottom: 5vh;
            }
          }
        }
        #reader {
          margin-top: -10vh;
          width: 40vw;
          #header-project {
            width: 100%;
            h2 {
              width: 35vw;
              margin-left: 29.5vw;
              padding: 0;
              span {
                height: $currentLineHeight;
                padding-top: 5px;
              }
            }
            #gradient-long-title {
              right: 34.2vw;
            }
          }
          #info-project {
            width: 100%;
            margin-top: 2vh;
            margin-bottom: 4vh;
            h2 {
              min-width: 100%;
              border-right: solid 1px rgba(0, 0, 0, $transparency);
              margin-top: 0;
              margin-bottom: 1vh;
            }
            div {
              margin-bottom: 2vh;
            }
          }
          .info-project-culturelle {
            h2 {
              line-height: $currentLineHeight !important;
            }
          }
          #close-project {
            width: $pictoSmallWidth;
            height: $pictoSmallHeight;
            top: 6vh;
            right: calc(30vw - #{$pictoSmallWidth} - 2vw);
            transform: scale(1, 1);
            @include transition-ease-out(top, right, transform);
          }
          .scrolled-cross {
            top: 1.4vh !important;
            right: 30vw !important;
            transform: scale(0.7, 0.7) !important;
          }
          #project-description {
            align-self: flex-start;
          }
          #project-images-grid {
            width: auto;
            margin-bottom: 6vh;
            figure {
              min-width: 15vw;
            }
          }
          #related-pages {
            hr {
              margin-bottom: 4vh;
            }
            h3 {
              margin-top: 0;
            }
            #related-grid {
              grid-column-gap: 3%;
              div figure {
                min-width: 10vw;
              }
            }
          }
        }
      }
      footer {
        height: $footerHeightDesktop;
        width: auto;
        right: 12%;
        p {
          width: inherit;
          a {
            font-size: $currentSize;
          }
        }
      }
    }
  }

  @media only screen and (min-width: $minScreenWidthL) {
    body {
      main {
        #index-content {
          #main-p-index {
            p {
              font-size: $bigFontSizeDesktop;
            }
          }
          #arrow-container {
            margin-top: $marginTopShortContent;
            .picto {
              width: $pictoExtraLargeWidth;
              height: $pictoExtraLargeHeight;
            }
          }
        }
        #projets-index {
          .projets-grid {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
          }
        }
      }
    }
  }