diff options
| author | William Carroll <wpcarro@gmail.com> | 2021-12-26T17·32-0400 |
|---|---|---|
| committer | clbot <clbot@tvl.fyi> | 2021-12-26T17·35+0000 |
| commit | e8087acc7d42c2e275825ceffd04554aff5b9708 (patch) | |
| tree | a9531c1e1db5d4187a5c043e431c711061fe0372 /users/wpcarro/website | |
| parent | 4dc34c4c1c8a29baf499d1e50daa8f42e0939a1e (diff) | |
feat(wpcarro/website): Add responsive styling for mobile 📱 r/3437
Pretty easy with Tailwind CSS Change-Id: I2acf6ef3b093fbd604fb17ca5334c909e2e24b2d Reviewed-on: https://cl.tvl.fyi/c/depot/+/4672 Reviewed-by: wpcarro <wpcarro@gmail.com> Autosubmit: wpcarro <wpcarro@gmail.com> Tested-by: BuildkiteCI
Diffstat (limited to 'users/wpcarro/website')
| -rw-r--r-- | users/wpcarro/website/index.html | 34 |
1 files changed, 28 insertions, 6 deletions
diff --git a/users/wpcarro/website/index.html b/users/wpcarro/website/index.html index b08fdf8f4e..089528cb17 100644 --- a/users/wpcarro/website/index.html +++ b/users/wpcarro/website/index.html @@ -19,16 +19,16 @@ </script> </head> <body class="font-mono bg-gray-100"> - <header class="sticky top-0 pt-6"> - <div class="flex max-w-3xl mx-auto"> - <div class="flex-1"> + <header class="sticky bg-gray-100 top-0 pt-6"> + <div class="flex max-w-sm md:max-w-3xl mx-auto"> + <div class="flex-1 text-center md:text-left text-xl md:text-base"> <a href="https://cs.tvl.fyi/depot/-/blob/users/wpcarro/website/index.html"> <h1 class="font-bold"> <span class="text-black">(</span><a class="text-purple-600 hover:underline" href="https://cs.tvl.fyi/depot/-/blob/users/wpcarro/website/index.html">def</a> <a class="text-green-600 hover:underline text-bold" href="https://wpcarro.dev">"wpcarro.dev"</a><span class="text-black">)</span> </h1> </a> </div> - <nav class="flex-1"> + <nav class="flex-1 hidden md:block"> <ul class="list-reset flex justify-end space-x-8"> <li> <a class="hover:underline" href="https://wpcarro.dev/habits"> @@ -55,9 +55,9 @@ </div> </header> - <div class="max-w-prose mx-auto"> + <div class="max-w-sm md:max-w-prose mx-auto"> <section class="leading-7"> - <p class="relative text-3xl text-center font-bold pt-14 pb-10"> + <p class="relative text-3xl text-center font-bold pt-10 md:pt-14 pb-10"> Hey! I'm William.<span class="pl-10 relative"><span class="block absolute right-0 top-0 transition-transform hover:rotate-90">👋</span></span> </p> <p class="pb-4"> @@ -76,6 +76,28 @@ fumbling around on the piano or drums. </p> </section> + + <footer class="md:hidden"> + <h2 class="text-2xl font-bold pt-4 pb-6">Other Links</h2> + <ul> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="https://blog.wpcarro.dev"> + Blog <span class="text-blue-300">-></span> + </a> + </li> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="https://github.com/wpcarro"> + GitHub <span class="text-blue-300">-></span> + </a> + </li> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="https://linkedin.com/in/williampatrickcarroll"> + LinkedIn <span class="text-blue-300">-></span> + </a> + </li> + </ul> + </footer> </div> + </body> </html> |