feat: ipad res

components/Navbar.js

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const Navbar = ({ name, logo }) => (
   <nav className="flex py-2 border-b dark:border-neutral-800 hover:opacity-70">
-    <div className="w-3/12 md:w-7/12 md:mx-auto">
+    <div className="w-3/12 md:w-full lg:w-7/12 md:mx-11 lg:mx-auto">
       <div className="md:w-2/12">
         <Link href="/">
           {logo ? (

pages/_app.js

@@ -9,12 +9,12 @@ import config from "../config.json";
 
 const Content = ({ children }) => (
   <div className="flex items-center justify-between w-full my-5">
-    <div className="lg:w-7/12 mx-auto">{children}</div>
+    <div className="md:w-11/12 lg:w-7/12 mx-auto">{children}</div>
   </div>
 );
 
 const App = ({ Component, pageProps }) => (
-  <div className='bg-white dark:bg-black dark:text-neutral-200'>
+  <div className='min-h-screen bg-white dark:bg-black dark:text-neutral-200'>
     <Navbar name={config.navbar.logotype} logo={config.navbar.logo} />
     <Content>
       <Component {...pageProps} />

styles/globals.css

@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  background-color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000000;
+  }
+}
+
 /* Somehow tailwind doesn't include this??? */
 .aspect-photos {
   aspect-ratio: 1 / 1;