Basic site layout.

server/static/css/admin_extra.css

@@ -0,0 +1,4 @@
+/** Don't show inline item names; it's visual clutter. */
+.tabular.inline-related td.original p {
+  visibility: hidden
+}

server/static/css/base.css

@@ -47,8 +47,8 @@ h6 {
 
 /* All containers behave this way. */
 .container {
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 
@@ -58,10 +58,4 @@ h6 {
     max-width: 640px;
     margin: 0 auto;
   }
-}
-
-
-/** Django admin */
-.tabular.inline-related td.original p {
-  visibility: hidden
 }

server/vb/templates/admin/base_site.html

@@ -3,6 +3,6 @@
 
 {% block extrahead %}
   <script src="{% static 'js/css-scope-inline.js' %}"></script>
-  <link rel="stylesheet" href="{% static 'css/base.css' %}">
+  <link rel="stylesheet" href="{% static 'css/admin_extra.css' %}">
   {{ block.super }}
 {% endblock extrahead %}

server/vb/templates/components/button.dhtml

@@ -0,0 +1,22 @@
+<button style="background-color: {{ bg_color }}; color: {{ color }};">
+  <style>
+    self {
+      cursor: pointer;
+      transition: opacity 0.2s ease-in-out;
+      text-transform: uppercase;
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 100%;
+      border: none;
+      text-align: center;
+      letter-spacing: 0.05em;
+      padding: 20px 24px;
+    }
+
+    self:hover {
+      opacity: 0.7;
+      transition: opacity 0.2s ease-in-out;
+    }
+  </style>
+  {{ text }}
+</button>

server/vb/templates/components/logo_specimen.dhtml

@@ -29,6 +29,7 @@
       }
 
       self .action {
+        cursor: pointer;
         display: flex;
         font-weight: 600;
         align-items: center;

server/vb/templates/includes/faq.dhtml

@@ -4,8 +4,6 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      padding-top: 2.5rem;
-      padding-bottom: 2.5rem;
     }
 
     self .qa {
@@ -53,4 +51,13 @@
       make a type specimen book.
     </p>
   </div>
+  <div class="qa">
+    <h3>Lorem ipsum lorem ipsum?</h3>
+    <p>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </p>
+  </div>
 </div>

server/vb/templates/school.dhtml

@@ -14,23 +14,24 @@
         align-items: center;
       }
 
-      self .cta {
+      self main {
         width: 100%;
         text-align: center;
+        padding: 2rem 0;
       }
 
-      self .cta img {
+      self main img {
         height: 150px;
         margin: 1.5rem 0;
       }
 
-      self .cta p {
+      self main p {
         font-weight: 378;
         font-size: 20px;
         line-height: 130%;
       }
 
-      self .cta h2 {
+      self main h2 {
         font-weight: 500;
         font-size: 36px;
         line-height: 120%;
@@ -40,25 +41,29 @@
       self .faq {
         width: 100%;
         color: white;
+        padding: 2rem 0;
       }
 
-      self .giveaway {
-        height: 10rem;
+      self .button-holder {
+        display: flex;
+        justify-content: center;
+        margin: 1.5rem 0;
       }
     </style>
-    <div class="cta"
-         style="background-color: {{ school.logo.bg_color }};
-                color: {{ school.logo.bg_text_color }}">
+    <main style="background-color: {{ school.logo.bg_color }};
+                 color: {{ school.logo.bg_text_color }}">
       <div class="container">
-        <div class="giveaway"></div>
         <img src="{{ school.logo.url }}"
              alt="{{ school.short_name }} {{ school.mascot }} logo" />
         <h2>Welcome to the Voter Bowl</h2>
         <p>
           {{ school.short_name }} students: check your voter registration status for a 1 in 10 chance to win a $25 Amazon gift card.
         </p>
+        <div class="button-holder">
+          {% include "components/button.dhtml" with text="Check my voter status" bg_color=school.logo.action_color color=school.logo.action_text_color %}
+        </div>
       </div>
-    </div>
+    </main>
     <div class="faq">
       <div class="container">{% include "includes/faq.dhtml" %}</div>
     </div>