From 2e15de73decc052ebaff0b28e78c5fe99bc8b1e6 Mon Sep 17 00:00:00 2001 From: gitlimes Date: Mon, 28 Aug 2023 17:14:23 +0200 Subject: [PATCH] feat: add Special Thanks section, minor changes --- components/Hero/Hero.module.css | 5 ++ components/TeamCard/TeamCard.js | 15 ++++- components/TeamCard/TeamCard.module.css | 87 +++++++++++++++++++++++-- next.config.js | 12 +++- pages/index.js | 64 +++++++++++++++++- pages/index.module.css | 67 ++++++++++++++++++- styles/globals.css | 2 + 7 files changed, 237 insertions(+), 15 deletions(-) diff --git a/components/Hero/Hero.module.css b/components/Hero/Hero.module.css index 852633f..644943d 100644 --- a/components/Hero/Hero.module.css +++ b/components/Hero/Hero.module.css @@ -71,6 +71,11 @@ } } +@media screen and (min-width: 2304px) { + .images .lightCircle::before { + display: none; + } +} @media screen and (max-width: 1500px) { .images { diff --git a/components/TeamCard/TeamCard.js b/components/TeamCard/TeamCard.js index cbc3e50..c8b98ea 100644 --- a/components/TeamCard/TeamCard.js +++ b/components/TeamCard/TeamCard.js @@ -2,6 +2,8 @@ import styles from './TeamCard.module.css'; import Image from 'next/image'; import Link from 'next/link'; +import { Star } from 'phosphor-react'; + import classNames from 'classnames'; /** @@ -12,6 +14,7 @@ import classNames from 'classnames'; * @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). + * @param {boolean} special - Shows a yellow border and a star sticker at the top of the card * * @example * @@ -19,10 +22,17 @@ import classNames from 'classnames'; */ export default function TeamCard(ctx) { - const { name, caption, pic, link, compact, className } = ctx; + const { name, caption, pic, link, compact, special, className } = ctx; return ( - +
@@ -30,6 +40,7 @@ export default function TeamCard(ctx) {

{name}

{caption}

+ {special && } ); } diff --git a/components/TeamCard/TeamCard.module.css b/components/TeamCard/TeamCard.module.css index 7169383..80003fa 100644 --- a/components/TeamCard/TeamCard.module.css +++ b/components/TeamCard/TeamCard.module.css @@ -1,6 +1,8 @@ +/* regular card */ + .card { + position: relative; display: grid; - margin: 0.6rem; padding: 1rem; width: 100%; max-width: 28rem; @@ -18,19 +20,46 @@ box-shadow: 0 0 0 1px var(--bg-shade-3) inset; } +.card.special { + box-shadow: 0 0 0 0.2rem var(--yellow-shade-1) inset; +} + +.card.special .star { + position: absolute; + top: 0; + right: 0; + transform: translate(calc(50% - 0.1rem), calc(-50% + 0.1rem)) scale(1.25); + color: var(--yellow-shade-1); +} + .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); +} + +/* + * this garbage prevents a rendering bug when setting a simple bgcolor to the + * .imageWrapper where the corners would have a border. Just... deal with this. + */ + +.imageWrapper::before { + content: ''; + background-color: #fff; + display: block; + position: absolute; + width: 97%; + height: 97%; + top: 1.5%; + left: 1.5%; + border-radius: 0.6rem; } .image { width: 100%; height: 100%; - border-radius: 0.5rem; + border-radius: 0.6rem; + position: relative; } .text { @@ -49,10 +78,54 @@ font-weight: 300; } +/* compact card */ + +.compact.card { + max-width: unset; + width: unset; + border-radius: 0.75rem; +} + +.compact .imageWrapper { + width: 48px; + height: 48px; +} + +.compact .imageWrapper::before { + border-radius: 100%; +} + +.compact .image { + border-radius: 100%; + position: relative; + z-index: 2; +} + +.compact .text { + flex-flow: row; + justify-content: start; + align-items: center; +} + +.compact .text * { + margin: inherit; + line-height: 1; + font-size: inherit; + margin-right: 0.8ch; +} + +.compact.card.special { + box-shadow: 0 0 0 0.1rem var(--yellow-shade-1) inset; +} + +.compact.card.special .star { + transform: translate(calc(50% - 0.05rem), calc(-50% + 0.05rem)); +} + @media screen and (max-width: 36rem) { .card { - padding: .9rem; - border-radius: .7rem; + padding: 0.9rem; + border-radius: 0.7rem; } .imageWrapper { diff --git a/next.config.js b/next.config.js index 1dfcd03..10be164 100644 --- a/next.config.js +++ b/next.config.js @@ -13,19 +13,25 @@ const nextConfig = { protocol: 'https', hostname: 'github.com', port: '', - pathname: '/*' + pathname: '/**' }, { protocol: 'https', hostname: 'avatars.githubusercontent.com', port: '', - pathname: '/u/*' + pathname: '/u/**' + }, + { + protocol: 'https', + hostname: 'github.githubassets.com', + port: '', + pathname: '/images/**' }, { protocol: 'https', hostname: 'cdn.discordapp.com', port: '', - pathname: '/avatars/*' + pathname: '/avatars/**' } ] } diff --git a/pages/index.js b/pages/index.js index 3e6a21a..bec0d00 100644 --- a/pages/index.js +++ b/pages/index.js @@ -41,14 +41,16 @@ export default function Home({ locale }) { const router = useRouter(); return (
-
+
+
What we make. Our project has many components. Here are some of them.
+ {locale.showcase.map((el, i) => { return ( ); })} +
+
And much more! @@ -86,14 +90,19 @@ export default function Home({ locale }) {
+
{locale.faq.title} {locale.faq.text}
+
- {locale.credits.title} + + {locale.credits.title} + {locale.credits.text} +
{locale.credits.people.map((el, i) => { return ( @@ -102,6 +111,57 @@ export default function Home({ locale }) { })}
+ +
+ {locale.specialThanks.title} + {locale.specialThanks.text} + +
+
+
+ {(() => { + let ar = locale.specialThanks.people; + ar = ar.slice(0, Math.round(ar.length / 2)); + ar = ar.concat(ar).concat(ar); + return ar.map((el, i) => { + return ( + + ); + }); + })()} +
+ +
+ {(() => { + let ar = locale.specialThanks.people; + ar = ar.slice(Math.round(ar.length / 2)); + ar = ar.concat(ar).concat(ar); + return ar.map((el, i) => { + return ( + + ); + }); + })()} +
+
+
+
); } diff --git a/pages/index.module.css b/pages/index.module.css index 166d8e2..67706f1 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -54,10 +54,75 @@ display: flex; justify-content: center; flex-wrap: wrap; - margin: -10px; + gap: 1rem; margin-top: 80px; } +.thanksAniWrap { + position: relative; + transform: rotate(-5deg); + margin-top: 2rem; +} + +.thanksAniWrap .inner { + overflow: hidden; +} + +.thanksAniWrap::before { + content: ''; + position: absolute; +} + +.thanksAniWrap::after { + content: ''; + position: absolute; + top: 0; + width: 110%; + left: -5%; + height: 100%; + background: linear-gradient( + 90deg, + var(--bg-shade-1) 5%, + rgba(27, 31, 59, 0) 25%, + rgba(27, 31, 59, 0) 75%, + var(--bg-shade-1) 95% + ); + z-index: 1; + pointer-events: none; +} + +.thanksAniWrap .rowOne, +.thanksAniWrap .rowTwo { + display: inline-grid; + width: max-content; + grid-auto-columns: 1fr; + grid-auto-flow: column; + gap: 1rem; + margin-bottom: 1rem; + white-space: nowrap; +} + +.thanksAniWrap .rowOne { + animation: infiniteScroll 25s linear infinite; + position: relative; + left: -100%; +} + +.thanksAniWrap .rowTwo { + animation: infiniteScroll 30s linear infinite reverse; + position: relative; + right: 100%; +} + +@keyframes infiniteScroll { + 0% { + transform: translate3d(0); + } + 100% { + transform: translate3d(calc(100% / -3), 0, 0); + } +} + @media screen and (max-width: 840px) { .showcaseTail { padding: 90px 0; diff --git a/styles/globals.css b/styles/globals.css index b158dae..3fbaf56 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -25,6 +25,8 @@ --green-shade-1: #59c9a5; --red-shade-1: #a9375b; + + --yellow-shade-1: #abbf3b; } body {