CSS Router by Faraz

css-router.css

/******************************************************************
CSS Router written by Faraz Fazli - Released under the MIT License
https://github.com/farazfazli/css-router
*******************************************************************/

/* Use Open Sans */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
  font-family: 'Open Sans', sans-serif;
}

/* Disable scrolling on outer page */
html, body {
  overflow: hidden;
  margin: 0;
  height: 100%;
}

/*** Custom blue scrollbar ***/
::-webkit-scrollbar {
    width: 5px;
    height: 2px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: blue;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(24, 0, 255, 0.5);
}
/******************************/

main {
  height: 100%;
  visibility: hidden;
}

/* Show home when first loaded -- initial page */
main .one {
  height: 100%;
}

body {
  font-size: 1.3em;
  background: white;
}

div h1, p {
  margin: 1%
}

/* Page-specific content, enable scrolling */
.content {
  width: 100%;
  visibility: visible;
  overflow: auto;
  margin-bottom: 100px;
}

/* Menu options, animation */
.menu {
  height: 0;
  overflow: auto;
  transition: all .3s;
  visibility: visible;
}

/*** Menu labels ***/
label {
  cursor: pointer;
  color: blue;
  padding: .5vh;
}

/* Flip colors on hover */
label:hover {
  color: white;
  background: blue;
}

/* Used for website title */
strong {
  font-size: 1.1em;
}
/*****************/

/*** Navbar properties ***/
.navbar {
  white-space: nowrap;
}
/************************/

/*** Pure CSS navbar functionality ***/
/* When other menu items are first checked, hide initial page */
#two:checked ~ main .one,
#three:checked ~ main .one {
  height: 0% ;
  overflow: auto;
  transition: all .3s;
  visibility: visible;
}

/* When menu item clicked */
#one:checked ~ main .one,
#two:checked ~ main .two,
#three:checked ~ main .three {
  display: block;
  height: 100%;
  visibility: visible;
}

/* Hyperlink-like look */
#hyperlink {
  text-decoration:underline;
  background-color:white;
  color:blue;
  padding:0%;
}

/* Make radio buttons invisible */
.invisible {
  height: 1px;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  position: absolute;
  width: 1px;
}

/**************************************/

/* Divider */
hr {
  border-color: blue;
  margin: 0;
  width: 100vmax;
}

/* Optional footer/code styling */
footer {
  background: blue;
  height: 5vh;
  width: auto;
  position: relative;
  margin-top: -7vh;
}

footer * {
  color: white;
}

footer p {    
  padding: .5vmin;
}

/* Make code look like code, sometimes needs to be set explicitly */
code {
  font-family: monospace;
  color: blue;
  padding: 5%;
}

/* Media queries for responsiveness */
@media(max-width: 750px) {
  .navbar {
      font-size: .7em;
  }
  footer {
  background: blue;
  height: 5vh;
  margin-top: -5vh;
  }
}