Adding support for dark mode (#31)

Author: wietze

_includes/page_title.html

@@ -3,6 +3,6 @@ <h1>{%- if page.url != '/' -%}
     {%- endif -%}
     {{- include.title -}}
     <div class="github-buttons">
-        <a class="github-button" href="https://github.com/LOLBAS-Project/LOLBAS" data-icon="octicon-star" data-show-count="true" aria-label="Star LOLBAS-Project/LOLBAS on GitHub">Star</a>
+        <a class="github-button" href="https://github.com/LOLBAS-Project/LOLBAS" data-icon="octicon-star" data-show-count="true" data-size="large" data-color-scheme="no-preference: light; light: light; dark: dark;" aria-label="Star LOLBAS-Project/LOLBAS on GitHub">Star</a>
     </div>
 </h1>

assets/style.scss

@@ -1,7 +1,9 @@
 ---
 ---
 $accent: #2fc0f0;
+$bg-dark: #212830;
 $lighter: lighten($accent, 40%);
+$darker: mix($accent, $bg-dark, 20%);
 $hover: #0d89b3;
 
 // layout
@@ -216,12 +218,7 @@ h3 {
 // other classes
 
 .logo {
-    $margin: 20px;
-    float: right;
-    width: 100px;
-    height: 100px;
-    margin-left: $margin;
-    margin-bottom: $margin;
+    margin-right: 10px;
 }
 
 .bin-name {
@@ -261,6 +258,8 @@ ul {
 .external-favicon {
     width: 16px;
     vertical-align: middle;
+    font-size: 0;
+    display: inline-flex;
 }
 
 #contributors {
@@ -481,3 +480,63 @@ $xy-border: (
       opacity: 1;
     }
   }
+
+  @media (prefers-color-scheme: dark) {
+    body {
+        background: $bg-dark;
+        color: white;
+    }
+
+    input {
+        color: white;
+        background: lighten($bg-dark, 10%);
+        border: 1px solid lighten($bg-dark, 40%);
+    }
+
+    input::placeholder {
+         color: lighten($bg-dark, 40%);
+    }
+
+    code,
+    pre {
+        background: $darker;
+        color: inherit;
+    }
+
+    #bin-table tbody tr:hover {
+        background: $darker;
+    }
+
+    .tag {
+        background-color: $darker;
+    }
+
+    .github-corner svg {
+        fill: #585858!important;
+    }
+
+    code .path {
+        color: lighten($accent, 10%);
+        border-bottom: 1px dashed #ccc;
+    }
+
+    img.logo {
+        filter: drop-shadow(0 0 3px rgb(255, 255, 255));
+    }
+
+    .function-list  div {
+        border: 1px solid $darker;
+        background-color: lighten($bg-dark, 2%);
+
+        a:link,
+        a:visited {
+            color: $accent;
+        }
+
+        &:hover,
+        a:hover {
+            color: $hover;
+            border-color: $hover;
+        }
+    }
+}

index.md

@@ -12,7 +12,7 @@ title: LOLBAS
 </script>
 
 <div class="header-box">
-<a href="https://github.com/LOLBAS-Project/LOLBAS/blob/master/README.md"><img src="{{ '/assets/logo.png' | relative_url }}" height="150" alt="{{site.title}} Logo" style="margin-right: 10px;"></a>
+<a href="https://github.com/LOLBAS-Project/LOLBAS/blob/master/README.md"><img src="{{ '/assets/logo.png' | relative_url }}" height="150" alt="{{site.title}} Logo" class="logo"></a>
 <div>
 <h2 style="margin-top: 0">Living Off The Land Binaries, Scripts and Libraries</h2>