Fix See Also spacing.

eswan18 · Oct 29, 2024 · 0efb4d0 · 0efb4d0
1 parent 52bc5ef
commit 0efb4d0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 6 deletions.
diff --git a/layouts/courses/card.html b/layouts/courses/card.html
@@ -12,7 +12,7 @@ <h4 class="card-title mt-0">{{ .Title }}</h3>
       </div>
       <div class="card-actions text-center justify-center mt-4">
         <a href="{{ .Permalink }}">
-          <button class="btn btn-secondary btn-sm rounded-lg">Details →</button>
+          <button class="btn btn-link btn-sm rounded-lg">Details →</button>
         </a>
       </div>
     </div>

diff --git a/layouts/partials/pageContent/seeAlso.html b/layouts/partials/pageContent/seeAlso.html
@@ -1,9 +1,12 @@
 {{/* Expects an array of objects with .link and .text fields */}}
-<div class="w-[75%] mx-auto mt-4 border border-x-0 border-b-0 border-t-gray-300 p-4 flex flex-col sm:flex-row justify-center items-center gap-3">
-  <span>See also: </span>
-  {{ range $x := . }}
-    <a class="btn btn-sm btn-outline no-underline text-sm text-secondary" href="{{ .link }}">
+<div
+  class="w-[75%] mx-auto mt-4 border border-x-0 border-b-0 border-t-gray-300 p-4 flex flex-row flex-wrap justify-center items-center">
+  <div class="px-2">See also:</div>
+  <div class="flex flex-row justify-center items-center">
+    {{ range $x := . }}
+    <a class="btn btn-link px-2" href="{{ .link }}">
       {{ .text }}
     </a>
-  {{ end }}
+    {{ end }}
+  </div>
 </div>
diff --git a/static/css/tailwind-style.css b/static/css/tailwind-style.css
@@ -1803,6 +1803,12 @@ html {
     }
   }
 
+  .btn-link:hover {
+    border-color: transparent;
+    background-color: transparent;
+    text-decoration-line: underline;
+  }
+
   .btn-outline:hover {
     --tw-border-opacity: 1;
     border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
@@ -2531,6 +2537,10 @@ html {
     border-color: var(--btn-color, var(--fallback-b2));
   }
 
+  .btn-primary {
+    --btn-color: var(--fallback-p);
+  }
+
   .btn-secondary {
     --btn-color: var(--fallback-s);
   }
@@ -2583,7 +2593,17 @@ html {
   outline-offset: 2px;
 }
 
+.btn-primary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  outline-color: var(--fallback-p,oklch(var(--p)/1));
+}
+
 @supports (color: oklch(0% 0 0)) {
+  .btn-primary {
+    --btn-color: var(--p);
+  }
+
   .btn-secondary {
     --btn-color: var(--s);
   }
@@ -2623,6 +2643,24 @@ html {
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
 
+.btn-link {
+  border-color: transparent;
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
+  text-decoration-line: underline;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-color: currentColor;
+}
+
+.btn-link.btn-active {
+  border-color: transparent;
+  background-color: transparent;
+  text-decoration-line: underline;
+}
+
 .btn-outline {
   border-color: currentColor;
   background-color: transparent;
@@ -4425,6 +4463,18 @@ html:has(.drawer-toggle:checked) {
   height: 2.25rem;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .min-h-full {
   min-height: 100%;
 }