From 9bd31071f9952a3c6ade69b45ae7dc1fb330e4e0 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Tue, 24 Oct 2023 13:15:13 +0200 Subject: [PATCH] Add ol component --- src/components/utils/Ol.tsx | 36 ++++++++++++++++++++ src/pages/About.tsx | 38 +++++++++++++++++++++ tailwind.config.js | 66 ++++++++++++++++++++----------------- 3 files changed, 110 insertions(+), 30 deletions(-) create mode 100644 src/components/utils/Ol.tsx diff --git a/src/components/utils/Ol.tsx b/src/components/utils/Ol.tsx new file mode 100644 index 00000000..6f97c83e --- /dev/null +++ b/src/components/utils/Ol.tsx @@ -0,0 +1,36 @@ +import classNames from "classnames"; + +export function Ol(props: { items: React.ReactNode[] }) { + return ( +
    + {props.items.map((child, i) => { + return ( +
  1. +
    +
    + {i + 1} +
    + {i !== props.items.length - 1 ? ( +
    + ) : null} +
    +
    {child}
    +
    2. + ); + })} +
+ ); +} diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 38e1ca3d..c720186d 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -1,14 +1,52 @@ /* eslint-disable react/no-unescaped-entities */ + import { ThinContainer } from "@/components/layout/ThinContainer"; +import { Ol } from "@/components/utils/Ol"; import { Heading1, Heading2, Paragraph } from "@/components/utils/Text"; import { SubPageLayout } from "./layouts/SubPageLayout"; +function Question(props: { title: string; children: React.ReactNode }) { + return ( + <> +

{props.title}

+
{props.children}
+ + ); +} + export function AboutPage() { return ( About us +
    + Blue, oh so blue, like the tranquil sky on a summer's day. It's + the color of calm and serenity, a gentle embrace for your senses. + When you think of blue, you think of the vast ocean stretching + endlessly, inviting you to dive deep into its azure depths. + , + + Blue is the color of dreams, where the world slows down, and you + can hear the whispers of the wind in the tall grass. It's a + symphony of peacefulness that resonates with your soul, like a + melody that lingers in your heart. + , + + Blue, like, it's totally, um, the essence of like, everything, you + know? It's like, you look at it, and it's like, it's there, but + it's also not there, and it's like, you're trying to grasp the + concept of blue, but it's like trying to catch a dream in a net + made of spaghetti, you know? It's like, it's the ultimate paradox, + and it's like, it's just blowing your mind, man, like, it's like + trying to find the meaning of life in a jar of peanut butter, but + the peanut butter is made of pure energy, man, and it's like, + whoa. + , + ]} + /> Blue, oh so blue, like the tranquil sky on a summer's day. It's the color of calm and serenity, a gentle embrace for your senses. When you diff --git a/tailwind.config.js b/tailwind.config.js index fcb061be..76b647bd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -26,23 +26,23 @@ module.exports = { "ash-400": "#3D394D", "ash-300": "#2C293A", "ash-200": "#2B2836", - "ash-100": "#1E1C26" + "ash-100": "#1E1C26", }, /* fonts */ fontFamily: { - "open-sans": "'Open Sans'" + "open-sans": "'Open Sans'", }, /* animations */ keyframes: { "loading-pin": { "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" }, - "20%": { height: "1em", "background-color": "white" } - } + "20%": { height: "1em", "background-color": "white" }, + }, }, - animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" } - } + animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }, + }, }, plugins: [ require("tailwind-scrollbar"), @@ -52,31 +52,31 @@ module.exports = { colors: { // Branding pill: { - background: "#1C1C36" + background: "#1C1C36", }, // meta data for the theme itself global: { accentA: "#505DBD", - accentB: "#3440A1" + accentB: "#3440A1", }, // light bar lightBar: { - light: "#2A2A71" + light: "#2A2A71", }, // Buttons buttons: { toggle: "#8D44D6", - toggleDisabled: "#202836" + toggleDisabled: "#202836", }, // only used for body colors/textures background: { main: "#0A0A10", accentA: "#6E3B80", - accentB: "#1F1F50" + accentB: "#1F1F50", }, // typography @@ -85,7 +85,7 @@ module.exports = { text: "#73739D", dimmed: "#926CAD", divider: "#262632", - secondary: "#64647B" + secondary: "#64647B", }, // search bar @@ -94,7 +94,7 @@ module.exports = { focused: "#24243C", placeholder: "#4A4A71", icon: "#545476", - text: "#FFFFFF" + text: "#FFFFFF", }, // media cards @@ -106,7 +106,7 @@ module.exports = { barColor: "#4B4B63", barFillColor: "#BA7FD6", badge: "#151522", - badgeText: "#5F5F7A" + badgeText: "#5F5F7A", }, // Error page @@ -115,8 +115,14 @@ module.exports = { border: "#252534", type: { - secondary: "#62627D" - } + secondary: "#62627D", + }, + }, + + // About page + about: { + circle: "#262632", + circleText: "#9A9AC3", }, // video player @@ -128,17 +134,17 @@ module.exports = { error: "#E44F4F", success: "#40B44B", loading: "#B759D8", - noresult: "#64647B" + noresult: "#64647B", }, progress: { background: "#8787A8", preloaded: "#8787A8", - watched: "#A75FC9" + watched: "#A75FC9", }, audio: { - set: "#A75FC9" + set: "#A75FC9", }, buttons: { @@ -151,7 +157,7 @@ module.exports = { purple: "#6b298a", purpleHover: "#7f35a1", cancel: "#252533", - cancelHover: "#3C3C4A" + cancelHover: "#3C3C4A", }, context: { @@ -171,19 +177,19 @@ module.exports = { buttons: { list: "#161C26", - active: "#0D1317" + active: "#0D1317", }, type: { main: "#617A8A", secondary: "#374A56", - accent: "#A570FA" - } - } - } - } - } - } - }) - ] + accent: "#A570FA", + }, + }, + }, + }, + }, + }, + }), + ], };