From 96642058e15964f734715e1ced08c2887f6a7c0a Mon Sep 17 00:00:00 2001 From: gitlimes Date: Mon, 28 Aug 2023 09:42:16 +0200 Subject: [PATCH] feat: add Team section, minor lint and deps change --- components/TeamCard/TeamCard.js | 35 ++++++++++++++ components/TeamCard/TeamCard.module.css | 62 +++++++++++++++++++++++++ next.config.js | 22 +++++++++ package-lock.json | 16 ++++--- pages/index.js | 37 +++++++++------ pages/index.module.css | 10 +++- styles/globals.css | 34 ++++++++------ 7 files changed, 183 insertions(+), 33 deletions(-) create mode 100644 components/TeamCard/TeamCard.js create mode 100644 components/TeamCard/TeamCard.module.css diff --git a/components/TeamCard/TeamCard.js b/components/TeamCard/TeamCard.js new file mode 100644 index 0000000..cbc3e50 --- /dev/null +++ b/components/TeamCard/TeamCard.js @@ -0,0 +1,35 @@ +import styles from './TeamCard.module.css'; +import Image from 'next/image'; +import Link from 'next/link'; + +import classNames from 'classnames'; + +/** + * A reusable component to credit someone. + * + * @param {string} name - The name of the contributor. + * @param {string} caption - A caption that more or less describes the user's contributions. + * @param {string} pic - A link to the avatar image. + * @param {string} link - A link to the user page for this user (e.g. github/gitlab/gitbucket/gitrekt profile, fedi account, personal website/blog, ...) + * @param {boolean} compact - Whether the card should be compact (e.g. Special thanks section) or regular sized (e.g. The team section). + * + * @example + * + * + */ + +export default function TeamCard(ctx) { + const { name, caption, pic, link, compact, className } = ctx; + + return ( + +
+ +
+
+

{name}

+

{caption}

+
+ + ); +} diff --git a/components/TeamCard/TeamCard.module.css b/components/TeamCard/TeamCard.module.css new file mode 100644 index 0000000..7169383 --- /dev/null +++ b/components/TeamCard/TeamCard.module.css @@ -0,0 +1,62 @@ +.card { + display: grid; + margin: 0.6rem; + padding: 1rem; + width: 100%; + max-width: 28rem; + background-color: var(--bg-shade-0); + color: var(--text-shade-1); + grid-template-columns: min-content auto; + align-items: center; + gap: 1.5rem; + border-radius: 1rem; + font-weight: inherit; +} + +.card:hover { + background-color: var(--bg-shade-2); + box-shadow: 0 0 0 1px var(--bg-shade-3) inset; +} + +.imageWrapper { + position: relative; + /* the .imageWrapper and .image radii differ to prevent a rendering bug where the image corners were glitchy */ + border-radius: 0.6rem; + width: 110px; + height: 110px; + background-color: var(--accent-shade-3); +} + +.image { + width: 100%; + height: 100%; + border-radius: 0.5rem; +} + +.text { + display: flex; + flex-flow: column; + justify-content: center; +} + +.text * { + margin: 0; + line-height: 2; +} + +.text p { + font-size: 1rem; + font-weight: 300; +} + +@media screen and (max-width: 36rem) { + .card { + padding: .9rem; + border-radius: .7rem; + } + + .imageWrapper { + width: 64px; + height: 64px; + } +} diff --git a/next.config.js b/next.config.js index 4582735..1dfcd03 100644 --- a/next.config.js +++ b/next.config.js @@ -6,6 +6,28 @@ const nextConfig = { i18n: { locales: getLocaleList(), defaultLocale: 'en-US', + }, + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'github.com', + port: '', + pathname: '/*' + }, + { + protocol: 'https', + hostname: 'avatars.githubusercontent.com', + port: '', + pathname: '/u/*' + }, + { + protocol: 'https', + hostname: 'cdn.discordapp.com', + port: '', + pathname: '/avatars/*' + } + ] } }; diff --git a/package-lock.json b/package-lock.json index b69e568..9854f73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -805,9 +805,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001429", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz", - "integrity": "sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg==", + "version": "1.0.30001519", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz", + "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==", "funding": [ { "type": "opencollective", @@ -816,6 +816,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -4588,9 +4592,9 @@ "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" }, "caniuse-lite": { - "version": "1.0.30001429", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz", - "integrity": "sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg==" + "version": "1.0.30001519", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz", + "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==" }, "chalk": { "version": "5.3.0", diff --git a/pages/index.js b/pages/index.js index 2ad59c0..3e6a21a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,6 +6,7 @@ import Section from '../components/Section/Section'; import ShowcaseSection from '../components/ShowcaseSection/ShowcaseSection'; import Faq from '../components/Faq/Faq'; import Hero from '../components/Hero/Hero'; +import TeamCard from '../components/TeamCard/TeamCard'; import Image from 'next/image'; @@ -40,22 +41,20 @@ export default function Home({ locale }) { const router = useRouter(); return (
-
+
What we make. - - Our project has many components. Here are some of them. - + Our project has many components. Here are some of them.
- {locale.showcase.map((element, i) => { + {locale.showcase.map((el, i) => { return ( @@ -71,26 +70,38 @@ export default function Home({ locale }) { />
And much more! -

+ Check out our progress page for an extensive list of our current progress and goals! -

+
-
+
{locale.faq.title} -

{locale.faq.text}

+ {locale.faq.text}
+
+ {locale.credits.title} + {locale.credits.text} +
+ {locale.credits.people.map((el, i) => { + return ( + + ); + })} +
+
); } diff --git a/pages/index.module.css b/pages/index.module.css index 3c28c94..166d8e2 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -11,7 +11,7 @@ } .showcaseSection::after { - content: ""; + content: ''; width: 400vw; height: calc(100% + 256px); margin-left: -50vw; @@ -50,6 +50,14 @@ margin: 1rem auto 2rem; } +.teamWrapper { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: -10px; + margin-top: 80px; +} + @media screen and (max-width: 840px) { .showcaseTail { padding: 90px 0; diff --git a/styles/globals.css b/styles/globals.css index 22edbde..b158dae 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,25 +1,24 @@ :root { - --width: 1500px; --maxwidth: min(var(--width), 90%); /* 1 is the base color, <1 are darker variations and >1 are lighter */ --bg-shade-0: #131733; - --bg-shade-1: #1B1F3B; - --bg-shade-2: #23274A; - --bg-shade-2-5: #2D3258; - --bg-shade-3: #373C65; + --bg-shade-1: #1b1f3b; + --bg-shade-2: #23274a; + --bg-shade-2-5: #2d3258; + --bg-shade-3: #373c65; --bg-shade-3-5: #404673; - --bg-shade-4: #494F81; + --bg-shade-4: #494f81; - --accent-shade-0: #673DB6; - --accent-shade-1: #9D6FF3; - --accent-shade-2: #A185D6; - --accent-shade-3: #CAB1FB; + --accent-shade-0: #673db6; + --accent-shade-1: #9d6ff3; + --accent-shade-2: #a185d6; + --accent-shade-3: #cab1fb; - --text-shade-0: #8990C1; - --text-shade-1: #A1A8D9; - --text-shade-2: #CAC1F5; + --text-shade-0: #8990c1; + --text-shade-1: #a1a8d9; + --text-shade-2: #cac1f5; --text-shade-3: #fff; --green-shade-0: #37a985; @@ -51,6 +50,15 @@ a { font-weight: bold; } +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-shade-3); +} + /* Scrollbar styling 'cause it's fancy */ *::-webkit-scrollbar { width: 12px;