add footer marquee

public/buttons/cloudfree.svg

@@ -0,0 +1,148 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="88"
+   height="31"
+   viewBox="0 0 23.283333 8.2020836"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="cloudfree.svg"
+   inkscape:export-filename="/home/micah/cloudfree.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2">
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter839"
+       x="-8.9693963e-07"
+       width="1.0000018"
+       y="-2.3132372e-06"
+       height="1.0000046">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="6.3998645e-06"
+         id="feGaussianBlur841" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.1503298"
+     inkscape:cx="34.372592"
+     inkscape:cy="29.944151"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer4"
+     inkscape:document-rotation="0"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1616"
+     inkscape:window-height="829"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid849" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Button"
+     style="display:inline">
+    <rect
+       style="opacity:1;fill:#b8bec0;stroke:none;stroke-width:0.0696026;stroke-linejoin:bevel;stroke-opacity:1;fill-opacity:1"
+       id="rect847"
+       width="23.21373"
+       height="8.1324806"
+       x="0.034801044"
+       y="0.034801044" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Edges"
+     style="display:inline"
+     sodipodi:insensitive="true">
+    <path
+       style="fill:#000000;fill-opacity:0.621727;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 0,8.2020832 0.52916666,7.6729166 H 22.754166 V 0.52916666 L 23.283333,0 v 8.2020832 z"
+       id="path853" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.738906;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 0,0 H 23.283333 L 22.754166,0.52916666 H 0.52916666 V 7.6729166 L 0,8.2020832 Z"
+       id="path851" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="Icon">
+    <path
+       id="path885"
+       style="opacity:1;fill:#ffffff;fill-opacity:0.990424;stroke:#030101;stroke-width:0.258;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 3.9853801,2.3936447 C 3.5404707,2.3936298 3.1293405,2.646585 2.9068197,3.0572483 2.3399458,3.1638345 1.9266492,3.6888048 1.9265587,4.3023785 1.9263689,5.0008318 2.4574463,5.5671807 3.1127019,5.5673 3.8292886,5.555173 4.5674262,5.56207 5.2916667,5.56207 V 5.55625 C 5.765476,5.5466608 6.1449544,5.1346589 6.1452308,4.6295231 6.1451657,4.117419 5.755715,3.7022938 5.2752834,3.7022244 5.2603496,3.7022026 5.2454178,3.7025821 5.2305026,3.7033867 5.22134,2.9773091 4.666613,2.3937921 3.9853801,2.3936426 Z"
+       sodipodi:nodetypes="cccccccccc" />
+    <path
+       id="path963"
+       style="fill:none;fill-opacity:1;stroke:#b83434;stroke-width:0.6973;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 5.8208333,1.8520833 1.8520833,6.35 M 6.9814709,4.1343218 c 1e-7,1.6401527 -1.3296065,2.9697593 -2.9697592,2.9697592 -1.6401527,1e-7 -2.9697593,-1.3296065 -2.9697592,-2.9697592 -1e-7,-1.6401527 1.3296065,-2.9697593 2.9697592,-2.9697592 1.6401527,-1e-7 2.9697593,1.3296065 2.9697592,2.9697592 z"
+       sodipodi:nodetypes="ccsssss" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="Text">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:3.4657px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.288806"
+       x="10.061819"
+       y="4.7603002"
+       id="text861"
+       transform="scale(0.78483337,1.2741558)"><tspan
+         sodipodi:role="line"
+         x="10.061819"
+         y="4.7603002"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.4657px;font-family:'Comic Sans MS';-inkscape-font-specification:'Comic Sans MS Bold';stroke-width:0.288806"
+         id="tspan999">a computer</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:2.25627px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.282033"
+       x="8.0026188"
+       y="3.1872211"
+       id="text1089"
+       transform="scale(1.0530697,0.94960478)"><tspan
+         sodipodi:role="line"
+         id="tspan1087"
+         x="8.0026188"
+         y="3.1872211"
+         style="font-size:2.25627px;stroke-width:0.282033">runs on</tspan></text>
+  </g>
+</svg>

