Skip to content

Commit 69f4841

Browse files
austincondiffaustincondiff
authored
Merge pull request #15 from austincondiff/dev
Temporary Website
2 parents 34fd754 + c196bc7 commit 69f4841

File tree

99 files changed

+5548
-170
lines changed

Some content is hidden

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

99 files changed

+5548
-170
lines changed

‎assets/discord-icon.svg

Lines changed: 7 additions & 0 deletions
Loading

‎assets/github-icon.svg

Lines changed: 13 additions & 0 deletions
Loading

‎assets/twitter-icon.svg

Lines changed: 7 additions & 0 deletions
Loading

‎components/common/Button.jsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import styled from "styled-components";
2+
3+
const Button = styled.button`
4+
cursor: ${({ disabled }) => disabled ? `default` : `pointer`};
5+
display: inline-block;
6+
text-align: center;
7+
white-space: nowrap;
8+
font-size: 17px;
9+
line-height: 1.17648;
10+
font-weight: 400;
11+
letter-spacing: -.022em;
12+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
13+
min-width: 28px;
14+
padding-left: 16px;
15+
padding-right: 16px;
16+
padding-top: 8px;
17+
padding-bottom: 8px;
18+
border-radius: 18px;
19+
background: var(${({ disabled }) => disabled ? `--glyph-gray-tertiary` : `--fill-blue`});
20+
color: #fff;
21+
border: 0;
22+
outline: 0;
23+
24+
${({ compact }) => compact ? `
25+
font-size: 12px;
26+
line-height: 1.33337;
27+
font-weight: 400;
28+
letter-spacing: -.01em;
29+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
30+
min-width: 23px;
31+
padding-left: 11px;
32+
padding-right: 11px;
33+
padding-top: 4px;
34+
padding-bottom: 4px;
35+
border-radius: 12px;
36+
` : ``}
37+
`;
38+
39+
export default Button;

‎components/common/ColorSchemeToggle.jsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useState, useEffect } from "react";
2+
import styled from "styled-components"
3+
import { useSite } from "@/components/common/Site";
4+
5+
const ColorSchemeToggleWrap = styled.div`
6+
--toggle-border-radius-outer: 12px;
7+
--toggle-border-radius-inner: 10px;
8+
--toggle-color-fill: var(--color-button-background-active);
9+
--toggle-color-text: var(--color-fill-blue);
10+
11+
font-size: 12px;
12+
line-height: 1.33337;
13+
font-weight: 400;
14+
letter-spacing: -.01em;
15+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
16+
border: 1px solid var(--toggle-color-fill);
17+
border-radius: var(--toggle-border-radius-outer, 2px);
18+
display: inline-flex;
19+
padding: 1px;
20+
input[type="radio"] {
21+
position: absolute;
22+
clip: rect(1px, 1px, 1px, 1px);
23+
clip-path: inset(0px 0px 99.9% 99.9%);
24+
overflow: hidden;
25+
height: 1px;
26+
width: 1px;
27+
padding: 0;
28+
border: 0;
29+
appearance: none;
30+
}
31+
`;
32+
const ToggleOptionText = styled.div`
33+
box-sizing: border-box;
34+
display: inline-block;
35+
padding: 1px 6px;
36+
min-width: 42px;
37+
border: 1px solid transparent;
38+
border-radius: var(--toggle-border-radius-inner, 2px);
39+
text-align: center;
40+
color: var(--toggle-color-text);
41+
42+
input[type="radio"]:checked + & {
43+
--toggle-color-text: var(--color-button-text);
44+
background: var(--toggle-color-fill);
45+
border-color: var(--toggle-color-fill);
46+
}
47+
`;
48+
49+
function ColorSchemeToggle() {
50+
const [toggleValue, setToggleValue] = useState('auto');
51+
const { setColorScheme } = useSite();
52+
53+
useEffect(() => {
54+
const theme = window.localStorage.getItem('colorScheme');
55+
56+
if (theme) setToggleValue(theme)
57+
}, []);
58+
59+
useEffect(() => {
60+
setColorScheme(toggleValue)
61+
}, [setColorScheme, toggleValue])
62+
63+
const handleChange = (e) => setToggleValue(e.target.value)
64+
65+
return (
66+
<ColorSchemeToggleWrap role="radiogroup" tabIndex={0} aria-label="Select a color scheme preference.">
67+
<label data-color-scheme-option="light">
68+
<input type="radio" name="colorToggle" value="light" autoComplete="off" checked={toggleValue === 'light'} onChange={handleChange} />
69+
<ToggleOptionText>Light</ToggleOptionText>
70+
</label>
71+
<label data-color-scheme-option="dark">
72+
<input type="radio" name="colorToggle" value="dark" autoComplete="off" checked={toggleValue === 'dark'} onChange={handleChange} />
73+
<ToggleOptionText>Dark</ToggleOptionText>
74+
</label>
75+
<label data-color-scheme-option="auto">
76+
<input type="radio" name="colorToggle" value="auto" autoComplete="off" checked={toggleValue === 'auto'} onChange={handleChange} />
77+
<ToggleOptionText>Auto</ToggleOptionText>
78+
</label>
79+
</ColorSchemeToggleWrap>
80+
)
81+
}
82+
83+
export default ColorSchemeToggle;

