source/projects/tentacles/src/python/tentacles/static/css/style.scss

// @use 'tirefire' as tfi;

// FIXME: Why isn't this happy in the other file?
$black: #171426;
$beige: #F4F8EE;
$red: #BB2D2E;
$orange: #CA4F1F;
$yellow: #EDB822;
$secondary_blue: #288BC2;
$secondary_green: #A5C426;
$secondary_light_grey: #CACBCA;
$secondary_dark_grey: #9A9A9A;
$secondary_red: red;
$clear: rgba(255, 255, 255, 255);

@font-face {
  font-family: 'Aaux Next';
  font-style: normal;
  font-weight: 400;
  src: local('Aaux Next'), url('/static/font/AauxNextBlk.otf') format('otf');
}

@font-face {
  font-family: 'Aaux Next';
  font-style: normal;
  font-weight: 400;
  src: local('Aaux Next'), url('/static/font/aauxnextbdwebfont.otf') format('otf');
}

@font-face {
  font-family: 'Aaux Next';
  font-style: normal;
  font-weight: 400;
  src: local('Aaux Next'), url('/static/font/aauxnextltwebfont.otf') format('otf');
}

@font-face {
  font-family: 'Aaux Next';
  font-style: normal;
  font-weight: 400;
  src: local('Aaux Next'), url('/static/font/aauxnextmdwebfont.otf') format('otf');
}

@import url(https://fonts.googleapis.com/css?family=Raleway);

.color-yellow {
  color: $yellow;
}

html {
  font-family: 'Aaux Next', sans-serif;
  background-color: $beige;
  color: $black;
  display: flex;
}

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  min-width: 400px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.content, .footer {
  padding-left: 10%;
  padding-right: 10%;
}

.content {
  .flash, .panel {
    margin-bottom: 40px;
  }
}

a {
  color: $secondary_blue;
  text-decoration: none;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;

  .decorated {
    list-style: auto;
    padding: 1em;
  }
}

nav {
  background-color: $beige;
  box-shadow: 0px 10px 0px $red,
              0px 12px 0px $clear,
              0px 22px 0px $orange,
              0px 24px 0px $clear,
              0px 34px 0px $yellow;
  margin-bottom: 34px;

  .logo {
    text-decoration: none;
    font-weight: bold;
    font-size: 60px;

    img {
      height: 56px;
    }
  }
}

.nav-links {
  list-style: none;
}

.nav-item a {
  display: inline-block;
  padding: 10px 15px;
}

.nav-item:hover {
  background-color: white;
}

.nav-item:hover a {
  color: $secondary_blue;
}

$navbar_height: 50px;
$navbar_padding: 10px;
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #FFF;
  padding-left: $navbar_padding;
  padding-right: $navbar_padding;
  margin-top: $navbar_padding;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  margin: 0 1rem;
  overflow: hidden;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: $red;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 700px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: $navbar_height + ($navbar_padding * 3);
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: left;
    align-items: center;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu li {
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: $secondary_blue;
    background-color: $beige;
  }
  #menu-toggle:checked ~ .menu > li {
    border-top: 1px solid #444;
  }
  #menu-toggle:checked ~ .menu > li:last-child {
    border-bottom: 1px solid #444;
  }
}

.content {
  padding-top: 1em;
  padding-left: 10%;
  padding-right: 10%;
}

.footer {
  margin-top: auto;
  width: 100%;
}

.flashes {
  .flash {
    border: 10px solid $secondary_blue;
    border-radius: 20px;
    min-height: 40px;
    p {
      font-size: 20px;
      margin-top: 10px;
      margin-left: 10px;
    }
  }

  .success {
    border-color: $secondary_green;
  }

  .error {
    border-color: $secondary_red;
  }
}

form {
  display: flex;
  flex-direction: column;

  .form-input {
    display: flex;
    flex-direction: row;

    .form-label {
      width: 200px;
      margin-right: 10px;
    }

    input {
      margin-right: auto;
      width: 400px;
    }
  }
}

.button {
  border: 1px solid;
  border-radius: 1em;
  padding: 0.5em;
}

.keys ul li {
  display: flex;
  flex-direction: row;

  span {
    margin-right: 1em;
  }

  .key-key {
    max-width: 20em;
    overflow: clip;
  }
}