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 { link, icon, external } = Astro.props
const buttonPaddingX = 'px-[.75rem]' const buttonPaddingX = 'md:px-[.75rem] px-[.5rem]'
const buttonPaddingY = 'py-[.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}` class=`mr-auto text-[1.25rem] font-bold hover:underline focus-visible:underline focus-visible:outline-none ${mainButtonPaddingX} ${mainButtonPaddingY}`
>{homeText}</a >{homeText}</a
> >
{ <div class={`sm:flex items-center hidden ${spacing}`}>
links.map((link) => ( {
<ButtonSecondary link={link.link}> links.map((link) => (
{link.text} <ButtonSecondary link={link.link}>
</ButtonSecondary> {link.text}
)) </ButtonSecondary>
} ))
}
</div>
</nav> </nav>
</div> </div>
</section> </section>

View File

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

View File

@ -19,12 +19,12 @@ const background = 'bg-[#00000020]'
href={url} href={url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class={`block rounded ${ class={`block md:rounded ${
url && url &&
`hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none` `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}`} } ${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`}> <span class={`flex flex-col`}>
<h3 class={`font-bold ${fontSizeH3}`}>{title}</h3> <h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
{ {

View File

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