navigo/demo/basic/styles.css

A simple vanilla JavaScript router with a fallback for older browsers

body {
  background: #FFF;
  color: #000;
  margin: 0;
  padding: 0;
  font-family: 'Exo 2', sans-serif;
  font-size: 20px;
  font-weight: 400;
}
@media all and (max-width: 400px) {
  body {
    font-size: 16px;
  }
}
a {
  color: #000;
}
a:hover {
  color: #00009f;
}
nav {
  text-align: center;
  padding: 1em;
  margin-bottom: 2em;
}
nav a {
  display: inline-block;
  margin-right: 0.2em;
  text-decoration: none;
  border-radius: 4px;
  border-left: solid 1px #B0B0B0;
  border-right: solid 1px #ddd;
  border-top: solid 1px #ddd;
  border-bottom: solid 2px #B0B0B0;
  padding: 0.4em 1em;
  background: #d9e6f2;
}
nav a:hover {
  background: #79a6d2;
  color: #FFF;
}
nav a:active {
  transform: translateY(2px);
  -weblot-transform: translateY(2px);
}
ul, li {
  margin: 0;
  padding: 0;
}
li {
  margin-left: 1em;
}
p {
  padding: 0;
  margin-bottom: 1em;
  margin-top: 1em;
}
p.big {
  font-size: 1.5em;
}
p.u-mb {
  margin-bottom: 2em !important;
}
.center {
  text-align: center;
}
.content {
  margin-top: 1em;
  max-width: 500px;
  margin: 0 auto;
}
h1 {
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: center;
  font-weight: 200;
  font-size: 3em;
  border-bottom: dotted 1px #999;
  color: #00009f;
}
hr {
  border-top: dotted 1px #999;
  border-bottom: none;
  margin: 1em 0;
}
pre {
  display: block;
  border-radius: 4px;
  border: solid 1px #999;
  padding: 1em;
  font-size: 0.8em;
  font-family: 'Exo 2', sans-serif;
  color: #00009f;
}
footer {
  margin: 2em;
  padding: 4em 0 4em 0;
  text-align: center;
  font-size: 0.7em;
  border-top: solid 1px #bbb;
}
footer a {
  color: #999 !important;
}
.mode-trigger {
  position: fixed;
  top: 4px;
  right: 4px;
}
.mode-trigger a {
  text-decoration: none;
  font-size: 0.8em;
  color: #999;
}
.mode-trigger a:hover {
  color: #000
}