Skip to content
This repository has been archived by the owner on Dec 12, 2024. It is now read-only.

Commit

Permalink
Style adjustments (#1864)
Browse files Browse the repository at this point in the history
* applying changes from Neal's PR

* index page

* add margin bottom

* rework spacing

* clean up home page

* properly handle links
  • Loading branch information
dayhaysoos authored Oct 30, 2024
1 parent 92e23e5 commit b83cca0
Show file tree
Hide file tree
Showing 13 changed files with 271 additions and 307 deletions.
45 changes: 2 additions & 43 deletions site-new/docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,49 +81,8 @@ const config: Config = {
src: "img/logo.svg",
},
items: [
{
type: "dropdown",
label: "Community",
position: "right",
items: [
{
label: "Code of Conduct",
href: "/community/code-of-conduct",
},
{
label: "Governance",
href: "/community/governance",
},
{
label: "Monthly Spotlight",
href: "/community/spotlight",
},
{
label: "Calendar",
href: "/community/calendar",
},
{
label: "Open Source Playbook",
href: "/community/open-source-playbook",
},
{
label: "Contribution Guide",
href: "/community/contribute",
},
{
label: "Incubation Program",
href: "/community/incubation-program",
},
{
label: "Innovators Showcase",
href: "/community/innovators-showcase",
},
{
label: "Assets",
href: "/community/assets",
},
],
},
{ label: "Community", to: "/community", position: "right" },

{
type: "docSidebar",
sidebarId: "docsSidebar",
Expand Down
4 changes: 2 additions & 2 deletions site-new/src/components/BlockBg/BlockBg.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const BlockBg = ({

return (
<div
className={`${className} relative grid overflow-clip *:[grid-area:1/1]`}
className={`${className} relative grid overflow-clip *:[grid-area:1/]`}
>
<div className={cn("absolute inset-0 z-0")}>
{grid.map((row, i) => {
Expand All @@ -124,7 +124,7 @@ const BlockBg = ({
key={i}
style={{
height,
gridTemplateColumns: `repeat(${rows}, minmax(0,1fr))`,
gridTemplateColumns: `repeat(${columns}, minmax(0,1fr))`,
}}
>
{row.map((col, j) => {
Expand Down
104 changes: 50 additions & 54 deletions site-new/src/components/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import JSMobile from "@site/assets/icons/JSMobile";
import GoMobile from "@site/assets/icons/GoMobile";
import KotlinMobile from "@site/assets/icons/KotlinMobile";
import { IconButtonLink } from "./IconButton";
import Link from "@docusaurus/Link";

type CardProps = {
icon?: React.ComponentType<{ className: string; fill?: string }>;
Expand Down Expand Up @@ -101,7 +102,6 @@ const randomTheme = (): Theme => {
return themes[randomIndex];
};


function Card({
className = "",
icon: Icon,
Expand All @@ -114,14 +114,12 @@ function Card({
text,
buttonText,
url,
orientation = "vertical", // Default orientation is vertical
orientation = "vertical",
size = "large",
...props
}: CardProps) {
const Image = image;

const selectedTheme = theme || randomTheme();

const isHoverEnabled =
props.type === "buttonText" || props.type === "default" || !props.type;

Expand Down Expand Up @@ -166,36 +164,25 @@ function Card({

const currentSize = sizeClasses[size];

return (
<div
className={`${className} group flex items-center justify-center ${orientation === "horizontal" ? "flex-col md:flex-row" : "flex-col"} w-full ${currentSize.container} ${themeClass} ${borderClass} transition-all duration-300 mb-4`}
>

{/* image */}
{Image &&
const CardContent = (
<>
{Image && (
<img
src={Image}
alt={alt}
className={`${currentSize.image} object-cover w-full`}
className={`${currentSize.image} w-full object-cover`}
/>
}
)}

{/* card body container */}
<div className="w-full h-full grid grid-cols-1 gap-4 p-8">

{/* icon */}
<div className="grid h-full w-full grid-cols-1 gap-4 p-8">
{Icon && (
<Icon
className={`h-[126px] w-[84px] md:h-[150px] md:w-[100px] ${iconClass} transition-all duration-300`}
/>
)}

{/* eyebrow for spotlight card */}
{eyebrow && (
<p className="my-0 text-sm md:text-lg">{eyebrow}</p>
)}
{eyebrow && <p className="my-0 text-sm md:text-lg">{eyebrow}</p>}

{/* card heading */}
<Heading
as="h3"
className={cn(
Expand All @@ -208,40 +195,49 @@ function Card({
{title}
</Heading>

{/* card text */}
{text && (
<p className="my-0 text-sm md:text-lg">{text}</p>
{text && <p className="my-0 text-sm md:text-lg">{text}</p>}

{url && buttonText && (
<Button text={buttonText} url={url} className="mt-2" />
)}

{/* button text */}
{url && buttonText && <Button text={buttonText} url={url} className="mt-2" />}

{/* language icon buttons */}
<>
{props.type === "languageButton" &&
Object.keys(props.resources).some(
(key) => props.resources[key as Languages],
) && (
<div className="flex gap-twist-core-spacing-8">
{Object.keys(props.resources).map((key) => {
const value = props.resources[key as Languages];
return (
value && (
<IconButtonLink
key={key}
href={value}
className="leading-[0]"
>
{languageIconMap[key as Languages]}
</IconButtonLink>
)
);
})}
</div>
)
}
</>

{props.type === "languageButton" &&
Object.keys(props.resources).some(
(key) => props.resources[key as Languages],
) && (
<div className="flex gap-twist-core-spacing-8">
{Object.keys(props.resources).map((key) => {
const value = props.resources[key as Languages];
return (
value && (
<IconButtonLink
key={key}
href={value}
className="leading-[0]"
>
{languageIconMap[key as Languages]}
</IconButtonLink>
)
);
})}
</div>
)}
</div>
</>
);

return url && !buttonText ? (
<Link
href={url}
className={`${className} group flex items-center justify-center ${orientation === "horizontal" ? "flex-col md:flex-row" : "flex-col"} w-full ${currentSize.container} ${themeClass} ${borderClass} mb-4 transition-all duration-300`}
>
{CardContent}
</Link>
) : (
<div
className={`${className} group flex items-center justify-center ${orientation === "horizontal" ? "flex-col md:flex-row" : "flex-col"} w-full ${currentSize.container} ${themeClass} ${borderClass} mb-4 transition-all duration-300`}
>
{CardContent}
</div>
);
}
Expand Down
5 changes: 1 addition & 4 deletions site-new/src/components/FeedbackCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@ import Check from "../../static/img/Check";
function FeedbackCard() {
return (
<div className="max-w-[600px] border-[0.5px] border-solid border-tbd-yellow p-twist-core-spacing-12">
<Heading
as="h3"
className="text-3xl text-tbd-yellow sm:text-[22px] md:text-3xl"
>
<Heading as="h3" className="text-tbd-yellow">
Was this page helpful?
</Heading>
<div className="border-1 my-twist-core-spacing-9 flex border-white">
Expand Down
16 changes: 10 additions & 6 deletions site-new/src/components/Hero.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import Background from "@site/src/components/Background";
import { BlockBg } from "@site/src/components/BlockBg";
import Heading from "@theme/Heading";
import Button from "@site/src/components/Button";

Expand All @@ -13,9 +13,13 @@ type HeroProps = {

function Hero({ subject, title, description, url }: HeroProps): JSX.Element {
return (
<Background
className="flex w-full justify-center pt-twist-core-spacing-30"
bgColor="black"
<BlockBg
className="flex justify-center bg-tbd-gray-shade-2 pt-twist-core-spacing-30"
maxSize={200}
minSize={100}
columns={24}
rows={36}
secondaryClassName="bg-tbd-gray-shade-1"
>
<div className="container mx-auto px-4 py-12">
<div className="flex flex-col items-center justify-center text-center text-white">
Expand All @@ -25,7 +29,7 @@ function Hero({ subject, title, description, url }: HeroProps): JSX.Element {
as="h1"
className="relative mb-4 mt-twist-core-spacing-7 text-[48px] font-medium lg:text-[80px]"
>
<span className="text-highlight-middle relative mb-twist-core-spacing-7 inline-block text-tbd-yellow">
<span className="relative mb-twist-core-spacing-7 inline-block text-tbd-yellow text-highlight-middle">
{title}
</span>
</Heading>
Expand All @@ -41,7 +45,7 @@ function Hero({ subject, title, description, url }: HeroProps): JSX.Element {
)}
</div>
</div>
</Background>
</BlockBg>
);
}

Expand Down
11 changes: 3 additions & 8 deletions site-new/src/components/HeroCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,11 @@ function HeroCard({
return (
<div className="max-w-ful mx-auto flex w-full flex-col items-start justify-center border-[1px] border-solid bg-tbd-gray-shade-2 p-6 shadow-[15px_15px_0px_-5px_rgba(0,0,0,0.3)] shadow-tbd-gray-tint-2 transition-all duration-300 ease-in-out hover:translate-y-1 hover:shadow-[5px_5px_0px_-5px_rgba(0,0,0,0.3)] md:max-w-2xl md:p-9">
<InfoIcon className="h-6 w-6" fill={"#ffec19"} />
<Heading
as="h2"
className="mb-6 mt-4 text-3xl text-tbd-yellow md:text-4xl"
>
<Heading as="h2" className="mb-6 mt-4 text-tbd-yellow">
{title}
</Heading>
<p className="mb-6 text-base text-white md:text-lg">{content}</p>
<div>
{url && buttonText && <Button text={buttonText} url={url} />}
</div>
<p className="mb-6 text-white">{content}</p>
<div>{url && buttonText && <Button text={buttonText} url={url} />}</div>
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const ReadingProgress = () => {
}, [rocketRef]);

return (
<div className="fixed top-[--ifm-navbar-height] z-20 h-[72px] w-full bg-black">
<div className="fixed z-20 h-[72px] w-full bg-black">
<div className="relative w-full">
<span
ref={rocketRef}
Expand Down
40 changes: 5 additions & 35 deletions site-new/src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,6 @@ body {
--ifm-toc-padding-horizontal: 24px;
}

h2 {
font-family: "SpaceGrotesk", sans-serif;
}

.hero-primary {
--ifm-hero-background-color: var(--ifm-color-primary);
}
Expand Down Expand Up @@ -127,8 +123,6 @@ h2 {
}

.container {
margin-left: 0;
margin-right: 0;
margin-bottom: var(--twist-core-spacing-15);
}

Expand Down Expand Up @@ -321,22 +315,6 @@ h2 {
padding-left: "60px";
}

/* Headlines */

h1,
h2,
h3,
h4 {
font-family: "SpaceGrotesk", sans-serif;
font-weight: 500;
color: var(--ifm-color-primary);
}

h1 {
font-size: 62px;
line-height: 68.2px;
}

nav {
overflow-x: clip;
}
Expand Down Expand Up @@ -376,7 +354,11 @@ nav {
font-family: "SpaceGrotesk";
font-weight: 500;
font-size: 18px;
line-height: 18px;
padding-left: var(--twist-core-spacing-30);
padding-right: var(--twist-core-spacing-30);
padding-top: var(--twist-core-spacing-8);
display: flex;
height: 86px;
}

.navbar a {
Expand Down Expand Up @@ -670,18 +652,6 @@ a:has(.footer__logo) {
}

@layer base {
h2 {
@apply text-1.2lg lg:text-4.5xl;
}

h3 {
@apply font-spaceGrotesk text-[1.375rem] leading-[1.65rem] lg:text-[2.125rem] lg:leading-[2.55rem];
}

h4 {
@apply text-lg leading-[1.463rem] lg:text-2.5xl;
}

p {
@apply p;
}
Expand Down
Loading

0 comments on commit b83cca0

Please sign in to comment.