src/buttons/buttons.json

@@ -0,0 +1,58 @@
+[
+  {
+    "name": "CC-BY-NC-SA",
+    "link": "https://creativecommons.org/licenses/by-nc-sa/4.0/",
+    "image": "cc-by-nc-sa.gif"
+  },
+  {
+    "name": "88x31",
+    "link": "https://cyber.dabamos.de/88x31/index.html",
+    "image": "88x31.gif"
+  },
+  {
+    "name": "Anything but Chrome",
+    "image": "anythingbut.gif"
+  },
+  {
+    "name": "Linus Tech Tips",
+    "link": "https://linustechtips.com/",
+    "image": "freetechtips.gif"
+  },
+  {
+    "name": "Made with Neovim",
+    "link": "https://neovim.io/",
+    "image": "neovim.gif"
+  },
+  {
+    "name": "Made with pride [trans flag]",
+    "image": "mw_trans.gif"
+  },
+  {
+    "name": "Trans your gender",
+    "image": "transyourgender.gif",
+    "link": "https://diyhrt.wiki/"
+  },
+  {
+    "name": "ISO 8601",
+    "image": "iso8601.png",
+    "link": "https://xkcd.com/1179/"
+  },
+  {
+    "name": "Runs on a computer",
+    "image": "cloudfree.svg"
+  },
+  {
+    "name": "CSS is difficult",
+    "image": "cssdif.gif"
+  },
+  {
+    "name": "Download Sburb",
+    "image": "e-hs.gif",
+    "link": "https://homestuck.com/"
+  },
+  {
+    "name": "Powered by Rotom",
+    "image": "rotom.gif",
+    "link": "https://bulbapedia.bulbagarden.net/wiki/Rotom_(Pok%C3%A9mon)"
+  }
+]

src/buttons/buttons.ts

@@ -1,7 +0,0 @@
-const buttons = [
-  {
-    name: "88x31",
-    link: "https://cyber.dabamos.de/88x31/index.html",
-    image: "88x31.gif",
-  },
-];

src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
-import { buttons } from '@buttons/buttons'
+import buttons from '../buttons/buttons.json';
+import { Image } from 'astro:assets';
 const today = new Date();
 let themeObj = await import("../../public/themes.json");
 let themes = new Map(
@@ -46,14 +47,13 @@ themes.delete("default");
         ><!-- Yes I know the spec says sound file but fuck you -->miɹʌ</span
       >
     </div>
+      <wbr>
     is licensed under
     <!-- License -->
     <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" rel="license"
       >CC BY-NC-SA 4.0</a
     >
   </div>
-  <div class="buttons">
-    </div>
   <!-- Theme Switcher box -->
   <form style="display:inline-flex">
     <div class="form-group" style="display:inline-flex">
@@ -91,4 +91,20 @@ themes.delete("default");
       document.getElementById(theme)?.setAttribute("selected", "true")
     );
   </script>
+  <marquee class="buttons">
+    {
+    buttons.map((button) => {
+              const image = <Image class="button" src={`/buttons/${button.image}`} alt={button.name} width={88} height={31} />;
+
+      return !button.link?.startsWith('javascript:') ? (
+        <a href={button.link ?? undefined} title={button.name} target="_blank">
+          {image}
+        </a>
+      ) : (
+        <button title={button.name} onclick={button.link}>
+          {image}
+        </button>);
+      })
+    }
+    </marquee>
 </footer>

src/styles/global.css

@@ -268,3 +268,8 @@ ol ol ol ol ol ol ol ol ol {
 ol ol ol ol ol ol ol ol ol ol {
   list-style-type: hebrew;
 }
+
+.button {
+  width: 88px;
+  height: 31px;
+}