Deploy wowwood/blue-site to wowwood/blue-site:gh-pages

CNAME

@@ -0,0 +1 @@
+whatthe.blue

VERSION.txt

@@ -0,0 +1 @@
+5.4.1

class-banner.css

@@ -0,0 +1,48 @@
+/* classification banners */
+
+.class-banner {
+    text-transform: uppercase;
+    font-size: 16px;
+    line-height: 1;
+    text-align: center;
+    padding: 6px 0;
+    font-weight: bold;
+    font-family: "Helvetica Neue", sans-serif;
+    letter-spacing: 1px;
+  }
+
+  .class-banner--not-set {
+    background-color: #616161;
+    color: white;
+  }
+
+  .class-banner--unclassified {
+    background-color: #007a33;
+    color: white;
+  }
+
+  .class-banner--controlled {
+    background-color: #502b85;
+    color: white;
+  }
+
+  .class-banner--conf {
+    background-color: #0033a0;
+    color: white;
+  }
+
+  .class-banner--s {
+    background-color: #c8102e;
+    color: white;
+  }
+
+  .class-banner--top-secret {
+    background-color: #ff8c00;
+    color: black;
+  }
+
+  .class-banner--ts-sci {
+    background-color: #fce83a;
+    color: black;
+  }
+

colourchange.js

@@ -0,0 +1,11 @@
+function colourchange(e) {
+    if (e.style.webkitAnimationName !== 'colourchange') {
+      e.style.webkitAnimationName = 'colourchange';
+      e.style.webkitAnimationDuration = '4s';
+
+      // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect
+      setTimeout(function () {
+        e.style.webkitAnimationName = '';
+      }, 4000);
+    }
+  }

dark-light-theme.js

@@ -0,0 +1,75 @@
+/**
+ * source:
+ * https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f
+ * 
+ * 
+* Utility function to calculate the current theme setting.
+* Look for a local storage value.
+* Fall back to system setting.
+* Fall back to light mode.
+*/
+function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
+    if (localStorageTheme !== null) {
+      return localStorageTheme;
+    }
+
+    if (systemSettingDark.matches) {
+      return "dark";
+    }
+
+    return "light";
+  }
+
+/**
+* Utility function to update the button text and aria-label.
+*/
+function updateButton({ buttonEl, isDark }) {
+    const newCta = isDark ? "☀️" : "🌛";
+    // use an aria-label if you are omitting text on the button
+    // and using a sun/moon icon, for example
+    buttonEl.setAttribute("aria-label", newCta);
+    buttonEl.innerText = ("aria-label", newCta);
+  }
+
+  /**
+  * Utility function to update the theme setting on the html tag
+  */
+  function updateThemeOnHtmlEl({ theme }) {
+    document.querySelector("html").setAttribute("data-theme", theme);
+  }
+
+
+  /**
+  * On page load:
+  */
+
+  /**
+  * 1. Grab what we need from the DOM and system settings on page load
+  */
+  const button = document.querySelector("[data-theme-toggle]");
+  const localStorageTheme = localStorage.getItem("theme");
+  const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+  /**
+  * 2. Work out the current site settings
+  */
+  let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
+
+  /**
+  * 3. Update the theme setting and button text according to current settings
+  */
+  updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
+  updateThemeOnHtmlEl({ theme: currentThemeSetting });
+
+  /**
+  * 4. Add an event listener to toggle the theme
+  */
+  button.addEventListener("click", (event) => {
+    const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
+
+    localStorage.setItem("theme", newTheme);
+    updateButton({ buttonEl: button, isDark: newTheme === "dark" });
+    updateThemeOnHtmlEl({ theme: newTheme });
+
+    currentThemeSetting = newTheme;
+  }); 

favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

flags.css

@@ -0,0 +1,24 @@
+:root {
+    --rainbow: linear-gradient(
+      45deg,
+      #e40303 0% 10%,
+      #ff8c00 10% 20%,
+      #ffed00 20% 30%,
+      #008026 30% 40%,
+      #0044ff 40% 50%,
+      #750787 50% 60%,
+      #ffffff 60% 70%,
+      #ffafc8 70% 80%,
+      #74d7ee 80% 90%,
+      #613915 90% 100%
+    );
+    --trans: linear-gradient(
+     90deg,
+      #74d7ee 0% 20%,
+      #ffafc8 20% 40%,
+      #ffffff 40% 60%,
+      #ffafc8 60% 80%,
+      #74d7ee 80% 100%
+    );
+
+  }