From 7020b197cb0c22d1b1b13462a0096b37e85ed093 Mon Sep 17 00:00:00 2001 From: Robert Kregloh Date: Tue, 26 Dec 2023 09:47:23 -0500 Subject: [PATCH 1/5] style cleanup for desktop (#13) Signed-off-by: robb --- src/app/page.tsx | 14 ++++++++------ src/components/Button/Button.tsx | 2 +- src/components/FAQSection/FAQSection.tsx | 4 ++-- src/components/HeroSection/HeroSection.tsx | 4 ++-- src/styles/cardGroup.module.scss | 2 ++ src/styles/components/baoSection.module.scss | 3 ++- src/styles/components/button/button.module.scss | 1 - src/styles/components/faqSection.module.scss | 5 ++++- src/styles/components/helpOutSection.module.scss | 2 ++ src/styles/components/heroSection.module.scss | 2 +- src/styles/components/layout/layout.module.scss | 6 +++++- src/styles/components/logoCardGroup.module.scss | 2 +- src/styles/components/supportSection.module.scss | 2 +- src/styles/globals.scss | 10 +++++++++- todo.md | 6 +++++- 15 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e35cf4b..4fb090f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -15,23 +15,25 @@ export default function Home() {
- +
+ +
-
+

What are we trying to do?

-
+
-
+
-
+
@@ -41,7 +43,7 @@ export default function Home() {
-
+
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index fe1f0ee..f12a931 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,4 +1,4 @@ -import styles from '@/styles/button.module.scss' +import styles from '@/styles/components/button/button.module.scss' import React, { ReactNode } from 'react' interface Props { diff --git a/src/components/FAQSection/FAQSection.tsx b/src/components/FAQSection/FAQSection.tsx index 3ec20d8..6712c67 100644 --- a/src/components/FAQSection/FAQSection.tsx +++ b/src/components/FAQSection/FAQSection.tsx @@ -1,4 +1,4 @@ -"use client"; +'use client' import React from 'react' import styles from '@/styles/components/faqSection.module.scss' import Accordion from '../Accordion/Accordion' @@ -11,7 +11,7 @@ export default function FAQSection() {
-

Secrets we can share

+

Secrets we can share

{accordionData.map((item, index) => ( OpenBao, a secret project for the open source developer.

- - diff --git a/src/styles/cardGroup.module.scss b/src/styles/cardGroup.module.scss index 529b4e6..facbd2c 100644 --- a/src/styles/cardGroup.module.scss +++ b/src/styles/cardGroup.module.scss @@ -3,4 +3,6 @@ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--padding-lg); + margin-top: var(--margin-xxl); + margin-bottom: var(--margin-xxl); } \ No newline at end of file diff --git a/src/styles/components/baoSection.module.scss b/src/styles/components/baoSection.module.scss index 2b82311..b7a9514 100644 --- a/src/styles/components/baoSection.module.scss +++ b/src/styles/components/baoSection.module.scss @@ -3,7 +3,8 @@ grid-template-columns: 3fr 2fr; grid-gap: var(--margin-base); justify-content: center; - margin-top: var(--margin-xxl) + margin-top: var(--margin-xxl); + margin-bottom: var(--margin-xxl); } .bao__section__left{ diff --git a/src/styles/components/button/button.module.scss b/src/styles/components/button/button.module.scss index 9405f25..a00e426 100644 --- a/src/styles/components/button/button.module.scss +++ b/src/styles/components/button/button.module.scss @@ -3,7 +3,6 @@ font-size: var(--font-size-md); padding: var(--padding-md) var(--padding-md); cursor: pointer; - margin: var(--margin-sm); } .btn--primary { diff --git a/src/styles/components/faqSection.module.scss b/src/styles/components/faqSection.module.scss index eb7c3cb..c536739 100644 --- a/src/styles/components/faqSection.module.scss +++ b/src/styles/components/faqSection.module.scss @@ -3,6 +3,8 @@ padding-top: var(--padding-xxl); padding-bottom: var(--padding-xxl); border-bottom: solid 1px var(--dark-color-800); + margin-top: var(--margin-xxl); + margin-bottom: var(--margin-xxl); } .faq__section__title { @@ -14,5 +16,6 @@ justify-content: center; align-items: center; width: 100%; - margin-top: var(--margin-lg); + margin-top: var(--margin-xxl); + margin-bottom: var(--margin-xxl); } \ No newline at end of file diff --git a/src/styles/components/helpOutSection.module.scss b/src/styles/components/helpOutSection.module.scss index d950a74..a403bb5 100644 --- a/src/styles/components/helpOutSection.module.scss +++ b/src/styles/components/helpOutSection.module.scss @@ -2,6 +2,8 @@ padding-top: var(--padding-xxl); padding-bottom: var(--padding-xxl); width: 100%; + margin-top: var(--margin-xxl); + margin-bottom: var(--margin-xxl); } .help__out__section__group { diff --git a/src/styles/components/heroSection.module.scss b/src/styles/components/heroSection.module.scss index 91d5dd0..e597928 100644 --- a/src/styles/components/heroSection.module.scss +++ b/src/styles/components/heroSection.module.scss @@ -1,7 +1,7 @@ .hero__section { width: 100%; text-align: center; - margin-top: var(--margin-lg); + margin-top: var(--margin-xxl); margin-bottom: var(--margin-xxl); } diff --git a/src/styles/components/layout/layout.module.scss b/src/styles/components/layout/layout.module.scss index f28f694..2db40f1 100644 --- a/src/styles/components/layout/layout.module.scss +++ b/src/styles/components/layout/layout.module.scss @@ -2,7 +2,11 @@ background: linear-gradient(180deg, var(--secondary-color) 0%, var(--background-color) 100%); } - .bottom__up__red__gradient { background: linear-gradient(0deg, var(--secondary-color) 0%, var(--background-color) 100%); } + +.margin__y--xxl { + margin-top: var(--margin-xxl); + margin-bottom: var(--margin-xxl); +} \ No newline at end of file diff --git a/src/styles/components/logoCardGroup.module.scss b/src/styles/components/logoCardGroup.module.scss index d77d6f5..2db6af8 100644 --- a/src/styles/components/logoCardGroup.module.scss +++ b/src/styles/components/logoCardGroup.module.scss @@ -4,5 +4,5 @@ grid-template-columns: repeat(4, 1fr); grid-gap: var(--padding-lg); margin-top: var(--margin-lg); - margin-bottom: var(--margin-lg); + margin-bottom: var(--margin-xxxl); } \ No newline at end of file diff --git a/src/styles/components/supportSection.module.scss b/src/styles/components/supportSection.module.scss index 24b80e1..c11f22e 100644 --- a/src/styles/components/supportSection.module.scss +++ b/src/styles/components/supportSection.module.scss @@ -8,4 +8,4 @@ .support__section__text__highlights { font-weight: var(--font-weight-extra-bold); color: var(--primary-color); -} \ No newline at end of file +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index a02b18f..46a7617 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -40,7 +40,7 @@ h5 { } .main__title__h2 { - font-size: var(--font-size-xxl); + font-size: var(--font-size-xl); font-weight: bold; margin-bottom: var(--margin-lg); } @@ -104,6 +104,10 @@ $margin-spacing-sizes: ( margin-top: $value; margin-bottom: $value; } + + .ma-#{$size} { + margin: $value; + } } $padding-spacing-sizes: ( @@ -143,4 +147,8 @@ $padding-spacing-sizes: ( padding-top: $value; padding-bottom: $value; } + + .pa-#{$size} { + padding: $value; + } } \ No newline at end of file diff --git a/todo.md b/todo.md index ab0713a..3e33e61 100644 --- a/todo.md +++ b/todo.md @@ -9,6 +9,7 @@ - consolidate css files and organize them better, currently a little chaotic - replace inline styles in icon.tsx with css classes - renmame first gradient css class and make it reuseable +- some layout shift in the last 2 sections # Features - link up nav icons @@ -27,4 +28,7 @@ - analytics? - site title and description - clean up H tags so that they make sense and not just being used for sizing because im lazy right now. -- clean up favicon file structure, maybe put it in a folder and not all in root \ No newline at end of file +- clean up favicon file structure, maybe put it in a folder and not all in root + +# Bugs +- When loading the page in incognito, it takes two clicks for the toggle light/dark mode to work \ No newline at end of file From 70f14cb792d0f6b38c842298affbe80751b1ec0c Mon Sep 17 00:00:00 2001 From: Robert Kregloh Date: Tue, 2 Jan 2024 17:28:22 -0500 Subject: [PATCH 2/5] Mobile nav and footer (#14) * some progress on nav Signed-off-by: robb * mobile nav working Signed-off-by: robb --------- Signed-off-by: robb --- package.json | 2 +- src/app/ThemeSwitcher.tsx | 24 ++-- src/app/page.tsx | 2 +- src/components/Navbar/GithubStats.tsx | 56 ++++---- src/components/Navbar/Navbar.tsx | 38 ++++-- .../components/navbar/navbar.module.scss | 69 +++++++++- src/styles/mobileVars.scss | 2 + src/styles/variables.scss | 1 + yarn.lock | 127 +++++++++--------- 9 files changed, 209 insertions(+), 112 deletions(-) create mode 100644 src/styles/mobileVars.scss diff --git a/package.json b/package.json index 0449c30..ed507ce 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@types/react-dom": "18.2.17", "eslint": "8.54.0", "eslint-config-next": "14.0.3", - "next": "^13.0.0", + "next": "^14.0.0", "next-themes": "^0.2.1", "prettier": "^3.1.0", "react": "18.2.0", diff --git a/src/app/ThemeSwitcher.tsx b/src/app/ThemeSwitcher.tsx index 6d99c13..46a2280 100644 --- a/src/app/ThemeSwitcher.tsx +++ b/src/app/ThemeSwitcher.tsx @@ -1,16 +1,16 @@ -"use client" -import { useTheme } from "next-themes"; -import { useEffect, useState } from "react"; -import SwitchToLight from "@/components/Navbar/DarkmodeToggle/SwitchToLightIcon"; -import SwitchToDark from "@/components/Navbar/DarkmodeToggle/SwitchToDarkIcon"; +'use client' +import { useTheme } from 'next-themes' +import { useEffect, useState } from 'react' +import SwitchToLight from '@/components/Navbar/DarkmodeToggle/SwitchToLightIcon' +import SwitchToDark from '@/components/Navbar/DarkmodeToggle/SwitchToDarkIcon' const ThemeSwitcher = () => { - const { theme, setTheme } = useTheme(); + const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) - useEffect(() => setMounted(true), []); + useEffect(() => setMounted(true), []) - if(!mounted) { + if (!mounted) { return (
@@ -20,10 +20,12 @@ const ThemeSwitcher = () => { } return ( -
theme === 'light' ? setTheme('dark') : setTheme('light')}> +
(theme === 'light' ? setTheme('dark') : setTheme('light'))} + >
) - }; - export default ThemeSwitcher; \ No newline at end of file +} +export default ThemeSwitcher diff --git a/src/app/page.tsx b/src/app/page.tsx index 4fb090f..1b6f298 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -48,7 +48,7 @@ export default function Home() {
- + footer todo{/* */}
) diff --git a/src/components/Navbar/GithubStats.tsx b/src/components/Navbar/GithubStats.tsx index 05e34ff..ac6b591 100644 --- a/src/components/Navbar/GithubStats.tsx +++ b/src/components/Navbar/GithubStats.tsx @@ -1,39 +1,43 @@ import React from 'react' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import styles from '@/styles/components/navbar/githubStats.module.scss'; -import { faGithub } from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import styles from '@/styles/components/navbar/githubStats.module.scss' +import { faGithub } from '@fortawesome/free-brands-svg-icons' -export default async function GithubStats() { - const repo = "openbao/openbao" - const { stargazers_count: stars } = await fetch( - `https://api.github.com/repos/${repo}`, - { - ...(process.env.GITHUB_OAUTH_TOKEN && { - headers: { - Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`, - "Content-Type": "application/json", - }, - }), - // data will revalidate every 24 hours - next: { revalidate: 86400 }, - }, - ) - .then((res) => res.json()) - .catch((e) => { - console.log(e) - return { stargazers_count: "1000+" } - }); +export default function GithubStats() { + // const repo = "openbao/openbao" + // const { stargazers_count: stars } = await fetch( + // `https://api.github.com/repos/${repo}`, + // { + // ...(process.env.GITHUB_OAUTH_TOKEN && { + // headers: { + // Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`, + // "Content-Type": "application/json", + // }, + // }), + // // data will revalidate every 24 hours + // next: { revalidate: 86400 }, + // }, + // ) + // .then((res) => res.json()) + // .catch((e) => { + // console.log(e) + // return { stargazers_count: "1000+" } + // }); return ( - +

Star

-

{stars}

+

123

 ) } - diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 6ebca93..d168916 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,22 +1,42 @@ -import React from 'react' +'use client' import styles from '@/styles/components/navbar/navbar.module.scss' +import { faBars } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { useState } from 'react' import NavbarItems from './NavbarItems' import NavbarSocial from './NavbarSocial' export default function Navbar() { + const [isNavOpen, setIsNavOpen] = useState(false) + return ( ) } diff --git a/src/styles/components/navbar/navbar.module.scss b/src/styles/components/navbar/navbar.module.scss index 8ab3cca..95cc3fa 100644 --- a/src/styles/components/navbar/navbar.module.scss +++ b/src/styles/components/navbar/navbar.module.scss @@ -1,3 +1,4 @@ +@import '@/styles/mobileVars.scss'; .navbar { max-width: 1200px; margin: 0 auto; @@ -8,10 +9,15 @@ } .navbar__navigation__wrapper { + width: 100%; + display: flex; + align-items: center; +} +.navbar__content { + width: 100%; display: flex; align-items: center; } - .navbar__logo { font-size: var(--font-size-md); font-weight: bold; @@ -47,3 +53,64 @@ text-decoration: none; } } + + +// mobile + +.navbar__toggle { + display: none; +} + +@media screen and (max-width: $mobile-sm) { + .navbar { + align-items: start; + } + .navbar__navigation__wrapper { + flex-wrap: wrap; + flex-direction: column; + } + + .navbar__content { + display: none; + flex-wrap: wrap; + flex-direction: column; + } + + .navbar__content__active { + display: flex; + } + + .navbar__menu { + flex-wrap: wrap; + flex-direction: column; + flex: 1 1 100%; + ul { + flex-wrap: wrap; + flex-direction: column; + flex: 1 1 100%; + margin-top: var(--margin-md); + li { + padding: var(--padding-sm) + + } + } + } + + .navbar__social { + flex-wrap: wrap; + flex-direction: column; + flex: 1 1 100%; + margin-top: var(--margin-md); + } + + .navbar__toggle { + display: block; + position: absolute; + right: var(--margin-md); + top: var(--margin-md); + font-size: var(--font-size-md); + font-weight: bold; + color: var(--primary-color); + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/styles/mobileVars.scss b/src/styles/mobileVars.scss new file mode 100644 index 0000000..5aa2a90 --- /dev/null +++ b/src/styles/mobileVars.scss @@ -0,0 +1,2 @@ +// Media Query Breakpoints +$mobile-sm: 768px; \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 8d72138..7e8bd00 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -96,6 +96,7 @@ --xs--container--width: 300px; } + [data-theme='dark'] { --background-color: #151514; --light-color: #ffffff; diff --git a/yarn.lock b/yarn.lock index 73db85f..4d15132 100644 --- a/yarn.lock +++ b/yarn.lock @@ -110,10 +110,10 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044" integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw== -"@next/env@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.6.tgz#c1148e2e1aa166614f05161ee8f77ded467062bc" - integrity sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw== +"@next/env@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/env/-/env-14.0.4.tgz#d5cda0c4a862d70ae760e58c0cd96a8899a2e49a" + integrity sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ== "@next/eslint-plugin-next@14.0.3": version "14.0.3" @@ -122,50 +122,50 @@ dependencies: glob "7.1.7" -"@next/swc-darwin-arm64@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz#b15d139d8971360fca29be3bdd703c108c9a45fb" - integrity sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA== - -"@next/swc-darwin-x64@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz#9c72ee31cc356cb65ce6860b658d807ff39f1578" - integrity sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA== - -"@next/swc-linux-arm64-gnu@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz#59f5f66155e85380ffa26ee3d95b687a770cfeab" - integrity sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg== - -"@next/swc-linux-arm64-musl@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz#f012518228017052736a87d69bae73e587c76ce2" - integrity sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q== - -"@next/swc-linux-x64-gnu@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz#339b867a7e9e7ee727a700b496b269033d820df4" - integrity sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw== - -"@next/swc-linux-x64-musl@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz#ae0ae84d058df758675830bcf70ca1846f1028f2" - integrity sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ== - -"@next/swc-win32-arm64-msvc@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz#a5cc0c16920485a929a17495064671374fdbc661" - integrity sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg== - -"@next/swc-win32-ia32-msvc@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz#6a2409b84a2cbf34bf92fe714896455efb4191e4" - integrity sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg== - -"@next/swc-win32-x64-msvc@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz#4a3e2a206251abc729339ba85f60bc0433c2865d" - integrity sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ== +"@next/swc-darwin-arm64@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz#27b1854c2cd04eb1d5e75081a1a792ad91526618" + integrity sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg== + +"@next/swc-darwin-x64@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz#9940c449e757d0ee50bb9e792d2600cc08a3eb3b" + integrity sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw== + +"@next/swc-linux-arm64-gnu@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz#0eafd27c8587f68ace7b4fa80695711a8434de21" + integrity sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w== + +"@next/swc-linux-arm64-musl@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz#2b0072adb213f36dada5394ea67d6e82069ae7dd" + integrity sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ== + +"@next/swc-linux-x64-gnu@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz#68c67d20ebc8e3f6ced6ff23a4ba2a679dbcec32" + integrity sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A== + +"@next/swc-linux-x64-musl@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz#67cd81b42fb2caf313f7992fcf6d978af55a1247" + integrity sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw== + +"@next/swc-win32-arm64-msvc@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz#be06585906b195d755ceda28f33c633e1443f1a3" + integrity sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w== + +"@next/swc-win32-ia32-msvc@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz#e76cabefa9f2d891599c3d85928475bd8d3f6600" + integrity sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg== + +"@next/swc-win32-x64-msvc@14.0.4": + version "14.0.4" + resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz#e74892f1a9ccf41d3bf5979ad6d3d77c07b9cba1" + integrity sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A== "@nodelib/fs.scandir@2.1.5": version "2.1.5" @@ -1147,7 +1147,7 @@ gopd@^1.0.1: dependencies: get-intrinsic "^1.1.3" -graceful-fs@^4.1.2, graceful-fs@^4.2.4: +graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4: version "4.2.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== @@ -1582,28 +1582,29 @@ next-themes@^0.2.1: resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45" integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A== -next@^13.0.0: - version "13.5.6" - resolved "https://registry.yarnpkg.com/next/-/next-13.5.6.tgz#e964b5853272236c37ce0dd2c68302973cf010b1" - integrity sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw== +next@^14.0.0: + version "14.0.4" + resolved "https://registry.yarnpkg.com/next/-/next-14.0.4.tgz#bf00b6f835b20d10a5057838fa2dfced1d0d84dc" + integrity sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA== dependencies: - "@next/env" "13.5.6" + "@next/env" "14.0.4" "@swc/helpers" "0.5.2" busboy "1.6.0" caniuse-lite "^1.0.30001406" + graceful-fs "^4.2.11" postcss "8.4.31" styled-jsx "5.1.1" watchpack "2.4.0" optionalDependencies: - "@next/swc-darwin-arm64" "13.5.6" - "@next/swc-darwin-x64" "13.5.6" - "@next/swc-linux-arm64-gnu" "13.5.6" - "@next/swc-linux-arm64-musl" "13.5.6" - "@next/swc-linux-x64-gnu" "13.5.6" - "@next/swc-linux-x64-musl" "13.5.6" - "@next/swc-win32-arm64-msvc" "13.5.6" - "@next/swc-win32-ia32-msvc" "13.5.6" - "@next/swc-win32-x64-msvc" "13.5.6" + "@next/swc-darwin-arm64" "14.0.4" + "@next/swc-darwin-x64" "14.0.4" + "@next/swc-linux-arm64-gnu" "14.0.4" + "@next/swc-linux-arm64-musl" "14.0.4" + "@next/swc-linux-x64-gnu" "14.0.4" + "@next/swc-linux-x64-musl" "14.0.4" + "@next/swc-win32-arm64-msvc" "14.0.4" + "@next/swc-win32-ia32-msvc" "14.0.4" + "@next/swc-win32-x64-msvc" "14.0.4" normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" From c6debe5eade9de2c4e6a4339ed35752429d801f2 Mon Sep 17 00:00:00 2001 From: Robert Kregloh Date: Tue, 2 Jan 2024 19:15:05 -0500 Subject: [PATCH 3/5] most mobile done (#15) Signed-off-by: robb --- src/components/Navbar/Navbar.tsx | 8 ++++++-- src/styles/cardGroup.module.scss | 15 +++++++++++++++ src/styles/components/baoSection.module.scss | 13 +++++++++++++ src/styles/components/blogSection.module.scss | 11 +++++++++++ .../components/helpOutSection.module.scss | 13 +++++++++++++ .../components/logoCardGroup.module.scss | 19 ++++++++++++++++++- src/styles/globals.scss | 7 +++---- src/styles/mobileVars.scss | 3 ++- 8 files changed, 81 insertions(+), 8 deletions(-) diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index d168916..9118d9d 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,6 +1,6 @@ 'use client' import styles from '@/styles/components/navbar/navbar.module.scss' -import { faBars } from '@fortawesome/free-solid-svg-icons' +import { faBars, faClose } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { useState } from 'react' import NavbarItems from './NavbarItems' @@ -35,7 +35,11 @@ export default function Navbar() { className={styles.navbar__toggle} aria-expanded={isNavOpen} > - + {!isNavOpen ? ( + + ) : ( + + )} ) diff --git a/src/styles/cardGroup.module.scss b/src/styles/cardGroup.module.scss index facbd2c..304b503 100644 --- a/src/styles/cardGroup.module.scss +++ b/src/styles/cardGroup.module.scss @@ -1,3 +1,4 @@ +@import '@/styles/mobileVars.scss'; // todo - make more modular .card__group { display: grid; @@ -5,4 +6,18 @@ grid-gap: var(--padding-lg); margin-top: var(--margin-xxl); margin-bottom: var(--margin-xxl); +} + +@media screen and (max-width: $mobile-sm) { + + .card__group { + grid-template-columns: repeat(2, 2fr); + } +} + +@media screen and (max-width: $mobile-xs) { + + .card__group { + grid-template-columns: repeat(1, 1fr); + } } \ No newline at end of file diff --git a/src/styles/components/baoSection.module.scss b/src/styles/components/baoSection.module.scss index b7a9514..4d1a188 100644 --- a/src/styles/components/baoSection.module.scss +++ b/src/styles/components/baoSection.module.scss @@ -1,3 +1,5 @@ +@import '@/styles/mobileVars.scss'; + .bao__section { display: grid; grid-template-columns: 3fr 2fr; @@ -13,3 +15,14 @@ flex-wrap:wrap; } +@media screen and (max-width: $mobile-sm) { + + .bao__section { + grid-template-columns: repeat(1, 1fr); + } + + .bao__section__right { + display: none; + } + +} \ No newline at end of file diff --git a/src/styles/components/blogSection.module.scss b/src/styles/components/blogSection.module.scss index 241da17..2af2538 100644 --- a/src/styles/components/blogSection.module.scss +++ b/src/styles/components/blogSection.module.scss @@ -1,3 +1,5 @@ +@import '@/styles/mobileVars.scss'; + .blog__section { margin-top: var(--margin-xxl); margin-bottom: var(--margin-xxl); @@ -24,4 +26,13 @@ .blog__section__content__blurb { font-size: var(--font-size-sm); margin-bottom: var(--margin-md); +} + + +@media screen and (max-width: $mobile-sm) { + + .blog__section__content { + grid-template-columns: repeat(1, 1fr); + } + } \ No newline at end of file diff --git a/src/styles/components/helpOutSection.module.scss b/src/styles/components/helpOutSection.module.scss index a403bb5..e549965 100644 --- a/src/styles/components/helpOutSection.module.scss +++ b/src/styles/components/helpOutSection.module.scss @@ -1,3 +1,5 @@ +@import '@/styles/mobileVars.scss'; + .help__out__section { padding-top: var(--padding-xxl); padding-bottom: var(--padding-xxl); @@ -23,4 +25,15 @@ } .help__out__section__item__icon { max-width: 21px; +} + + + + +@media screen and (max-width: $mobile-xs) { + + .help__out__section__group { + grid-template-columns: repeat(1, 1fr); + } + } \ No newline at end of file diff --git a/src/styles/components/logoCardGroup.module.scss b/src/styles/components/logoCardGroup.module.scss index 2db6af8..6e963af 100644 --- a/src/styles/components/logoCardGroup.module.scss +++ b/src/styles/components/logoCardGroup.module.scss @@ -1,8 +1,25 @@ -// todo - make more modular +@import '@/styles/mobileVars.scss'; + .logo__card__group { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: var(--padding-lg); margin-top: var(--margin-lg); margin-bottom: var(--margin-xxxl); +} + +@media screen and (max-width: $mobile-sm) { + + .logo__card__group { + grid-template-columns: repeat(2, 1fr); + } + +} + +@media screen and (max-width: $mobile-xs) { + + .logo__card__group { + grid-template-columns: repeat(1, 1fr); + } + } \ No newline at end of file diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 46a7617..79d7f95 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -8,7 +8,6 @@ body { font-family: var(--font-family-one); } - p { font-size: var(--font-size-base); line-height: 1.5; @@ -44,18 +43,19 @@ h5 { font-weight: bold; margin-bottom: var(--margin-lg); } + .container { + box-sizing: border-box; max-width: 1200px; margin: 0 auto; width: 100%; + padding: 0 var(--padding-md); } section { - width: 100%; } - .switch-to-light { display: var(--show-in-dark-mode); } @@ -64,7 +64,6 @@ section { display: var(--show-in-light-mode) } - // Spacing $margin-spacing-sizes: ( diff --git a/src/styles/mobileVars.scss b/src/styles/mobileVars.scss index 5aa2a90..3aa459f 100644 --- a/src/styles/mobileVars.scss +++ b/src/styles/mobileVars.scss @@ -1,2 +1,3 @@ // Media Query Breakpoints -$mobile-sm: 768px; \ No newline at end of file +$mobile-sm: 768px; +$mobile-xs: 576px; \ No newline at end of file From f0f5c5754626a43a3fcc4b0c1875032151136616 Mon Sep 17 00:00:00 2001 From: Robert Kregloh Date: Tue, 2 Jan 2024 19:29:49 -0500 Subject: [PATCH 4/5] added todo items and updated some variables (#16) Signed-off-by: robb --- src/app/page.tsx | 3 +- src/components/Footer/Footer.tsx | 27 ++++++++++++++ src/styles/button.module.scss | 60 -------------------------------- src/styles/variables.scss | 12 +++---- todo.md | 2 ++ 5 files changed, 37 insertions(+), 67 deletions(-) create mode 100644 src/components/Footer/Footer.tsx delete mode 100644 src/styles/button.module.scss diff --git a/src/app/page.tsx b/src/app/page.tsx index 1b6f298..2a100d2 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,6 +8,7 @@ import FAQSection from '@/components/FAQSection/FAQSection' import SupportSection from '@/components/SuipportSection/SupportSection' import HelpOutSection from '@/components/HelpOutSection/HelpOutSection' import BlogSection from '@/components/BlogSection/BlogSection' +import Footer from '@/components/Footer/Footer' export default function Home() { return ( @@ -48,7 +49,7 @@ export default function Home() {
- footer todo{/* */} +
) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..bafc9c8 --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,27 @@ +'use client' +import styles from '@/styles/components/navbar/navbar.module.scss' +import { useState } from 'react' +import NavbarItems from '../Navbar/NavbarItems' +import NavbarSocial from '../Navbar/NavbarSocial' + +export default function Navbar() { + const [isNavOpen, setIsNavOpen] = useState(false) + + return ( + + ) +} diff --git a/src/styles/button.module.scss b/src/styles/button.module.scss deleted file mode 100644 index a00e426..0000000 --- a/src/styles/button.module.scss +++ /dev/null @@ -1,60 +0,0 @@ - -.btn { - font-size: var(--font-size-md); - padding: var(--padding-md) var(--padding-md); - cursor: pointer; -} - -.btn--primary { - background-color: var(--primary-color); - color: var(--color-white); -} - -.btn--secondary { - background-color: var(--secondary-color); - color: var(--color-white); - border: solid 1px var(--secondary-color); - - &:hover { - background-color: var(--secondary-color-800); - color: var(--color-white); - border: solid 1px var(--secondary-color-800); - } -} - -.btn--outline { - background-color: var(--dark-color); - border: 1px solid var(--primary-color); - color: var(--primary-color); - - &:hover { - background-color: var(--dark-color-900); - color: var(--color-white); - border: solid 1px var(--dark-color-800); - } -} - -.btn--xl { - padding: calc(var(--padding-xl)) var(--padding-xl); - font-size: var(--font-size-xl); -} - -.btn--lg { - padding: calc(var(--padding-lg) * .5) var(--padding-lg); - font-size: var(--font-size-lg); -} - -.btn--md { - padding: calc(var(--padding-md) * .5) var(--padding-md); - font-size: var(--font-size-md); -} - -.btn--sm { - padding: calc(var(--padding-sm) * .75) var(--padding-sm); - font-size: var(--font-size-sm); -} - -.btn--xs { - padding: var(--padding-xs) var(--padding-xs); - font-size: var(--font-size-xs); -} \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 7e8bd00..a0e5e0b 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,12 +4,12 @@ :root { --background-color: #ffffff; - --dark-color: #000000; + --dark-color: #96635a; --light-color: #e0e0e0; --primary-color: #FFD3BB; - --secondary-color: #FFD3BB; + --secondary-color: #ffd3bb21; --accent-color-one: #62271D; - --font-color: #000000; + --font-color: #2c2521; --dark-color-900: hsl(0, 0%, 10%); // Darker --dark-color-800: hsl(0, 0%, 20%); @@ -21,7 +21,7 @@ --dark-color-200: hsl(0, 0%, 80%); --dark-color-100: hsl(0, 0%, 90%); // Lighter - --primary-color: #000000; + --primary-color: #2c2521; --primary-color-900: hsl(25, 35%, 10%); // Darker --primary-color-800: hsl(25, 35%, 20%); @@ -67,7 +67,7 @@ --font-weight-bold: 700; --font-weight-extra-bold: 800; // Padding - --base-padding: 14px; + --base-padding: 1rem; --padding-xs: calc(var(--base-padding) * 0.3); --padding-sm: calc(var(--base-padding) * 0.5); @@ -78,7 +78,7 @@ --padding-xxl: calc(var(--base-padding) * 6); // Margin - --base-margin: 14px; + --base-margin: 1rem; --margin-xs: calc(var(--base-margin) * 0.3); --margin-sm: calc(var(--base-margin) * 0.5); diff --git a/todo.md b/todo.md index 3e33e61..f462d2a 100644 --- a/todo.md +++ b/todo.md @@ -10,6 +10,7 @@ - replace inline styles in icon.tsx with css classes - renmame first gradient css class and make it reuseable - some layout shift in the last 2 sections +- replace hard button css color vars with vars like --button-color-etc and have dark/light dictate those # Features - link up nav icons @@ -18,6 +19,7 @@ - figure out if logocard component will display logos or text and update that to work - upgrade nextjs version to newest - make a card section component to follow the example of the other ones +- rename items in footer and nav component to be reuseable # SEO / accessibility - accessibility stuff From 6847000cb5d5d56e75456d087079316aaf0c75e6 Mon Sep 17 00:00:00 2001 From: Robert Kregloh Date: Wed, 3 Jan 2024 13:05:30 -0500 Subject: [PATCH 5/5] copy update (#17) Signed-off-by: robb --- src/components/HeroSection/HeroSection.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/HeroSection/HeroSection.tsx b/src/components/HeroSection/HeroSection.tsx index 080b72d..effcb1c 100644 --- a/src/components/HeroSection/HeroSection.tsx +++ b/src/components/HeroSection/HeroSection.tsx @@ -9,7 +9,8 @@ export default function HeroSection() {

Let Us Keep Your Secrets

- OpenBao, a secret project for the open source developer. + OpenBao, a secret project for the open source developer. (All copy is + currently placeholder)