webTemplate/style.scss

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap');

$main-color: #222;
$second-color: #333;
$oposit-color: #eee;
$accent-color: #7d7;

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  background-color: $main-color;
  color: $oposit-color;
  font-family: 'Roboto', sans-serif;
}

header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   text-align: right;
   height: 50px;

   background: linear-gradient(180deg, $main-color 0%, $main-color 80%, rgba(0,0,0,0) 100%);

   #headerLogo{
      padding-left: 50px;
      height: 50px;
   }

   ul {
      list-style: none;
      padding: 0 50px 0 0;
      margin: 0;
      display: inline-block;
      user-select: none;

      font-family: 'Ubuntu', sans-serif;
      font-size: 18px;

      .menuSeparator,
      .menuLable{
         display: inline-block;
      }
      li.sub .menuLable{
         padding: 15px 5px;

         a {
            display: inline-block;
            padding: 0;
         }
      }

      li {
         display: inline-block;
      }

      li.open {
         .menuLable {
            background-color: $second-color;
         }
         ul {
            display: block;
            ul {
               display: none;
            }
         }
      }

      ul{
         display: none;
         position: absolute;
         text-align: center;
         padding: 0;
         // margin-left: 10px;
         background-color: $second-color;
         border-bottom-right-radius: 5px;
         border-bottom-left-radius: 5px;

         li {
            display: block;
         }
      }
   }

   .menuDropIcon{
      width: 15px;
   }

   a {
      padding: 15px 5px;
      color: $accent-color;
      text-decoration: none;

      &:hover{
         color: $accent-color;
         text-decoration: underline;
      }
   }

   li a{
      display: block;
   }
}

aside{
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;

   overflow-y: auto;

   ul{
      list-style: none;
      padding: 50px 0 0 0;
      margin: 0;
      display: block;
      user-select: none;

      font-family: 'Ubuntu', sans-serif;
      font-size: 18px;

      .menuLable {
         height: 50px;
      }

      ul {
         padding: 0 0 0 25px;
      }
   }

   a {
      width: 150px;
      display: block;
      padding: 15px 5px;
      color: $accent-color;
      text-decoration: none;

      &:hover{
         color: $accent-color;
         background-color: $second-color;
         text-decoration: underline;
      }

   }
}

main {
  padding: 0 calc(50vw - 250px) 50px;
  max-width: 500px;

  a {
    color: $accent-color;
    text-decoration: none;

    &:hover{
      text-decoration: underline;
    }
  }
  a.btn {
    padding: 5px;
    border: 1px $accent-color solid;
    border-radius: 5px;

    &:hover{
      color: $main-color;
      background-color: $accent-color;
      text-decoration: none;
    }
  }

  img, video {
    width: 100%;
  }
}

#bigPicture {
  display: none;
  position: fixed;
  top: 50vh;
  width: 100vw;
  transform: translateY(-50%);
  &.show{
    display: block;
  }
  &.tall{
    width: auto;
    height: 100vh;
    left: 50vw;
    transform: translateY(-50%) translateX(-50%);
  }
}

@media only screen and (max-width: 850px){
  main {
    padding-left: 175px;
  }
}

@media only screen and (max-width: 555px){
  main {
    width: auto;
    padding: 0 28px 50px;
  }
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Ubuntu', sans-serif;
}
h1 { padding-top: 50px; font-size: 40px; }
h2 { padding-top: 40px; font-size: 30px; }
h3 { padding-top: 10px; font-size: 20px; }