me
/
ethanreece.com
Archived
1
0
Fork 0

Make website more mobile friendly

main
Ethan Reece 2023-06-10 16:23:14 -05:00
parent bcd69f2fe3
commit fac67f112c
Signed by: me
GPG Key ID: D3993665FF92E1C3
5 changed files with 24 additions and 16 deletions

View File

@ -7,7 +7,7 @@ export interface Props {
}
const { link, icon, external } = Astro.props
const buttonPaddingX = 'px-[.75rem]'
const buttonPaddingX = 'md:px-[.75rem] px-[.5rem]'
const buttonPaddingY = 'py-[.5rem]'
---

View File

@ -36,13 +36,15 @@ const mainButtonPaddingY = 'py-[.5rem]'
class=`mr-auto text-[1.25rem] font-bold hover:underline focus-visible:underline focus-visible:outline-none ${mainButtonPaddingX} ${mainButtonPaddingY}`
>{homeText}</a
>
{
links.map((link) => (
<ButtonSecondary link={link.link}>
{link.text}
</ButtonSecondary>
))
}
<div class={`sm:flex items-center hidden ${spacing}`}>
{
links.map((link) => (
<ButtonSecondary link={link.link}>
{link.text}
</ButtonSecondary>
))
}
</div>
</nav>
</div>
</section>

View File

@ -2,11 +2,11 @@
// @ts-ignore
import { Picture } from 'astro-imagetools/components'
const viewHeight = 'h-[30rem]'
const padding = 'p-[2rem]'
const viewHeight = 'md:h-[30rem] sm:h-[15rem] h-[17rem]'
const padding = 'p-[1rem] pb-[3.5rem] md:p-[2rem] sm:pb-[2rem]'
const textMainSize = 'text-[2rem]'
const textEmphasisSize = 'text-[4rem]'
const textEmphasisSize = 'md:text-[4rem] text-[3rem]'
const textEmphasisLineHeight = 'leading-[3.5rem]'
const text = ['Hello', ', I am', 'Ethan Reece', 'and I do ', 'web stuff', '.']
@ -15,8 +15,10 @@ const imageAlt = 'black and white portrait of myself'
---
<section class={`w-full ${viewHeight} ${padding}`}>
<header class="mx-auto flex h-full max-w-page-w items-center">
<h1 class={`font-medium ${textMainSize}`}>
<header
class="mx-auto flex h-full max-w-page-w items-center text-center sm:max-w-[32rem] sm:text-left md:max-w-page-w"
>
<h1 class={`font-medium ${textMainSize} w-full sm:w-auto`}>
<i
><b><u>{text[0]}</u></b><span class="text-font-light"
>{text[1]}</span
@ -33,7 +35,7 @@ const imageAlt = 'black and white portrait of myself'
<b class="font-extrabold"><u>{text[4]}</u></b></i
><span class="text-font-light">{text[5]}</span>
</h1>
<div class="ml-auto h-full">
<div class="ml-auto hidden h-full sm:flex">
<Picture
src={image}
alt={imageAlt}

View File

@ -19,12 +19,12 @@ const background = 'bg-[#00000020]'
href={url}
target="_blank"
rel="noopener noreferrer"
class={`block rounded ${
class={`block md:rounded ${
url &&
`hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
} ${fontSize} ${margin} ${background}`}
>
<div class={`mx-auto max-w-page-w space-y-paragraph`}>
<div class={`mx-auto w-full md:w-auto max-w-page-w space-y-paragraph`}>
<span class={`flex flex-col`}>
<h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
{

View File

@ -39,6 +39,10 @@ module.exports = {
zIndex: {
navbar: '100',
},
screens: {
sm: '640px',
md: '768px',
},
},
plugins: [require('tailwindcss-hero-patterns')],
}