chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve iphone SE layout

Browse Source
This commit is contained in:
Chuck Dries 2022-07-12 13:22:13 -07:00
parent 1751bbb0f8
commit 9ac5bd0cba
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/index/ActionButtons.js
View File

@ -12,16 +12,16 @@ const getButtonClasses = (isClient) =>
const ActionButtons = ({ isClient, image, shuffleImage }) => ( const ActionButtons = ({ isClient, image, shuffleImage }) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light"> <div className="text-muted-light p-1 sm:p-4 m-1 sm:m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
<h3 className="mb-2 drop-shadow">Try my word game!</h3> <h3 className="sm:mb-2 drop-shadow">Try my word game!</h3>
<a <a
className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2" className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-1 sm:p-2"
href="https://buzzwords.gg" href="https://buzzwords.gg"
> >
Buzzwords Buzzwords
</a> </a>
</div> </div>
<div className="flex mx-6 mb-6"> <div className="flex sm:mx-6 mb-2 sm:mb-6">
<Link <Link
className={getButtonClasses(isClient, "muted")} className={getButtonClasses(isClient, "muted")}
id="image-link" id="image-link"
@ -37,8 +37,8 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
}} }}
type="button" type="button"
> >
shuffle background <Shuffle UNSAFE_className="mr-1" aria-label="shuffle image" size="XS" />
<Shuffle UNSAFE_className="ml-1" aria-label="shuffle image" size="XS" /> background
</button> </button>
</div> </div>
</div> </div>

4
src/pages/index.js
View File

@ -150,7 +150,7 @@ const IndexPage = ({
> >
<h1 <h1
className={classnames( className={classnames(
"mb-0 mt-0 text-center font-black z-20 text-7xl md:text-8xl lg:text-9xl" "mb-0 mt-0 text-center font-black z-20 text-5xl sm:text-7xl md:text-8xl lg:text-9xl"
)} )}
style={{ lineHeight: "85%" }} style={{ lineHeight: "85%" }}
> >
@ -200,7 +200,7 @@ const IndexPage = ({
></div> ></div>
)} )}
{imageIsLandscape && ( {imageIsLandscape && (
<div className="hidden portrait:flex justify-center my-2"> <div className="hidden portrait:flex justify-center sm:my-2">
<ActionButtons <ActionButtons
image={image} image={image}
isClient={isClient} isClient={isClient}