From 30f4597ffbcff1854a169944f3d7721552833de7 Mon Sep 17 00:00:00 2001
From: James Brundage <+@noreply.github.com>
Date: Sun, 27 Oct 2024 13:18:00 -0700
Subject: [PATCH] feat: Updating 4bitcss default layout ( Fixes #104, Fixes
 #106, Fixes #71, Fixes #90 )

Including htmx, highlight.js.  Using includes for icons.  Fixing media queries.   Removing Pipescript source, as it has become vestigial.
---
 docs/_layouts/default.html    |  51 +++++-----
 docs/_layouts/default.ps.html | 171 ----------------------------------
 2 files changed, 29 insertions(+), 193 deletions(-)
 delete mode 100644 docs/_layouts/default.ps.html
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 6db8007fa..67e3a0874 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -12,6 +12,21 @@
       gtag('js', new Date());
       gtag('config', '{{site.analyticsID}}');
     </script>
+    
+    <!-- htmx is nice -->
+    <script src='https://unpkg.com/htmx.org@latest'></script>
+    <!-- so is syntax highlighting, thanks to highlight js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <!-- This site shows source code in a few different languages:  -->
+
+    <!-- html -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/html.min.js"></script>
+    <!-- svg -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/svg.min.js"></script>
+    <!-- css -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
+    <!-- powershell -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/powershell.min.js"></script>
     {% endif %}
     <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
     <meta name="viewport" content="width=device-width" />
@@ -111,6 +126,10 @@
         }
       }
 
