botsym-css/style.scss

@charset "UTF-8";

$default-black: rgb(0, 0, 0);
$default-white: rgb(201, 201, 201);
$default-blue: rgb(23, 28, 148);

$em-height: 16px;
$line-overflow: 5px;
$line-height: $em-height + $line-overflow;

$box-border: 2px;
$box-double-border: 4px;

:root { // Styles applying to everyting
  font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";

  background-color: $default-black;
  color: $default-white;
  font-weight: 400;

  font-size: $em-height;
  line-height: $line-height;
}

// General styles for elements

* { // Remove margin and padding from everything by default
  margin: 0;
  padding: 0;
}

p {
  width: auto;
}

b { // Bolded text
  font-weight: 1000;
}

li {
  list-style: none;
}

ul {
  padding-left: 1ch;
}

a {
  color: $default-white;
  :hover {
    background-color: $default-blue;
    color: $default-white;
  }
}

nav ul > li > ul:hover a {
  color: $default-white;
}

.hr {
  height: $line-height;
}
hr {
  height: $line-height / 2;
  border: 0;
  border-bottom: 1px solid $default-white;
}
nav li hr, li.button-list > ul a hr, .white hr {
  border-color: $default-black;
}
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
  border-color: $default-white;
}

// Lists

li {
  &:not(.button-list) > ul::before {
    content: "- ";
  }
  &.button-list > ul {
    width: calc(100% - 1ch);

    &:hover {
      background-color: $default-blue;
      color: $default-white;

      & > a {
        color: $default-white;
      }
    }

    & > li {
      width: 100%;
    }

    a {
        display: block;
        width: 100%;
    }
  }
}

 // Navbars

 @keyframes hide {
   0% {
     opacity: 0;
     left: inherit;
   }
   1% {
     opacity: 0;
   }
   100% {
     opacity: 0;
     left: -9999px;
   }
 }

nav {
  a {
    color: $default-black;
    display: block;
    width: 100%;
    text-decoration: none;
  }

  ul::before {
    content: "" !important;
  }

  & > li {  // Navbar
    background-color: $default-white;
    color: $default-black;
    margin-left: 0;

    & > ul { // Navbar items
      margin: 0;
      padding: 0;
      display: inline-block;
      padding-left: 1ch;
      padding-right: 1ch;

      &:hover { // Navbar items
        background-color: $default-blue;
        color: $default-white;
        cursor: pointer;
      }
      &:focus {
        background-color: $default-blue;
        color: $default-white;

        li { // Display inner items on focus
          display: block;
          opacity: 1;
          left: inherit;
          animation-name: hide;

          animation-name: none;
        }
      }

      & > li { // Navbar inner lists
       position: absolute;
       border: 2px solid $default-white;
       border-color: $default-black;
       box-shadow: 0 0 0 0.25ch $default-white;
       background-color: $default-white;
       margin-left: calc(2px - 1ch);
       margin-right: calc(2px - 1ch);
       margin-top: $line-height / 2;
       margin-bottom: $line-height / 2;
       padding: calc(0.25ch + 2px);
       padding-top: $line-height / 2;
       padding-bottom: $line-height / 2;

       opacity: 0;
       left: -9999px;

       animation-name: hide;
       animation-duration: 0.5s;

       & > ul { // Inner Items
         background-color: $default-white;
         color: $default-black;
         padding-left: 1ch;
         padding-right: 1ch;
         min-height: $line-height;

         &:hover { // Navbar inner items hover
           background-color: $default-blue;
           color: $default-white;
         }
       }
     }
   }

   .submenu {
     display: inline-block;
     animation-name: show;
     animation-duration: 0.5s;
   }
  }
}

// Classes

.box {
  border: $box-border solid $default-white;
  margin: 0.5ch;
  padding: calc(0.5ch - #{$box-border});
  width: auto;
  display: inline-block;
  margin-top: $line-height / 2;
  margin-bottom: $line-height / 2 ;
  padding-top: $line-height / 2 - $box-border;
  padding-bottom: $line-height / 2 - $box-border;
  vertical-align: top;

  &.double {
    border-style: double;
    border-width: $box-double-border;
    margin: calc(0.5ch);
    padding: calc(0.5ch - (#{$box-double-border}));
    margin-top: $line-height / 2 ;
    margin-bottom: $line-height / 2 ;
    padding-top: $line-height / 2 - $box-double-border;
    padding-bottom: $line-height / 2 - $box-double-border;
  }

  &.black {
    background-color: $default-black;
    color: $default-white;
    border-color: $default-white;
    box-shadow: 0 0 0 0.25ch $default-black;
  }

  &.white {
    background-color: $default-white;
    color: $default-black;
    border-color: $default-black;
    box-shadow: 0 0 0 0.25ch $default-white;

    a {
     color: $default-black;
     &:hover {
       background-color: $default-blue;
       color: $default-white;
     }
   }
  }

  &.blue {
    background-color: $default-blue;
    color: $default-white;
    border-color: $default-white;
    box-shadow: 0 0 0 0.25ch $default-blue;

    li.button-list > ul:hover {
      background-color: $default-white;
      color: $default-black;
    }
    li.button-list > ul:hover > a {
      color: $default-black;
    }
    a:hover {
      background-color: $default-white;
      color: $default-blue;
    }
    hr {
      border-color: $default-white;
    }
  }
}

.list-symbol::after {
  content: " ▼";
}

// Style helpers, like space-takers

@for $i from 1 through 5 {
  .space-#{$i}em { min-height: $line-height * $i; }
}

@for $width from 1 through 5 {
  .width-#{$width * 5} { width: $width * 5ch; }
}
@for $width from 1 through 5 {
  .width-#{$width * 50} { width: $width * 50ch - 2ch; }
}

@for $i from 1 through 5 {
  .padding-#{$i} { padding: $i * 1ch; padding-top: $line-height * $i; padding-bottom: $line-height * $i; }
}