kloeckner.com.ar

Index Commits Files Refs README LICENSE

commit 2d5bc36e2f36198dc9ef8d81075657b27b3e71de
parent 596fbe42b74a70f40b03185ddcbf5f53c897c638
Author: mjkloeckner <martin.cachari@gmail.com>
Date:   Sun, 25 Sep 2022 18:54:06 -0300

Added support for dark-light theme based on system preference

Now the webpage follows the system prefered theme.

This is accomplished by adding the `@media (prefers-color-scheme: light)`
directive on all css files.

Diffstat:
M
css/about_style.css
 | 
6
++++++
M
css/article_style.css
 | 
10
++++++++++
M
css/style.css
 | 
86
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
index.html
 | 
2
+-

4 files changed, 103 insertions(+), 1 deletion(-)
diff --git a/css/about_style.css b/css/about_style.css
@@ -89,3 +89,9 @@ ul {
 #skills_heading {
     text-align: center;
 }
+
+@media (prefers-color-scheme: light) {
+    .article_bottom_bar {
+        border-top: 1px dashed white;
+    }
+}
diff --git a/css/article_style.css b/css/article_style.css
@@ -73,3 +73,13 @@ ul {
         width: 45%;
     }
 }
+
+@media (prefers-color-scheme: light) {
+    .article-date {
+        color: #7E5A9B;
+    }
+    .article_bottom_bar{
+        border-top: 1px dashed white;
+    }
+
+}
diff --git a/css/style.css b/css/style.css
@@ -143,6 +143,30 @@ article {
     border-radius: 1em;
 }
 
+.article_bottom_bar {
+    border: 0;
+    clear:both;
+
+    display:block;
+
+    background-color: #191919;
+
+    width: 60%;
+    max-width: 20em;
+    height: 0px;
+
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2em;
+    margin-bottom: 0;
+
+    padding-top: 0;
+    padding-bottom: 0;
+    /*! border-bottom: dashed; */
+    border-top: 1px dashed peru;
+}
+
+
 @media (max-width: 800px) {
     body {
         font-size: 16px;
@@ -171,6 +195,8 @@ article {
     }
     #header_title {
         font-size: 3em;
+        padding-left: .5em;
+        padding-right: .5em;
     }
 }
 
@@ -359,3 +385,63 @@ time {
     font-family: "Ubuntu Mono";
     /* font-family: "IBMPlexMono"; */
 }
+
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: white;
+        color: #090909;
+    }
+    article {
+        color: #090909;
+    }
+    #header_link {
+        color: #CC2936;
+    }
+    #header_link:hover {
+        color: #a04a00;
+    }
+    .header_bottom_bar {
+        border-top: 1px dashed white;
+    }
+    .article_bottom_bar {
+        border-top: 1px dashed white;
+    }
+    a:visited {
+        color: #a04a00;
+    }
+    a:link {
+        color: #a04a00;
+    }
+    a:hover {
+        color: #CC2936;
+    }
+    #index-title {
+        color: inherit;
+    }
+    code {
+        background-color: #eee;
+        border: 3px solid #aaa;
+        border-radius: 0px;
+        margin-top: 0;
+        box-shadow: 0px 0px 0px;
+    }
+    #command {
+        color: inherit;
+    }
+    #command_sym {
+        color: inherit;
+    }
+    #command_red {
+        color: inherit;
+    }
+    #go_top:hover {
+        color: #CC2936;
+    }
+    #go_top {
+        color: #a04a00;
+    }
+    img {
+        background: white;
+    }
+}
+
diff --git a/index.html b/index.html
@@ -32,7 +32,7 @@
             </ul>
 
             <p>See more <a href="/blog">blog entries</a></p>
-            <hr class="article_bottom_bar" style="margin-top: 1em;width: 60%;height: 0px;border-top: 1px dashed peru; max-width: 20em;">
+            <hr class="article_bottom_bar" style="margin-top: 1em;width: 60%;height: 0px; max-width: 20em;">
         </article>
 
         <!--#include virtual="/common/footer.shtml" -->