Skip to content

Commit e45cd18

Browse files
rudietuesdaysrudietuesdays
committed
updating responsive background for different screen sizes
1 parent 92ea15d commit e45cd18

10 files changed

Lines changed: 112 additions & 86 deletions

File tree

‎app/page.js‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,51 @@ export default function Home() {
2727
<ClientOnly>
2828
<Box>
2929
<Box
30-
bgAttachment="fixed"
31-
bgImage={mode?.colorMode === "dark" ? "url('/assets/images/bg.png')" : ""}
32-
backgroundPosition="center"
33-
bgRepeat="no-repeat"
34-
bgSize="cover"
30+
_after={{
31+
backgroundImage: [mode?.colorMode === "dark" ? "url('/assets/images/orb-dark-2.png')" : "url('/assets/images/orb-light-2.png')", mode?.colorMode === "dark" ? "url('/assets/images/orb-dark-2.png')" : "url('/assets/images/orb-light-2.png')", mode?.colorMode === "dark" ? "url('/assets/images/orb-dark-1.png')" : "url('/assets/images/orb-light-1.png')"],
32+
backgroundPosition: ["top 30% right 10%", "top 26% right 10%", "top 40% right 0", "top 30% right 0", "top 40% right 0"],
33+
backgroundRepeat: "no-repeat",
34+
backgroundSize: ["20%", "20%", "50%", "50%"],
35+
bottom: 0,
36+
content: "''",
37+
height: "100%",
38+
left: 0,
39+
position: "absolute",
40+
right: 0,
41+
top: 0,
42+
width: "100%",
43+
zIndex: "-1",
44+
}}
45+
_before={{
46+
backgroundImage: mode?.colorMode === "dark" ? "url('/assets/images/bg-dark.png')" : "url('/assets/images/bg-light.png')",
47+
backgroundPosition: "top center",
48+
backgroundRepeat: "no-repeat",
49+
backgroundSize: ["300%", "200%", "160%", "120%", "100%"],
50+
bottom: 0,
51+
content: "''",
52+
height: "100%",
53+
left: 0,
54+
opacity: 0.6,
55+
position: "absolute",
56+
right: 0,
57+
top: 0,
58+
width: "100%",
59+
zIndex: "-2",
60+
}}
61+
position="relative"
62+
zIndex={1}
3563
>
3664
<Header />
3765
<Container
3866
marginTop={[12, 12, 140]}
39-
paddingBottom={[12, 12, 200]}
67+
paddingBottom={12}
4068
>
4169
<Hero />
70+
<Box marginTop={[30, 40, 160]}>
71+
<About />
72+
</Box>
4273
</Container>
4374
</Box>
44-
<Container marginTop={[30, 50, 18]}>
45-
<About />
46-
</Container>
4775
<Box marginTop={24}>
4876
<Footer />
4977
</Box>

‎components/sections/about.jsx‎

Lines changed: 72 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -23,82 +23,80 @@ export default function About() {
2323
const textColor = useColorModeValue("black", "white");
2424

2525
return (
26-
<Box color={textColor}>
27-
<Flex
28-
direction={["column", "column", "row"]}
29-
gap={[12, 18, 40]}
30-
>
31-
<Box maxW={360}>
32-
<Heading color={textColor}>
33-
Who we serve
34-
</Heading>
35-
<Text fontSize="2xl" marginTop={4}>
36-
We work with community organizations, activist groups and nonprofits in Washington, DC and beyond.
37-
</Text>
38-
<Text fontSize="2xl" marginTop={4}>
39-
Together we launch durable websites and tools, improve digital security practices, and support teams to run them well.
40-
</Text>
41-
</Box>
42-
<Box>
43-
<Heading color={textColor}>
44-
What we do
45-
</Heading>
46-
<List.Root listStyle="none" marginTop={4}>
47-
<List.Item>
48-
<Flex
49-
direction={["column", "column", "row"]}
50-
gap={8}
26+
<Flex
27+
color={textColor}
28+
direction={["column", "column", "row"]}
29+
gap={[12, 18, 40]}
30+
>
31+
<Box maxW={360}>
32+
<Heading color={textColor}>
33+
Who we serve
34+
</Heading>
35+
<Text fontSize="2xl" marginTop={4}>
36+
We work with community organizations, activist groups and nonprofits in Washington, DC and beyond.
37+
</Text>
38+
<Text fontSize="2xl" marginTop={4}>
39+
Together we launch durable websites and tools, improve digital security practices, and support teams to run them well.
40+
</Text>
41+
</Box>
42+
<Box>
43+
<Heading color={textColor}>
44+
What we do
45+
</Heading>
46+
<List.Root listStyle="none" marginTop={4}>
47+
<List.Item>
48+
<Flex
49+
direction={["column", "column", "column", "row"]}
50+
gap={6}
51+
>
52+
<Text
53+
className={funnel.className}
54+
fontSize="2xl"
55+
minWidth={360}
5156
>
52-
<Text
53-
className={funnel.className}
54-
fontSize="2xl"
55-
minWidth={360}
56-
>
57-
Software and websites
58-
</Text>
59-
<Text>
60-
We design and build sites and apps on open technologies. We deliver clean code, accessible interfaces, and a simple CMS so your team can publish with confidence.
61-
</Text>
62-
</Flex>
63-
</List.Item>
64-
<List.Item marginTop={8}>
65-
<Flex
66-
direction={["column", "column", "row"]}
67-
gap={8}
57+
Software and websites
58+
</Text>
59+
<Text>
60+
We design and build sites and apps on open technologies. We deliver clean code, accessible interfaces, and a simple CMS so your team can publish with confidence.
61+
</Text>
62+
</Flex>
63+
</List.Item>
64+
<List.Item marginTop={8}>
65+
<Flex
66+
direction={["column", "column", "column", "row"]}
67+
gap={6}
68+
>
69+
<Text
70+
className={funnel.className}
71+
fontSize="2xl"
72+
minWidth={360}
6873
>
69-
<Text
70-
className={funnel.className}
71-
fontSize="2xl"
72-
minWidth={360}
73-
>
74-
Digital security training
75-
</Text>
76-
<Text>
77-
We run practical, hands-on workshops for staff and volunteers. Topics include threat modeling, secure communication, account hygiene, device hardening, and safer collaboration.
78-
</Text>
79-
</Flex>
80-
</List.Item>
81-
<List.Item marginTop={8}>
82-
<Flex
83-
direction={["column", "column", "row"]}
84-
gap={6}
74+
Digital security training
75+
</Text>
76+
<Text>
77+
We run practical, hands-on workshops for staff and volunteers. Topics include threat modeling, secure communication, account hygiene, device hardening, and safer collaboration.
78+
</Text>
79+
</Flex>
80+
</List.Item>
81+
<List.Item marginTop={8}>
82+
<Flex
83+
direction={["column", "column", "column", "row"]}
84+
gap={6}
85+
>
86+
<Text
87+
className={funnel.className}
88+
fontSize="2xl"
89+
minWidth={360}
8590
>
86-
<Text
87-
className={funnel.className}
88-
fontSize="2xl"
89-
minWidth={360}
90-
>
91-
Advisory and support
92-
</Text>
93-
<Text>
94-
We help scope the right path. Discovery, roadmaps, usability reviews, code checks, and ongoing maintenance to keep things stable.
95-
</Text>
96-
</Flex>
97-
</List.Item>
98-
</List.Root>
99-
</Box>
100-
</Flex>
101-
102-
</Box>
91+
Advisory and support
92+
</Text>
93+
<Text>
94+
We help scope the right path. Discovery, roadmaps, usability reviews, code checks, and ongoing maintenance to keep things stable.
95+
</Text>
96+
</Flex>
97+
</List.Item>
98+
</List.Root>
99+
</Box>
100+
</Flex>
103101
)
104102
}

‎components/sections/header.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ export default function Header() {
2222

2323
return (
2424
<ClientOnly>
25-
<Container paddingTop={12}>
25+
<Container paddingTop={[6, 12, 12]}>
2626
<Flex
27-
alignItems={["flex-end", "flex-end", "center"]}
27+
alignItems={["flex-start", "flex-start", "center"]}
2828
direction={["column-reverse", "column-reverse", "row"]}
2929
gap={[8, 6]}
3030
justify={"space-between"}>

‎components/sections/hero.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function Hero() {
3434
className={funnel.className}
3535
color={textColor}
3636
maxW={620}
37-
textStyle="7xl"
37+
textStyle={["6xl", "7xl"]}
3838
textTransform="uppercase"
3939
>
4040
Worker-owned tech for social justice

public/assets/images/bg.png renamed to public/assets/images/bg-dark.png

File renamed without changes.

‎public/assets/images/bg-light.png‎

272 KB
Loading

‎public/assets/images/orb-dark-1.png‎

143 KB
Loading

‎public/assets/images/orb-dark-2.png‎

151 KB
Loading

‎public/assets/images/orb-light-1.png‎

146 KB
Loading

‎public/assets/images/orb-light-2.png‎

172 KB
Loading

0 commit comments

Comments
 (0)