added global styles for common things

NathanWEdwards · Aug 3, 2021 · dfd8304 · dfd8304
1 parent e02e65e
commit dfd8304
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,3 +1,24 @@
+@tailwind base; /* Preflight will be injected here */
+
+@tailwind components;
+
+@tailwind utilities;
+
+@layer base {
+  a {
+    @apply underline text-blue-500;
+  }
+  p {
+    @apply mb-4;
+  }
+  dt {
+    @apply font-bold;
+  }
+  dd {
+    @apply mb-4;
+  }
+}
+
 body {
   background: #f9f9f9;
 }
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,6 +1,5 @@
-import Head from "next/head";
-import 'tailwindcss/tailwind.css';
-import '../css/styles.css'
+import Head from 'next/head';
+import '../css/styles.css';
 
 function App({ Component, pageProps }) {
     return (

diff --git a/pages/index.js b/pages/index.js
@@ -21,9 +21,9 @@ export default function Home() {
           <p>
             Just text your case or ticket number to:
           </p>
-          <div id="phoneNumber" className="block p-4 text-2xl font-bold">
+          <p id="phoneNumber" className="text-2xl font-bold">
             { process.env.NEXT_PUBLIC_PHONE_NUMBER }
-          </div>
+          </p>
           <p>
             We will attempt to send you a reminder the evening before your court hearing.
           </p>
@@ -49,32 +49,32 @@ export default function Home() {
         </h4>
 
         <dl>
-          <dt className="font-bold">
+          <dt>
             How do I turn off all notifications?
           </dt>
-          <dd className="mb-4">
+          <dd>
             Reply to the message with "stop" and we will stop sending you notifications.
           </dd>
 
-          <dt className="font-bold">
+          <dt>
             How do I turn off notifications for an individual case or ticket?
           </dt>
-          <dd className="mb-4">
+          <dd>
             Text in the case or ticket number you are currently following to 1-907-312-2700 and the service will reply with the option to reply "DELETE" to stop notifications for that case or ticket.
           </dd>
 
-          <dt className="font-bold">
+          <dt>
             Do I still need to verify my court date?
           </dt>
-          <dd className="mb-4">
-            Yes! Court dates change frequently, so you should always verify the date and time of your hearing by visiting the <a className="underline text-blue-500" href="https://www.vermontjudiciary.org/court-hearings">Vermont Judiciary</a>.
+          <dd>
+            Yes! Court dates change frequently, so you should always verify the date and time of your hearing by visiting the <a href="https://www.vermontjudiciary.org/court-hearings">Vermont Judiciary</a>.
           </dd>
 
-          <dt className="font-bold">
+          <dt>
             Who maintains CourtBotVT?
           </dt>
-          <dd className="mb-4">
-            CourtBotVT is maintained by volunteers at Code for BTV, a brigade of Code for America. If you would like to be involved with this or similar projects, please visit: <a className="underline text-blue-500" href="http://codeforbtv.org">Code for BTV</a>.
+          <dd>
+            CourtBotVT is maintained by volunteers at Code for BTV, a brigade of Code for America. If you would like to be involved with this or similar projects, please visit: <a href="http://codeforbtv.org">Code for BTV</a>.
           </dd>
         </dl>
       </div>