Add more content (contact, colophon, arch on air post)

[~bandali/bndl.org] / styles.css

diff --git a/styles.css b/styles.css
index 021d73c..ddc6032 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -17,11 +17,12 @@ html {
 }
 
 .light-off-button {
-  display: block;
+  cursor: pointer;
+  vertical-align: middle;
 }
 
 .light-off-button,
--.light-off-button-inline {
+.light-off-button-inline {
   color: #888888;
   -webkit-user-select: none;
   user-select: none;
@@ -82,8 +83,8 @@ html {
   border-bottom: 1px solid #357edd;
 }
 
-.light-off:checked ~ .page a {
-  color: #ddddb6;
+.light-off:checked ~ .page a, .light-off:checked ~ header a {
+  color: #ddddb6 !important;
   border-bottom: 1px solid #aaaa96;
 }
 
@@ -131,41 +132,48 @@ html {
   border-bottom: 1px solid #888888;
 }
 
+.clear { clear: both; }
 
+#hello { float: left; line-height: 50px; }
 
-.header,
-.footer {
+#aminb { font-size: 0.9em; }
+
+header,
+footer {
   color: #888888;
-  padding: 2em 1em 1em 1em;
+  padding: 1em;
   margin: 0 auto;
-  max-width: 32em;
+  max-width: 34em;
 }
 
-.footer a {
-  color: #888888;
-  border-bottom: 1px solid #cccccc;
-}
+header { padding: 2em 1em 0em 1em; }
+
+header h2 { display: inline; }
 
-.header__left {
-  width: 50%;
-  float: left;
-  text-align: left;
+header a { border: none !important; color: #888 !important; }
+
+header h2 a { color: #3a89c9 !important; }
+
+header .bar {
+  color: #ccc;
+  font-size: 12pt;
+  vertical-align: bottom;
+  padding-left: 1px;
+  padding-right: 1px;
 }
 
-.header__right {
-  width: 50%;
-  float: right;
-  text-align: right;
+footer a {
+  color: #888888 !important;
+  border-bottom: 1px solid #cccccc !important;
 }
 
 
 
 .article {
-  clear: both;
   line-height: 1.6em;
   margin: 0 auto;
-  padding: 2em 1em;
-  max-width: 32em;
+  padding: 1em;
+  max-width: 34em;
 }
 
 .article h1,
@@ -177,24 +185,18 @@ html {
 }
 
 .article h1 {
-  font-size: 2.8em;
-  margin-top: 1em;
+  font-size: 1.6em;
 }
 
 .article h2 {
   font-size: 1.2em;
-  margin-top: 3em;
+  padding: 0.25em 0;
 }
 
 .article p {
   margin: 1em 0;
 }
 
-.article li code,
-.article p code {
-  font-weight: 700;
-}
-
 .article p img {
   margin: 1em 0;
   width: 100%;}
@@ -205,10 +207,11 @@ html {
 }
 .article ul {
   padding: 0;
+  margin: 0.3em 0 0 1.6em;
 }
 
 .article ul li {
-  list-style: none;
+  /* list-style: none; */
 }
 
 .article li {
@@ -267,9 +270,16 @@ font-size: 0.7em;
 
 .article .picture__avatar {
   margin: 0;
-  height: 6em;
-  width: 6em;
-  border-radius: 6em;
+  height: 64px;
+  width: 64px;
+  border-radius: 50%;
+  float: right;
+}
+
+@media only screen and (min-width: 570px) {
+  .picture__avatar {
+    margin-right: 3em !important;
+  }
 }
 
 .article .quote {
@@ -291,17 +301,21 @@ font-size: 0.7em;
 }
 
 
+.article code {
+  background-color: #f5f5f5;
+  padding: 1px 3px;
+}
 
 .article code,
 .article pre {
-  font-family: "Menlo", "DejaVu Sans Mono", monospace;
+  font-family: "DejaVu Sans Mono", monospace;
   font-size: 0.9em;
   line-height: 1.5em;
   margin: 0;
 }
 
 .article pre {
-  background-color: #eeeeee;
+  background-color: #f5f5f5;
   color: #232323;
   margin: 0 -1em;
   overflow-x: auto;