Setup buttons section of home page

PancakesWeb/Components/Pages/Home.razor

@@ -60,7 +60,7 @@
 
     <h2 id="contributions">Contributions</h2>
     <p>Projects that I do not maintain but have contributed to</p>
-    
+
     <ul class="links">
         @foreach (var link in Links.Contributions)
         {
@@ -77,4 +77,34 @@
             </li>
         }
     </ul>
+
+    <h2 id="buttons">Buttons</h2>
+    <p>Click my buttons</p>
+
+    <ImageButton Data="@Buttons.Pancakes"/>
+    <details>
+        <summary>Add my button</summary>
+        <pre><code>&lt;a href="@Buttons.Pancakes.Href" target="_blank"&gt;
+    &lt;img src="@Buttons.Pancakes.Href@Assets[$"imgs/buttons/{Buttons.Pancakes.Image}"]" alt"@Buttons.Pancakes.Title"&gt;
+&lt;/a&gt;</code></pre>
+        <p>The image URL may change in the future. Instead of hotlinking it you should <a href="@Assets[$"imgs/buttons/{Buttons.Pancakes.Image}"]" download="pancakes.png">download the image</a> manually.</p>
+    </details>
+
+    <ul class="buttons card">
+        @foreach (var button in Buttons.Entities.OrderBy(p => p.Title))
+        {
+            <li class="button">
+                <ImageButton Data="button"/>
+            </li>
+        }
+    </ul>
+
+    <ul class="buttons card">
+        @foreach (var button in Buttons.Things.OrderBy(p => p.Title))
+        {
+            <li class="button">
+                <ImageButton Data="button"/>
+            </li>
+        }
+    </ul>
 </main>

PancakesWeb/Components/Pages/Home.razor.css

@@ -50,6 +50,18 @@
     font-weight: bold;
 }
 
