feat(links): legal info and credits in card

scss/main.scss

@@ -44,6 +44,8 @@ a {
   gap: 1rem;
   font-size: 16px;
   margin-left: 1rem;
+  align-items: center;
+  justify-content: center;
   @media only screen and (max-width: vars.$bp-little) {
     gap: 0;
     align-items: center;
@@ -169,14 +171,17 @@ h4 {
   column-gap: 1rem;
   row-gap: 0.5rem;
   @media only screen and (max-width: vars.$bp-little) {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 1fr;
     column-gap: 0.5rem;
     align-items: center;
+    margin-bottom: 2rem;
+    direction: rtl;
   }
   & .link {
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 100%;
     width: 100%;
     box-shadow: 0 0 50px -20px rgba(0,0,0,0.75);
     border-radius: 16px;

templates/base/base.gohtml

@@ -15,8 +15,6 @@
     </div>
     <footer class="credits">
         <p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p>
-        <p><a href="{{ .Data.Legal.LegalInformationLink }}">Legal information</a></p>
-        <p><a href="/credits">Credits</a></p>
     </footer>
     <script type="module" src="{{getAssetPath "index.js"}}" defer></script>
     </body>

templates/page/index.gohtml

@@ -18,9 +18,17 @@
                     <a href="{{ .Link }}" style="{{ .GetLinkColor }}">{{ .Content }}</a>
                 </div>
             {{ end }}
+            <div class="link" style="{{ .Color.Button.GetBackground }}">
+                <a href="{{ .Legal.LegalInformationLink }}" target="_blank" style="{{ .Color.Button.GetTextColor }}">
+                    Legal information
+                </a>
+            </div>
             <div class="link" style="{{ .Color.Button.GetBackground }}">
                 <a href="/tags" style="{{ .Color.Button.GetTextColor }}">Tags</a>
             </div>
+            <div class="link" style="{{ .Color.Button.GetBackground }}">
+                <a href="/credits" style="{{ .Color.Button.GetTextColor }}">Credits</a>
+            </div>
         </div>
     </main>
 {{end}}