tears er enda bedre

1 files changed, 35 insertions, 4 deletions

diff --git a/tears.css b/tears.css
index 6968cb7..87f6c2c 100644
--- a/tears.css
+++ b/tears.css
@@ -1,9 +1,9 @@
 body { font: 16px/1.4 sans-serif; }
 
 html, body { background: #eee; color: #000; }
-body { left: 240px; position: relative; max-width: 900px; margin-top: 6em; }
+body { margin: 6em 1em 1em 240px; position: relative; max-width: 100%; margin-top: 6em; }
 form, select, textarea, input { font: inherit; }
-textarea { width: 100%; }
+textarea { width: 100%; max-width: 42em; }
 div#meny { position: fixed; left: 0; top: 0; width: 180px; height: 100%; }
 div#meny { border-right: 1px dotted Tomato; padding: 0 1em; }
 div#meny { background: #fff; overflow: auto; }
@@ -15,9 +15,9 @@ p.x a { text-align: right; }
 pre { font-weight: bold; }
 a { text-decoration: none; color: DarkOrange; }
 a:hover, a:visited { color: Tomato; }
-img { border: 1px solid #000; max-width: 50%; }
+img { border: 1px solid #000; max-width: 100%; }
 pre { position: relative; }
-img.orz { width: 50px; height: 50px; display: block; }
+img.orz { max-width: 160px; display: inline-block; vertical-align: middle;}
 
 label { width: 8em; float: left; margin: 0.25em 0; }
 
@@ -25,6 +25,37 @@ blockquote { font-style: italic; position: relative; }
 
 img.teatime { max-width: 100%; }
 
+article { font: 18px/1.2 "Open Sans", sans-serif; }
+
+article { flex: 0 0 100%; width: 960px; max-width: 100%; }
+article p { margin: 0; }
+article h2 { margin-top: 0; font-size: 4em; }
+article a { color: black; text-decoration: none; }
+article img { width: 100%; }
+article video { width: 100%; }
+
+article h2 { margin-bottom: 0; }
+article .content { display: flex; align-content: stretch; justify-content: space-between; align-items: flex-start; }
+.byline { margin: 0 0 2em 0; font-style: italic; }
+.byline a { font-weight: bold; }
+article .content .body { margin: 0 2em; }
+.body p { margin-bottom: 1em; }
+
+article .content .body { flex: 1 1 auto; }
+
+article aside { max-width: 160px; font-size: 12px; flex: 1 0 160px; }
+article aside dt { font-weight: bold; margin-top: 0.5em; }
+article aside dd { margin-left: 1em; }
+
+article img.headshot { border-radius: 50%; width: 160px; }
+article img.headshot.mini { display: none; }
+
+.error { border: 1px solid red; }
+
+.infobox { margin: 0; padding: 0; }
+.infobox li { margin: 8px 0; list-style: none; }
+.infobox select { margin-right: 8px; }
+
 /*!
  * Pikaday
  * Copyright © 2012 David Bushell | BSD & MIT license | http://dbushell.com/