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

vibrant nav

Browse Source
This commit is contained in:
Chuck Dries 2022-10-20 22:27:32 -07:00
parent ab88b670e8
commit 87cb5d6525
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
3 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Nav.tsx
View File

@ -5,12 +5,12 @@ import useDimensions from "react-cool-dimensions";
import Menu from "@spectrum-icons/workflow/Menu"; import Menu from "@spectrum-icons/workflow/Menu";
const navClasses = "hover:underline hover:bg-gray-900 block p-3 text-gray-200"; const navClasses = "hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => ( const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
<ul <ul
className={classnames( className={classnames(
"z-30 bg-black rounded overflow-hidden", "z-30 bg-vibrant-dark rounded overflow-hidden",
isVertical isVertical
? "inline-flex flex-wrap justify-center" ? "inline-flex flex-wrap justify-center"
: "absolute rounded-md top-[40px] border border-white" : "absolute rounded-md top-[40px] border border-white"
@ -89,7 +89,7 @@ const Nav = ({ internalLinks, className }: NavProps) => {
<nav <nav
className={classnames( className={classnames(
"mt-0 flex justify-center w-full font-serif", "mt-0 flex justify-center w-full font-serif",
"text-gray-200 bg-black shadow-lg", "bg-vibrant-dark",
className className
)} )}
ref={observe} ref={observe}

15
src/pages/index.tsx
View File

@ -6,7 +6,7 @@ import { Picker, Item } from "@adobe/react-spectrum";
import MasonryGallery from "../components/MasonryGallery"; import MasonryGallery from "../components/MasonryGallery";
import KeywordsPicker from "../components/KeywordsPicker"; import KeywordsPicker from "../components/KeywordsPicker";
import { getGalleryPageUrl } from "../utils"; import { getGalleryPageUrl, getHelmetSafeBodyStyle } from "../utils";
import Nav from "../components/Nav"; import Nav from "../components/Nav";
const SORT_KEYS = { const SORT_KEYS = {
@ -162,7 +162,18 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
{/* @ts-ignore */} {/* @ts-ignore */}
<Helmet> <Helmet>
<title>Photo Gallery | Chuck Dries</title> <title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" /> <body
className="bg-black text-white"
// @ts-ignore
style={getHelmetSafeBodyStyle({
Muted: [255, 255, 255],
DarkMuted: [0, 0, 0],
LightMuted: [255, 255, 255],
Vibrant: [255, 255, 255],
LightVibrant: [255, 255, 255],
DarkVibrant: [0, 0, 0],
})}
/>
</Helmet> </Helmet>
<div className="top-0 z-10 bg-black"> <div className="top-0 z-10 bg-black">
<Nav className="mb-4" internalLinks={[{ href: "/", label: "Home" }]} /> <Nav className="mb-4" internalLinks={[{ href: "/", label: "Home" }]} />

1
tailwind.config.js
View File

@ -46,6 +46,7 @@ module.exports = {
}, },
colors: { colors: {
buzzwordsPrimary: "#F6C54B", buzzwordsPrimary: "#F6C54B",
transparentblack: "rgba(0,0,0,0.3)",
vibrant: { vibrant: {
DEFAULT: ({ opacityVariable, opacityValue }) => { DEFAULT: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) { if (opacityValue !== undefined) {