:art: dark mode

3 files changed, 76 insertions, 37 deletions

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 5c5b038..4b09fc8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,10 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="a9164191-d370-492b-893b-7d5187d87f7c" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/src/.main.go.swp" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main.go" beforeDir="false" afterPath="$PROJECT_DIR$/src/main.go" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/redesign.html" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/custom.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/custom.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -15,11 +14,20 @@
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="225">
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/index.html">
           <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="663">
+              <caret line="243" column="41" selection-start-line="243" selection-start-column="41" selection-end-line="243" selection-end-column="41" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/css/custom.css">
+          <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="420">
-              <caret line="49" column="173" selection-start-line="49" selection-start-column="173" selection-end-line="49" selection-end-column="173" />
+              <caret line="28" selection-start-line="28" selection-end-line="28" />
             </state>
           </provider>
         </entry>
@@ -44,6 +52,7 @@
       <list>
         <option value="$PROJECT_DIR$/src/redesign2.html" />
         <option value="$PROJECT_DIR$/src/index.html" />
+        <option value="$PROJECT_DIR$/src/css/custom.css" />
       </list>
     </option>
   </component>
@@ -170,8 +179,15 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/index.html">
       <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="663">
+          <caret line="243" column="41" selection-start-line="243" selection-start-column="41" selection-end-line="243" selection-end-column="41" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/css/custom.css">
+      <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="420">
-          <caret line="49" column="173" selection-start-line="49" selection-start-column="173" selection-end-line="49" selection-end-column="173" />
+          <caret line="28" selection-start-line="28" selection-end-line="28" />
         </state>
       </provider>
     </entry>
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>