convert to tailwindcss styles

pages/static/base.css

···
 @import "tailwindcss";
-
-body {
-    font-family: Arial, sans-serif;
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-    line-height: 1.6;
-}
-
-
-h1 {
-    color: #1DB954; /* Spotify green */
-}
-
-.nav {
-    display: flex;
-    flex-wrap: wrap; /* Allow wrapping on smaller screens */
-    margin-bottom: 20px;
-}
-
-.nav a {
-    margin-right: 15px;
-    margin-bottom: 5px; /* Add spacing below links */
-    text-decoration: none;
-    color: #1DB954;
-    font-weight: bold;
-}
-
-.card {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-}
-
-.service-status {
-    font-style: italic;
-    color: #555;
-}
-
-
-label, input {
-    display: block;
-    margin-bottom: 10px;
-}
-
-input[type='text'] {
-    width: 95%;
-    padding: 8px;
-}
-
-/* Corrected width */
-input[type='submit'] {
-    padding: 10px 15px;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.last-fm-input {
-    background-color: #d51007;
-}
-
-.teal-input {
-    background-color: #1DB954;
-}
-
-.error {
-    color: red;
-    margin-bottom: 10px;
-}
-
-.lastfm-form {
-    max-width: 600px;
-    margin: 20px auto;
-    padding: 20px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-}
-
-.card {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-}
-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-table th, table td {
-    padding: 8px;
-    text-align: left;
-    border-bottom: 1px solid #ddd;
-}
-.key-value {
-    font-family: monospace;
-    padding: 10px;
-    background-color: #f5f5f5;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    word-break: break-all;
-}
-.new-key-alert {
-    background-color: #f8f9fa;
-    border-left: 4px solid #1DB954;
-    padding: 15px;
-    margin-bottom: 20px;
-}
-.btn {
-    padding: 8px 16px;
-    background-color: #1DB954;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-.btn-danger {
-    background-color: #dc3545;
-}
-
-.teal-header {
-    color: #1DB954;
-}

pages/static/main.css

···
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --leading-relaxed: 1.625;
+    --radius-lg: 0.5rem;
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
   }
