diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2023-07-15 02:27:05 -0400 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2023-07-15 02:27:05 -0400 |
| commit | 959996961284a2800004eca2205add8e7d4f40f2 (patch) | |
| tree | bc02ae4091cf88eeb70613319f5426fd7d29dae8 | |
| parent | a5db54aaf6cde7a88e35f24b624b99daa4c4623e (diff) | |
| download | alure-website-959996961284a2800004eca2205add8e7d4f40f2.tar.gz alure-website-959996961284a2800004eca2205add8e7d4f40f2.tar.bz2 alure-website-959996961284a2800004eca2205add8e7d4f40f2.zip | |
Fixed more padding and fix mobile support on pages
| -rw-r--r-- | app/layout.js | 4 | ||||
| -rw-r--r-- | app/page.js | 14 | ||||
| -rw-r--r-- | app/travel-advisory/page.js | 18 |
3 files changed, 18 insertions, 18 deletions
diff --git a/app/layout.js b/app/layout.js index 9043715..118fad1 100644 --- a/app/layout.js +++ b/app/layout.js @@ -14,7 +14,7 @@ export default function RootLayout({ children }) { return ( <html lang="en"> <body className={exo.className}> - <div className="px-10 mx-15 py-0.5 font-medium space-x-3 text-right"> + <div className="sm:px-10 px-5 py-0.5 font-medium space-x-3 text-right"> <a href="https://aircs.racing" className="transition duration-150 ease-out hover:ease-in md:hover:text-blue-500">aircs.racing ↗</a> <a href="https://alee14.me" className="transition duration-150 ease-out hover:ease-in md:hover:text-blue-500">alee14.me ↗</a> </div> @@ -60,7 +60,7 @@ export default function RootLayout({ children }) { </div> </nav> {children} - <footer className="flex flex-col text-center py-3 space-y-2 bg-blue-950 text-light"> + <footer className="flex flex-col text-center py-3 space-y-2 bg-blue-950 text-light text-sm sm:text-base"> <p>Alure Regions is a fictional country made for the bits & Bytes Minecraft Server</p> <p>This website is proudly written using Next.JS and Tailwind CSS</p> </footer> diff --git a/app/page.js b/app/page.js index bcc0f4a..dd8513d 100644 --- a/app/page.js +++ b/app/page.js @@ -3,14 +3,14 @@ export default function Home() { <main className="flex flex-col"> <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-500 bg-blend-multiply"> <div className="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56 space-y-3"> - <h1 className="font-medium text-5xl">Welcome to the Alure Regions</h1> - <h2 className="font-light text-3xl">The official website of the Government of Alure Regions</h2> + <h1 className="font-medium sm:text-5xl text-2xl">Welcome to the Alure Regions</h1> + <h2 className="font-light sm:text-3xl text-lg">The official website of the Government of Alure Regions</h2> </div> </div> <ul> <li> <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply"> - <div className="px-20 py-10 space-y-2"> + <div className="sm:px-40 px-10 py-10 space-y-2"> <h1 className="font-medium text-5xl">Alee Isle</h1> <span>Est. 2017 - Premier: Alee</span> <h2 className="text-lg">Capital of Alure Regions and the original home of MinePot</h2> @@ -19,7 +19,7 @@ export default function Home() { </li> <li> <div className="bg-center bg-no-repeat bg-[url('/regions/breadcroust.webp')] bg-gray-600 bg-blend-multiply"> - <div className="px-20 py-10 space-y-2"> + <div className="sm:px-40 px-10 py-10 space-y-2"> <h1 className="font-medium text-5xl">BreadCroust</h1> <span>Est. 2018 - Premier: Croust</span> <h2 className="text-lg">Home to MinePot Barton Centre</h2> @@ -28,7 +28,7 @@ export default function Home() { </li> <li> <div className="bg-center bg-no-repeat bg-[url('/regions/skycity.webp')] bg-gray-600 bg-blend-multiply"> - <div className="px-20 py-10 space-y-2"> + <div className="sm:px-40 px-10 py-10 space-y-2"> <h1 className="font-medium text-5xl">SkyCity</h1> <span>Est. 2018 - Premier: Rahilu</span> <h2 className="text-lg">A city that floats in the sky</h2> @@ -37,7 +37,7 @@ export default function Home() { </li> <li> <div className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply"> - <div className="px-20 py-10 space-y-2"> + <div className="sm:px-40 px-10 py-10 space-y-2"> <h1 className="font-medium text-5xl">Silicon Valley</h1> <span>Est. 2018 - Premier: Inkydink</span> <h2 className="text-lg">Where all tech-related things goes here</h2> @@ -45,7 +45,7 @@ export default function Home() { </div> </li> </ul> - <div className="px-20 py-3"> + <div className="sm:px-40 px-10 py-3"> <h1 className="text-2xl font-medium">About Alure Regions</h1> <p>Founded in July 2023, the goal of Alure Regions is to have more freedom on our regions.</p> </div> diff --git a/app/travel-advisory/page.js b/app/travel-advisory/page.js index 545a675..3ce0de0 100644 --- a/app/travel-advisory/page.js +++ b/app/travel-advisory/page.js @@ -2,36 +2,36 @@ export default function TravelAdvisory(){ return ( <main className="flex flex-col"> <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply"> - <div className="px-4 mx-auto max-w-screen-xl text-left py-24 lg:py-10 space-y-3"> - <h1 className="font-medium text-2xl">Travel Advisory</h1> + <div className="sm:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3"> + <h1 className="font-medium text-4xl">Travel Advisory</h1> <h2 className="font-light text-lg">Information whether its safe to travel to other countries</h2> </div> </div> <div> - <h1 className="text-3xl p-5 px-20">Legend</h1> + <h1 className="p-5 sm:px-40 px-10 text-3xl">Legend</h1> <ul> - <li className="p-5 px-20 bg-green-950"> + <li className="p-6 sm:px-40 px-10 bg-green-950"> <p className="font-medium text-lg">Take normal security precautions</p> <p>Take similar precautions to those you would take in Alure Regions.</p> </li> - <li className="p-5 px-20 bg-yellow-700"> + <li className="p-6 sm:px-40 px-10 bg-yellow-700"> <p className="font-medium text-lg">Exercise a high degree of caution</p> <p>There are certain safety and security concerns or the situation could change quickly. Be very cautious at all times, monitor local media and follow the instructions of local authorities.</p> <p><b className="font-semibold"> IMPORTANT:</b> The two levels below are official Government of Alure Regions Travel Advisories and are issued when the safety and security of Alurians travelling or living in the country or region may be at risk.</p> </li> - <li className="p-5 px-20 bg-orange-700"> + <li className="p-6 sm:px-40 px-10 bg-orange-700"> <p className="font-medium text-lg">Avoid non-essential travel</p> <p>Your safety and security could be at risk. You should think about your need to travel to this country, territory or region based on family or business requirements, knowledge of or familiarity with the region, and other factors. If you are already there, think about whether you really need to be there. If you do not need to be there, you should think about leaving.</p> </li> - <li className="p-5 px-20 bg-red-950"> + <li className="p-6 sm:px-40 px-10 bg-red-950"> <p className="font-medium text-lg">Avoid all travel</p> <p>You should not travel to this country, territory or region. Your personal safety and security are at great risk. If you are already there, you should think about leaving if it is safe to do so.</p> </li> </ul> </div> - <div className="px-20 py-3 bg-blue-800"><h2 className="font-medium text-lg">This page may be inaccurate at times, refer to the Minecraft General Announcements channel for the latest updates</h2></div> + <div className="sm:px-40 px-10 py-3 bg-blue-800"><h2 className="font-medium text-lg">This page may be inaccurate at times, refer to the Minecraft General Announcements channel for the latest updates</h2></div> <div className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply"> - <div className="px-10 mx-3 max-w-screen-xl text-left py-10 space-y-3"> + <div className="sm:px-40 px-10 py-10 space-y-3 "> <h1 className="font-medium text-5xl">Country name</h1> <h2 className="text-lg">Take normal security precautions</h2> <button className="bg-blue-600 px-4 py-2">Information</button> |
