Make it purdy

lesesalen · Nov 15, 2021 · 617c35e · 617c35e
1 parent 36def0e
commit 617c35e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 40 deletions.
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -14,12 +14,10 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html lang="no" className="h-full">
+      <Html lang="no" className="h-full w-screen overflow-x-hidden">
         <Head />
         <body className="h-full">
-          <div className="bg-white min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
-            <Main />
-          </div>
+          <Main />
           <NextScript />
         </body>
       </Html>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -20,19 +20,17 @@ const Results = ({ entries }: { entries: Entry[] | undefined }) => {
   if (entries === undefined) <p>What</p>;
 
   return (
-    <div className="bg-white">
-      <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
-        <div className="lg:grid lg:grid-cols-3 lg:gap-8">
-          <div className="mt-12 lg:mt-0 lg:col-span-2">
-            <dl className="space-y-12">
-              {entries &&
-                entries.map((entry) => (
-                  <div key={entry.name}>
-                    <Entry {...entry} />
-                  </div>
-                ))}
-            </dl>
-          </div>
+    <div className="min-w-xl max-w-xl mx-auto lg:py-16 px-4">
+      <div className="lg:grid lg:grid-cols-3 lg:gap-8">
+        <div className="mt-12 lg:mt-0 lg:col-span-2">
+          <dl className="space-y-12">
+            {entries &&
+              entries.map((entry) => (
+                <div key={entry.name}>
+                  <Entry {...entry} />
+                </div>
+              ))}
+          </dl>
         </div>
       </div>
     </div>
@@ -44,34 +42,37 @@ const Home: NextPage = () => {
   console.log(search);
 
   return (
-    <div className="max-w-max mx-auto">
-      <main className="sm:flex">
-        <p className="text-4xl font-extrabold text-indigo-600 sm:text-5xl">
-          ordbok
-        </p>
-        <div className="sm:ml-6">
-          <div className="sm:border-l sm:border-gray-200 sm:pl-6">
-            <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
-              Need a word?
-            </h1>
-            <p className="mt-1 text-base text-gray-500">
-              Informatics is confusing, use this
+    <div className="bg-white max-h-screen min-h-full px-4 py-4 md:grid md:place-items-center">
+      <div className="w-full">
+        <div className="max-w-xl mx-auto">
+          <main className="sm:flex">
+            <p className="text-4xl font-extrabold text-indigo-600 sm:text-5xl">
+              ordbok
             </p>
-          </div>
-          <div className="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
-            <div className="mt-1 relative flex items-center">
-              <input
-                type="text"
-                name="search"
-                id="search"
-                className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
-                onChange={(e) => setSearch(filterEntry(e.target.value))}
-              />
+            <div className="sm:ml-6">
+              <div className="sm:border-l sm:border-gray-200 sm:pl-6">
+                <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+                  Need a word?
+                </h1>
+                <p className="mt-1 text-base text-gray-500">
+                  Informatics is confusing, use this
+                </p>
+              </div>
+              <div className="flex space-x-3 sm:border-l sm:border-transparent sm:pl-6"></div>
             </div>
+          </main>
+          <div className="mt-4 relative flex items-center">
+            <input
+              type="text"
+              name="search"
+              id="search"
+              className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
+              onChange={(e) => setSearch(filterEntry(e.target.value))}
+            />
           </div>
           <Results entries={search} />
         </div>
-      </main>
+      </div>
     </div>
   );
 };

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  mode: "jit",
   purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
   darkMode: false, // or 'media' or 'class'
   theme: {