From 8d4f1aabefddaabf9a72fd917e980b2ada6835e7 Mon Sep 17 00:00:00 2001
From: rekado <rekado@elephly.net>
Date: Wed, 5 Nov 2014 22:36:16 +0100
Subject: adjust styles

---
 css/screen.css | 214 ++++++++++++++++++++++++++-------------------------------
 1 file changed, 97 insertions(+), 117 deletions(-)

diff --git a/css/screen.css b/css/screen.css
index c1a004d..a233638 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -20,70 +20,41 @@ body {
   body .elephly {
     background: #bdc0ac; }
 
+#index {
+    padding: 1rem;
+    margin-left: 2rem; }
+#index img {
+    border: 3px solid white;
+    border-radius: 50%;
+    box-shadow: 1px 2px 2px 0 #888;
+    float: left;
+    height: 4rem; }
+
 @media screen and (max-width: 600px) {
+  #index {
+      text-align: center; }
+  #index img {
+      float: none; }}
 
 #page ul {
   list-style: square outside;
-  margin-top: 1em;
-  margin-bottom: 1em; }
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem; }
 
 div.time {
   color: #9ba0a7;
-  margin-top: -0.6em;
-  margin-bottom: 0.6em;
-  font-size: 0.9em;
+  margin-top: -2.8rem;
+  margin-bottom: 2.5rem;
+  font-size: 0.9rem;
   font-weight: normal; }
 
-img#logo {
-  border-radius: 1em;
-  width: 100%;
-  margin-bottom: 0.5em; }
-  @media screen and (max-width: 600px) {
-    img#logo {
-      width: auto; }}
-
-div#navigation {
-  background: #fff;
-  border-left: 1px solid #cccccc;
-  border-right: 1px solid #cccccc;
-  font-family: "Droid Sans", Arial, sans-serif; }
-  @media screen and (min-width: 600px) {
-    div#navigation {
-      position: fixed;
-      top: 0;
-      padding: 0.5em;
-      height: 100%;
-      width: 8em; }}
-  @media screen and (max-width: 600px) {
-    div#navigation {
-      position: relative;
-      clear: both;
-      text-align: center; }}
-  div#navigation ul ul {
-    margin-left: 1em;
-    margin-bottom: 0.4em; }
-  div#navigation li {
-    width: 100%;
-    margin: 0; }
-    div#navigation li a {
-      padding: 4px;
-      display: block;
-      color: #389;
-      text-decoration: none;
-      border: none; }
-      div#navigation li a:visited {
-        color: #167; }
-      div#navigation li a:hover {
-        color: #fff;
-        background: #666; }
-
 div.figure {
   text-align: center;
   background: #fff;
   box-sizing: border-box;
   box-shadow: 0 0 0.4em 0 #888;
-  margin: 1em;
-  padding: 1em; }
+  margin: 1rem;
+  padding: 1rem; }
   @media screen and (min-width: 600px) {
     div.figure {
       float: right; }}
@@ -94,84 +65,93 @@ div.figure {
   div#page div.figure p.caption {
     width: auto;
     text-align: center;
-    font-size: 0.8em; }
+    font-size: 0.8rem; }
+
+iframe {
+    margin-top: 1rem;
+    margin-bottom: 1rem; }
 
 h1 {
   color: #000;
   clear: both;
-  margin-bottom: .2em;
-  line-height: 1.5em;
+  line-height: 125%;
+  margin-top: 1.3rem;
+  margin-bottom: .3rem;
   display: block;
-  font-size: 1.6em;
-  font-weight: 300;
-  font-family: Georgia; }
+  font-family: "droid sans", sans-serif;
+  font-size: 1.2rem;
+  font-weight: 800; }
 
 h1:first-child {
-  margin-top: 14px; }
+    font-size: 1.8rem;
+    margin-bottom: 3rem;
+    margin-top: 3rem; }
+
+@media screen and (max-width: 600px) {
+    h1:first-child {
+        margin-top: 1rem; }}
 
