wonderdome-site/assets/styles/style.css

/*
 * WonderDome.net
 *
 * Copyright 2018 Eric Woodward
 * https://git.itsericwoodward.com/eric/wonderdome-site/
 *
 * Source released under CC0 Public Domain License v1.0
 * http://creativecommons.org/publicdomain/zero/1.0/
 */

/* ==========================================================================
   Default settings
   ========================================================================== */

/* Assumes Normalize already applied */

/* set options */
@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

/* Fix 300ms Delay */
a, button {
  -ms-touch-action: manipulation; /* IE10  */
  touch-action: manipulation;     /* IE11+ */
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.pullRight{
  float: right;
}

code, kbd, pre, samp {
  font-size: .8em;
}

/* ==========================================================================
   Site styles
   ========================================================================== */

/*
  Using "Pleroma Dark" for colors.

  BG: #121a24
  FG: #182230
  Text: #b9b9ba
  Links: #d8a070
  Blue (follow, reply): #0095ff
  Orange (favorties): ffa500

  Red (cancel): #d31014
  Green (Retweet): #0fa00f

*/

html {
  color: #b9b9ba;
  background: url("/images/wonderdome-bg.jpg") no-repeat center top fixed;
  background-size: cover;
  font-family: 'raleway', 'Liberation Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5em;
}

a {
  border: 1px solid transparent;
  border-bottom: 1px dashed #e7c6a9;
  border-radius: 0;
  color: #d8a070;
  padding: .3em .2em .2em;
  text-decoration: none;
  -webkit-transition: .3s background-color, .3s color, .3s border-radius;
  transition: .3s background-color, .3s color, .3s border-radius;
}

a:hover {
  background-color: #e7c6a9;
  background-color: rgba(216,160,112,.4);
  border: 1px solid #e7c6a9;
  border-radius: .5em;
  color: #ffffff;
}

figcaption {
  font-size: .85em;
}

h2 {
  text-align: center;
  line-height: 1.25em;
}

li {
  margin-bottom: .6em;
}

ol, ul {
  padding-left: 1.2em;
}

.licenseLink {
  display: inline-block;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  vertical-align: baseline;
}

.logoImg {
  display: block;
  margin: auto;
}

.page {
  background-color: #121a24;
  background-color: rgba(18,26,36,.9);
  border: 1px solid #121a24;
  border-radius: 1em;
  margin: 0 auto;
  max-width: 50em;
  padding: 1em;
}

.pageFooter {
  border-top: 1px solid #293039;
  font-size: .85em;
}

.pageHeader {
  margin-top: 1.5em;
}

.serverPic-img {
  border-radius: .5em;
  display: inline;
  max-width: 100%;
}

.serverPic-link {
  border-bottom: 1px solid transparent;
  display: block;
  margin: 1em auto;
  max-width: 30em;
  text-align: center;
  width: 80%;
}

.siteTitle {
  display: block;
  margin: auto;
  width: 10em;
  height: auto;
  max-width: 10em;
  width: 67%;
}

.siteTitle-link {
  border-bottom: 1px solid transparent;
  display: block;
  margin: 0 auto;
  max-width: 4em;
  padding: .2em;
  text-align: center;
}

.siteTitle-link:hover {
  border-radius: 1em;
}

.topLink {
  display: block;
  font-size: .85em;
  font-size: .85rem;
  margin: 1em auto;
  text-align: center;
  width: 6.5em;
  width: -moz-fit-content;
}

/* ==========================================================================
   JS Overrides
   ========================================================================== */

html.js-hasFontsLoaded {
  line-height: 1.75em;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 30em) {
  html {
    font-size: 20px;
  }
  .page {
    max-width: 42em;
  }
}
@media only screen and (min-width: 40em) {
  a {
    white-space:nowrap;
  }
}

@media only screen and (min-width: 50em) {
  html {
    font-size: 22px;
  }

  .navMenu-navbar {
    background-color: #808080;
    background: rgba(80,80,80,.6);
  }
  .page {
    max-width: 44em;
  }

}

@media only screen and (min-width: 66em) {
/* NOTHING YET */
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #FFFDD7 !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #FFFDD7 !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}