drupal-caravane/web/themes/custom/caravane/assets/scss/main.scss

@import 'fonts.scss';

$body-margin-x: 30px;
$body-margin-y: 5px;

$sm-font-size: 0.8rem;
$m-font-size: 1.4rem;
$l-font-size: 1.8rem;

$main-color: #1a1918;
$main-color-light: #635b58;
$light-color: #faf1eb;
$brand-color: #80c8bf;

$menu-width: 15vw;
$menu-margin: 2rem;

body{
  font-family: 'Marianne', sans-serif;
  color: $main-color;
  margin: 0;
  padding: 0;
  .layout-container {
    > header {
      z-index: 2;
      position: relative;
      > div {
        padding: $body-margin-y $body-margin-x 0 $body-margin-x;
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        > #block-caravane-logorepublique {
          grid-column: 1 / span 1;
          display: flex;
          align-items: center;
          > div > div > a > img {
            width: 100%;
            height: auto;
          }
        }
        > #block-caravane-logoepau {
          grid-column: 2 / span 2;
          display: flex;
          align-items: center;
          > div > div > a > img {
            width: 100%;
            height: auto;
          }
        }
        > #block-caravane-logocaravane {
          grid-column: 7 / span 4;
          display: flex;
          align-items: center;
          > div > div > a > img {
            width: 100%;
            height: auto;
          }
        }
        > #block-caravane-mainnavigation {
          display: flex;
          justify-content: flex-end;
          grid-column: 16 / span 1;
          width: 10vw;
          margin-top: 1.8vh;
          position: fixed;
          right: $body-margin-x;
          > #menu-title {
            display: flex;
            z-index: 2;
            background-color: $brand-color;
            position: fixed;
            width: $menu-width;
            right: 0;
            top: 0;
            padding-top: 2.8vh;
            margin-right: $body-margin-x;
            padding-bottom: 10px;
            max-height: 0vh;
            overflow: hidden;
            height: 5vh;
            transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
            opacity: 0;
            align-items: center;
            > p {
              padding-left: $menu-margin;
              margin: 10px 0;
              color: white;
              font-size: $l-font-size;
              font-family: 'Joost', sans-serif;
              font-weight: bold;
            }
          }
          > #menu-title.open {
            opacity: 1;
            max-height: 5vh;
          }
          > #menu {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            > h2 {
              z-index: 2;
              margin-block: 0;
              font-size: $sm-font-size;
              color: $main-color-light;
              font-weight: normal;
              margin-bottom: 5px;
            }
            > h2 {
              display: none;
            }
            > #hamburger {
              position: fixed;
              height: 5vh;
              right: 0;
              top: 0;
              margin-right: $body-margin-x;
              padding-top: 2.8vh;
              padding-bottom: 10px;
              z-index: 2;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 2.4rem;
              transition: transform 0.3s ease-out;
              > div {
                width: 100%;
                height: 3px;
                margin: 4px 0;
                border-radius: 2px;
                background-color: $main-color-light;
                opacity: 1;
                transition: transform 0.5s, opacity 0.2s;
              }
            }
            > #hamburger:hover {
              transform: scale(1.1);
            }
            > #hamburger.open {
              transform: scale(0.7) translateX(-20px);
              > div {
                background-color: white;
              }
              > div:first-of-type {
                transform: rotate(45deg);
                margin-top: 50%;
              }
              > div:last-of-type {
                transform: rotate(-45deg);
                margin-top: -50%;
              }
              > div:nth-child(2) {
                opacity: 0;
              }
            }
            > #hamburger.open:hover {
              transform: scale(0.75) translateX(-20px);
            }
            > ul {
              list-style-type: none;
              background-color: white;
              position: fixed;
              width: $menu-width;
              right: $body-margin-x;
              padding: 0;
              padding-top: 1.5rem;
              padding-bottom: 1.5rem;
              top: -5vh;
              opacity: 0;
              transition: top 0.3s ease-out, opacity 0.2s ease-out;
              z-index: 1;
              > li {
                padding-left: $menu-margin;
                margin: 15px 0;
                > a {
                  color: $main-color;
                  text-decoration: none;
                }
                > a.is-active::before,
                > a:hover::before {
                  content: '→';
                  color: $brand-color;
                  width: 2rem;
                  display: inline-block;
                  opacity: 1;
                }
                > a::before {
                  content: '→';
                  color: $brand-color;
                  opacity: 0;
                  display: inline-block;
                  width: 0rem;
                  transition: width 0.2s ease-out, opacity 0.2s ease-out;
                }
              }
            }
            > ul.open {
              opacity: 1;
              top: 7vh;
            }
          }
        }
      }
    }
    > main {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      > .layout-content {
        z-index: 1;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        > div {
          height: 100%;
          > .layout {
            display: grid;
            grid-template-columns: repeat(16,1fr);
            align-items: center;
            height: 100%;
            > .layout__region--first {
              padding-left: $body-margin-x;
              grid-column: 1 / span 4;
              position: relative;
              z-index: 2;
              pointer-events: none;
              width: fit-content;
              > div {
                pointer-events: auto;
              }
            } 
            > .layout__region--second {
              position: absolute;
              z-index: 1;
              top: 0;
              width: 100vw;
              .leaflet-container {
                // add map style here
              }
            } 
            > .layout__region--third {
              padding-right: $body-margin-x;
              height: 100%;
              grid-column: 13 / span 4;
              position: relative;
              z-index: 2;
              background: linear-gradient(to right, transparent, #faf1eb);
              display: flex;
              align-items: center;
              justify-content: flex-end;
              pointer-events: none;
              > div {
                pointer-events: auto;
                ul {
                  list-style: none;
                  > li > div {
                    display: flex;
                    justify-content: flex-end;
                    a {
                      text-decoration: none;
                      color: $main-color;
                      font-family: 'Joost', sans-serif;
                      font-weight: bold;
                      font-size: $m-font-size;
                      display: inline-block;
                      margin: 15px 0;
                      text-align: right;
                    }
                  }
                }
              }
            } 
          }
        }
      }
      > #content-modale > div {
        z-index: 2;
        position: relative;
        top: 15vh;
        left: 25vw;
        width: 50vw;
        background-color: white;
        img {
          width: 100%;
          height: auto;
        }
        > div {
          width: 100%;
          overflow: hidden;
        }
      }
    }
  } 
}