Add footer, restyle header, fix CSS font @imports

This commit is contained in:
Xevion
2022-12-17 23:34:11 -06:00
parent 707a01176e
commit a2dd414026
3 changed files with 30 additions and 16 deletions

View File

@@ -2,6 +2,7 @@ import {type NextPage} from "next";
import Head from "next/head";
import BoxTable from "../components/BoxTable";
import NoSSR from "react-no-ssr";
import Link from "next/link";
const Home: NextPage = () => {
return (
@@ -12,30 +13,40 @@ const Home: NextPage = () => {
</Head>
<main className="flex w-full flex-col items-center bg-white">
<div className="mt-8 px-3 max-w-screen-md w-[90%]">
<h1 className="text-3xl sm:text-5xl mb-2">100Prisoners.com</h1>
<h1 className="text-3xl font-rokkitt text-zinc-800 sm:text-5xl mb-2">100Prisoners.com</h1>
<div className="prose lg:prose-xl">
<p>
This website is dedicated to exploring the intriguing 100 prisoners problem, a mathematical
challenge that seems astronomically impossible at first, yet can leverage mathematics to raise
the chances one hundred octillion.
<br/>
<br/>
This thought experiment presents a scenario in which a group of 100 prisoners are tasked with
finding their own numbered slip among a collection of 100 boxes, each containing a random
permutation of the numbers 1 through 100.
challenge that seems astronomically impossible at first, yet can leverage mathematics to
raise the chances one hundred octillion.
<br/>
<br/>
This thought experiment presents a scenario in which a group of 100 prisoners are tasked
with finding their own numbered slip among a collection of 100 boxes, each containing a
random permutation of the numbers 1 through 100.
</p>
<p>
The prisoners are allowed to open 50 boxes each in an
attempt to find their own number, and all of the prisoners must be successful in order to be set
free. This problem raises questions about strategy and probability in search of a solution.
The prisoners are allowed to open 50 boxes each in an attempt to find their own number, and
all of the prisoners must be successful in order to be set free. This problem raises
questions about strategy and probability in search of a solution.
</p>
</div>
<div className="pt-5">
<div className="pt-5 pb-8">
<NoSSR>
<BoxTable/>
</NoSSR>
</div>
<div className="flex flex-col items-center">
<div className="grid py-1 grid-cols-1 gap-x-1 whitespace-nowrap divide-x-2">
<div className="col-span-1 p-2">
Created by <Link href={"https://xevion.dev"} about="_blank">
<span className="font-bold">
Ryan Walters
</span>
</Link>
</div>
</div>
</div>
</div>
</main>
</>

View File

@@ -1,5 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@300;400;500;600;700;800&display=swap');
@tailwind base;
@tailwind components;

View File

@@ -4,7 +4,8 @@ module.exports = {
theme: {
extend: {
fontFamily: {
playfair: ["\"Playfair Display\"", "serif"]
playfair: ["\"Playfair Display\"", "serif"],
rokkitt: ["\"Rokkitt\"", "serif"]
}
},
},