botsym-css/scss/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;
@mixin whiteOnBlue {
  background-color: $default-blue;
  color: $default-white;
  border-color: $default-white;
}

@mixin blueOnWhite {
  background-color: $default-white;
  color: $default-blue;
  border-color: $default-blue;
}

@mixin whiteOnBlack {
  background-color: $default-black;
  color: $default-white;
  border-color: $default-white;
}

@mixin blackOnWhite {
  background-color: $default-white;
  color: $default-black;
  border-color: $default-black;
}

@mixin hoverable($hoverFg, $hoverBg) {
  &:hover {
    cursor: pointer;
    color: $hoverFg;
    background-color: $hoverBg;
  }
}

@font-face {
  font-family: "Iosevka Slab Regular";
  src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
}

:root {
  // Styles applying to everyting
  font-family: "Iosevka Slab Regular", "monospace";
  @include whiteOnBlack;
  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;
  @include hoverable($default-white,
  $default-blue);
}

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

hr {
  height: $line-height / 2;
  border: 0;
  border-bottom: 1px solid $default-white;
  margin-bottom: $line-height / 2 - 1px;
}

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);
    text-decoration: underline;
    @include hoverable($default-white,
    $default-blue);
    &>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
    @include blackOnWhite;
    margin-left: 0;
    &>ul {
      // Navbar items
      margin: 0;
      padding: 0;
      display: table-cell;
      padding-left: 1ch;
      padding-right: 1ch;
      @include hoverable($default-white,
      $default-blue);
      &:focus {
        @include whiteOnBlue;
        li {
          // Display inner items on focus
          display: block;
          opacity: 1;
          left: inherit;
          animation-name: hide;
          animation-name: none;
        }
      }
      &>li {
        // Navbar inner lists
        @include blackOnWhite;
        position: absolute;
        border: 2px solid;
        box-shadow: 0 0 0 0.25ch $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
          @include blackOnWhite;
          padding-left: 1ch;
          padding-right: 1ch;
          min-height: $line-height;
          &:hover {
            // Navbar inner items hover
            @include whiteOnBlue;
          }
        }
      }
    }
  }
}


/* Miscallaneous Classes */

.box {
  border: $box-border solid $default-white;
  margin: 0.5ch;
  padding: calc(0.5ch - #{$box-border});
  width: auto;
  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;
  &.inline {
    display: inline-block;
  }
  &.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 {
    @include whiteOnBlack;
    box-shadow: 0 0 0 0.25ch $default-black;
  }
  &.white {
    @include blackOnWhite;
    box-shadow: 0 0 0 0.25ch $default-white;
    a {
      color: $default-black;
      &:hover {
        @include whiteOnBlue;
      }
    }
  }
  &.blue {
    @include whiteOnBlue;
    box-shadow: 0 0 0 0.25ch $default-blue;
    li.button-list>ul:hover {
      @include blackOnWhite;
    }
    li.button-list>ul:hover>a {
      color: $default-black;
    }
    a:hover {
      @include blueOnWhite;
    }
    hr {
      border-color: $default-white;
    }
    button {
      &:hover {
        @include blueOnWhite;
      }
    }
    .checkbox-right,
    .checkbox-left,
    .radio-right,
    .radio-left {
      &:hover {
        @include blueOnWhite;
      }
    }
  }
}

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

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}


/* How to add pages:
*
* (at)for (dollar)i from 1 through 20 {
*   .page-#{(dollar)i} {
*     display: none;
*   }
*   #radio-page-#{(dollar)i}:checked ~ .page-#{(dollar)i} {
*     display: block;
*   }
* }
*/


/* Form styles */

input[type=checkbox],
input[type=radio] {
  display: none;
}

.checkbox-right,
.checkbox-left,
.radio-right,
.radio-left {
  @include hoverable($default-white,
  $default-blue);
}

.checkbox-right {
  &::after {
    content: "[ ]";
  }
}

.checkbox-left {
  &::before {
    content: "[ ]";
  }
}

.radio-right {
  &::after {
    content: "( )";
  }
}

.radio-left {
  &::before {
    content: "( )";
  }
}

input[type=checkbox]:checked {
  &+.checkbox-right::after {
    content: "[x]";
  }
  &+.checkbox-left::before {
    content: "[x]";
  }
}

input[type=radio]:checked {
  &+.radio-right::after {
    content: "(x)";
  }
  &+.radio-left::before {
    content: "(x)";
  }
}

input[type=text],
button {
  background-color: inherit;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  @include hoverable($default-white,
  $default-blue);
}

label:hover {
  cursor: pointer;
}

button {
  &:focus,
  &:hover,
  &:active,
  &::-moz-focus-inner {
    border: none;
    text-decoration: none;
  }
  &::before {
    content: "[ ";
  }
  &::after {
    content: " ]";
  }
}

.textinput {
  display: inline-block;
  @include hoverable($default-white,
  $default-blue);
  &::before {
    content: "[";
  }
  &::after {
    content: "]";
  }
  &:hover>input[type=text] {
    @include whiteOnBlue;
  }
}

input[type=text] {
  @include blackOnWhite;
  width: 15ch;
}


/* Style helpers, like space-takers */

@for $i from 1 through 5 {
  .space-#{$i} {
    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;
  }
}