Skip to content

Commit b7ab00d

Browse files
hasparussaihaj
hasparus
and
saihaj
authored
new conf design — landing (#1995)
* Add Hans Grotesk as --font-sans * Clean up the font setup to make sure .font-sans works consistently * Add Commit Mono as --font-mono * Add new colors * Use relative rgb colors to support alpha * Use unwraped custom properties for colors to support older browsers * Add typography styles * Make the texts switch to different size starting from `lg` * Go back to switching on 768px * Add README.md to explain the new directory * Add Anchor component for internal and external links * Add clsx to classFunctions in Tailwind VSCode settings * Add Button component * Add `variant` prop * Fix Button colors * Tweak hover color * Set text color in dark mode * Add RegisterToday section * Tweak RegisterToday section spacing * Improve mobile styles * Improve paddings for medium screen sizes * Add a global focus style className * Improve medium screen size styles * Add Calendar and Pin from Pixelarticons * Move typography styles to a Tailwind plugin so they autocomplete * Extract the event links * Move RegisterToday to components dir * Fix typography-d1 size * Use next-theems from transitive dep (for now) (we need `dark:` prefix for Hero) * Draft Hero component * Move Pixelarticons to .tsx files * Make the Hero match designs * Redo the Hero stripes in CSS * Tweak focus outline * Use alternative gradients in dark mode * Animate mask bean on load to avoid blinking * Tweak styles for mobiles and large screen sizes * Remove todo comment * Clean up more comments * Add Navbar * Improve the backdrop layer * Make the gradient match Figma * Add What to Expect section * Improve gql-conf-container class * Style What to Expect section nicely * Remove the old Intro section * Add a two hacky classes to make the old part of website still readable * Make the gradient match Figma * Add top minds section * improve styles * Improve social buttons * Add more socials * Update styles * More responsive styles * Show [Become as speakser] if there is no /speakers page yet * Improve the contrast of secondary button in dark mode * Make Tanmai's photo as green as the others * Add GetYourTicket section * Improve GetYourTicket styles * Improve the stripes * Lower the opacity to make text readable * Fix borders * Update text * Make the padding and borders better * Add RegisterSection * Underline links * Add Sponsors section * Tweak styles * Use SVGR to load sponsor logos and fix the grid layout * Make it less transparent and get rid of border radius * Remove a redundant comment * Remove unused import * Fix a type name * Use a proper icon * Fix alignment * Add Call for Proposals section * make the dates table * Improve styles * Begin mobile version * Tweak styles * Add the stripes * Add missing keys * Add .typography-link utility * Add FrequentlyAskedQuestions section * Tweak spacing * Bump navbar opacities * Make the Navbar okay * Add background strips per section * Remove unused import * Make the navbar more mobile friendly * Make the navbar consistent color at the top * Supress hydration warning from next-themes * Make the FAQ work better on medium screens * Fix the CallForProposals on mobile * Take a random shot at fixing the stripes glitch * Fix the navbar root link * Make the logo link to / and the text to conf root * Remove the old Register section * Update old sections to new typography styles * Fix Tyk logo * Add shrink-0 to arrows * Update navbar icons to pixelarticons * Make CallForProposals better on tablet screens * Fix border colors * Tweak spacing * Tweak the top minds for medium screens * Tweak the heading width * Add GraphQLFoundationCard * Use proper trademark color * Tweak spacings * Improve mobile styles * Refactor the logo link out, restyle old footer * Add stripes to the footer * Add grid borders to the footer * Tweak the blur blob position * Unify paddings * Make the Stripes look more like the design * Remove old pnpm-workspace.yaml * Add a basic Marquee with Motion * Copy the content of the marquee way too many times * Make the decoration look like on the design * Add remaining marquee sections * Unify colors and block scroll in navbar * Switch to current sponsors * Restyle the Sponsorship perks section * Run Prettier on SVGs * Change dl to ul in WhatToExpectSection * Show previous edition speakers in the top minds section * Restyle Resources * Unify widths per @saihaj's suggestion Co-authored-by: Saihajpreet Singh <[email protected]> * Unify more widths per @saihaj's suggestion Co-authored-by: Saihajpreet Singh <[email protected]> * Tweak styles --------- Co-authored-by: Saihajpreet Singh <[email protected]>
1 parent 32981d8 commit b7ab00d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+3259
-887
lines changed

‎.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
"typescript.tsdk": "node_modules/typescript/lib",
99
"[typescript]": {
1010
"editor.defaultFormatter": "esbenp.prettier-vscode"
11-
}
11+
},
12+
"tailwindCSS.classFunctions": ["clsx"]
1213
}

‎next.config.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,38 @@ export default withLess(
3131
rule.test?.test?.(".svg"),
3232
)
3333