+      body > * { margin: 1em; }                
+      @media (max-width: 960px) {
+          body > * { margin: .5em; }
+      }
 
       body {
         width: 100%;
@@ -141,31 +160,19 @@
   </head>
 <body class="background foreground">
     <div style="position: fixed; margin-top: 1%; margin-right: 1%; right:3%; top:3%">
-    <a href='https://github.com/2bitdesigns/4bitcss'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" class="ansi6-stroke" /></svg></a></div>
-    <div class="centered halfOrWholeWidth flexible centered centeredFlex" style="margin-top:-5%">
-      <svg viewbox='0 0 200 200' width='33%' height='33%' class='centered'><a href='/'><?xml version="1.0" encoding="utf-8"?>
-<!-- Generated with PSSVG 0.2.10 <https://github.com/StartAutomating/PSSVG> -->
-<svg viewBox="0 0 400 400" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <style type="text/css">@import url('https://fonts.googleapis.com/css?family=Abel')</style>
-  </defs>
-  <ellipse stroke-width="1.25" fill="transparent" cx="50%" cy="50%" stroke="#4488ff" ry="75" rx="50" class="foreground-stroke" />
-  <text font-size="28" x="50%" y="45%" class="foreground-fill" fill="#4488ff" text-anchor="middle" alignment-baseline="middle" style="font-family: 'Abel';">4bit</text>
-  <circle class="ansi1-fill" fill="#4488ff" cx="47.5%" cy="50%" r="0.5%" />
-  <circle class="ansi2-fill" fill="#4488ff" cx="48.75%" cy="50%" r="0.5%" />
-  <circle class="ansi3-fill" fill="#4488ff" cx="51.25%" cy="50%" r="0.5%" />
-  <circle class="ansi4-fill" fill="#4488ff" cx="52.55%" cy="50%" r="0.5%" />
-  <text font-size="28" x="50%" y="55%" class="foreground-fill" fill="#4488ff" text-anchor="middle" alignment-baseline="middle" style="font-family: 'Abel';">css</text>
-</svg>
-</a></svg></div>
-
+    <a href='https://github.com/2bitdesigns/4bitcss'>
+        {% include github-icon.svg %}
+    </a></div>
+    <div class="centered halfOrWholeWidth flexible centeredFlex" style="margin-top: -5%;">
+      <svg viewbox='0 0 200 200' width='33%' height='33%' class='centered'>
+        <a href='/'>{% include 4bitcss.svg %}</a>
+      </svg>
+    </div>
     {% if page.title %}
     <h1 class="centered halfOrWholeWidth flexible centered centeredFlex">{{ page.title }}</h1>
     {% endif %}
-    <div class="flexible centered centeredFlex halfOrWholeWidth" style="margin-top:-5%">
-      <div class="flexRow">
-        {{ content }}
-      </div>
+    <div class="centered centeredFlex" style="margin-top:-5%">
+      {{ content }}
     </div>
 </body>
 </html>
diff --git a/docs/_layouts/default.ps.html b/docs/_layouts/default.ps.html
deleted file mode 100644
index 89dac7a70..000000000
--- a/docs/_layouts/default.ps.html
+++ /dev/null
@@ -1,171 +0,0 @@
----
----
-<!DOCTYPE html>
-<html lang="{{ page.language | default: site.language | default: 'en' }}">
-  <head>
-    {% if site.analyticsID %}
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id={{site.analyticsID}}"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', '{{site.analyticsID}}');
-    </script>
-    {% endif %}
-    <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
-    <meta name="viewport" content="width=device-width" />
-    {% if page.stylesheet %}
-    <link rel="stylesheet" type="text/css" href="{{page.stylesheet}}" id="4bitcss" />
-    {% else %}
-    <link rel="stylesheet" type="text/css" href="/Konsolas.css" id="4bitcss" />
-    {% endif %}
-    <script type="text/javascript" src="/js/4bit.js"></script>
-    <title>{{site.title}}{% if page.title %} - {{page.title}}  {% elsif page.stylesheet %} - {{page.stylesheet}}{% endif %}</title>
-    <meta content="{{ site.title }}" property="og:site_name">
-    {% if page.title %}
-    <meta content="{{ page.title }}" property="og:title" />
-    {% elsif page.stylesheet %}
-    <meta content="{{ page.stylesheet }}" property="og:title" />
-    {% else %}
-    <meta content="{{ site.title }}" property="og:title" />
-    {% endif %}
-    {% if page.description %}
-    <meta content="{{ page.description }}" property="og:description" />
-    <meta name="description" content="{{ page.description }}" />
-    {% elsif site.description %}
-    <meta content="{{ site.description }}" property="og:description" />
-    {% endif %}
-    {% if page.date %}
-      <meta content="{{ page.date | date_to_xmlschema }}" property="article:published_time" />
-    {% endif %}
-    {% if page.url %}
-      <meta content="{{ site.url }}{{ page.url }}" property="og:url" />
-      <meta content="{{ site.url }}{{ page.url }}" property="twitter:url" />
-      <meta content="{{ site.url }}" property="twitter:domain" />
-    {% endif %}
-
-    {% if page.image %}
-      <meta content="{{ page.image }}" property="og:image" />
-      <meta content="{{ page.image }}" property="twitter:image" />
-    {% endif %}
-    <style>
-      .monospace {
-        font-family: 'Courier New', Courier, monospace;
-        white-space: pre;
-        max-width: 90%;
-      }
-
-      .flexible {
-        display: flex;
-      }
-      .centeredFlex {
-        justify-content: center;
-      }
-
-      .centered {
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .padded {
-        padding: 1em;
-      }
-
-      .centeredText {
-        text-align:center;
-      }
-
-      .flexRow {
-        flex-direction: row;
-      }
-      .flexColumn {
-        flex-direction: column;
-      }
-      .halfWidth {
-        width: 50%;
-      }
-
-      .halfOrWholeWidth {
-        width: 50%;
-      }
-
-      .collapsible {
-        visibility: visible;
-      }
-
-
-      .rowOrColumn {
-        flex-direction: row;
-      }
-
-      @media (max-width: 960px) {
-        .collapsible {
-            visibility: collapse;
-        }
-        .rowOrColumn {
-            flex-direction: column;
-        }
-        .halfOrWholeWidth {
-          width: 100%;
-        }
-      }
-
-
-      body {
-        width: 100%;
-        height: 100%;
-        font-family: 'Righteous';
-        letter-spacing: 0.15em;
-      }
-
-      pre, code {
-        font-family: monospace;
-        letter-spacing: normal;
-      }
-
-      a {
-        text-decoration: none;
-      }
-
-      table {
-        margin-left:auto;
-        margin-right:auto;
-      }
-
-      tr, th {
-        text-align: center;
-      }
-
-    </style>
-  </head>
-<body class="background foreground">
-    <div style="position: fixed; margin-top: 1%; margin-right: 1%; right:3%; top:3%">
-    <!--{
-$gitHubIcon = Invoke-RestMethod -Uri https://raw.githubusercontent.com/feathericons/feather/master/icons/github.svg
-      "<a href='https://github.com/2bitdesigns/4bitcss'>" + $(
-$gitHubIcon.svg.path.SetAttribute("class", "ansi6-stroke")
-$gitHubIcon.svg.OuterXML
-) + "</a>"
-      }-->
-    </div>
-    <div class="centered halfOrWholeWidth flexible centered centeredFlex" style="margin-top:-5%">
-      <!--{
-"<svg viewbox='0 0 200 200' width='33%' height='33%' class='centered'><a href='/'>" + $(
-$path = Split-Path $pwd |
-  Join-Path -ChildPath '4bitcss.svg'
-Get-Content -Path $path -Raw
-) + "</a></svg>"
-      }-->
-    </div>
-
-    {% if page.title %}
-    <h1 class="centered halfOrWholeWidth flexible centered centeredFlex">{{ page.title }}</h1>
-    {% endif %}
-    <div class="flexible centered centeredFlex halfOrWholeWidth" style="margin-top:-5%">
-      <div class="flexRow">
-        {{ content }}
-      </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
