From 76d1ff97394cf0f28b71688df67c60ed91bc876d Mon Sep 17 00:00:00 2001 From: Sam Der Date: Sun, 10 Sep 2023 18:51:59 -0700 Subject: [PATCH] Bootstrap Sass Organization (#17) * feat: bootstrap sass organization * fix: installed bootstrap * fix: import font from Next instead of Google Fonts * fix: update red hex value correctly * linting * fix: custom CSS property for font * fix: sass partials * fix: new sass path, incorporated navbar and footer * fix: removed comment --------- Co-authored-by: Tyler Yu Add tiling anteater head background art (#25) - Make diagonally tiling base asset to use native CSS background repeat - Embed white background to minimize opaque file size (no transparency) - The resulting GIF uses 8 colors with dithering Co-authored-by: Taesung Hwang Set up Home page content including Landing (#21) Set up Home page content including Landing - Reorganize Landing into Home - To match common naming, rename primary page to Home - Landing is now the first view of the Home page - Wrap primary layout children in `
` - Use container layout for Home page sections - Add `Container` elements for sections w/ responsive vertical padding - Create yellow Apply button with bs-btn variant in Home page Landing - Use `bootstrap.button-variant` mixin for Apply button styles - Specify empty variant to React Bootstrap - Remove unnecessary sizing and layout styles - Separate usage of theme variables and Bootstrap mixins --------- Co-authored-by: Taesung Hwang --- apps/sanity/package.json | 2 +- apps/site/next.config.js | 5 + apps/site/src/app/globals.scss | 10 - apps/site/src/app/layout.tsx | 15 +- apps/site/src/app/page.module.scss | 0 apps/site/src/app/page.tsx | 2 +- apps/site/src/app/resources/page.tsx | 2 +- apps/site/src/app/schedule/page.tsx | 2 +- .../background/anteater-head-tiling.gif | Bin 0 -> 51673 bytes .../src/components/Footer/Footer.module.scss | 2 - .../src/components/NavBar/NavBar.module.scss | 13 +- apps/site/src/lib/FontProvider.tsx | 20 + .../site/src/lib/styles/_bootstrap-utils.scss | 11 + .../{variables.scss => _zothacks-theme.scss} | 10 +- apps/site/src/lib/styles/bootstrap.scss | 25 + apps/site/src/lib/styles/globals.scss | 4 + apps/site/src/views/Home/Home.module.scss | 17 + apps/site/src/views/Home/Home.tsx | 23 + .../ApplyButton/ApplyButton.module.scss | 37 + .../components/ApplyButton/ApplyButton.tsx | 15 + .../src/views/Home/sections/About/About.tsx | 11 + apps/site/src/views/Home/sections/FAQ/FAQ.tsx | 11 + .../Home/sections/Landing/Landing.module.scss | 10 + .../views/Home/sections/Landing/Landing.tsx | 14 + .../views/Home/sections/Mentors/Mentors.tsx | 11 + .../views/Home/sections/Sponsors/Sponsors.tsx | 11 + .../src/views/Landing/Landing.module.scss | 0 apps/site/src/views/Landing/Landing.tsx | 16 - apps/site/src/views/Resources/Resources.tsx | 4 +- apps/site/src/views/Schedule/Schedule.tsx | 2 +- apps/site/src/views/index.ts | 4 +- pnpm-lock.yaml | 9070 ++++++++++++----- 32 files changed, 6492 insertions(+), 2887 deletions(-) delete mode 100644 apps/site/src/app/globals.scss delete mode 100644 apps/site/src/app/page.module.scss create mode 100644 apps/site/src/assets/background/anteater-head-tiling.gif create mode 100644 apps/site/src/lib/FontProvider.tsx create mode 100644 apps/site/src/lib/styles/_bootstrap-utils.scss rename apps/site/src/lib/styles/{variables.scss => _zothacks-theme.scss} (61%) create mode 100644 apps/site/src/lib/styles/bootstrap.scss create mode 100644 apps/site/src/lib/styles/globals.scss create mode 100644 apps/site/src/views/Home/Home.module.scss create mode 100644 apps/site/src/views/Home/Home.tsx create mode 100644 apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss create mode 100644 apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx create mode 100644 apps/site/src/views/Home/sections/About/About.tsx create mode 100644 apps/site/src/views/Home/sections/FAQ/FAQ.tsx create mode 100644 apps/site/src/views/Home/sections/Landing/Landing.module.scss create mode 100644 apps/site/src/views/Home/sections/Landing/Landing.tsx create mode 100644 apps/site/src/views/Home/sections/Mentors/Mentors.tsx create mode 100644 apps/site/src/views/Home/sections/Sponsors/Sponsors.tsx delete mode 100644 apps/site/src/views/Landing/Landing.module.scss delete mode 100644 apps/site/src/views/Landing/Landing.tsx diff --git a/apps/sanity/package.json b/apps/sanity/package.json index e85417aa..f7d81d59 100644 --- a/apps/sanity/package.json +++ b/apps/sanity/package.json @@ -34,4 +34,4 @@ "prettier": "^2.8.8", "typescript": "^4.9.5" } -} \ No newline at end of file +} diff --git a/apps/site/next.config.js b/apps/site/next.config.js index 7ca34f03..af04e66e 100644 --- a/apps/site/next.config.js +++ b/apps/site/next.config.js @@ -1,6 +1,11 @@ +const path = require("path"); + /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + sassOptions: { + includePaths: [path.join(__dirname, "src", "lib", "styles")], + }, }; module.exports = nextConfig; diff --git a/apps/site/src/app/globals.scss b/apps/site/src/app/globals.scss deleted file mode 100644 index 7a01bddf..00000000 --- a/apps/site/src/app/globals.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "~@/lib/styles/variables.scss" as variables; - -body { - background-color: variables.$white; -} - -h1 { - font-family: variables.$fuzzy-bubbles; - font-weight: bold; -} diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx index 4feb9abc..1e3157b7 100644 --- a/apps/site/src/app/layout.tsx +++ b/apps/site/src/app/layout.tsx @@ -1,13 +1,11 @@ -import "bootstrap/dist/css/bootstrap.min.css"; -import "./globals.scss"; - import type { Metadata } from "next"; -import { Fuzzy_Bubbles } from "next/font/google"; + +import FontProvider from "@/lib/FontProvider"; import NavBar from "@/components/NavBar/NavBar"; import Footer from "@/components/Footer/Footer"; - -const fuzzy = Fuzzy_Bubbles({ weight: ["400", "700"], subsets: ["latin"] }); +import "@/lib/styles/bootstrap.scss"; +import "@/lib/styles/globals.scss"; export const metadata: Metadata = { title: "Create Next App", @@ -21,9 +19,10 @@ export default function RootLayout({ }) { return ( - + + - {children} +
{children}