small fixes for mobile (#23)

* fix: font size overflows contact boxes on mobile

* fix: navigation header overlaps with page heading

* chore: added x margin and swapped to word break for cleaner look
This commit is contained in:
Ryan Malani 2023-10-12 03:54:07 -04:00 committed by GitHub
parent ac2627675b
commit a3853e97fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 6 deletions

View File

@ -46,7 +46,7 @@ export default function Example() {
{s.icon}
</span>{" "}
<div className="z-10 flex flex-col items-center">
<span className="text-xl font-medium duration-150 lg:text-3xl text-zinc-200 group-hover:text-white font-display">
<span className="lg:text-xl font-medium duration-150 xl:text-3xl text-zinc-200 group-hover:text-white font-display">
{s.handle}
</span>
<span className="mt-4 text-sm text-center duration-1000 text-zinc-400 group-hover:text-zinc-200">

View File

@ -11,7 +11,7 @@ export default function Home() {
return (
<div className="flex flex-col items-center justify-center w-screen h-screen overflow-hidden bg-gradient-to-tl from-black via-zinc-600/20 to-black">
<nav className="my-16 animate-fade-in">
<ul className="flex items-center justify-center gap-4">
<ul className="flex flex-wrap items-center justify-center gap-4">
{navigation.map((item) => (
<Link
key={item.href}
@ -34,7 +34,7 @@ export default function Home() {
<div className="hidden w-screen h-px animate-glow md:block animate-fade-right bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
<div className="my-16 text-center animate-fade-in">
<h2 className="text-sm text-zinc-500 ">
<h2 className="text-sm text-zinc-500 mx-6">
Hi, my name is Andreas, I'm building serverless and open source
solutions at{" "}
<Link
@ -45,8 +45,8 @@ export default function Home() {
Upstash
</Link>
<br />
and working on{" "}
<wbr /> and working on{" "}
<Link
target="_blank"
href="https://unkey.dev"

View File

@ -40,7 +40,7 @@ export default async function ProjectsPage() {
return (
<div className="relative pb-16">
<Navigation />
<div className="px-6 pt-16 mx-auto space-y-8 max-w-7xl lg:px-8 md:space-y-16 md:pt-24 lg:pt-32">
<div className="px-6 pt-20 mx-auto space-y-8 max-w-7xl lg:px-8 md:space-y-16 md:pt-24 lg:pt-32">
<div className="max-w-2xl mx-auto lg:mx-0">
<h2 className="text-3xl font-bold tracking-tight text-zinc-100 sm:text-4xl">
Projects