simple style

simple_style.css

/* Body and header styles inspired by http://bettermotherfuckingwebsite.com/ */

/*
 Bookmarklet:
 
 javascript:(function() {
  var style = document.getElementsByTagName("style");
  var css = "a,a:link,a:visited{color:#265C83}body{margin:40px auto;max-width:60em;line-height:1.6;font-size:18px;color:#222;background:#EEE;padding:0 10px}h1,h2,h3{line-height:1.2}canvas,iframe,img,select,svg,textarea,video{max-width:100%}.overflow-container{overflow-x:scroll}.aspect-ratio{height:0;padding-top:56.25%;position:relative}.aspect-ratio--object{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;z-index:100}a{transition:color .4s;text-decoration:none}a:hover{color:#7FDBFF}a:active{transition:color .3s;color:#007BE6}";
  if (style[0]) {
    style[0].innerHTML = css;
  }
  else {
    var s = document.createElement("style");
    s.innerHTML = css;
    document.getElementsByTagName('head')[0].appendChild(s);
  }
})();
 
*/

body
{
  margin:       40px auto;
  max-width:    60em;
  line-height:  1.6;
  font-size:    18px;
  color:        #222;
  background:   #EEE;
  padding:      0 10px;
  /* Investigate using the following font */
  /* font-family: monospace; */
  /* font-family: Georgia, Palatino, serif; */
}

h1, h2, h3
{
  line-height:  1.2;
}

/* For code snippets? */
/*
code
{
    font-family: Consolas, Monaco, "Andale Mono", monospace;
}
*/

/*
  FLUIDITY v0.1.0
  @mrmrs - http://mrmrs.cc
  MIT
  https://github.com/mrmrs/fluidity/blob/master/css/fluidity.css
*/
/* Responsive Utilities */
img, canvas, iframe, video, svg, select, textarea
{
    max-width: 100%;
}

/* Wrap tables or pre elements in a div with this class */
.overflow-container
{
    overflow-x: scroll;
}

/* Aspect ratios for media objects i.e canvas, iframe, video, svg etc. Defaults to 16x9 */
.aspect-ratio
{
    height: 0;
    padding-top: 56.25%;
    position: relative;
}

.aspect-ratio--object
{
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100; 
}

/* http://mrmrs.io/links/ */

a
{
    transition: color .4s;
    color: #265C83;
    text-decoration: none;
}

a:link, a:visited
{
    color: #265C83;
}

a:hover
{
    color: #7FDBFF;
}

a:active
{
    transition: color .3s;
    color: #007BE6;
}