‎components/common/Footer.jsx

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import Link from 'next/link';
2+
import React from 'react';
3+
import styled from 'styled-components'
4+
import ColorSchemeToggle from './ColorSchemeToggle';
5+
import { mediaQueries } from '@/styles/breakpoints';
6+
import SocialSection from './SocialSection';
7+
import links from '@/data/links';
8+
9+
const FooterWrap = styled.footer`
10+
font-size: 12px;
11+
line-height: 1.33337;
12+
font-weight: 400;
13+
letter-spacing: -.01em;
14+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
15+
overflow: hidden;
16+
position: relative;
17+
z-index: 1;
18+
background-color: var(--background-tertiary-color);
19+
color: var(--label-tertiary-color);
20+
box-sizing: content-box;
21+
a {
22+
color: var(--glyph-blue);
23+
:hover {
24+
text-decoration: underline;
25+
}
26+
}
27+
`
28+
29+
const FooterContent = styled.div`
30+
margin: 0 auto;
31+
max-width: 980px;
32+
padding: 0 22px;
33+
padding-left: calc(max(22px, env(safe-area-inset-left)));
34+
padding-right: calc(max(22px, env(safe-area-inset-right)));
35+
`
36+
37+
const FooterMini = styled.section`
38+
color: var(--glyph-gray-tertiary);
39+
padding-top: 34px;
40+
padding-bottom: calc(max(21px, env(safe-area-inset-bottom)));
41+
color: #86868b;
42+
`
43+
const MiniFooterTop = styled.div`
44+
margin-bottom: 7px;
45+
padding-bottom: 8px;
46+
border-bottom: 1px solid #d2d2d7;
47+
display: flex;
48+
align-items: flex-end;
49+
justify-content: space-between;
50+
border-color: var(--separator-color);
51+
@media ${mediaQueries.sm} {
52+
align-items: flex-start;
53+
flex-direction: column;
54+
gap: 5px;
55+
}
56+
}
57+
`
58+
const LegalCopyright = styled.div`
59+
`
60+
const LegalLinks = styled.div`
61+
display: flex;
62+
flex-wrap: wrap;
63+
a {
64+
border-right: 1px solid #d2d2d7;
65+
margin-right: 7px;
66+
padding-right: 10px;
67+
display: inline-block;
68+
margin-top: 5px;
69+
white-space: nowrap;
70+
color: var(--glyph-gray-secondary-alt);
71+
border-color: var(--fill-gray-tertiary);
72+
:last-child {
73+
border: 0;
74+
margin-right: 0;
75+
padding-right: 0;
76+
}
77+
}
78+
`
79+
const LegalLink = styled(Link)``
80+
81+
const MiniFooterBottom = styled.div`
82+
display: flex;
83+
justify-content: space-between;
84+
a {
85+
color: var(--glyph-gray-secondary-alt);
86+
:hover {
87+
text-decoration: underline;
88+
}
89+
}
90+
@media ${mediaQueries.sm} {
91+
flex-direction: column;
92+
}
93+
`
94+
95+
function Footer() {
96+
let currentYear = new Date().getFullYear();
97+
98+
return (
99+
<FooterWrap
100+
id="footer"
101+
className="footer"
102+
role="contentinfo"
103+
aria-labelledby="footer-label"
104+
>
105+
<FooterContent>
106+
<SocialSection />
107+
<FooterMini>
108+
<MiniFooterTop>
109+
<div>To view the latest CodeEdit developments, visit <a href={links.githubProject}>our roadmap</a>.</div>
110+
<ColorSchemeToggle />
111+
</MiniFooterTop>
112+
<MiniFooterBottom>
113+
<LegalCopyright>
114+
Copyright &copy; {currentYear}{' '}
115+
<a href="https://codeedit.app">CodeEdit.</a> All rights reserved.
116+
</LegalCopyright>
117+
<LegalLinks>
118+
{/* <LegalLink href="/legal/tos">
119+
Terms of Use
120+
</LegalLink>
121+
<LegalLink href="/legal/privacy">
122+
Privacy Policy
123+
</LegalLink> */}
124+
<LegalLink href={links.license}>
125+
Lincense
126+
</LegalLink>
127+
</LegalLinks>
128+
</MiniFooterBottom>
129+
</FooterMini>
130+
</FooterContent>
131+
</FooterWrap>
132+
);
133+
}
134+
135+
export default Footer;

0 commit comments

Comments
 (0)