add disclaimers

Author: kaijchang

app/public/fonts/big_noodle_titling.ttf

@@ -2,27 +2,33 @@ import React from 'react';
 
 const Home: React.FunctionComponent = () => {
   return (
-    <div className='bg-gray-200 min-h-screen'>
-      <div className='text-center bg-white py-5' style={ { borderTop: 'rgb(191,13,62) solid 45px', borderBottom: 'rgb(10,49,97) solid 45px' } }>
+    <div className='flex flex-col items-center bg-gray-200 min-h-screen'>
+      <div className='text-center bg-white w-full py-5' style={ { borderTop: 'rgb(191,13,62) solid 45px', borderBottom: 'rgb(10,49,97) solid 45px' } }>
         <div className='flex flex-row items-center justify-center'>
           <span className='text-2xl text-flag-blue'>★</span>
           <h1 className='text-6xl text-bold text-yellow-400 font-big-star uppercase leading-none px-5'>
             Firebrand
           </h1>
           <span className='text-2xl text-flag-blue'>★</span>
         </div>
-        <h3 className='text-xl text-flag-red font-big-star'>ELO Ratings for U.S. Politicians</h3>
+        <h3 className='text-xl text-flag-red font-big-star'>ELO* Ratings for U.S. Politicians</h3>
       </div>
-      <h3 className='text-3xl text-center font-big-star py-3'>Top Politicians</h3>
-      <div className='rounded-lg bg-gray-100 w-5/6 mx-auto'>
+      <h3 className='text-3xl text-center font-big-star w-3/4 py-1 my-2' style={ { borderBottom: 'black solid 5px' } }>Top Rated Politicians</h3>
+      <div className='flex flex-row justify-around font-big-noodle w-3/4 my-1'>
+        <span>* Ratings are technically calculated using Trueskill, not ELO</span>
+        <span>** Ratings are purely for entertainment purposes</span>
+      </div>
+      <div className='rounded-lg bg-gray-100 font-big-noodle w-5/6'>
         <ul>
           <li className='flex flex-row items-center rounded-lg hover:bg-gray-300 cursor-pointer text-2xl p-3'>
-            <img src='/badges/rank-GrandmasterTier.png' height={ 50 } width={ 50 }/>
-            <span className='text-outlined text-white text-3xl font-big-noodle mr-5'>3700</span>Bernie Sanders
+            1.
+            <img src='/badges/rank-GrandmasterTier.png' height={ 50 } width={ 50 } className='mx-1'/>
+            <i className='text-outlined text-white text-3xl mr-3'>3700</i>Bernie Sanders
           </li>
           <li className='flex flex-row items-center rounded-lg hover:bg-gray-300 cursor-pointer text-2xl p-3'>
-            <img src='/badges/rank-GrandmasterTier.png' height={ 50 } width={ 50 }/>
-            <span className='text-outlined text-white text-3xl font-big-noodle mr-5'>3655</span>Barack Obama
+            2.
+            <img src='/badges/rank-GrandmasterTier.png' height={ 50 } width={ 50 } className='mx-1'/>
+            <i className='text-outlined text-white text-3xl mr-3'>3655</i>Barack Obama
           </li>
         </ul>
       </div>

app/src/pages/index.tsx

@@ -3,6 +3,12 @@
 @font-face {
     src: url("/fonts/big_noodle_titling_oblique.ttf") format("truetype");
     font-family: Big Noodle Too;
+    font-style: italic;
+}
+
+@font-face {
+    src: url("/fonts/big_noodle_titling.ttf") format("truetype");
+    font-family: Big Noodle Too;
 }
 
 @font-face {
@@ -14,8 +20,17 @@
 @tailwind components;
 @tailwind utilities;
 
+@keyframes text-shadow-pulse-darkorange {
+    from {
+        text-shadow: darkorange 0 0 2px;
+    }
+    to {
+        text-shadow: darkorange 0 0 4px;
+    }
+}
+
 .text-outlined {
     -webkit-text-stroke-width: 0.5px;
     -webkit-text-stroke-color: black;
-    text-shadow: darkorange 0 0 2px;
+    animation: text-shadow-pulse-darkorange 1s infinite alternate;
 }