···
       max-width: 96rem;
     }
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .my-5 {
+    margin-block: calc(var(--spacing) * 5);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
   .block {
     display: block;
   }
   .contents {
     display: contents;
   }
+  .flex {
+    display: flex;
+  }
   .hidden {
     display: none;
   }
   .table {
     display: table;
   }
+  .w-\[95\%\] {
+    width: 95%;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-\[600px\] {
+    max-width: 600px;
+  }
+  .max-w-\[800px\] {
+    max-width: 800px;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
+  .border-\[\#1DB954\] {
+    border-color: #1DB954;
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
+  .bg-\[\#1DB954\] {
+    background-color: #1DB954;
+  }
+  .bg-\[\#d51007\] {
+    background-color: #d51007;
+  }
+  .bg-\[\#dc3545\] {
+    background-color: #dc3545;
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .pl-5 {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-\[\#1DB954\] {
+    color: #1DB954;
+  }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
   .lowercase {
     text-transform: lowercase;
   }
+  .italic {
+    font-style: italic;
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-}
-body {
-  font-family: Arial, sans-serif;
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-  line-height: 1.6;
-}
-h1 {
-  color: #1DB954;
-}
-.nav {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-}
-.nav a {
-  margin-right: 15px;
-  margin-bottom: 5px;
-  text-decoration: none;
-  color: #1DB954;
-  font-weight: bold;
-}
-.card {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-.service-status {
-  font-style: italic;
-  color: #555;
-}
-label, input {
-  display: block;
-  margin-bottom: 10px;
-}
-input[type='text'] {
-  width: 95%;
-  padding: 8px;
-}
-input[type='submit'] {
-  padding: 10px 15px;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.last-fm-input {
-  background-color: #d51007;
-}
-.teal-input {
-  background-color: #1DB954;
-}
-.error {
-  color: red;
-  margin-bottom: 10px;
-}
-.lastfm-form {
-  max-width: 600px;
-  margin: 20px auto;
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-}
-.card {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-table th, table td {
-  padding: 8px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
-}
-.key-value {
-  font-family: monospace;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  word-break: break-all;
-}
-.new-key-alert {
-  background-color: #f8f9fa;
-  border-left: 4px solid #1DB954;
-  padding: 15px;
-  margin-bottom: 20px;
-}
-.btn {
-  padding: 8px 16px;
-  background-color: #1DB954;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.btn-danger {
-  background-color: #dc3545;
-}
-.teal-header {
-  color: #1DB954;
+  .hover\:opacity-90 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 90%;
+      }
+    }
+  }
 }
 @property --tw-rotate-x {
   syntax: "*";
···
   inherits: false;
 }
 @property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
···
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

pages/templates/apiKeys.gohtml

···
 {{ template "components/navBar" .NavBar }}
 
 
-<h1>API Key Management</h1>
+<h1 class="text-[#1DB954]">API Key Management</h1>
 
-<div class="card">
-    <h2 class="teal-header">Create New API Key</h2>
-    <p>API keys allow programmatic access to your Piper account data.</p>
+<div class="border border-gray-300 rounded-lg p-5 mb-5">
+    <h2 class="text-[#1DB954] text-xl font-semibold mb-2">Create New API Key</h2>
+    <p class="mb-3">API keys allow programmatic access to your Piper account data.</p>
     <form method="POST" action="/api-keys">
-        <div style="margin-bottom: 15px;">
-            <label for="name">Key Name (for your reference):</label>
-            <input type="text" id="name" name="name" placeholder="My Application" style="width: 100%; padding: 8px; margin-top: 5px;">
+        <div class="mb-4">
+            <label class="block" for="name">Key Name (for your reference):</label>
+            <input class="mt-1 w-full p-2 border border-gray-300 rounded" type="text" id="name" name="name" placeholder="My Application">
         </div>
-        <button type="submit" class="btn">Generate New API Key</button>
+        <button type="submit" class="bg-[#1DB954] text-white px-4 py-2 rounded cursor-pointer hover:opacity-90">Generate New API Key</button>
     </form>
 </div>
 
 {{if .NewKeyID}} <!-- Changed from .NewKey to .NewKeyID for clarity -->
-<div class="new-key-alert">
-    <h3 class="teal-header">Your new API key (ID: {{.NewKeyID}}) has been created</h3>
+<div class="bg-gray-100 border-l-4 border-[#1DB954] p-4 mb-5">
+    <h3 class="text-[#1DB954] text-lg font-semibold mb-1">Your new API key (ID: {{.NewKeyID}}) has been created</h3>
     <!-- The message below is misleading if only the ID is shown.
          Consider changing this text or modifying the flow to show the actual key once for HTML. -->
     <p><strong>Important:</strong> If this is an ID, ensure you have copied the actual key if it was displayed previously. For keys generated via the API, the key is returned in the API response.</p>
 </div>
 {{end}}
 
-<div class="card">
-    <h2 class="teal-header">Your API Keys</h2>
+<div class="border border-gray-300 rounded-lg p-5 mb-5">
+    <h2 class="text-[#1DB954] text-xl font-semibold mb-2">Your API Keys</h2>
     {{if .Keys}}
-        <table>
+        <table class="w-full border-collapse">
             <thead>
-            <tr>
-                <th>Name</th>
-                <th>Prefix</th>
-                <th>Created</th>
-                <th>Expires</th>
-                <th>Actions</th>
+            <tr class="text-left border-b border-gray-300">
+                <th class="p-2">Name</th>
+                <th class="p-2">Prefix</th>
+                <th class="p-2">Created</th>
+                <th class="p-2">Expires</th>
+                <th class="p-2">Actions</th>
             </tr>
             </thead>
             <tbody>
             {{range .Keys}}
-                <tr>
-                    <td>{{.Name}}</td>
-                    <td>{{.KeyPrefix}}</td> <!-- Added KeyPrefix for better identification -->
-                    <td>{{formatTime .CreatedAt}}</td>
-                    <td>{{formatTime .ExpiresAt}}</td>
-                    <td>
-                        <button class="btn btn-danger" onclick="deleteKey('{{.ID}}')">Delete</button>
+                <tr class="border-b border-gray-200">
+                    <td class="p-2">{{.Name}}</td>
+                    <td class="p-2">{{.KeyPrefix}}</td> <!-- Added KeyPrefix for better identification -->
+                    <td class="p-2">{{formatTime .CreatedAt}}</td>
+                    <td class="p-2">{{formatTime .ExpiresAt}}</td>
+                    <td class="p-2">
+                        <button class="bg-[#dc3545] text-white px-3 py-1.5 rounded cursor-pointer hover:opacity-90" onclick="deleteKey('{{.ID}}')">Delete</button>
                     </td>
                 </tr>
             {{end}}
···
     {{end}}
 </div>
 
-<div class="card">
-    <h2 class="teal-header">API Usage</h2>
-    <p>To use your API key, include it in the Authorization header of your HTTP requests:</p>
-    <pre>Authorization: Bearer YOUR_API_KEY</pre>
-    <p>Or include it as a query parameter (less secure for the key itself):</p>
-    <pre>https://your-piper-instance.com/endpoint?api_key=YOUR_API_KEY</pre>
+<div class="border border-gray-300 rounded-lg p-5 mb-5">
+    <h2 class="text-[#1DB954] text-xl font-semibold mb-2">API Usage</h2>
+    <p class="mb-2">To use your API key, include it in the Authorization header of your HTTP requests:</p>
+    <pre class="font-mono p-2 bg-gray-100 border border-gray-300 rounded">Authorization: Bearer YOUR_API_KEY</pre>
+    <p class="mt-3 mb-2">Or include it as a query parameter (less secure for the key itself):</p>
+    <pre class="font-mono p-2 bg-gray-100 border border-gray-300 rounded">https://your-piper-instance.com/endpoint?api_key=YOUR_API_KEY</pre>
 </div>
 
 <script>

pages/templates/components/navBar.gohtml

···
 {{ define "components/navBar" }}
 
-    <div class="nav">
-        <a href="/">Home</a>
+    <nav class="flex flex-wrap mb-5 gap-x-4 gap-y-1">
+        <a class="text-[#1DB954] font-bold no-underline" href="/">Home</a>
 
         {{if .IsLoggedIn}}
-            <a href="/current-track">Spotify Current</a>
-            <a href="/history">Spotify History</a>
-            <a href="/link-lastfm">Link Last.fm</a>
+            <a class="text-[#1DB954] font-bold no-underline" href="/current-track">Spotify Current</a>
+            <a class="text-[#1DB954] font-bold no-underline" href="/history">Spotify History</a>
+            <a class="text-[#1DB954] font-bold no-underline" href="/link-lastfm">Link Last.fm</a>
             {{ if .LastFMUsername }}
-                <a href="/lastfm/recent">Last.fm Recent</a>
+                <a class="text-[#1DB954] font-bold no-underline" href="/lastfm/recent">Last.fm Recent</a>
             {{ end }}
-            <a href="/api-keys">API Keys</a>
-            <a href="/login/spotify">Connect Spotify Account</a>
-            <a href="/logout">Logout</a>
+            <a class="text-[#1DB954] font-bold no-underline" href="/api-keys">API Keys</a>
+            <a class="text-[#1DB954] font-bold no-underline" href="/login/spotify">Connect Spotify Account</a>
+            <a class="text-[#1DB954] font-bold no-underline" href="/logout">Logout</a>
         {{ else }}
-            <a href="/login/atproto">Login with ATProto</a>
+            <a class="text-[#1DB954] font-bold no-underline" href="/login/atproto">Login with ATProto</a>
         {{ end }}
-    </div>
+    </nav>
 {{ end }}

pages/templates/home.gohtml

···
 
 {{ define "content" }}
 
-    <h1>Piper - Multi-User Spotify & Last.fm Tracker via ATProto</h1>
+    <h1 class="text-[#1DB954]">Piper - Multi-User Spotify & Last.fm Tracker via ATProto</h1>
     {{ template "components/navBar" .NavBar }}
 
 
-    <div class="card">
-        <h2 class="">Welcome to Piper</h2>
-        <p>Piper is a multi-user application that records what you're listening to on Spotify and Last.fm, saving your listening history.</p>
+    <div class="border border-gray-300 rounded-lg p-5 mb-5">
+        <h2 class="text-xl font-semibold mb-2">Welcome to Piper</h2>
+        <p class="mb-3">Piper is a multi-user application that records what you're listening to on Spotify and Last.fm, saving your listening history.</p>
 
     {{if .NavBar.IsLoggedIn}}
-        <p>You're logged in!</p>
-        <ul>
-            <li><a href="/login/spotify">Connect your Spotify account</a> to start tracking.</li>
-            <li><a href="/link-lastfm">Link your Last.fm account</a> to track scrobbles.</li>
+        <p class="mb-2">You're logged in!</p>
+        <ul class="list-disc pl-5 mb-3">
+            <li><a class="text-[#1DB954] font-bold" href="/login/spotify">Connect your Spotify account</a> to start tracking.</li>
+            <li><a class="text-[#1DB954] font-bold" href="/link-lastfm">Link your Last.fm account</a> to track scrobbles.</li>
         </ul>
-        <p>Once connected, you can check out your:</p>
-        <ul>
-            <li><a href="/current-track">Spotify current track</a> or <a href="/history">listening history</a>.</li>
+        <p class="mb-2">Once connected, you can check out your:</p>
+        <ul class="list-disc pl-5 mb-3">
+            <li><a class="text-[#1DB954] font-bold" href="/current-track">Spotify current track</a> or <a class="text-[#1DB954] font-bold" href="/history">listening history</a>.</li>
         {{ if .NavBar.LastFMUsername }}
-            <li><a href="/lastfm/recent">Last.fm recent tracks</a>.</li>
+            <li><a class="text-[#1DB954] font-bold" href="/lastfm/recent">Last.fm recent tracks</a>.</li>
         {{ end }}
 
         </ul>
-        <p>You can also manage your <a href="/api-keys">API keys</a> for programmatic access.</p>
+        <p class="mb-3">You can also manage your <a class="text-[#1DB954] font-bold" href="/api-keys">API keys</a> for programmatic access.</p>
 
         {{ if .NavBar.LastFMUsername }}
-            <p class='service-status'>Last.fm Username: {{ .NavBar.LastFMUsername }}</p>
+            <p class='italic text-gray-600'>Last.fm Username: {{ .NavBar.LastFMUsername }}</p>
         {{else }}
-            <p class='service-status'>Last.fm account not linked.</p>
+            <p class='italic text-gray-600'>Last.fm account not linked.</p>
         {{end}}
 
 
         {{ else }}
 
-            <p>Login with ATProto to get started!</p>
-            <form action="/login/atproto">
-                <label for="handle">handle:</label>
-                <input type="text" id="handle" name="handle" >
-                <input class="teal-input" type="submit" value="submit">
+            <p class="mb-3">Login with ATProto to get started!</p>
+            <form class="space-y-2" action="/login/atproto">
+                <label class="block" for="handle">handle:</label>
+                <input class="block w-[95%] p-2 border border-gray-300 rounded" type="text" id="handle" name="handle" >
+                <input class="bg-[#1DB954] text-white px-4 py-2.5 rounded cursor-pointer hover:opacity-90" type="submit" value="submit">
             </form>
 
 

pages/templates/lastFMForm.gohtml

···
 {{ define "content" }}
     {{ template "components/navBar" .NavBar }}
 
-    <div class="lastfm-form">
-        <h2>Link Your Last.fm Account</h2>
-        <p>Enter your Last.fm username to start tracking your scrobbles.</p>
-        <form method="post" action="/link-lastfm">
-            <label for="lastfm_username">Last.fm Username:</label>
-            <input type="text" id="lastfm_username" name="lastfm_username" value="{{.CurrentUsername}}" required>
-            <input class="last-fm-input" type="submit" value="Save Username">
+    <div class="max-w-[600px] mx-auto my-5 p-5 border border-gray-300 rounded-lg">
+        <h2 class="text-xl font-semibold mb-2">Link Your Last.fm Account</h2>
+        <p class="mb-3">Enter your Last.fm username to start tracking your scrobbles.</p>
+        <form class="space-y-2" method="post" action="/link-lastfm">
+            <label class="block" for="lastfm_username">Last.fm Username:</label>
+            <input class="block w-[95%] p-2 border border-gray-300 rounded" type="text" id="lastfm_username" name="lastfm_username" value="{{.CurrentUsername}}" required>
+            <input class="bg-[#d51007] text-white px-4 py-2.5 rounded cursor-pointer hover:opacity-90" type="submit" value="Save Username">
         </form>
     </div>
 

pages/templates/layouts/base.gohtml

···
     <title>Piper - Spotify & Last.fm Tracker</title>
     <link rel="stylesheet" href="/static/main.css">
 </head>
-<body>
+<body class="font-sans max-w-[800px] mx-auto p-5 leading-relaxed">
 {{ block "content" . }}{{ end }}
 
 </body>