34-
fileLoaderRule.exclude = ALLOWED_SVG_REGEX
34+
fileLoaderRule.exclude = /\.svg$/i
35+
36+
config.module.rules.push(
37+
// All .svg from /icons/ and with ?svgr are going to be processed by @svgr/webpack
38+
{
39+
test: ALLOWED_SVG_REGEX,
40+
use: ["@svgr/webpack"],
41+
},
42+
{
43+
test: /\.svg$/i,
44+
exclude: ALLOWED_SVG_REGEX,
45+
resourceQuery: /svgr/,
46+
use: [
47+
{
48+
loader: "@svgr/webpack",
49+
options: {
50+
dimensions: false, // **adds** viewBox.
51+
},
52+
},
53+
],
54+
},
55+
// Otherwise, we use the default file loader
56+
{
57+
...fileLoaderRule,
58+
test: /\.svg$/i,
59+
exclude: ALLOWED_SVG_REGEX,
60+
resourceQuery: {
61+
not: [...fileLoaderRule.resourceQuery.not, /svgr/],
62+
},
63+
},
64+
)
3565

36-
config.module.rules.push({
37-
test: ALLOWED_SVG_REGEX,
38-
use: ["@svgr/webpack"],
39-
})
4066
return config
4167
},
4268
output: "export",

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@graphql-tools/schema": "10.0.15",
2424
"@headlessui/react": "^1.7.17",
2525
"@radix-ui/react-radio-group": "^1.1.3",
26+
"@tailwindcss/container-queries": "^0.1.1",
2627
"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
2728
"@tailwindcss/typography": "^0.5.10",
2829
"autoprefixer": "^10.4.17",
@@ -39,6 +40,7 @@
3940
"lucide-react": "^0.469.0",
4041
"markdown-to-jsx": "^7.4.0",
4142
"marked": "5.1.2",
43+
"motion": "^12.11.0",
4244
"next": "^14.2.5",
4345
"next-image-export-optimizer": "^1.12.3",
4446
"next-query-params": "^5.0.0",
@@ -53,6 +55,7 @@
5355
"react": "^18.3.1",
5456
"react-dom": "^18.3.1",
5557
"react-medium-image-zoom": "5.2.13",
58+
"react-use-measure": "^2.1.7",
5659
"rss": "1.2.2",
5760
"server-only": "0.0.1",
5861
"string-similarity": "^4.0.4",

‎pnpm-lock.yaml

Lines changed: 90 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pnpm-workspace.yaml

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎public/img/conf/Sponsors/Tyk.svg

Lines changed: 6 additions & 17 deletions
Loading

‎src/app/colors.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
:root,
2+
.light {
3+
--color-pri-lighter: 319 100% 90%;
4+
--color-pri-light: 318 100% 80%;
5+
--color-pri-base: 319 100% 44.1%;
6+
--color-pri-dark: 319 100% 30%;
7+
--color-pri-darker: 319 100% 20%;
8+
9+
--color-sec-lighter: 79 80% 90%;
10+
--color-sec-light: 79 82% 80%;
11+
--color-sec-base: 79 90% 65%;
12+
--color-sec-dark: 79 98% 37%;
13+
--color-sec-darker: 79 98% 23%;
14+
15+
--color-neu-0: 0 0% 100%;
16+
--color-neu-50: 75 57% 97%;
17+
--color-neu-100: 75 15% 95%;
18+
--color-neu-200: 77 14% 90%;
19+
--color-neu-300: 76 14% 85%;
20+
--color-neu-400: 77 14% 80%;
21+
--color-neu-500: 74 14% 70%;
22+
--color-neu-600: 76 15% 60%;
23+
--color-neu-700: 76 15% 40%;
24+
--color-neu-800: 77 14% 20%;
25+
--color-neu-900: 75 15% 5%;
26+
}
27+
28+
.dark {
29+
--color-neu-900: 0 0% 100%;
30+
--color-neu-800: 75 57% 97%;
31+
--color-neu-700: 75 15% 95%;
32+
--color-neu-600: 77 14% 90%;
33+
--color-neu-500: 76 14% 85%;
34+
--color-neu-400: 77 14% 80%;
35+
--color-neu-300: 74 14% 70%;
36+
--color-neu-200: 76 15% 60%;
37+
--color-neu-100: 76 15% 40%;
38+
--color-neu-50: 77 14% 20%;
39+
--color-neu-0: 75 15% 5%;
40+
}

‎src/app/conf/2023/layout.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
44
import { Footer } from "../_components/footer"
55
import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
66
import NextLink from "next/link"
7+
import { OldFontsStyleTag } from "../../fonts/old-fonts"
78

89
export const metadata = {
910
description:
@@ -33,6 +34,7 @@ export default function ConfLayout({
3334
const hover = "#c026d3"
3435
return (
3536
<>
37+
<OldFontsStyleTag />
3638
<style>{`
3739
.text-primary,
3840
.hover\\:text-primary:hover {

‎src/app/conf/2024/layout.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
44
import { Footer } from "../_components/footer"
55
import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
66
import NextLink from "next/link"
7+
import { OldFontsStyleTag } from "../../fonts/old-fonts"
78

89
export const metadata = {
910
description:
@@ -30,6 +31,7 @@ export default function Layout({
3031
}): ReactElement {
3132
return (
3233
<>
34+
<OldFontsStyleTag />
3335
<Header
3436
logo={
3537
<NextLink

0 commit comments

Comments
 (0)