Move color related CSS into color-scheme.css

2 files changed, 83 insertions, 51 deletions

diff --git a/static/css/color-theme.css b/static/css/color-theme.css
index 4599a4c..cd24050 100644
--- a/static/css/color-theme.css
+++ b/static/css/color-theme.css
@@ -7,8 +7,51 @@ From material design color palette:
 
 #bdbdbd - Gray 400
 #616161 - Gray 700
+
+#000000 - Black
+
+...1B - 10% transparent
+...4D - 30% transparent
+...80 - 50% transparent
 */
+.delimiter{
+    border-bottom: 1px solid #0000001B;
+}
+
+.header-text {
+    background-color: #0000004d;
+    color: #fff;
+}
+
+.header-text .tag-line {
+    color: #fff;
+}
+
+.header-text h1 a {
+    color: #fff;
+}
+
+/* The social-icons */
+.global-footer .sns-links a {
+    border: 1px solid #0000004d;
+    color: #0000004d;
+}
+
+.global-footer .sns-links a:hover {
+    border: 1px solid #33691e;
+    color: #33691e;
+}
+
+/* The whole footer-area */
+.global-footer {
+    color: #0000004d;
+}
 
+.post-date {
+    color: #0000004d;
+}
+
+/* Color for e.g. headers and links */
 .text-primary, a {
     color: #558b2f;
 }
@@ -17,9 +60,10 @@ a:hover {
     color: #33691e;
 }
 
-.global-footer .sns-links a:hover {
-    border: 1px solid #33691e;
-    color: #33691e;
+/* Tags of articles and pages */
+.post-tag a {
+  border: 1px solid #0000004d;
+  color: #0000004d;
 }
 
 .post-tag a:hover {
@@ -27,6 +71,31 @@ a:hover {
     color: #bdbdbd;
 }
 
+.not-found h1 {
+    color: #0000004d;
+}
+
+.author-bio {
+    color: #00000080;
+}
+
+/*
+TODO Remove older-posts and newer-posts, when the "pagination.html" also uses the btn-classes
+*/
+.older-posts, .newer-posts {
+    border: 1px solid #bdbdbd;
+}
+
+.older-posts:hover, .newer-posts:hover {
+    color: #889093;
+    border-color: #98a0a4;
+}
+
+.btn {
+    border: 1px solid transparent;
+}
+
+/* Primary buttons are the ones in the page (not in the header) */
 .btn-primary {
     background-color: transparent;
     border-color: #ccc;
@@ -44,6 +113,7 @@ a:hover {
     border-color: #bdbdbd;
 }
 
+/* Default buttons are the ones in the header */
 .btn-default {
   color: #fff;
   background-color: transparent;
@@ -55,7 +125,7 @@ a:hover {
 }
 
 .btn-default:hover {
-  color: #fff;
-  background-color: #bdbdbd4c;
-  border-color: #fff;
+    color: #fff;
+    background-color: #bdbdbd4d;
+    border-color: #fff;
 }
diff --git a/static/css/main.css b/static/css/main.css
index bf58e1f..180e8f0 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -13,15 +13,12 @@ main {
 .header-text {
     position: relative;
     min-height: inherit;
-    background-color: rgba(0, 0, 0, 0.3);
-    color: #fff;
 }
 
 .header-text .tag-line {
     margin: 25px auto;
     padding: 0 10px;
     max-width: 430px;
-    color: #fff;
     text-align: center;
     font-weight: 200;
 }
@@ -38,7 +35,6 @@ main {
 }
 
 .header-text h1 a {
-    color: rgba(255, 255, 255, 1.0);
     text-decoration: none;
 }
 
@@ -91,7 +87,6 @@ a.btn-home {
     padding-top: 10px;
     max-width: 750px;
     height: 100px;
-    color: rgba(0, 0, 0, 0.4);
 }
 
 .global-footer .sns-links {
@@ -102,9 +97,7 @@ a.btn-home {
     display: inline-block;
     width: 24px;
     height: 24px;
-    border: 1px solid rgba(0, 0, 0, 0.4);
     border-radius: 12px;
-    color: rgba(0, 0, 0, 0.4);
     vertical-align: top;
     text-align: center;
     text-decoration: none;
@@ -116,11 +109,6 @@ a.btn-home {
     vertical-align: middle;
 }
 
-.global-footer .sns-links a:hover {
-    border: 1px solid rgba(0, 0, 0, 0.8);
-    color: rgba(0, 0, 0, 0.7);
-}
-
 /* Article */
 
 .article-list h2 a {
@@ -140,26 +128,14 @@ a.btn-home {
     text-align: center;
 }
 
-.post-date {
-    color: rgba(0, 0, 0, 0.4);
-}
-
 .post-tag a {
     padding: 0 10px;
-    border: 1px solid rgba(0, 0, 0, 0.3);
     border-radius: 12px;
-    color: rgba(0, 0, 0, 0.3);
     text-decoration: none;
     transition: color,border-color,background-color 0.1s linear;
 }
 
-.post-tag a:hover {
-    background-color: rgba(0, 0, 0, 1.0);
-    color: rgba(255, 255, 255, 1.0);
-}
-
 .not-found h1 {
-    color: rgba(0, 0, 0, 0.2);
     font-weight: 200;
     font-size: 80px;
 }
@@ -176,10 +152,6 @@ a.btn-home {
     margin: 0 0 5px 0;
 }
 
-.author-bio {
-    color: rgba(0, 0, 0, 0.5);
-}
-
 .author-avatar img {
     max-width: 100px;
     max-height: 100px;
@@ -199,39 +171,31 @@ a.btn-home {
     text-align: center;
 }
 
-.older-posts,.newer-posts
-{
+.older-posts,.newer-posts {
     display: inline!important;
-    border: 1px solid #ddd;
     border-radius: 15px;
     text-decoration: none;
     transition: border .3s ease;
     padding: 5px 14px;
 }
 
-.page-number
-{
+.page-number {
     display: inline-block;
     min-width: 100px;
     padding: 2px 0;
 }
 
-.newer-posts
-{
+/*
+TODO Remove older-posts and newer-posts, when the "pagination.html" also uses the btn-classes
+*/
+.newer-posts {
     float: left;
 }
 
-.older-posts
-{
+.older-posts {
     float: right;
 }
 
-.older-posts:hover,.newer-posts:hover
-{
-    color: #889093;
-    border-color: #98a0a4;
-}
-
 /* Article list */
 
 .li-h1 {
@@ -304,7 +268,6 @@ article section img {
 }
 
 .btn {
-    border: 1px solid transparent;
     font-size: 13px;
     line-height: 1.58823529;
     border-radius: 3px;
@@ -341,5 +304,4 @@ I don't use the default pager-class because I want to use the normal buttons wit
     margin-right: -20px;
     margin-top: 20px;
     margin-bottom: 20px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }