From aa51e8d63e8b7d31ebee1cf30e5a9b890542f8a5 Mon Sep 17 00:00:00 2001 From: AJ Caldwell Date: Tue, 8 Oct 2024 20:33:52 -0700 Subject: [PATCH 1/5] Install styled components --- package-lock.json | 139 ++++++++++++++++++++++++++++++++++++++++++++-- package.json | 3 +- 2 files changed, 136 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index a8b7e63..3a6c5ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "next": "14.2.4", "react": "^18", "react-dom": "^18", - "sqlite3": "^5.1.7" + "sqlite3": "^5.1.7", + "styled-components": "6.1.13" }, "devDependencies": { "@types/node": "^20", @@ -44,6 +45,27 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -532,6 +554,12 @@ "@types/react": "*" } }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@typescript-eslint/parser": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz", @@ -1352,6 +1380,15 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001640", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz", @@ -1594,6 +1631,15 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, "node_modules/css-selector-tokenizer": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", @@ -1604,6 +1650,17 @@ "fastparse": "^1.1.2" } }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1619,8 +1676,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/culori": { "version": "3.3.0", @@ -5394,8 +5450,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/prebuild-install": { "version": "7.1.2", @@ -5933,6 +5988,12 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -6420,6 +6481,68 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", @@ -6442,6 +6565,12 @@ } } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", diff --git a/package.json b/package.json index dcb97cd..4777aa2 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "next": "14.2.4", "react": "^18", "react-dom": "^18", - "sqlite3": "^5.1.7" + "sqlite3": "^5.1.7", + "styled-components": "6.1.13" }, "devDependencies": { "@types/node": "^20", From dc178b28e390d76d51b2c1ca72d2af5d9334f891 Mon Sep 17 00:00:00 2001 From: AJ Caldwell Date: Tue, 8 Oct 2024 21:13:59 -0700 Subject: [PATCH 2/5] Style logo image --- app/components/Header.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/components/Header.tsx b/app/components/Header.tsx index ec1b286..dbeb597 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,4 +1,12 @@ +"use client" + import { links } from "../siteConfig" +import styled from "styled-components" + +const LogoImage = styled.img` + border-radius: 0.25rem; + width: 3rem; +` const Header = () => { return ( @@ -30,7 +38,7 @@ const Header = () => { - +
From 50a4b32a0ac9faf51ddd8e75e82d051ad08d6c37 Mon Sep 17 00:00:00 2001 From: AJ Caldwell Date: Tue, 8 Oct 2024 21:56:20 -0700 Subject: [PATCH 3/5] Style an anchor button --- app/components/Header.tsx | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/app/components/Header.tsx b/app/components/Header.tsx index dbeb597..d518594 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -8,6 +8,34 @@ const LogoImage = styled.img` width: 3rem; ` +const Anchor = styled.a` + display: inline-flex; + justifiy-content: center; + align-items: center; + color: #a7adba; + background: #1a1e23; + border: 1px solid #1a1e23; + height: 3rem; + border-radius: 0.5rem; + padding: 0 1rem; + text-align: center; + font-size: 0.875rem; + line-height: 1em; + font-weight: 600; + transition: + color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s, + background-color 0s, + border-color 0s, + opacity 0s, + box-shadow 0s, + transform 0s; + + &:hover { + background: #15181d; + border: 1px solid #15181d; + } +` + const Header = () => { return (
@@ -47,9 +75,7 @@ const Header = () => {
- - Join Us on Discord - + Join Us on Discord
From d73c62eda069faad03da36886141fdcc23d748e0 Mon Sep 17 00:00:00 2001 From: AJ Caldwell Date: Tue, 8 Oct 2024 23:54:27 -0700 Subject: [PATCH 4/5] Style navlinks --- app/components/Header.tsx | 92 +++++++++++++++++++++++++++------------ 1 file changed, 64 insertions(+), 28 deletions(-) diff --git a/app/components/Header.tsx b/app/components/Header.tsx index d518594..5ff9551 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,38 +1,78 @@ "use client" import { links } from "../siteConfig" -import styled from "styled-components" +import styled, { css } from "styled-components" const LogoImage = styled.img` border-radius: 0.25rem; width: 3rem; ` -const Anchor = styled.a` +const Anchor = styled.a<{ + ghost?: boolean +}>` display: inline-flex; - justifiy-content: center; + justify-content: center; align-items: center; + + font-size: 0.875rem; + text-align: center; + border-radius: 0.5rem; + transition: background 200ms ease-in-out; + color: #a7adba; - background: #1a1e23; - border: 1px solid #1a1e23; + height: 3rem; - border-radius: 0.5rem; padding: 0 1rem; - text-align: center; - font-size: 0.875rem; - line-height: 1em; font-weight: 600; - transition: - color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s, - background-color 0s, - border-color 0s, - opacity 0s, - box-shadow 0s, - transform 0s; + line-height: 1em; + + ${(props) => { + const backgroundColor = props.ghost ? "transparent" : "#1a1e23" + + return css` + background: ${backgroundColor}; + border: 1px solid ${backgroundColor}; + ` + }} + + &:hover { + ${(props) => { + if (props.ghost) + return css` + background: color-mix(in srgb, white 5%, transparent 100%); + border: 1px solid transparent; + ` + else + return css` + background: #15181d; + border: 1px solid #15181d; + ` + }} + } +` + +const NavLink = styled.a` + display: inline-flex; + justify-content: center; + align-items: center; + + font-size: 0.875rem; + text-align: center; + border-radius: 0.5rem; + transition: background 200ms ease-in-out; + + color: #a7adba; + + padding: 0.5rem 1rem; + line-height: 1.4em; + + background: transparent; + border: 1px solid transparent; &:hover { - background: #15181d; - border: 1px solid #15181d; + background: color-mix(in srgb, white 5%, transparent 100%); + border: 1px solid transparent; } ` @@ -86,24 +126,20 @@ const NavLinks = () => { return ( <>
  • - Home + Home
  • - About + About
  • - + Event Calendar - +
    • - {/* Hide Events until the page design is ready and finalized */} - {/*
  • - Events -
    • */}
  • - + Give a Talk! - +
    • ) From baba0d7e705ea14b300d354f737dd4e76856a505 Mon Sep 17 00:00:00 2001 From: AJ Caldwell Date: Wed, 9 Oct 2024 09:20:46 -0700 Subject: [PATCH 5/5] wip --- app/components/Header.tsx | 62 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 4 deletions(-) diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 5ff9551..055de5e 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -52,6 +52,54 @@ const Anchor = styled.a<{ } ` +const Button = styled.a<{ + ghost?: boolean +}>` + display: inline-flex; + justify-content: center; + align-items: center; + + font-size: 0.875rem; + text-align: center; + border-radius: 0.5rem; + transition: background 200ms ease-in-out; + + color: #a7adba; + + height: 3rem; + padding: 0 1rem; + font-weight: 600; + line-height: 1em; + + ${(props) => { + const backgroundColor = props.ghost ? "transparent" : "#1a1e23" + + return css` + background: ${backgroundColor}; + border: 1px solid ${backgroundColor}; + ` + }} + + &:hover { + ${(props) => { + if (props.ghost) + return css` + background: color-mix(in srgb, white 5%, transparent 100%); + border: 1px solid transparent; + ` + else + return css` + background: #15181d; + border: 1px solid #15181d; + ` + }} + } +` + +const ImageAnchor = styled(Anchor)` + padding: 0; +` + const NavLink = styled.a` display: inline-flex; justify-content: center; @@ -76,13 +124,19 @@ const NavLink = styled.a` } ` +const DropdownButton = styled(Button)` + @media (min-width: 1024px) { + display: none; + } +` + const Header = () => { return (