Add dark mode 😎 (#357)

* Add dark mode 😎

Signed-off-by: Mauro Morales <[email protected]>

* Fix homepage downloads text

Signed-off-by: Mauro Morales <[email protected]>

---------

Signed-off-by: Mauro Morales <[email protected]>

Author: mauromorales

assets/js/kairos.js

@@ -97,13 +97,11 @@ function replaceContent(distroInfo) {
             // Insert the new alert div above the highlight element
             highlightElement.parentNode.insertBefore(alertDiv, highlightElement);
 
-            console.log(onlyDistros[0])
             const availableDistro = getSelectValueFromText(onlyDistros[0].replace(/\+/g, ' '));
-        console.log(availableDistro)
             newDistroInfo = availableDistro.split(';');
         }
 
-        const preTags = highlightElement.querySelectorAll('pre');
+        const preTags = highlightElement.querySelectorAll('code');
         const aTags = highlightElement.querySelectorAll('a');
 
         const elements = [...preTags, ...aTags];
@@ -119,8 +117,6 @@ function replaceContent(distroInfo) {
     metaDistroElements.forEach(e => {
         e.innerHTML = decodeHTML(replaceVariables(e.dataset.originalContent, newDistroInfo));
     });
-
-    Prism.highlightAll();
 }
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -133,7 +129,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     highlightElements.forEach(highlightElement => {
-        const preElements = highlightElement.querySelectorAll('pre');
+        const preElements = highlightElement.querySelectorAll('code');
         const aElements = highlightElement.querySelectorAll('a');
         const elements = [...preElements, ...aElements];
         elements.forEach((e, i) => {

assets/scss/_styles_project.scss

@@ -700,6 +700,7 @@ footer {
     height: 100%;
     box-shadow: none;
     font-family: 'NOTO SANS';
+    color: black;
 }
 
 .download-cards > div > div:first-child {
@@ -1480,23 +1481,10 @@ footer {
     }
 }
 
+@import 'td/code-dark';
 // load variables_project
 @import "variables_project";
 
-.alert-primary {
-    background-color: #edf1ff;
-    border-color: #4c7bd7;
-
-    .alert-heading {
-        color: #4c7bd7;
-    }
-}
-.alert-info {
-    .alert-heading {
-        color: #71b7b1;
-    }
-}
-
 // center the distro select vertically
 .distro-select-wrapper {
     display: flex;

assets/scss/_variables_project.scss

@@ -42,4 +42,4 @@ a:hover {
 
 #basics-blade a {
     color: #EE5007;
-}
+}

content/en/docs/Advanced/after-install.md

@@ -39,7 +39,7 @@ To install [system-upgrade-controller](https://github.com/rancher/system-upgrade
 kubectl apply -f https://github.com/rancher/system-upgrade-controller/releases/download/{{< system-upgrade-controller-version >}}/system-upgrade-controller.yaml
 ```
 
-{{% alert title="Note" %}}
+{{% alert title="Note" color="success" %}}
 
 Several roll-out strategies can be used with `system-upgrade-controller` which are not illustrated here in this example. For instance, it can be specified in the number of hosts which are running the upgrades, filtering by labels, and more. [Refer to the project documentation](https://github.com/rancher/system-upgrade-controller) on how to create efficient strategies to roll plans on the nodes. In the example above, the plans are applied to every host of the cluster, one-by-one in sequence.
 

content/en/docs/Advanced/build.md

@@ -4,7 +4,7 @@ linkTitle: "Build"
 weight: 5
 ---
 
-{{% alert title="Note" %}}
+{{% alert title="Warning" color="warning" %}}
 
 This page is a work in progress!
 The feature is experimental and API is likely going to be subject to changes, don't rely on it yet!

content/en/docs/Advanced/bundles.md

@@ -83,7 +83,7 @@ metallb:
   address_pool: 192.168.1.10-192.168.1.20
 ```
 
-{{% alert title="Warning" %}}
+{{% alert title="Warning" color="warning" %}}
 For both types of bundle installation (after installation, on first boot),
 the installation only happens once. Changing the bundle's configuration block
 after Kairos installation is complete, will not have any effect.

content/en/docs/Advanced/livelayering.md

@@ -68,7 +68,7 @@ For example, a bundle can be defined as a naked container image containing only
 Consider the following Dockerfile to create an extension which adds `/usr/bin/ipfs` to the system:
 
 
-{{% alert title="Note" %}}
+{{% alert title="Note" color="success" %}}
 Note that systemd extensions require an extension-release file, which can be used to validate different aspects of the system being run.
 
 If you don't want to limit to a single OS, you can use the special key `_any` but keep in mind that this is only available in systemd versions 252+.

content/en/docs/Advanced/sys-extensions.md

@@ -57,7 +57,7 @@ Then you can use the `systemd-repart` tool to create the sysext image:
 $ systemd-repart -S -s SOURCE_DIR NAME.sysext.raw --private-key=PRIVATE_KEY --certificate=CERTIFICATE
 ```
 
-{{% alert title="Warning" %}}
+{{% alert title="Warning" color="warning" %}}
 Note that the extensions MUST have a `/usr/lib/extension-release.d/extension-release.NAME` file in which the NAME needs to match the sysext NAME (extension is ignored). This is an enforcement by systemd to ensure the sysext is correctly identified and some sanity checks are done with the info in that file.
 {{% /alert %}}
 

content/en/docs/Architecture/network.md

@@ -14,7 +14,7 @@ To address these challenges, Kairos provides an easy and robust solution for dep
 
 In this document, we will examine the advantages of using Kairos to deploy Kubernetes clusters at the edge, and how p2p technology facilitates self-coordination for a zero-touch configuration experience. We will also explore how Kairos' highly adaptable and container-based approach, combined with an immutable OS and meta-distribution, makes it an excellent choice for edge deployments.
 
-{{% alert title="Note" %}}
+{{% alert title="Note" color="success" %}}
 You can also watch our [Kairos and libp2p video]({{< relref "../media/#how-kairos-uses-libp2p" >}} "Media") in the [Media Section]({{< relref "../media" >}} "Media")
 {{% /alert %}}
 

content/en/docs/Development/nvidia.md

@@ -10,7 +10,7 @@ description: This page contains a reference on how to run Kairos on Nvidia Jetso
 Despite the Flavor you may have selected to look into the docs. The Nvidia AGX Orin only works with Ubuntu 20.04
 {{% /alert %}}
 
-{{% alert title="Note" %}}
+{{% alert title="Note" color="success" %}}
 Please note that the following page contains only development reference. At the time of writing, we have tried porting Kairos to Jetson Nano eMMC without success. This is due to the old kernel supported (4.9), not properly working with `EFISTUB` and `U-boot` (you can see the [issue here](https://github.com/kairos-io/kairos/issues/45)). However, the steps outlined _should_ be a good reference to port Kairos to those architecture _when_ a new kernel version is available. We have tested, and have successfully booted a Jetson Nano with the 5.15 kernel, however, due to the lack of driver support, eMMC partitions are not properly recognized.
 {{% /alert %}}