Use monospace font, improve layout overall

Imafikus · Oct 8, 2021 · 2aaadc3 · 2aaadc3
1 parent a9c6d2c
commit 2aaadc3
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -18,30 +18,35 @@ export default function Home() {
   const displayLinkIfNeeded = () => {
     if(!['', 'Unavailable'].includes(currentlyDisplayedCommentSource)) {
       return (
-        <p className='hover:underline'><a href={currentlyDisplayedCommentSource}>Source</a></p>
+        <div>
+          <p className='hover:underline hidden sm:block'><a href={currentlyDisplayedCommentSource}><b>Source</b>: {currentlyDisplayedCommentSource}</a></p>
+          <p className='hover:underline sm:hidden text-xl'><a href={currentlyDisplayedCommentSource}><b><u>Source</u></b></a></p>
+        </div>
       )
     }
     return '';
   }
 
   return (
-    <div className='flex flex-wrap w-screen h-screen bg-gray-900 text-white' >
+    <div className='flex flex-wrap w-screen h-screen bg-gray-900 text-white font-mono' >
       <Head>
         <title>Random github</title>
         <link rel='icon' href='/favicon.ico' />
       </Head>
 
-      <main className='m-auto w-full md:w-1/2'>
-        <div className='text-center'>
-          <p className='text-2xl md:text-3xl p-2 my-2'>{currentlyDisplayedCommentContent}</p>
-          <button 
-            className=' p-2 bg-blue-500 hover:bg-blue-700 text-white text-xl md:text-2xl font-bold py-2 px-4 rounded-full'
-            onClick={getComment}
-          >
-            Get random comment
-          </button>
+      <main className='m-auto w-2/3 sm:w-full'>
+        <div className='text-left sm:text-center p-2 my-2'>
+          <p className='text-2xl md:text-3xl'>{currentlyDisplayedCommentContent}</p>
+          <div className='mt-5'>
+            <button 
+              className=' bg-blue-500 hover:bg-blue-700 text-white text-xl md:text-2xl font-bold py-4 px-6 rounded-full mb-5'
+              onClick={getComment}
+            >
+              Get random comment
+            </button>
+            <p>{displayLinkIfNeeded()}</p>
+          </div>
         </div>
-        <p>{displayLinkIfNeeded()}</p>
         <div>
 
         </div>