Adjust learn.wpcarro.dev's styles for all devices

- Add a max width to constraint the width of the content
- Add horizontal padding to improve readability on handheld devices
- Reduce the font size of all headings
This commit is contained in:
William Carroll 2020-03-08 19:23:19 +00:00
parent 5fd094d39c
commit 669b728e49

View file

@ -7,8 +7,8 @@
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Learn to program</title> <title>Learn to program</title>
</head> </head>
<body class="font-serif container mx-auto"> <body class="font-serif container max-w-2xl mx-auto px-8">
<h1 class="text-6xl text-center my-4">I can teach you to code.</h1> <h1 class="text-5xl text-center my-4">I can teach you to code.</h1>
<div class="my-4"> <div class="my-4">
<p class="leading-relaxed mb-4"> <p class="leading-relaxed mb-4">
My name is William. I have programmed as a professional for five years My name is William. I have programmed as a professional for five years
@ -22,7 +22,7 @@
</p> </p>
</div> </div>
<div class="my-4"> <div class="my-4">
<h2 class="text-4xl">Why coding?</h2> <h2 class="text-3xl">Why coding?</h2>
<p class="leading-relaxed mb-4"> <p class="leading-relaxed mb-4">
Are you interested in creating your own website? Perhaps you would like Are you interested in creating your own website? Perhaps you would like
to make your own video game. Maybe you like the notion of automating the to make your own video game. Maybe you like the notion of automating the
@ -39,14 +39,14 @@
</p> </p>
</div> </div>
<div class="my-4"> <div class="my-4">
<h2 class="text-4xl">Pricing</h2> <h2 class="text-3xl">Pricing</h2>
<p class="leading-relaxed mb-4"> <p class="leading-relaxed mb-4">
I charge £50 per hour for video lessons and £100 per hour for in-person I charge £50 per hour for video lessons and £100 per hour for in-person
sessions. I am currently based in South Kensington, London. sessions. I am currently based in South Kensington, London.
</p> </p>
</div> </div>
<div class="my-4"> <div class="mt-4 mb-8">
<h2 class="text-4xl">Contact</h2> <h2 class="text-3xl">Contact</h2>
<p class="leading-relaxed mb-4"> <p class="leading-relaxed mb-4">
Whether you want to sign-up or simply want to learn more, send me an Whether you want to sign-up or simply want to learn more, send me an
email at <a href="mailto:wpcarro@gmail.com" class="font-bold text-blue-600 hover:underline">wpcarro@gmail.com</a>. email at <a href="mailto:wpcarro@gmail.com" class="font-bold text-blue-600 hover:underline">wpcarro@gmail.com</a>.