-* + h1, * + h2 {
-  margin-top: .5em; }
+* + h2 {
+  margin-top: 1.5rem; }
 
 h2, h3 {
   color: #333;
   margin-bottom: 0.5em;
-  line-height: 1.05em;
   clear: both;
   letter-spacing: -0.04em;
-  font-size: 1.3em;
+  font-size: 1.2rem;
   font-weight: 700;
   font-family: "Droid Sans", Arial, sans-serif; }
 
 h3 {
-  font-size: 1.2em; }
+  font-size: 1.2rem; }
 
 a {
   color: #389;
-  text-decoration: none;
-  border-bottom: 1px dotted #eeede5; }
+  text-decoration: none; }
   a:visited {
     color: #167; }
   a:hover {
+      color: #000;
     background: #eeede5; }
 
 strong {
   font-weight: bold; }
 
 div#page {
-  overflow: visible;
-  padding-left: 2em;
-  margin-right: 1em;
+    overflow: visible;
+    max-width: 32rem;
+  padding-left: 2rem;
+  margin-right: 1rem;
   margin-bottom: 100px; }
   @media only screen and (min-width: 600px) {
     div#page {
-      margin-left: 9em; }}
+      margin-left: 9rem; }}
   div#page ul {
-    max-width: 36em; }
+    max-width: 32rem; }
   div#page p {
     margin-bottom: 0;
     text-align: justify;
-    max-width: 36em;
-    font-size: 1em; }
+    max-width: 32rem; }
     div#page p img, div#page p video {
       display: inline;
       float: right;
-      margin-left: 0.8em;
+      margin-left: 0.8rem;
       -moz-border-radius: 15px;
       border-radius: 15px; }
   div#page p.back {
-    margin-top: 1.5em;
+    margin-top: 1.5rem;
     width: 50%; }
   div#page blockquote {
-    margin-left: 3em;
-    margin-top: 1em;
-    margin-bottom: 1em;
-    font-size: 0.9em;
+      margin-left: 3rem;
+      margin-right: 3rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
     font-style: italic; }
-    div#page blockquote p {
-      width: 80%; }
   div#page img.full {
-    margin-top: 0.5em;
-    margin-bottom: 1em;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
     margin-left: 0;
     margin-right: 0;
     position: static;
@@ -184,11 +164,11 @@ div#page {
   div#page img.stretch {
     width: 100%; }
   div#page div.fineprint {
-    font-size: .7em;
+    font-size: .7rem;
     text-indent: 0;
-    line-height: 1em;
-    margin-top: 1em;
-    padding-top: 1em;
+    line-height: 1rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
     border-top: 1px dotted #aaaaaa;
     width: 100%;
     color: #666;
@@ -200,24 +180,24 @@ div#page {
     div#page div.fineprint img {
       display: block;
       float: left;
-      margin-right: .5em; }
+      margin-right: .5rem; }
 
 p + p, div.figure + p {
-  text-indent: .5em;
-  margin-top: 0.2em; }
+  text-indent: .5rem;
+  margin-top: 0.4rem; }
 
 warning {
   clear: both;
-  margin: 1em;
-  padding: 1em;
+  margin: 1rem;
+  padding: 1rem;
   background: #ffffaa;
   border: 2px dashed #dddd88;
   border-radius: 3px;
   display: block; }
 
 pre {
-  margin: 1em;
-  padding: 1em;
+  margin: 1rem;
+  padding: 1rem;
   display: inline-block;
   border-radius: 3px;
   background: #444; }
@@ -238,13 +218,13 @@ img.undecorated {
 
 img.headline {
   margin: 0;
-  margin-right: 1em;
+  margin-right: 1rem;
   padding: 0;
   vertical-align: text-bottom; }
 
 div#columns {
   overflow: hidden;
-  margin-bottom: 1em; }
+  margin-bottom: 1rem; }
   div#columns ul {
     list-style: none outside none;
     margin: 0;
