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

Add buzzwords link

Browse Source
This commit is contained in:
Chuck Dries 2022-01-09 07:15:15 -08:00
parent fe7873b78c
commit 6d8e944b01
2 changed files with 46 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,42 +6,53 @@ const getButtonClasses = (isClient) =>
classnames( classnames(
"z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline", "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline",
isClient isClient
? 'text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2' ? "text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2"
: 'text-gray-200' : "text-gray-200"
); );
const ActionButtons = ({ isClient, image, shuffleImage }) => ( const ActionButtons = ({ isClient, image, shuffleImage }) => (
<div className="flex mx-6 mb-6"> <div className="flex flex-col">
<Link <div className="p-4 m-4 bg-buzzwordsPrimary bg-opacity-50 rounded-xl flex flex-col text-center">
className={getButtonClasses(isClient, "muted")} <h3>Try the game I&apos;m making!</h3>
id="image-link" <a
title="view image details" className={getButtonClasses(isClient)}
to={`/photogallery/${image.base}/`} href="https://buzzwords.gg"
> >
<span className="icon-offset"> Buzzwords
<ion-icon name="image"></ion-icon> </a>
</span> </div>
</Link> <div className="flex mx-6 mb-6">
<button <Link
className={getButtonClasses(isClient, "muted")} className={getButtonClasses(isClient, "muted")}
id="shuffle-button" id="image-link"
onClick={() => { title="view image details"
shuffleImage(image); to={`/photogallery/${image.base}/`}
}} >
title="shuffle image" <span className="icon-offset">
type="button" <ion-icon name="image"></ion-icon>
> </span>
<span className="icon-offset"> </Link>
<ion-icon name="shuffle"></ion-icon> <button
</span> className={getButtonClasses(isClient, "muted")}
</button> id="shuffle-button"
<Link onClick={() => {
className={getButtonClasses(isClient, "muted")} shuffleImage(image);
id="photogallery-link" }}
to="/photogallery/" title="shuffle image"
> type="button"
Photography Gallery >
</Link> <span className="icon-offset">
<ion-icon name="shuffle"></ion-icon>
</span>
</button>
<Link
className={getButtonClasses(isClient, "muted")}
id="photogallery-link"
to="/photogallery/"
>
Photography Gallery
</Link>
</div>
</div> </div>
); );

1
tailwind.config.js
View File

@ -39,6 +39,7 @@ module.exports = {
'huge-2': 'max(7.8vw, 120px)' 'huge-2': 'max(7.8vw, 120px)'
}, },
colors: { colors: {
buzzwordsPrimary: '#F6C54B',
vibrant: { vibrant: {
DEFAULT: ({ opacityVariable, opacityValue }) => { DEFAULT: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) { if (opacityValue !== undefined) {