+.buttons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    list-style: none;
+}
+
+.button {
+    display: inline-flex;
+}
+
 @media screen and (max-width: 768px) {
     .accounts {
         flex-direction: column;

PancakesWeb/Components/UI/ImageButton.razor

@@ -0,0 +1,18 @@
+@using PancakesWeb.Data
+
+@if (Data.Href != null)
+{
+    <a href="@Data.Href" target="_blank" class="button-link">@Image</a>
+}
+else
+{
+    @Image
+}
+
+@code {
+    [Parameter, EditorRequired] public required Button Data { get; set; }
+
+    private RenderFragment Image =>
+        @<img src="@Assets[$"imgs/buttons/{Data.Image}"]" alt="@Data.Title" title="@Data.Title" class="button-img"/>;
+
+}

PancakesWeb/Components/UI/ImageButton.razor.css

@@ -0,0 +1,15 @@
+.button-link {
+    text-decoration: none;
+}
+
+.button-link::after {
+    display: none;
+    content: none;
+}
+
+.button-img {
+    width: 88px;
+    height: 31px;
+    object-fit: contain;
+    image-rendering: crisp-edges;
+}

PancakesWeb/Data/Button.cs

@@ -0,0 +1,192 @@
+namespace PancakesWeb.Data;
+
+public class Button
+{
+    public required string Image { get; set; }
+    public required string Title { get; set; }
+    public string? Href { get; set; }
+}
+
+public static class Buttons
+{
+    public static readonly Button Pancakes = new Button
+    {
+        Image = "pancakes.png",
+        Title = "pancakes",
+        Href = "https://pancakes.gay/"
+    };
+
+    public static readonly List<Button> Entities =
+    [
+        new Button
+        {
+            Image = "aagaming.png",
+            Title = "aagaming",
+            Href = "https://aagaming.me/"
+        },
+        new Button
+        {
+            Image = "atapi.gif",
+            Title = "Atapi's Domain!",
+            Href = "https://atapi.space/"
+        },
+        new Button
+        {
+            Image = "blueb.png",
+            Title = "blueb's website",
+            Href = "https://blueb.pages.gay/"
+        },
+        new Button
+        {
+            Image = "elke.gif",
+            Title = "elke.cafe",
+            Href = "https://elke.cafe/"
+        },
+        new Button
+        {
+            Image = "houl.png",
+            Title = "Houl Floof :3c",
+            Href = "https://houl.floof.company/"
+        },
+        new Button
+        {
+            Image = "ipg.png",
+            Title = "InvoxiPlayGames",
+            Href = "https://www.invoxiplaygames.uk/"
+        },
+        new Button
+        {
+            Image = "lilysthings.png",
+            Title = "Lily's Things at The Cool Site",
+            Href = "https://lilysthings.org/"
+        },
+        new Button
+        {
+            Image = "micro.avif",
+            Title = "microsite",
+            Href = "https://microspinny.zip/"
+        },
+        new Button
+        {
+            Image = "nelleobserver.gif",
+            Title = "nelle.observer",
+            Href = "https://nelle.observer/"
+        },
+        new Button
+        {
+            Image = "notfire.gif",
+            Title = "notfire.cc",
+            Href = "https://notfire.cc/"
+        },
+        new Button
+        {
+            Image = "olivia.png",
+            Title = "olivia",
+            Href = "https://floof.gay/"
+        },
+        new Button
+        {
+            Image = "sneexy.svg",
+            Title = "sneexy",
+            Href = "https://sneexy.synth.download/"
+        },
+        new Button
+        {
+            Image = "synthdownload.svg",
+            Title = "synth download!",
+            Href = "https://synth.download/"
+        },
+        new Button
+        {
+            Image = "voidrehab.png",
+            Title = "void.rehab",
+            Href = "https://void.rehab/"
+        },
+        new Button
+        {
+            Image = "kopper.png",
+            Title = "Won't Work!",
+            Href = "https://w.on-t.work/"
+        },
+        new Button
+        {
+            Image = "yassie.gif",
+            Title = "yassie_j",
+            Href = "https://labyrinth.zone/users/yassie_j"
+        },
+        new Button
+        {
+            Image = "zvava.png",
+            Title = "zvava.org",
+            Href = "https://zvava.org/"
+        }
+    ];
+
+    public static readonly List<Button> Things =
+    [
+        new Button
+        {
+            Image = "archlinux.gif",
+            Title = "Arch Linux",
+            Href = "https://archlinux.org/"
+        },
+        new Button
+        {
+            Image = "iceshrimp_now_dark.webp",
+            Title = "Iceshrimp Now!"
+        },
+        new Button
+        {
+            Image = "join_the_fediverse.gif",
+            Title = "Join the Fediverse!!!"
+        },
+        new Button
+        {
+            Image = "linux_now_xenia.gif",
+            Title = "Linux NOW!"
+        },
+        new Button
+        {
+            Image = "made_with_my_own_two_paws.webp",
+            Title = "made with MY OWN TWO PAWS"
+        },
+        new Button
+        {
+            Image = "missing_texture.webp",
+            Title = "Missing Texture"
+        },
+        new Button
+        {
+            Image = "nonbinary.webp",
+            Title = "Non-binary"
+        },
+        new Button
+        {
+            Image = "powered_by_debian.webp",
+            Title = "Powered by Debian",
+            Href = "https://www.debian.org/"
+        },
+        new Button
+        {
+            Image = "scp.webp",
+            Title = "SCP",
+            Href = "https://scp-wiki.wikidot.com/"
+        },
+        new Button
+        {
+            Image = "team_fortress_get_it.gif",
+            Title = "Team Fortress GET IT!"
+        },
+        new Button
+        {
+            Image = "ublock_origin_now.webp",
+            Title = "uBlock Origin Now!",
+            Href = "https://ublockorigin.com/"
+        },
+        new Button
+        {
+            Image = "wii.webp",
+            Title = "Wii"
+        }
+    ];
+}

PancakesWeb/wwwroot/imgs/buttons/synthdownload.svg

@@ -0,0 +1,478 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xml:space="preserve"
+   width="88"
+   height="31"
+   version="1.1"
+   id="svg53"
+   sodipodi:docname="synth.download.svg"
+   inkscape:export-filename="synth.download.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview53"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="6.4431818"
+     inkscape:cx="44"
+     inkscape:cy="15.520282"
+     inkscape:window-width="1366"
+     inkscape:window-height="742"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg53" /><defs
+     id="defs20"><linearGradient
+       id="d"><stop
+         offset="0"
+         stop-color="#ffcc67"
+         id="stop1" /><stop
+         offset="1"
+         stop-color="#e6b450"
+         id="stop2" /></linearGradient><linearGradient
+       id="a"><stop
+         offset="0"
+         stop-color="#fcff67"
+         stop-opacity=".8"
+         id="stop3" /><stop
+         offset="1"
+         stop-color="#fcff67"
+         stop-opacity=".15"
+         id="stop4" /></linearGradient><linearGradient
+       id="b"><stop
+         offset="0"
+         stop-color="#fcff67"
+         id="stop5" /><stop
+         offset="1"
+         stop-color="#fcff67"
+         stop-opacity=".446"
+         id="stop6" /></linearGradient><linearGradient
+       id="c"><stop
+         offset="0"
+         stop-color="#fcff67"
+         id="stop7" /><stop
+         offset="1"
+         stop-color="#fcff67"
+         stop-opacity=".161"
+         id="stop8" /></linearGradient><linearGradient
+       xlink:href="#a"
+       id="t"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#b"
+       id="n"
+       x1="43.328"
+       x2="41.277"
+       y1="20.257"
+       y2="-7.551"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#b"
+       id="o"
+       x1="43.328"
+       x2="41.277"
+       y1="20.257"
+       y2="-7.551"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#b"
+       id="p"
+       x1="43.328"
+       x2="41.277"
+       y1="20.257"
+       y2="-7.551"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#b"
+       id="q"
+       x1="43.328"
+       x2="41.277"
+       y1="20.257"
+       y2="-7.551"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#b"
+       id="r"
+       x1="43.328"
+       x2="41.277"
+       y1="20.257"
+       y2="-7.551"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#b"
+       id="s"
+       x1="43.328"
+       x2="41.277"
+       y1="20.257"
+       y2="-7.551"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="u"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="v"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="w"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="x"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="y"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="z"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="A"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="B"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="C"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#c"
+       id="D"
+       x1="156.858"
+       x2="155.607"
+       y1="18.337"
+       y2="-9.624"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       id="g"><stop
+         offset="0"
+         stop-color="#202026"
+         id="stop9" /><stop
+         offset="1"
+         stop-color="#34343e"
+         id="stop10" /></linearGradient><linearGradient
+       id="h"><stop
+         offset="0"
+         stop-color="#202026"
+         id="stop11" /><stop
+         offset="1"
+         stop-color="#383843"
+         id="stop12" /></linearGradient><linearGradient
+       id="f"><stop
+         offset="0"
+         stop-color="#ccc"
+         id="stop13" /><stop
+         offset="1"
+         stop-color="#f7f7f7"
+         id="stop14" /></linearGradient><linearGradient
+       xlink:href="#d"
+       id="M"
+       x1="4.854"
+       x2="65.285"
+       y1="15.839"
+       y2="15.112"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       id="l"><stop
+         offset="0"
+         stop-color="#242424"
+         id="stop15" /><stop
+         offset="1"
+         stop-color="#474747"
+         id="stop16" /></linearGradient><linearGradient
+       id="e"><stop
+         offset="0"
+         stop-color="#424242"
+         id="stop17" /><stop
+         offset="1"
+         stop-color="#525252"
+         id="stop18" /></linearGradient><linearGradient
+       xlink:href="#e"
+       id="G"
+       x1="41.278"
+       x2="366.983"
+       y1="271.883"
+       y2="271.883"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#f"
+       id="I"
+       x1="205.962"
+       x2="209.182"
+       y1="321.817"
+       y2="96.927"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#g"
+       id="J"
+       x1="212.845"
+       x2="275.596"
+       y1="245.785"
+       y2="82.997"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#h"
+       id="K"
+       x1="104.883"
+       x2="131.463"
+       y1="254.656"
+       y2="132.872"
+       gradientTransform="translate(.436 -1.744)"
+       gradientUnits="userSpaceOnUse" /><clipPath
+       id="m"
+       clipPathUnits="userSpaceOnUse"><use
+         xlink:href="#i"
+         id="use18" /></clipPath><clipPath
+       id="E"
+       clipPathUnits="userSpaceOnUse"><use
+         xlink:href="#j"
+         id="use19" /></clipPath><clipPath
+       id="H"
+       clipPathUnits="userSpaceOnUse"><use
+         xlink:href="#k"
+         id="use20" /></clipPath><radialGradient
+       xlink:href="#l"
+       id="F"
+       cx="225.05"
+       cy="449.441"
+       r="144.721"
+       fx="225.05"
+       fy="449.441"
+       gradientTransform="matrix(1.664 -.182 .31213 2.85388 -288.97 -772.044)"
+       gradientUnits="userSpaceOnUse" /><filter
+       id="L"
+       width="1.5485064"
+       height="1.6621233"
+       x="-0.27425318"
+       y="-0.33106163"
+       color-interpolation-filters="sRGB"><feGaussianBlur
+         stdDeviation="9.479"
+         id="feGaussianBlur20" /></filter></defs><g
+     clip-path="url(#m)"
+     transform="skewX(-12.059) scale(1 .97793)"
+     id="g53"><path
+       id="i"
+       fill="#0d1017"
+       fill-rule="evenodd"
+       stroke-linecap="round"
+       d="M14.291 1.02h66.036a8.408 8.408 0 0 1 8.426 8.427v12.784a8.408 8.408 0 0 1-8.426 8.426H14.29a8.408 8.408 0 0 1-8.426-8.426V9.447a8.408 8.408 0 0 1 8.426-8.426z" /><g
+       fill-rule="evenodd"
+       id="g35"><g
+         fill="url(#n)"
+         transform="matrix(.63915 0 -.01988 .5832 6.463 2.456)"
+         id="g24"><path
+           fill="url(#o)"
+           d="M41.237 2.748c-.899 0-1.718.332-2.345.96l-1.328 1.329a3.26 3.26 0 0 0-.96 2.344v14.211c0 .625.165 1.187.558 1.58.393.392.955.556 1.58.556h.443c.624 0 1.188-.164 1.58-.556.393-.393.558-.955.558-1.58V8.55c0-.45.103-.692.247-.836.144-.144.386-.248.835-.248h2.658c.45 0 .69.104.834.248.144.144.248.387.248.836v13.042c0 .625.163 1.187.555 1.58.393.392.96.556 1.584.556h.402c.625 0 1.186-.164 1.579-.556.393-.393.557-.955.557-1.58V7.382c0-.9-.332-1.718-.96-2.345l-1.279-1.28a3.2 3.2 0 0 0-2.355-1.01Z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path20" /><path
+           fill="url(#p)"
+           d="M21.507 2.748c-.624 0-1.186.163-1.578.556-.393.393-.558.957-.558 1.582v7.729c0 .899.332 1.72.959 2.346l1.328 1.328a3.263 3.263 0 0 0 2.345.959h3.745c.45 0 .69.104.834.248.144.144.248.385.248.833v3.182c0 .45-.104.69-.248.834-.144.144-.385.248-.834.248h-5.876c-.625 0-1.19.165-1.583.558-.392.393-.557.957-.557 1.582v.44c0 .625.164 1.19.557 1.582.393.393.957.558 1.582.558h7.044c.9 0 1.718-.334 2.345-.961l1.328-1.328c.627-.627.96-1.447.96-2.346V4.886c0-.625-.163-1.19-.555-1.582-.393-.393-.96-.556-1.584-.556h-.44c-.625 0-1.19.163-1.583.556s-.555.957-.555 1.582l-.001 6.56c0 .45-.104.694-.248.838-.145.144-.386.248-.835.248h-2.575c-.45 0-.692-.104-.836-.248-.144-.144-.248-.389-.248-.838v-6.56c0-.625-.164-1.19-.556-1.582-.393-.393-.955-.556-1.58-.556Z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path21" /><path
+           fill="url(#q)"
+           d="M7.574 2.748c-.9 0-1.716.332-2.343.96L3.942 4.994a3.422 3.422 0 0 0-.754 1.09 3.06 3.06 0 0 0-.246 1.257v3.945c0 .484.075.93.241 1.33l.004.006.002.008c.175.385.46.728.828 1.034l1.204 1.042.004.004c.35.291.694.52 1.044.678l.02.009.019.006a3.59 3.59 0 0 0 1.227.194h3.782c.45 0 .694.104.838.248.144.144.248.385.248.833v1.21c0 .449-.105.69-.249.833-.144.144-.387.248-.836.248H8.742c-.438 0-.73-.083-.91-.194-.14-.1-.172-.154-.172-.325 0-.479-.278-.937-.682-1.199-.395-.272-.887-.374-1.456-.374H5.08c-.625 0-1.19.166-1.583.558-.392.393-.557.955-.557 1.58v.04c0 .899.333 1.717.96 2.344l1.33 1.33a3.257 3.257 0 0 0 2.343.959h4.913c.9 0 1.718-.333 2.345-.96l1.328-1.33a3.257 3.257 0 0 0 .959-2.344v-3.18c0-.9-.333-1.72-.96-2.347L14.832 12.2a3.263 3.263 0 0 0-2.347-.96H8.743c-.45 0-.692-.103-.836-.247-.144-.145-.248-.387-.248-.836v-1.65c0-.449.105-.691.249-.835.144-.144.385-.248.834-.248h2.576c.445 0 .725.088.865.186l.01.008.01.006c.18.115.2.16.2.32 0 .485.233.961.627 1.237l.01.006.009.007c.41.261.916.364 1.49.364h.443c.625 0 1.188-.164 1.58-.557.394-.392.558-.955.558-1.58l-.001-.08c0-.9-.332-1.72-.96-2.347l-1.288-1.288c-.63-.63-1.462-.96-2.384-.96Z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path22" /><path
+           fill="url(#r)"
+           d="M58.39-1.923c-.625 0-1.186.166-1.579.558-.392.393-.557.957-.557 1.582v1.45c0 .41-.1.654-.262.837-.15.146-.37.244-.78.244-.612 0-1.178.195-1.58.597-.387.387-.558.938-.558 1.54v.404c0 .625.165 1.187.558 1.58.392.392.955.556 1.58.556.408 0 .62.098.776.27l.008.011.01.008c.15.15.249.377.249.794v10.547c0 .9.331 1.718.958 2.345l1.328 1.33a3.263 3.263 0 0 0 2.345.959h2.779c.624 0 1.186-.164 1.579-.557.392-.392.559-.957.559-1.581v-.44c0-.625-.167-1.192-.56-1.584-.392-.393-.955-.557-1.58-.557h-1.608c-.449 0-.691-.104-.836-.248-.144-.144-.248-.384-.248-.833v-9.38c0-.45.103-.692.248-.836.144-.144.387-.248.836-.248h1.608c.625 0 1.188-.164 1.581-.556.393-.393.56-.955.56-1.58l-.002-.403c0-.625-.164-1.19-.557-1.582-.393-.393-.957-.556-1.582-.556h-1.609c-.449 0-.691-.104-.835-.248-.144-.144-.248-.385-.248-.834L60.97.217c0-.625-.163-1.189-.555-1.582-.393-.392-.956-.558-1.58-.558z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path23" /><path
+           fill="url(#s)"
+           d="M69.385-6.188c-.624 0-1.188.165-1.58.558-.393.393-.557.955-.557 1.58v25.642c0 .625.165 1.187.557 1.58.393.392.955.556 1.58.556h.443c.624 0 1.188-.164 1.58-.556.393-.393.558-.955.558-1.58V8.55c0-.45.103-.692.248-.836.144-.144.387-.248.836-.248h2.535c.449 0 .691.104.835.248.144.144.248.387.248.836v13.042c0 .625.163 1.187.556 1.58.392.392.957.556 1.581.556h.443c.625 0 1.188-.164 1.58-.556.393-.393.556-.955.556-1.58l.001-14.21c0-.9-.332-1.718-.958-2.345l-1.329-1.33a3.263 3.263 0 0 0-2.347-.96H73.05c-.45 0-.692-.103-.836-.247-.144-.144-.248-.385-.248-.834V-4.05c0-.625-.164-1.187-.557-1.58s-.955-.558-1.58-.558z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path24" /></g><g
+         fill="url(#t)"
+         transform="matrix(.61232 0 -.0138 .55872 -46.167 17.002)"
+         id="g34"><path
+           fill="url(#u)"
+           d="M227.473 21.87c-.632 0-1.222.32-1.74.839l-.284.28c-.518.52-.838 1.112-.838 1.744 0 .632.32 1.22.839 1.739l.283.283c.518.518 1.109.84 1.74.84.632 0 1.223-.322 1.741-.84l.282-.283c.518-.519.84-1.107.84-1.74 0-.631-.32-1.224-.84-1.742l-.282-.281c-.518-.519-1.109-.84-1.74-.84z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path25" /><path
+           fill="url(#v)"
+           d="M193.166 2.748c-.625 0-1.188.163-1.58.556-.393.393-.556.957-.556 1.582v.442c0 .625.162 1.187.555 1.58s.957.558 1.582.558h6.199c.449 0 .691.104.835.248.144.144.249.387.249.836l-.001.12c0 .448-.103.69-.247.835-.144.144-.387.248-.836.248h-3.825c-.899 0-1.716.332-2.343.96L191.908 12a3.422 3.422 0 0 0-.754 1.09 3.036 3.036 0 0 0-.245 1.255v4.67c0 .9.332 1.719.959 2.346l1.33 1.329c.627.627 1.444.96 2.343.96h7.489c.625 0 1.186-.166 1.579-.559.392-.393.557-.955.557-1.58V7.381c0-.9-.331-1.717-.958-2.344l-1.329-1.33a3.263 3.263 0 0 0-2.346-.96zm3.542 11.36h2.657c.449 0 .691.103.835.247.144.145.248.387.248.836l.001 3.02c0 .45-.104.69-.248.834-.144.144-.387.248-.836.248h-2.655c-.45 0-.692-.104-.836-.248-.144-.144-.248-.385-.248-.833l.001-3.021c0-.45.104-.691.248-.836.145-.144.384-.248.833-.248z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path26" /><path
+           fill="url(#w)"
+           d="M219.779-6.269c-.625 0-1.186.164-1.579.556-.393.393-.557.957-.557 1.582v5.797c0 .45-.105.69-.249.834-.144.144-.385.248-.834.248h-3.705c-.922 0-1.754.33-2.384.96l-1.29 1.287a3.262 3.262 0 0 0-.958 2.347v11.713c0 .9.332 1.718.959 2.345l1.33 1.33a3.259 3.259 0 0 0 2.343.959h7.367c.625 0 1.188-.164 1.58-.557.393-.392.558-.957.558-1.581l-.001-25.682c0-.625-.163-1.19-.555-1.582-.393-.392-.956-.556-1.58-.556zm-5.755 13.735h2.537c.449 0 .69.104.834.248.144.144.248.387.248.836v9.339c0 .449-.104.69-.248.833-.144.144-.386.248-.834.248h-2.537c-.45 0-.69-.104-.834-.248-.144-.144-.248-.384-.248-.833v-9.34c0-.448.104-.69.248-.835.144-.144.385-.248.834-.248z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path27" /><path
+           fill="url(#x)"
+           d="M178.67 2.748c-.9 0-1.719.332-2.345.96l-1.329 1.329a3.26 3.26 0 0 0-.96 2.344l.001 11.674c0 .9.332 1.718.959 2.345l1.329 1.33a3.26 3.26 0 0 0 2.344.959h4.993c.9 0 1.718-.333 2.345-.96l1.294-1.292.004-.006c.62-.652.95-1.476.95-2.376V7.381c0-.9-.329-1.724-.95-2.375l-.003-.007-1.295-1.292a3.259 3.259 0 0 0-2.345-.96zm1.169 4.718h2.616c.449 0 .69.104.833.248.145.144.249.387.249.836v9.339c0 .449-.104.69-.248.833-.145.144-.386.248-.835.248h-2.616c-.449 0-.691-.104-.835-.248-.144-.144-.248-.384-.248-.833v-9.34c0-.448.103-.69.248-.835.144-.144.387-.248.836-.248z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path28" /><path
+           fill="url(#y)"
+           d="M112.795 2.748c-.9 0-1.718.332-2.345.96l-1.328 1.329a3.26 3.26 0 0 0-.962 2.344v11.674c0 .9.334 1.718.961 2.345l1.329 1.33a3.262 3.262 0 0 0 2.345.959h4.99c.9 0 1.719-.333 2.345-.96l1.294-1.292.004-.006c.62-.652.95-1.476.95-2.376l.001-11.674c0-.9-.33-1.724-.95-2.375l-.006-.007-1.293-1.292a3.259 3.259 0 0 0-2.345-.96Zm1.165 4.718h2.618c.449 0 .69.104.834.248.144.144.25.387.25.836v9.339c0 .449-.106.69-.25.833-.144.144-.386.248-.834.248h-2.617c-.448 0-.69-.104-.833-.248-.144-.144-.248-.384-.248-.833v-9.34c0-.448.104-.69.248-.835.144-.144.383-.248.832-.248z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path29" /><path
+           fill="url(#z)"
+           d="M102.927-6.269c-.624 0-1.188.164-1.58.556-.393.393-.558.957-.558 1.582v5.797c0 .45-.104.69-.248.834-.144.144-.386.248-.834.248h-3.703c-.923 0-1.756.33-2.386.96L92.33 4.994a3.264 3.264 0 0 0-.96 2.347v11.713c0 .9.333 1.718.96 2.345l1.329 1.33a3.262 3.262 0 0 0 2.345.959h7.365c.624 0 1.19-.164 1.582-.557.393-.392.557-.957.557-1.581V-4.131c0-.625-.163-1.19-.556-1.582-.393-.392-.957-.556-1.582-.556zM97.17 7.466h2.539c.449 0 .69.104.833.248.144.144.248.387.248.836v9.339c0 .449-.103.69-.248.833-.144.144-.385.248-.834.248H97.17c-.449 0-.69-.104-.833-.248-.144-.144-.248-.384-.248-.833v-9.34c0-.448.103-.69.248-.835.144-.144.383-.248.832-.248z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path30" /><path
+           fill="url(#A)"
+           d="M154.065 2.748c-.9 0-1.72.332-2.347.96l-1.328 1.329a3.257 3.257 0 0 0-.958 2.344v14.211c0 .625.163 1.187.556 1.58.392.392.955.556 1.58.556h.444c.625 0 1.186-.164 1.579-.556.393-.393.557-.955.557-1.58V8.55c0-.45.106-.692.25-.836.144-.144.385-.248.834-.248h2.657c.449 0 .691.104.835.248.145.144.249.387.249.836v13.042c0 .625.164 1.187.557 1.58.393.392.955.556 1.58.556h.402c.625 0 1.188-.164 1.58-.556.393-.393.558-.955.558-1.58V7.382c0-.9-.335-1.718-.962-2.345l-1.277-1.28a3.2 3.2 0 0 0-2.355-1.01z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path31" /><path
+           fill="url(#B)"
+           d="M126.245 2.748c-.573 0-1.083.122-1.463.45-.38.329-.556.836-.556 1.367 0 .237.01.42.057.608l-.006-.02 3.424 16.75v.005c.126.563.375 1.043.771 1.375.397.332.915.486 1.475.486h2.576c.584 0 1.12-.154 1.522-.5.402-.346.636-.85.73-1.43v-.005l1.007-6.656 1.01 6.656v.004c.094.581.33 1.085.731 1.43.402.347.937.501 1.522.501h2.537c.56 0 1.078-.154 1.475-.486.396-.332.645-.812.77-1.375l.002-.008 3.297-16.727a2.3 2.3 0 0 0 .056-.568c0-.514-.204-1.004-.572-1.342-.366-.359-.88-.515-1.447-.515h-.442c-.582 0-1.113.149-1.516.486-.403.337-.64.836-.734 1.406l-2.22 12.44-1.856-9.355v-.002c-.11-.566-.353-1.056-.753-1.39-.4-.334-.924-.486-1.495-.486h-.847c-.593 0-1.13.148-1.541.484-.41.336-.654.836-.75 1.408l-1.775 9.457-2.256-12.556v-.002c-.096-.572-.34-1.073-.75-1.408-.41-.336-.947-.482-1.54-.482Z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path32" /><path
+           fill="url(#C)"
+           d="M168.844-6.308c-.625 0-1.188.163-1.581.556s-.557.955-.557 1.58l-.001 25.723c0 .624.166 1.189.559 1.581.392.393.955.557 1.58.557h.402c.624 0 1.188-.164 1.58-.557.393-.392.558-.957.558-1.581V-4.172c0-.625-.165-1.187-.558-1.58s-.955-.556-1.58-.556z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path33" /><path
+           fill="url(#D)"
+           d="M227.272-10.094c-.624 0-1.188.163-1.58.556-.393.393-.558.96-.558 1.584v27.01c0 .624.165 1.188.557 1.58.393.393.955.557 1.58.557h.402c.625 0 1.19-.164 1.583-.556.392-.393.557-.957.557-1.582v-27.01c0-.624-.164-1.19-.557-1.583s-.957-.556-1.582-.556z"
+           style="-inkscape-font-specification:&quot;ZCOOL QingKe HuangYou&quot;"
+           id="path34" /></g></g><path
+       fill-rule="evenodd"
+       d="M78.308.15c-.212-.039-.357-.031-.518-.046a8.622 8.622 0 0 0-.916-.03 25.9 25.9 0 0 0-2.008.12 57.58 57.58 0 0 0-4.213.549c-3.792.651-10.016 2.716-10.016 2.716l.255-.066c-.395.079-.807.363-1.13.727-1.677.564-3.178 1.268-4.603 1.755-1.55.529-4.682.46-6.452 3.007-1.309 1.884-1.275 4.372-.59 6.62a6.573 6.573 0 0 0 1.404 2.478l.023.05c.352.706.624 1.55 1.93 2.596 3.64 2.916 7.744 3.08 10.602 3.451.844.11 1.66.7 2.095 1.392.817 1.49.431 3.853.081 7.053-.155 1.413-.26 2.616-.26 2.616-.137 1.56 1.218 3.17 2.842 3.378l19.897 2.547c1.4.179 2.463-.768 2.415-2.152 0 0-.123-4.66-.622-7.564-.55-3.196-1.16-6.683-2.709-10.22-.967-2.21-2.562-4.714-4.012-6.89.091-.006.217-.013.296-.02.13-.01.243-.02.353-.032.11-.013.092.036.52-.107.798-.266.719-.392.942-.57.222-.178.46-.378.708-.58.499-.407 1.094-.826 1.317-.928.095-.044.734-.171 1.456-.266.362-.047.748-.096 1.178-.212.43-.116.973-.246 1.468-.898.711-.937.432-1.634.318-2.158a6.854 6.854 0 0 0-.507-1.456c-.435-.938-.814-1.857-2.162-2.801-1.02-.714-1.308-.607-1.84-.726a22.177 22.177 0 0 0-1.774-.304 58.333 58.333 0 0 0-2.252-.255l-.075-.113c-.54-.792-.95-1.577-2.525-2.331-.426-.204-.704-.29-.916-.33z"
+       id="path35" /><g
+       stroke-linecap="round"
+       stroke-linejoin="round"
+       clip-path="url(#E)"
+       transform="matrix(.08334 .0108 .00676 .08292 46.061 -6.178)"
+       id="g42"><path
+         id="j"
+         fill="url(#F)"
+         fill-rule="evenodd"
+         d="m158.18 302.059 197.116-139.576s54.127 75.593 70.295 118.615c13.372 35.583 17.38 74.26 20.863 112.113 2.653 28.833-.04 86.864-.04 86.864l-238.762.38s2.426-14.561 5.632-31.677c6.894-36.811 18.977-74.204 3.198-105.74-10.63-21.242-58.301-40.98-58.301-40.98z" /><path
+         fill="none"
+         stroke="#121212"
+         stroke-width="13.018"
+         d="m156.547 285.177 175.02-103.926s51.517 112.76 20.018 153.723c-41.976 54.589-204.835 26.833-204.835 26.833z"
+         id="path36" /><path
+         fill="none"
+         stroke="#121212"
+         stroke-width="13.018"
+         d="m77.228 260.86 273.936-1.596s39.458 117.524 3.853 154.973C307.568 464.143 148.5 419.53 148.5 419.53z"
+         id="path37" /><g
+         fill="#ccc"
+         fill-rule="evenodd"
+         stroke="#adadad"
+         stroke-width="20"
+         id="g41"><path
+           d="m329.334 275.894 32.54-146.372 85.534 123.915s-59.658 82.003-98.498 70.776c-16.694-4.826-19.576-48.319-19.576-48.319z"
+           id="path38" /><path
+           d="M360.355 327.998c5.868-13.773 28.578-12.385 37.9-24.101 15.045-18.913 24.155-68.36 24.155-68.36l42.165 110.662s-61.144 59.63-91.57 44.574c-19.133-9.466-21.017-43.138-12.65-62.775z"
+           id="path39" /><path
+           d="M374.963 397.41c7.604-12.897 29.943-8.577 40.704-18.986 17.37-16.803 32.813-64.653 32.813-64.653l27.465 115.195s-68.357 51.2-96.576 32.329c-17.743-11.867-15.247-45.498-4.406-63.886z"
+           id="path40" /><path
+           d="M377.337 460.965c10.037-11.108 31.055-2.394 43.685-10.432 20.389-12.976 45.118-56.754 45.118-56.754l3.794 118.362s-77.24 36.444-101.099 12.294c-15.002-15.185-5.808-47.632 8.502-63.47z"
+           id="path41" /></g></g><g
+       fill-rule="evenodd"
+       stroke="#b2b2b2"
+       id="g52"><path
+         fill="url(#G)"
+         stroke="none"
+         d="M47.278 229.89h319.705s-4.6 38.81-18.235 50.311c-47.778 40.304-113.126 33.103-176.354 33.282-17.56.05-53.24 1.519-78.201-6.28-18.237-5.7-42.664-12.202-49.583-28.76-1.706-4.083-3.332-12.757-3.332-12.757z"
+         transform="matrix(.08334 .0108 .00676 .08292 46.061 -6.178)"
+         id="path42" /><path
+         fill="#999"
+         stroke="none"
+         d="M61.94 6.064s6.341-2.062 9.699-2.638c2.221-.382 6.225-.84 6.863-.535.704.337 1.718 1.861 1.554 2.238-.223.51-1.697.686-2.39 1.236-.691.548-1.487 1.875-1.71 2.014-.319.197-10.006 2.68-10.006 2.68s-4.715-4.855-4.01-4.995z"
+         id="path43" /><g
+         clip-path="url(#H)"
+         transform="matrix(.08334 .0108 .00676 .08292 46.061 -6.178)"
+         id="g48"><path
+           id="k"
+           fill="url(#I)"
+           stroke="none"
+           d="M451.527 80.508c-24.517-.201-58.666 1.671-81.673 3.828-49.924 4.68-138.985 24.158-157.57 28.287a143.46 143.46 0 0 0-7.159 1.572l-.207.045c-.04.005-.061.033-.1.04-33.16 8.303-64.012 27.909-95.324 42.327-24.309 11.194-55.203 16.256-70.674 38.094-11.765 16.607-14.097 40.486-9.504 60.313 2.033 8.773 7.888 17.327 15.512 22.12 7.133 4.485 24.942 4.108 24.942 4.108s14.083 30.055 26.47 30.055c11.852 0 26.469-29.947 26.469-29.947l154.846-.198s15.208-25.75 27.041-34.176c19.23-13.694 66.855-5.524 66.855-23.363 0-20.22.802-24.834-3.48-39.392a285.822 285.822 0 0 0-3.13-9.883c26.755-4.742 49.73-8.936 51.778-9.865 4.142-1.88 22.513-21.274 35.828-28.895 13.353-7.642 37.435-8.754 43.182-16.3 4.243-5.573-5.175-29.893-14.86-35.784-3.287-2-14.531-2.866-29.242-2.986z" /><g
+           stroke="none"
+           id="g45"><path
+             fill="url(#J)"
+             d="m129.787 126.622 173.997-47.788s30.029 94.415 11.284 116.769c-14.792 17.64-136.494 46.484-151.18 40.108-7.74-3.36-16.374-16.952-25.253-51.287-7.873-30.446-8.848-57.802-8.848-57.802z"
+             id="path44" /><path
+             fill="url(#K)"
+             d="m73.563 138.422 43.267-17.926s-1.766 9.63-.353 31.264c1.778 27.2 6.02 38.8 10.186 53.19 6.079 21 12.952 32.068 10.24 35.97-4.186 6.022-26.623 13.02-33.626 8.751-6.732-4.103-29.714-111.25-29.714-111.25z"
+             id="path45" /></g><g
+           fill="#fea737"
+           stroke="#dbdbdb"
+           stroke-width="5.118"
+           transform="matrix(1.23897 -.09348 .08855 1.2754 -103.893 -40.789)"
+           id="g47"><rect
+             width="18.502"
+             height="33.168"
+             x="350.327"
+             y="131.413"
+             ry="9.251"
+             id="rect45" /><rect
+             width="18.502"
+             height="33.168"
+             x="381.124"
+             y="130.211"
+             ry="9.251"
+             id="rect46" /><rect
+             width="18.502"
+             height="33.168"
+             x="411.86"
+             y="129.85"
+             ry="9.251"
+             id="rect47" /></g></g><g
+         fill="#fda737"
+         stroke="none"
+         id="g49"><path
+           fill-opacity=".5"
+           d="M210.998 152.104c-6.333.132-13.08 2.133-19.528 5.37a11.127 11.127 0 0 1 3.393 8.024v34.088c0 6.188-4.98 11.169-11.168 11.169a11.144 11.144 0 0 1-11.17-11.169V171.65c-11.282 12.036-16.886 27.282-8.135 38.683 14.328 18.666 53.496 9.457 69.973-4.783 14.814-12.801 11.261-44.895-15.101-52.436-2.624-.75-5.402-1.069-8.264-1.01z"
+           filter="url(#L)"
+           transform="matrix(.08334 .0108 .00676 .08292 46.061 -6.178)"
+           id="path48" /><path
+           d="M64.675 8.713c-.527-.058-1.076.036-1.591.234.188.191.315.44.337.702l.23 2.827c.042.513-.34.872-.855.805-.516-.066-.965-.533-1.006-1.046l-.19-2.317c-.858.876-1.222 2.08-.416 3.12 1.32 1.702 4.523 1.362 5.8.359 1.148-.902.635-3.601-1.613-4.511a2.601 2.601 0 0 0-.696-.173z"
+           id="path49" /></g><g
+         fill-opacity=".9"
+         stroke="none"
+         transform="matrix(.0825 .03055 -.01362 .07784 46.019 -6.07)"
+         id="g51"><circle
+           cx="116.027"
+           cy="212.236"
+           r="8.19"
+           id="circle49" /><circle
+           cx="85.813"
+           cy="223.026"
+           r="8.19"
+           id="circle50" /><circle
+           cx="96.129"
+           cy="190.225"
+           r="8.19"
+           id="circle51" /></g></g></g><path
+     fill="url(#M)"
+     fill-rule="evenodd"
+     d="M14.291.01c-5.21 0-9.437 4.226-9.437 9.437V22.23c0 5.211 4.226 9.438 9.437 9.438h66.035c5.211 0 9.438-4.227 9.438-9.438V9.447c0-5.21-4.227-9.437-9.438-9.437zm0 2.021h66.035a7.378 7.378 0 0 1 7.416 7.416V22.23a7.378 7.378 0 0 1-7.416 7.416H14.291a7.377 7.377 0 0 1-7.414-7.416V9.447a7.377 7.377 0 0 1 7.414-7.416z"
+     transform="skewX(-12.059) scale(1 .97793)"
+     id="path53" /></svg>

PancakesWeb/wwwroot/style.css

@@ -71,6 +71,25 @@ abbr {
     cursor: help;
 }
 
+details {
+    margin: 1rem 0;
+    padding: 0 1rem;
+
+    border: 2px dotted var(--border-color);
+    border-radius: var(--radius);
+
+    summary {
+        padding: 1rem 0;
+
+        font-weight: bold;
+        cursor: pointer;
+    }
+}
+
+details[open] {
+    padding-bottom: 1rem;
+}
+
 code {
     font-family: var(--font-mono), monospace;
     background-color: var(--foreground);