Skip to content

Commit 63a0db3

Browse files
mallory-scottonmallory-scotton
committed
add: adding all new style on the doc website
1 parent 3cf57f0 commit 63a0db3

13 files changed

Lines changed: 656 additions & 28 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -104,22 +104,54 @@ const config: Config = {
104104
},
105105
footer: {
106106
style: 'dark',
107+
logo: {
108+
alt: 'Graphical Playground Logo',
109+
src: 'img/logo-full.svg',
110+
width: 160,
111+
height: 50
112+
},
107113
links: [
108114
{
109-
title: 'Docs',
115+
title: 'Tools',
110116
items: [
111117
{
112-
label: 'Tutorial',
118+
label: 'GP Engine',
119+
href: 'https://graphical-playground.com/tools/engine'
120+
},
121+
{
122+
label: 'Documentation',
113123
to: '/docs/intro'
114124
}
115125
]
116126
},
117127
{
118-
title: 'Community',
119-
items: []
128+
title: 'Online Services',
129+
items: [
130+
{
131+
label: 'Platform Services',
132+
href: 'https://graphical-playground.com/services'
133+
},
134+
{
135+
label: 'Support',
136+
href: 'https://graphical-playground.com/support'
137+
}
138+
]
139+
},
140+
{
141+
title: 'Company',
142+
items: [
143+
{
144+
label: 'About Us',
145+
href: 'https://graphical-playground.com/about'
146+
},
147+
{
148+
label: 'Careers',
149+
href: 'https://graphical-playground.com/careers'
150+
}
151+
]
120152
},
121153
{
122-
title: 'More',
154+
title: 'Resources',
123155
items: [
124156
{
125157
label: 'Blog',
@@ -128,11 +160,15 @@ const config: Config = {
128160
{
129161
label: 'GitHub',
130162
href: 'https://github.com/GraphicalPlayground'
163+
},
164+
{
165+
label: 'Learning',
166+
href: 'https://graphical-playground.com/learning'
131167
}
132168
]
133169
}
134170
],
135-
copyright: `Copyright © ${new Date().getFullYear()} Graphical Playground, Inc.`
171+
copyright: `© ${new Date().getFullYear()}, Graphical Playground, Inc. All rights reserved.`
136172
},
137173
prism: {
138174
theme: unrealTheme,

‎src/css/custom.css‎

Lines changed: 103 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -57,32 +57,33 @@
5757

5858
/* You can override the default Infima variables here. */
5959
:root {
60-
--ifm-color-primary: #2e8555;
61-
--ifm-color-primary-dark: #29784c;
62-
--ifm-color-primary-darker: #277148;
63-
--ifm-color-primary-darkest: #205d3b;
64-
--ifm-color-primary-light: #33925d;
65-
--ifm-color-primary-lighter: #359962;
66-
--ifm-color-primary-lightest: #3cad6e;
60+
--ifm-color-primary: #26bbff;
61+
--ifm-color-primary-dark: #00ace6;
62+
--ifm-color-primary-darker: #00a2da;
63+
--ifm-color-primary-darkest: #0086b3;
64+
--ifm-color-primary-light: #4dc7ff;
65+
--ifm-color-primary-lighter: #60cdff;
66+
--ifm-color-primary-lightest: #99dfff;
67+
--ifm-background-color: #101014;
68+
--ifm-font-color-base: #ffffff;
69+
--ifm-navbar-background-color: #101014;
70+
--ifm-footer-background-color: #18181C;
71+
--ifm-footer-color: #ffffff;
72+
--ifm-footer-link-color: #26bbff;
73+
--ifm-footer-link-hover-color: #69d0ff;
74+
--ifm-footer-title-color: #ffffff;
75+
--ifm-color-success: #45c761;
76+
--ifm-color-info: #26bbff;
77+
--ifm-color-warning: #ffc229;
78+
--ifm-color-danger: #ff3f56;
79+
--ifm-hr-background-color: rgba(255, 255, 255, 0.15);
6780
--ifm-code-font-size: 0.875em;
68-
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.08);
81+
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.12);
6982
--ifm-font-family-monospace: 'Recursive Mono', monospace;
83+
--ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7084
--ifm-pre-padding: 1rem;
7185
--ifm-code-border-radius: 16px;
72-
--ifm-background-color: #101014;
73-
}
74-
75-
/* For readability concerns, you should choose a lighter palette in dark mode. */
76-
[data-theme='dark'] {
77-
--ifm-color-primary: #25c2a0;
78-
--ifm-color-primary-dark: #21af90;
79-
--ifm-color-primary-darker: #1fa588;
80-
--ifm-color-primary-darkest: #1a8870;
81-
--ifm-color-primary-light: #29d5b0;
82-
--ifm-color-primary-lighter: #32d8b4;
83-
--ifm-color-primary-lightest: #4fddbf;
84-
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.12);
85-
--ifm-background-color: #101014;
86+
--ifm-global-border-radius: 6px;
8687
}
8788

