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">
<title>Learn to program</title>
</head>
<body class="font-serif container mx-auto">
<h1 class="text-6xl text-center my-4">I can teach you to code.</h1>
<body class="font-serif container max-w-2xl mx-auto px-8">
<h1 class="text-5xl text-center my-4">I can teach you to code.</h1>
<div class="my-4">
<p class="leading-relaxed mb-4">
My name is William. I have programmed as a professional for five years
@ -22,7 +22,7 @@
</p>
</div>
<div class="my-4">
<h2 class="text-4xl">Why coding?</h2>
<h2 class="text-3xl">Why coding?</h2>
<p class="leading-relaxed mb-4">
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
@ -39,14 +39,14 @@
</p>
</div>
<div class="my-4">
<h2 class="text-4xl">Pricing</h2>
<h2 class="text-3xl">Pricing</h2>
<p class="leading-relaxed mb-4">
I charge £50 per hour for video lessons and £100 per hour for in-person
sessions. I am currently based in South Kensington, London.
</p>
</div>
<div class="my-4">
<h2 class="text-4xl">Contact</h2>
<div class="mt-4 mb-8">
<h2 class="text-3xl">Contact</h2>
<p class="leading-relaxed mb-4">
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>.