feat: button styled

17-results-summary-component-go/public/out.css

@@ -423,7 +423,7 @@ video {
 }
 
 :root {
-  --summary-item-color: 0deg 100% 67%
+  --summary-item-color-var: 0deg 100% 67%
     
 }
 
@@ -544,6 +544,14 @@ video {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .h-32 {
   height: 8rem;
 }
@@ -552,6 +560,10 @@ video {
   width: 8rem;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -564,6 +576,10 @@ video {
   flex-direction: column;
 }
 
+.place-items-center {
+  place-items: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -589,6 +605,11 @@ video {
   border-bottom-left-radius: 1.5rem;
 }
 
+.bg-dark-gray-blue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(224 30% 27% / var(--tw-bg-opacity));
+}
+
 .bg-summary-item-color\/10 {
   background-color: hsl(var(--summary-item-color-var) / 0.1);
 }

17-results-summary-component-go/templates/summary-component.gohtml

@@ -67,7 +67,7 @@
           <div
             class="flex flex-row bg-summary-item-color/10"
             style="--summary-item-color-var: 39deg 100% 56%"
-            >
+          >
             <dt class="flex-1 text-summary-item-color">Memory</dt>
             <dd class="flex flex-row">
               <strong>92</strong>
@@ -77,7 +77,7 @@
           <div
             class="flex flex-row bg-summary-item-color/10"
             style="--summary-item-color-var: 166deg 100% 37%"
-            >
+          >
             <dt class="flex-1 text-summary-item-color">Verbal</dt>
             <dd class="flex flex-row">
               <strong>61</strong>
@@ -87,7 +87,7 @@
           <div
             class="flex flex-row bg-summary-item-color/10"
             style="--summary-item-color-var: 234deg 85% 45%"
-            >
+          >
             <dt class="flex-1 text-summary-item-color">Visual</dt>
             <dd class="flex flex-row">
               <strong>72</strong>
@@ -95,7 +95,12 @@
             </dd>
           </div>
         </dl>
-        Continue
+        <a
+          href="/"
+          class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
+        >
+          Continue
+        </a>
       </section>
     </main>
     <footer class="fixed inset-x-0 bottom-1 attribution">