:art: dark mode

2 files changed, 53 insertions, 30 deletions

diff --git a/src/css/custom.css b/src/css/custom.css
index e070193..8c0ce19 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,10 +1,33 @@
 /* stylelint-disable selector-list-comma-newline-after */
 
+html, body {
+    background-color: #333333;
+}
+
+.text-muted {
+   color: #cecece !important
+}
+
+.text-unmuted {
+    color: #e6e6e6 !important;
+    border-bottom: 1px solid #fff !important;
+    padding-bottom: 3px !important;
+}
+
+.dark-box {
+    background-color: #333333;
+    border: 1px solid #cecece;
+}
+
 .blog-header {
     line-height: 1;
     border-bottom: 1px solid #e5e5e5;
 }
 
+.dark-footer {
+    background-color: #292929 !important;
+}
+
 .blog-header-logo {
     font-family: "Playfair Display", Georgia, "Times New Roman", serif;
     font-size: 2.25rem;
diff --git a/src/index.html b/src/index.html
index 5d6a1d0..df4b1ff 100644
--- a/src/index.html
+++ b/src/index.html
@@ -32,7 +32,7 @@
                 </div>
 
                 <div class="col-4 text-center">
-                    <a class="blog-header-logo text-dark" href="/">Simulator</a>
+                    <a class="blog-header-logo text-light" href="/">Simulator</a>
                 </div>
 
                 <div class="col-4 text-center">
@@ -64,7 +64,7 @@
                 <img class="img-fluid rounded" src="images/example_image_cropped_900x400.png" alt="">
             </div>
             <!-- /.col-lg-8 -->
-            <div class="col-lg-4">
+            <div class="col-lg-4 text-light">
                 <h1>Generation and Simulation</h1>
                 <p>Generating star clusters and simulating the forces acting in them seemed like a good way to learn a lot of new programming concepts. You can find many of the results on this page and read the blogpost I update regularly by clicking on the button below.</p>
                 <a class="btn btn-primary btn-lg" href="https://www.tildeho.me/generating-galaxies/">Read the Blogpost!</a>
@@ -75,14 +75,14 @@
         <!-- Row 1 -->
         <div class="row mb-2">
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Documentation</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Writeup</a>
+                            <a class="text-light" href="#">Writeup</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">The complete project is documented so that everybody can access
+                        <p class="card-text text-light text-light mb-auto">The complete project is documented so that everybody can access
                             and use it a a reference for other projects.</p>
                         <a href="http://writeup.emile.space">Read the writeup</a>
                     </div>
@@ -90,14 +90,14 @@
                 </div>
             </div>
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Tech</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Code</a>
+                            <a class="text-light" href="#">Code</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">The simulator is completely writting in
+                        <p class="card-text text-light mb-auto">The simulator is completely writting in
                             <a href="https://golang.org/">go</a> and can be found in the git.
                         </p>
                         <a href="http://code.emile.space">Read the code</a>
@@ -110,14 +110,14 @@
         <!-- Row 2 -->
         <div class="row mb-2">
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Tech</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Generator</a>
+                            <a class="text-light" href="#">Generator</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">
+                        <p class="card-text text-light mb-auto">
                             The generator generates stars using the NFW profile.
                         </p>
                         <a href="http://code.emile.space/generator-container">Read the code</a>
@@ -126,14 +126,14 @@
                 </div>
             </div>
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Storage</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Database</a>
+                            <a class="text-light" href="#">Database</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">A <a href="https://www.postgresql.org/">PostgreSQL</a>
+                        <p class="card-text text-light mb-auto">A <a href="https://www.postgresql.org/">PostgreSQL</a>
                             database is used to store the stars.
                         </p>
                         <a href="http://code.emile.space/database-container">Read the code</a>
@@ -146,14 +146,14 @@
         <!-- Row 3 -->
         <div class="row mb-2">
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Tech</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Manager</a>
+                            <a class="text-light" href="#">Manager</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">
+                        <p class="card-text text-light mb-auto">
                             The manager container distributes the stars that need to be processed by providing them
                             to the simulation services.
                         </p>
@@ -163,14 +163,14 @@
                 </div>
             </div>
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Tech</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Simulator</a>
+                            <a class="text-light" href="#">Simulator</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">
+                        <p class="card-text text-light mb-auto">
                             The simulator continer gets stars from the manager, calculates their new position
                             and inserts them into the next timestep.
                         </p>
@@ -184,14 +184,14 @@
         <!-- Row 4 -->
         <div class="row mb-2">
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Load balancing</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Traefik</a>
+                            <a class="text-light" href="#">Traefik</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">
+                        <p class="card-text text-light mb-auto">
                             Routing traffic is done using <a href="https://traefik.io">Traefik</a>,
                             "A reverse proxy / load balancer that's easy, dynamic, automatic, fast [...]"
                         </p>
@@ -201,14 +201,14 @@
                 </div>
             </div>
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Monitoring</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Grafana + Prometheus</a>
+                            <a class="text-light" href="#">Grafana + Prometheus</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">
+                        <p class="card-text text-light mb-auto">
                             The metrics are pushed to <a href="https://prometheus.io">prometheus</a> and displayed in a nice dashboard using <a
                                     href="https://grafana.com">grafana</a>.
                         </p>
@@ -222,14 +222,14 @@
         <!-- Row 5 -->
         <div class="row mb-2">
             <div class="col-md-6">
-                <div class="card flex-md-row mb-4 box-shadow h-md-250">
+                <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box">
                     <div class="card-body d-flex flex-column align-items-start">
                         <strong class="d-inline-block mb-2 text-primary">Visualizing</strong>
                         <h3 class="mb-0">
-                            <a class="text-dark" href="#">Manager</a>
+                            <a class="text-light" href="#">Manager</a>
                         </h3>
                         <div class="mb-1 text-muted">Feb 3 2019</div>
-                        <p class="card-text mb-auto">
+                        <p class="card-text text-light mb-auto">
                             The manager container distributes the stars that need to be processed by providing them
                             to the simulation services.
                         </p>
@@ -241,7 +241,7 @@
         </div>
     </div>
 
-    <footer class="blog-footer">
+    <footer class="blog-footer dark-footer">
         <p> Design adapted from the Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
         <p>
             <a href="#">Back to top</a>