Add table styling and color pallets (#30)

* Add table styling

* Add light color pallet

* Add pallet for dark theme

* Add font size to post page wrapper

* Remove footer border color variable

themes/gokarna/static/css/dark.css

@@ -1,47 +1,54 @@
-html {
-  background: #121212 !important;
-  color: white !important;
+:root {
+  /* dark theme colors */
+  --dark-bg-color: #121212;
+  --dark-text-color: white;
+  --dark-header-bg-color: #1f1f1f;
+  --dark-header-divider-color: #484848;
 }
 
-a {
-  color: white;
+html {
+  background-color: var(--dark-bg-color);
+  color: var(--dark-text-color);
 }
 
 .header {
   box-shadow: rgba(102, 102, 102, 0.5) 0px 1px 2px 0px;
-  background-color: #1f1f1f !important;
-  color: white !important;
+  background-color: var(--dark-header-bg-color);
 }
 
 .nav-links .nav-icons-divider {
-  color: #484848;
-}
-
-.post-tags .post-tag {
-  border: 1px solid white;
-  color: white;
+  color: var(--dark-header-divider-color);
 }
 
 .post-tags .post-tag:hover {
-  background-color: white;
-  color: black;
+  background-color: var(--dark-text-color);
+  color: var(--dark-bg-color);
 }
 
 .tags-list .post-tags .post-tag a .tag-posts-count {
-  background-color: #1f1f1f;
+  background-color: var(--dark-header-bg-color);
 }
 
 .tags-list .post-tags .post-tag:hover a .tag-posts-count {
-  background-color: white;
-  color: black;
+  background-color: var(--dark-text-color);
+  color: var(--dark-bg-color);
 }
 
 .footer {
-  border-top-color: #333 !important;
+  border-top-color: var(--dark-header-bg-color);
 }
 
 blockquote {
-  border-left-color: #333 !important;
+  border-left-color: var(--dark-header-divider-color);
+}
+
+table thead {
+  background-color: var(--dark-header-bg-color);
+}
+
+table td,
+table th {
+  border-bottom-color: var(--dark-header-divider-color);
 }
 
 /* TODO: Check if this is needed or not */

themes/gokarna/static/css/main.css

@@ -1,11 +1,16 @@
 :root {
   --accent-color: #ff4d4d;
   --content-width: 810px;
+  /* light theme colors */
+  --light-bg-color: white;
+  --light-text-color: black;
+  --light-header-bg-color: #f0f0f0;
+  --light-header-divider-color: #dfdfdf;
 }
 
 html {
-  background: white;
-  color: black;
+  background-color: var(--light-bg-color);
+  color: var(--light-text-color);
   font-family: "Jost", sans-serif;
   font-weight: 400;
   letter-spacing: 0.5px;
@@ -18,7 +23,7 @@ body {
 }
 
 a {
-  color: black;
+  color: inherit;
 }
 
 a:hover {
@@ -26,20 +31,20 @@ a:hover {
 }
 
 main#content {
-  width: var(--content-width);
   margin: 90px auto 0;
+  width: var(--content-width);
 }
 
 img {
-  width: var(--content-width);
   height: auto;
+  width: var(--content-width);
 }
 
 /* HEADER */
 .header {
-  background-color: rgb(240, 240, 240);
+  background-color: var(--light-header-bg-color);
   box-shadow: rgba(170, 170, 170, 0.5) 0px 1px 2px 0px;
-  color: black;
+  color: inherit;
   font-size: 1.05rem;
   height: 50px;
   left: 0;
@@ -100,8 +105,8 @@ img {
 .nav-links .nav-icons-divider {
   border-color: inherit;
   border-left: 1.5px solid;
+  color: var(--light-header-divider-color);
   margin: 0 10px;
-  color: #dfdfdf;
 }
 .nav-links #dark-theme-toggle:hover {
   cursor: pointer;
@@ -116,7 +121,7 @@ img {
 /* FOOTER */
 .footer {
   bottom: 0;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--light-header-bg-color);
   color: inherit;
   left: 0;
   overflow: hidden;
@@ -152,16 +157,16 @@ img {
   padding: 0;
 }
 .post-tags .post-tag {
-  border: 1px solid black;
+  border: 1px solid;
   border-radius: 4px;
   box-sizing: border-box;
-  color: black;
+  color: inherit;
   display: inline-block;
   font-size: 14px;
 }
 .post-tags .post-tag:hover {
-  background-color: black;
-  color: white;
+  background-color: var(--light-text-color);
+  color: var(--light-bg-color);
 }
 .post-tag a {
   color: inherit;
@@ -190,9 +195,29 @@ code {
 }
 
 blockquote {
-  border-left: 2px solid #e0e0e0;
-  padding-left: 1rem;
+  border-left: 2px solid var(--light-header-divider-color);
   color: grey;
+  padding-left: 1rem;
+}
+
+table {
+  border-collapse: collapse;
+  font-size: 1.05rem;
+  margin: 30px 0;
+  text-align: left;
+}
+
+table thead {
+  background-color: var(--light-header-bg-color);
+}
+
+table td,
+table th {
+  padding: 1.4rem;
+}
+
+table td {
+  border-bottom: 1px solid var(--light-header-divider-color);
 }
 
 /* HOME PAGE */
@@ -232,11 +257,13 @@ blockquote {
 }
 
 /* SINGLE */
+main#content .post {
+  font-size: 1.2rem;
+}
 .post .post-date {
   color: gray;
 }
 .post .post-content {
-  font-size: 1.2rem;
   line-height: 1.7;
   margin-top: 50px;
 }
@@ -273,7 +300,6 @@ blockquote {
   border-radius: inherit;
   padding: 0;
 }
-
 .tags-list .post-tags .post-tag a div {
   display: inline-block;
 }