artcraft/vocodes/src/App.scss

//@import-normalize; /* bring in normalize.css styles */

$page-width: 700px;

$light-text-color: #777;
$button-text-color: #666;

$body-font-family: 'Fira Sans', serif;
$nav-font-family: 'Fira Sans', sans-serif;
$footer-font-family: 'Fira Sans Condensed', sans-serif;
$textarea-font-family: 'Fira Sans', sans-serif;
$headings-font-family: 'Merriweather', serif;

body {
  font-family: $body-font-family;
  font-weight: 300; // For Fira Sans
}

.mainwrap {
  max-width: 700px;
  margin: auto;
}

canvas#spectrogram {
  margin: 0.5em 0;
  transform: scaleY(-1); /* Spectrograms are flipped */
  height: 300px;
  width: 100%;
  cursor: pointer;
}

/*p {
  a:link, 
  a:visited {
    color: rgb(119, 165, 235);
    font-weight: bold;
  }
  a:hover, 
  a:active{
    color: rgb(85, 133, 204);
    font-weight: bold;
  }
}*/

p {
  a:before {
    content: ' ';
  }
}

#main {
  position: relative; // Footer attachment.
  min-height: 100vh;
}

$footer-height: 6rem;

#viewable {
  padding-bottom: $footer-height;
}

footer {
  font-family: $footer-font-family;
  text-align: center;
  width: 100%;
  position: absolute; // Footer attachment.
  bottom: 0;
  // NB: Setting explicit height doesn't appear to be necessary, and
  // it was creating an annoying scrollbar.
  //height: $footer-height; 
  color: $light-text-color;
}

.social {
  img {
    max-width: 70px;
    max-height: 70px;
    padding: 1em;
  }
}

// Tech logos need a hack to not have margin.
.vocodes-grid-marginless {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

nav {
  font-family: "Fugaz One";
  margin: 0.2em 0 0 0;
  padding: 0;
  #logo_text {
    font-family: "Fugaz One";
    font-size: 1.5em;
    margin: 0 0.3em 0 0;
    padding: 0;
    .vo {
      color:  #209CEE;
      padding: 0;
      margin: 0;
    }
    .codes {
      color:  rgba(32, 156, 238, 0.685);
      padding: 0;
      margin: 0;
    }
    a {
      padding: 0;
      margin: 0;
    }
    a:link,
    a:visited {
      text-decoration: none;
      background-color: #fff;
    }
    a:active,
    a:hover{
      text-decoration: underline;
      background-color: #fff;
    }
  }
  a {
    margin: 0;
    padding: 0;
  }
  a,
  a:link {
    text-decoration: none;
    color: $light-text-color;
    padding: 0 10px;
    cursor: pointer;
  }
  a:after {
    content: '';
    width: 99.5%;
  }
  a:hover,
  a:active {
    background-color: #bfdff5;
  }

  hr {
    margin: 5px 0 15px 0;
  }
}

.button-group {
  padding: 1em 0;
}

#status {
  .info {
    color: #888888;
  }
  .warn {
    color: #aaaa00;
  }
  .error {
    color: #aa0000;
  }
  min-height: 1.5em;
}

.video-template-selector {

  .video-thumbnail {
    max-width: 250px;
    padding: 0em;
    margin: 1em;
    filter: brightness(70%) grayscale(1);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }

  .selected {
    filter: brightness(100%) grayscale(0);
    box-shadow: 0px 0px 25px #209CEE
  }
}

#usage,
#updates,
#help-wanted,
#terms {
  h1, h2 {
    font-family: $headings-font-family;
  }
  p {
    text-align: justify;
  }
  li {
    font-size: 1.2em;
    text-align: justify;
    margin-bottom: 1em;
  }
}


/** RESPONSIVENESS **/

/** Hide footer when using onscreen keyboard. */
/* Actually, let's not do that because people filed bug reports.
@media screen and (max-height: 550px) {
  footer {
    display: none;
  }
  nav {
    display: none;
  }
}
*/

@media screen and (max-height: 740px) {
  footer p {
    display: inline;
  }
  footer p:after {
    content: ' '; // Not sure why the space disappears when inline.
  }

  .social {
    img {
      max-width: 50px;
      max-height: 50px;
      padding: 0.2em;
    }
  }
}

// Prevent Android devices from horizontal scrolling
// Mine is 412x846.
@media screen and (max-width: 412px) {
  #root {
    max-width: 380px;
    margin: auto;
  }
}