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.
2bitdesigns · Oct 27, 2024 · 30f4597 · 30f4597
1 parent 949d13e
commit 30f4597
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 193 deletions.
diff --git 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