8889
/* Page background */
@@ -100,6 +101,11 @@ body {
100101
-moz-osx-font-smoothing: grayscale;
101102
}
102103

104+
.theme-layout-main {
105+
background: radial-gradient(ellipse at top center, rgba(0, 255, 221, .3) 0%, rgba(16, 16, 20, .5) 70%) center top/100% 40vh no-repeat;
106+
min-height: 100%;
107+
}
108+
103109
/* Code block specific styles */
104110
pre {
105111
display: block;
@@ -165,3 +171,78 @@ mark, :not(.prism-code) > code:not(.prism-code), .mark {
165171
padding: .125rem .4375rem;
166172
color: #fff;
167173
}
174+
175+
/* Footer Specific Styles */
176+
.footer {
177+
--ifm-footer-background-color: #0E0E10;
178+
padding: 0;
179+
}
180+
181+
.footer__title {
182+
font-size: 0.875rem;
183+
font-weight: 700;
184+
color: #ffffff;
185+
margin-bottom: 1.25rem;
186+
text-transform: none;
187+
letter-spacing: 0;
188+
}
189+
190+
.footer__item {
191+
margin-bottom: 0.75rem;
192+
}
193+
194+
.footer__link-item {
195+
font-size: 0.875rem;
196+
color: rgba(255, 255, 255, 0.6);
197+
text-decoration: none;
198+
transition: color 0.15s ease;
199+
line-height: 1.5;
200+
}
201+
202+
.footer__link-item:hover {
203+
color: rgba(255, 255, 255, 0.9);
204+
text-decoration: none;
205+
}
206+
207+
.footer__col {
208+
padding: 0;
209+
margin: 0;
210+
}
211+
212+
.footer__links {
213+
margin-bottom: 0;
214+
}
215+
216+
.footer__copyright {
217+
font-size: 0.75rem;
218+
color: rgba(255, 255, 255, 0.5);
219+
margin: 0;
220+
line-height: 1.6;
221+
}
222+
223+
.footer__items {
224+
margin: 0;
225+
padding: 0;
226+
}
227+
228+
/* Responsive footer adjustments */
229+
@media screen and (max-width: 996px) {
230+
.footer__title {
231+
font-size: 0.8125rem;
232+
}
233+
234+
.footer__link-item {
235+
font-size: 0.8125rem;
236+
}
237+
238+
.footer__links {
239+
grid-template-columns: repeat(2, 1fr) !important;
240+
gap: 2rem !important;
241+
}
242+
}
243+
244+
@media screen and (max-width: 576px) {
245+
.footer__links {
246+
grid-template-columns: 1fr !important;
247+
}
248+
}

‎src/theme/Footer/Copyright/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { type ReactNode } from 'react';
2+
import type { Props } from '@theme/Footer/Copyright';
3+
4+
export default function FooterCopyright({ copyright }: Props): ReactNode {
5+
return (
6+
<div
7+
className='footer__copyright'
8+
// Developer provided the HTML, so assume it's safe.
9+
// eslint-disable-next-line react/no-danger
10+
dangerouslySetInnerHTML={{ __html: copyright }}
11+
/>
12+
);
13+
}

‎src/theme/Footer/Layout/index.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, { type ReactNode } from 'react';
2+
import clsx from 'clsx';
3+
import { ThemeClassNames } from '@docusaurus/theme-common';
4+
import type { Props } from '@theme/Footer/Layout';
5+
import styles from './styles.module.css';
6+
7+
export default function FooterLayout({ style, links, logo, copyright }: Props): ReactNode {
8+
const scrollToTop = () => {
9+
window.scrollTo({ top: 0, behavior: 'smooth' });
10+
};
11+
12+
const socialIcons = [
13+
{
14+
name: 'X',
15+
icon: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'
16+
},
17+
{
18+
name: 'Facebook',
19+
icon: 'M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 0 1 1-1h3v-4h-3a5 5 0 0 0-5 5v2.01h-2l-.396 3.98h2.396v8.01Z'
20+
},
21+
{
22+
name: 'Twitch',
23+
icon: 'M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6.857 0L2 4.857v15.429h5.143V26l4.857-4.857h3.429L22 14.571V0zm13.572 13.714l-3.429 3.429h-3.429l-3 3v-3H6.857V1.714h13.572z'
24+
},
25+
{
26+
name: 'Instagram',
27+
icon: 'M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3'
28+
},
29+
{
30+
name: 'YouTube',
31+
icon: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z'
32+
},
33+
{
34+
name: 'RSS',
35+
icon: 'M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27zm0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93z'
36+
}
37+
];
38+
39+
return (
40+
<footer
41+
className={clsx(ThemeClassNames.layout.footer.container, styles.footerContainer, 'footer', {
42+
'footer--dark': style === 'dark'
43+
})}
44+
>
45+
<div className='container container-fluid'>
46+
{/* Top Section - Logo and Social Icons */}
47+
<section className={styles.topSection}>
48+
{logo && <div className={styles.logoWrapper}>{logo}</div>}
49+
<div className={styles.socialIconsWrapper}>
50+
{socialIcons.map((social) => (
51+
<a key={social.name} href='#' className={styles.socialIcon} aria-label={social.name} title={social.name}>
52+
<svg width='24' height='24' viewBox='0 0 24 24' fill='currentColor'>
53+
<path d={social.icon} />
54+
</svg>
55+
</a>
56+
))}
57+
</div>
58+
</section>
59+
60+
{/* Middle Section - Footer Links */}
61+
{links && (
62+
<section className={styles.linksSection}>
63+
<hr className={styles.separator} />
64+
<div className={styles.linksWrapper}>{links}</div>
65+
<hr className={styles.separator} />
66+
</section>
67+
)}
68+
69+
{/* Bottom Section - Copyright and Back to Top */}
70+
<section className={styles.bottomSection}>
71+
<div className={styles.bottomLeft}>
72+
{copyright && <div className={styles.copyrightWrapper}>{copyright}</div>}
73+
<ul className={styles.legalLinks}>
74+
<li>
75+
<a href='/terms'>Terms of Service</a>
76+
</li>
77+
<li>
78+
<a href='/privacy'>Privacy Policy</a>
79+
</li>
80+
<li>
81+
<a href='/security'>Safety & Security</a>
82+
</li>
83+
<li>
84+
<a href='#'>Cookies Settings</a>
85+
</li>
86+
</ul>
87+
</div>
88+
<button className={styles.backToTop} onClick={scrollToTop} aria-label='Back to top'>
89+
<span className={styles.backToTopText}>Back to top</span>
90+
<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
91+
<path d='M12 2.25c5.385 0 9.75 4.365 9.75 9.75s-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12 6.615 2.25 12 2.25m0 1.5a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5m4.03 7.22a.75.75 0 1 1-1.06 1.06l-2.22-2.22V16a.75.75 0 0 1-1.5 0V9.81l-2.22 2.22a.75.75 0 1 1-1.06-1.06L12 6.94z'></path>
92+
</svg>
93+
</button>
94+
</section>
95+
</div>
96+
</footer>
97+
);
98+
}

0 commit comments

Comments
 (0)