@@ -257,9 +237,9 @@ span.code, code {
   background: #dedede; }
 
 span.code {
-  font-size: 0.85em;
+  font-size: 0.85rem;
   border-bottom: #888;
-  padding: .15em; }
+  padding: .15rem; }
 
 br {
   clear: left; }
@@ -268,20 +248,20 @@ em {
   font-style: italic; }
 
 .item + .item {
-  margin-top: 1em; }
+  margin-top: 1rem; }
 
 ul.list {
   list-style-type: square; }
   ul.list li {
-    margin-bottom: .4em; }
+    margin-bottom: .4rem; }
     ul.list li .description {
-      font-size: .8em; }
+      font-size: .8rem; }
 
 div.download {
   float: left;
   width: 35%;
   margin-right: 10%;
-  margin-bottom: 1.5em; }
+  margin-bottom: 1.5rem; }
   div.download a {
     display: block;
     width: 100%;
@@ -290,33 +270,33 @@ div.download {
     font-family: sans-serif;
     background: #fff;
     color: #888;
-    border-radius: 2em;
-    -moz-border-radius: 2em; }
+    border-radius: 2rem;
+    -moz-border-radius: 2rem; }
   div.download a:hover {
     background: #888;
     color: #fff; }
   div.download table {
-    font-size: .8em;
-    line-height: 1em;
+    font-size: .8rem;
+    line-height: 1rem;
     border-collapse: collapse;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
     clear: both; }
     div.download table th {
       color: #999;
       font-weight: 400;
-      padding-right: 1em;
+      padding-right: 1rem;
       border-right: 1px solid #ffaa00;
       text-align: right; }
     div.download table td {
       color: #777;
       margin: 0;
       padding: 0;
-      padding-left: 1em;
+      padding-left: 1rem;
       text-align: left; }
 
 table {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em; }
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem; }
   table thead {
     border-bottom: 2px solid #ffaa00; }
     table thead tr.header {
@@ -324,7 +304,7 @@ table {
   table tr.odd {
     background-color: #fafafa; }
   table th + th, table td + td {
-    padding-left: 1em; }
+    padding-left: 1rem; }
 
 h1.year {
   border-bottom: 4px solid #eeede5;
@@ -334,15 +314,15 @@ h2.month {
   font-weight: normal; }
 
 ul.archive {
-  margin-left: 1em; }
+  margin-left: 1rem; }
 
 #page ul.tree {
-  margin: 1em;
+  margin: 1rem;
   font-family: monospace;
   display: block;
   list-style: none; }
 
-  #page ul.tree li { line-height: 1.3em; }
+  #page ul.tree li { line-height: 1.3rem; }
   #page ul.tree .NORM  { color: black;  background-color: transparent;}
   #page ul.tree .FIFO  { color: purple; background-color: transparent;}
   #page ul.tree .CHAR  { color: yellow; background-color: transparent;}
@@ -355,14 +335,14 @@ ul.archive {
 
 /* DISQUS */
 h1.disqus {
-  margin-top: 1em;
+  margin-top: 1rem;
   float: left; }
 
 div#disqus_thread {
   border-top: 5px solid #999999;
-  padding: 0 1em 1em;
+  padding: 0 1em 1rem;
   background: #eeede5;
-  margin-top: 1em;
+  margin-top: 1rem;
   -moz-border-radius: 0 0 15px 15px;
   border-radius: 0 0 15px 15px;
   font-size: 14px; }
@@ -371,6 +351,6 @@ div#disqus_thread {
   div#disqus_thread #dsq-global-toolbar {
     margin: 0.5em 0; }
   div#disqus_thread #dsq-reply {
-    margin-top: 0.5em; }
+    margin-top: 0.5rem; }
   div#disqus_thread h3 {
     clear: none; }
-- 
cgit v1.2.3