From 8deba93291eaa37b58b7cf97fd43ea36fd7c2dce Mon Sep 17 00:00:00 2001
From: Rico Ullmann <rullmann@seibert-media.net>
Date: Sun, 19 Mar 2017 21:42:19 +0100
Subject: [PATCH] update stylesheet to use solarized colors

---
 static/stylesheet/style.less     |   4 +-
 static/stylesheet/style.min.css  | 389 ++++++++++++++++++++++++++++++-
 static/stylesheet/variables.less |  54 ++---
 3 files changed, 417 insertions(+), 30 deletions(-)

diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less
index c1e0dec..af4237d 100644
--- a/static/stylesheet/style.less
+++ b/static/stylesheet/style.less
@@ -59,8 +59,8 @@ a:hover {
 }
 
 hr {
-  color: @light-grey;
-  background-color: @light-grey;
+  color: @base00;
+  background-color: @base00;
   height: 1px;
   border: none;
   margin-top: 40px;
diff --git a/static/stylesheet/style.min.css b/static/stylesheet/style.min.css
index 7ae85b0..5f55067 100644
--- a/static/stylesheet/style.min.css
+++ b/static/stylesheet/style.min.css
@@ -1 +1,388 @@
-body,html{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.1}h1{font-size:2.4em}h2{font-size:2em}h3{font-size:1.6em}h4{font-size:1.36em}h5{font-size:1.2em}h6{font-size:1.1em}body{margin:0;padding:0;background-color:#fff;color:#242121;font-family:Source Sans Pro,Verdana,sans-serif;font-size:1.02em;line-height:1.2em}a{color:#d9411e;text-decoration:none}a:hover{color:#ff5a09}hr{color:#eee;background-color:#eee;height:1px;border:none;margin-top:40px;margin-bottom:40px}img{max-width:100%}aside{background-color:#333;text-align:center}aside,aside a{color:#fff}aside a:hover{color:#eee}aside div{padding:20px;margin:0}aside div img{border-radius:50%;max-width:140px}aside div h1{margin:15px 0 5px}aside div p{margin:0 0 15px;font-size:.92em}aside nav ul li{display:inline;line-height:1.6em;font-size:1.28em;text-transform:lowercase}main nav{text-align:center;text-transform:uppercase;font-size:.72em;padding:14px 0;border-bottom:1px solid #eee}main nav a{padding:0 4px;border-right:1px solid #eee}main nav :first-child{border-left:1px solid #eee}main .pagination{margin:4% 8%;height:20px}main .social-share p{font-size:.8em}main article{margin:0 8% 2%}main article header h1,main article header h2{margin-bottom:0}main article header p{color:#999;font-size:.86em}main article code,main article kbd,main article pre,main article samp{font-family:Source Code Pro,Consolas,monospace}main article blockquote,main article pre{background-color:hsla(0,0%,50%,.05);border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:8px solid hsla(0,0%,50%,.075);border-left-width:10px}main article blockquote{padding:10px 20px;font-weight:300;font-size:1.1em}main article pre{padding:4px;font-size:.9em;overflow-x:auto}main article samp{white-space:pre;display:block;overflow-x:auto}main article kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,.25);box-shadow:0 1px 0 rgba(63,63,63,.25);background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap;font-size:.78em}main article code{font-size:.8em;white-space:nowrap;color:#c25;padding:1px 3px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:3px}main article .comment-count{font-size:.8em}main article table{border-collapse:collapse;border-spacing:0}main article table thead:first-child tr:first-child th{border-top:0}main article table td,main article table th{padding:8px;line-height:20px;vertical-align:top;border-top:1px solid #ddd}main footer{padding-top:4px;border-top:1px solid #eee}main footer p{margin:2px;text-align:center;padding:0 40px;color:#999;font-size:11px}.tag-cloud a{background-color:#d9411e;padding:.2em .6em;font-size:.74em;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.tag-cloud a:hover{background-color:#ff5a09}a.btn{background-color:#d9411e;padding:.6em;font-size:.8em;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.btn:hover{background-color:#ff5a09}.center,.text-center{text-align:center}.img-center{margin-left:auto;margin-right:auto;display:block}.float-left{float:left}.float-right{float:right}div.related-posts{margin:15px 0;padding-bottom:20px;border-top:1px solid #eee;border-bottom:1px solid #eee}div.related-posts h4{margin:20px 0 25px}div.related-posts ul{font-size:1.1em;padding-left:12px}div.related-posts ul li{padding:4px 0}ul.list,ul.related-posts,ul.social{list-style-type:none;margin:0;padding:0}ul.list{padding:1em 0}ul.list li{padding:4px}ul.social{font-size:1.6em;padding-top:20px}ul.social li{display:inline}ul.social a:hover{z-index:1;-webkit-transform:translateY(-5px);transform:translateY(-5px)}ul.social a{display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;font-size:.8em;line-height:36px}ul.social a.sc-facebook{background-color:#3e5b98}ul.social a.sc-google{background-color:#d93e2d}ul.social a.sc-pinterest{background-color:#c92619}ul.social a.sc-linkedin{background-color:#3371b7}ul.social a.sc-rss{background-color:#f26109}ul.social a.sc-stack-overflow{background-color:#f90}ul.social a.sc-twitter{background-color:#4da7de}ul.social a.sc-youtube{background-color:#e02a20}ul.social a.sc-github,ul.social a.sc-github-alt{background-color:#111010}ul.social a.sc-envelope-o{background-color:#578ad6}ul.social a.sc-reddit{background-color:#ff4500}ul.social a.sc-soundcloud{background-color:#f50}ul.social a.sc-gitlab{background-color:#fca326}ul.social a.sc-xing{background-color:#007575}.ads-aside{display:inline-block;height:90px;width:70%}.ads-responsive{display:inline-block;margin:6px 0;width:90%;height:70px;margin-left:5%}@media screen and (min-width:768px){aside{width:25%;height:100%;position:fixed;top:0;left:0;overflow-y:auto}aside div{padding:36px 18px}aside div nav ul li{padding:0!important;display:block}aside div ul.social{padding-top:32px}main{width:75%;height:100%;position:absolute;top:0;left:25%}main article.single{min-height:80%}main article ul.list li{padding:2px}.ads-aside{height:250px}.ads-responsive{height:90px}}
\ No newline at end of file
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+  line-height: 1.1;
+}
+h1 {
+  font-size: 2.4em;
+}
+h2 {
+  font-size: 2em;
+}
+h3 {
+  font-size: 1.6em;
+}
+h4 {
+  font-size: 1.36em;
+}
+h5 {
+  font-size: 1.2em;
+}
+h6 {
+  font-size: 1.1em;
+}
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #fdf6e3;
+  color: #002b36;
+  font-family: 'Source Sans Pro', 'Verdana', sans-serif;
+  font-size: 1.02em;
+  line-height: 1.2em;
+}
+a {
+  color: #073642;
+  text-decoration: none;
+}
+a:hover {
+  color: #93a1a1;
+}
+hr {
+  color: #657b83;
+  background-color: #657b83;
+  height: 1px;
+  border: none;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+img {
+  max-width: 100%;
+}
+aside {
+  background-color: #586e75;
+  color: #fdf6e3;
+  text-align: center;
+}
+aside a {
+  color: #fdf6e3;
+}
+aside a:hover {
+  color: #657b83;
+}
+aside div {
+  padding: 20px;
+  margin: 0;
+}
+aside div img {
+  border-radius: 50%;
+  max-width: 140px;
+}
+aside div h1 {
+  margin: 15px 0 5px 0;
+}
+aside div p {
+  margin: 0 0 15px 0;
+  font-size: .92em;
+}
+aside nav ul li {
+  display: inline;
+  line-height: 1.6em;
+  font-size: 1.28em;
+  text-transform: lowercase;
+}
+main nav {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: .72em;
+  padding: 14px 0 14px 0;
+  border-bottom: #657b83 1px solid;
+}
+main nav a {
+  padding: 0 4px 0 4px;
+  border-right: #657b83 1px solid;
+}
+main nav :first-child {
+  border-left: #657b83 1px solid;
+}
+main .pagination {
+  margin: 4% 8% 4% 8%;
+  height: 20px;
+}
+main .social-share p {
+  font-size: .8em;
+}
+main article {
+  margin: 0 8% 2% 8%;
+}
+main article header h1,
+main article header h2 {
+  margin-bottom: 0;
+}
+main article header p {
+  color: #073642;
+  font-size: 0.86em;
+}
+main article code,
+main article kbd,
+main article samp,
+main article pre {
+  font-family: 'Source Code Pro', 'Consolas', monospace;
+}
+main article blockquote,
+main article pre {
+  background-color: rgba(128, 128, 128, 0.05);
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-left: 8px solid rgba(128, 128, 128, 0.075);
+  border-left-width: 10px;
+}
+main article blockquote {
+  padding: 10px 20px;
+  font-weight: 300;
+  font-size: 1.1em;
+}
+main article pre {
+  padding: 4px;
+  font-size: .9em;
+  overflow-x: auto;
+}
+main article samp {
+  white-space: pre;
+  display: block;
+  overflow-x: auto;
+}
+main article kbd {
+  padding: .1em .6em;
+  border: 1px solid rgba(63, 63, 63, 0.25);
+  box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
+  background-color: #fff;
+  color: #333;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 0 .1em;
+  white-space: nowrap;
+  font-size: .78em;
+}
+main article code {
+  font-size: .8em;
+  white-space: nowrap;
+  color: #c25;
+  padding: 1px 3px;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+  border-radius: 3px;
+}
+main article .comment-count {
+  font-size: .8em;
+}
+main article table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+main article table thead:first-child tr:first-child th {
+  border-top: 0;
+}
+main article table th,
+main article table td {
+  padding: 8px;
+  line-height: 20px;
+  vertical-align: top;
+  border-top: 1px solid #ddd;
+}
+main footer {
+  padding-top: 4px;
+  border-top: #657b83 1px solid;
+}
+main footer p {
+  margin: 2px;
+  text-align: center;
+  padding: 0 40px 0 40px;
+  color: #073642;
+  font-size: 11px;
+}
+.tag-cloud a {
+  background-color: #073642;
+  padding: .2em .6em .2em;
+  font-size: .74em;
+  line-height: 1;
+  color: #fdf6e3;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+}
+.tag-cloud a:hover {
+  background-color: #93a1a1;
+}
+a.btn {
+  background-color: #073642;
+  padding: .6em .6em;
+  font-size: .8em;
+  line-height: 1;
+  color: #fdf6e3;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+}
+a.btn:hover {
+  background-color: #93a1a1;
+}
+.center,
+.text-center {
+  text-align: center;
+}
+.img-center {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+.float-left {
+  float: left;
+}
+.float-right {
+  float: right;
+}
+div.related-posts {
+  margin: 15px 0 15px 0;
+  padding-bottom: 20px;
+  border-top: #657b83 1px solid;
+  border-bottom: #657b83 1px solid;
+}
+div.related-posts h4 {
+  margin: 20px 0 25px 0;
+}
+div.related-posts ul {
+  font-size: 1.1em;
+  padding-left: 12px;
+}
+div.related-posts ul li {
+  padding: 4px 0 4px 0;
+}
+ul.list,
+ul.social,
+ul.related-posts {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+ul.list {
+  padding: 1em 0 1em 0;
+}
+ul.list li {
+  padding: 4px;
+}
+ul.social {
+  font-size: 1.6em;
+  padding-top: 20px;
+}
+ul.social li {
+  display: inline;
+}
+ul.social a:hover {
+  z-index: 2;
+  -webkit-transform: translateY(-5px);
+  transform: translateY(-5px);
+}
+ul.social a {
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  border-radius: 100%;
+  text-align: center;
+  font-size: .8em;
+  line-height: 36px;
+}
+ul.social a.sc-facebook {
+  background-color: #3e5b98;
+}
+ul.social a.sc-google {
+  background-color: #d93e2d;
+}
+ul.social a.sc-pinterest {
+  background-color: #c92619;
+}
+ul.social a.sc-linkedin {
+  background-color: #3371b7;
+}
+ul.social a.sc-rss {
+  background-color: #f26109;
+}
+ul.social a.sc-stack-overflow {
+  background-color: #ff9900;
+}
+ul.social a.sc-twitter {
+  background-color: #4da7de;
+}
+ul.social a.sc-youtube {
+  background-color: #e02a20;
+}
+ul.social a.sc-github,
+ul.social a.sc-github-alt {
+  background-color: #111010;
+}
+ul.social a.sc-envelope-o {
+  background-color: #578AD6;
+}
+ul.social a.sc-reddit {
+  background-color: #ff4500;
+}
+ul.social a.sc-soundcloud {
+  background-color: #ff5500;
+}
+ul.social a.sc-gitlab {
+  background-color: #fca326;
+}
+ul.social a.sc-xing {
+  background-color: #007575;
+}
+.ads-aside {
+  display: inline-block;
+  height: 90px;
+  width: 70%;
+}
+.ads-responsive {
+  display: inline-block;
+  margin: 6px 0 6px 0;
+  width: 90%;
+  height: 70px;
+  margin-left: 5%;
+}
+@media screen and (min-width: 768px) {
+  aside {
+    width: 25%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+  }
+  aside div {
+    padding: 36px 18px;
+  }
+  aside div nav ul li {
+    padding: 0 !important;
+    display: block;
+  }
+  aside div ul.social {
+    padding-top: 32px;
+  }
+  main {
+    width: 75%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 25%;
+  }
+  main article.single {
+    min-height: 80%;
+  }
+  main article ul.list li {
+    padding: 2px;
+  }
+  .ads-aside {
+    height: 250px;
+  }
+  .ads-responsive {
+    height: 90px;
+  }
+}
diff --git a/static/stylesheet/variables.less b/static/stylesheet/variables.less
index be729de..b2bbdb4 100644
--- a/static/stylesheet/variables.less
+++ b/static/stylesheet/variables.less
@@ -1,52 +1,52 @@
-// Flex colors
-@orange: #D9411E;
-@light-orange: #FF5A09;
-@white:  #ffffff;
-@grey: #333333;
-@light-grey:  #eeeeee;
-@med-grey:  #999999;
-@dark-grey: #242121;
+// solarized colors
+@base02: #073642;
+@base1: #93a1a1;
+@base3:  #fdf6e3;
+@base01: #586e75;
+@base00:  #657b83;
+@base02:  #073642;
+@base03: #002b36;
 
 // Font family
 @sans: 'Source Sans Pro', 'Verdana', sans-serif;
 @mono: 'Source Code Pro', 'Consolas', monospace;
 
 // Body
-@body-bg: @white;
-@text-color: @dark-grey;
+@body-bg: @base3;
+@text-color: @base03;
 
 // Links
-@link-color: @orange;
-@link-hover-color: @light-orange;
+@link-color: @base02;
+@link-hover-color: @base1;
 
 // Sidebar (aside)
-@sidebar-bg: @grey;
-@sidebar-text-color: @white;
-@sidebar-link-color: @white;
-@sidebar-link-hover-color: @light-grey;
+@sidebar-bg: @base01;
+@sidebar-text-color: @base3;
+@sidebar-link-color: @base3;
+@sidebar-link-hover-color: @base00;
 
 // Buttons
-@btn-bg: @orange;
-@btn-text-color: @white;
-@btn-hover-color: @light-orange;
+@btn-bg: @base02;
+@btn-text-color: @base3;
+@btn-hover-color: @base1;
 
 // Tag cloud
-@tag-bg: @orange;
-@tag-text-color: @white;
-@tag-hover-color: @light-orange;
+@tag-bg: @base02;
+@tag-text-color: @base3;
+@tag-hover-color: @base1;
 
 // Header
-@header-text-color: @med-grey;
+@header-text-color: @base02;
 
 // Footer
-@footer-text-color: @med-grey;
-@footer-border-color: @light-grey;
+@footer-text-color: @base02;
+@footer-border-color: @base00;
 
 // Relativer posts
-@rel-post-border-color: @light-grey;
+@rel-post-border-color: @base00;
 
 // Nav
-@nav-border-color: @light-grey;
+@nav-border-color: @base00;
 
 // Social buttons