Skip to content

Commit ba266fe

Browse files
thisisobatethisisobate
authored
Feat: New landing page (#6)
* Feat: New landing page Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: fix theme to be readable Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: revert title to be capitalized Signed-off-by: thisisobate <obasiuche62@gmail.com> --------- Signed-off-by: thisisobate <obasiuche62@gmail.com>
1 parent 90ae14e commit ba266fe

8 files changed

Lines changed: 455 additions & 12 deletions

File tree

‎assets/icons/logo.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎assets/images/cncf-sandbox-horizontal-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/scss/_styles_project.scss‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
.td-footer {
2+
background-color: #0d0e11;
3+
border-top: 2px solid #2c2e34;
4+
}
5+
6+
.td-navbar {
7+
background: #0d0e11;
8+
border-bottom: 2px solid #2c2e34;
9+
}
10+
11+
.td-sidebar-nav .td-sidebar-link__page {
12+
color: #d6d4d4;
13+
}
14+
15+
.td-sidebar-nav__section-title a {
16+
color: #ffffff;
17+
}
18+
19+
.td-toc #TableOfContents a {
20+
color: #8e9ead;
21+
22+
&:hover {
23+
color: #2380f2;
24+
}
25+
}
26+
27+
.td-content pre {
28+
background-color: #1f2327;
29+
}
30+
31+
.alert {
32+
background: #000000;
33+
}
34+
35+
.list-style-none {
36+
list-style: none;
37+
}
38+
39+
.padding-left-right-20 {
40+
padding: 0 20px;
41+
}
42+
43+
h4 > i {
44+
padding-right: 10px;
45+
}
46+
47+
p i {
48+
padding-left: 6px;
49+
}
50+
51+
a {
52+
text-decoration: none;
53+
}
54+
55+
.button {
56+
border: none;
57+
width: 120px;
58+
height: 50px;
59+
border-radius: 7px;
60+
font-weight: 500;
61+
font-size: 0.95rem;
62+
}
63+
64+
.button:hover {
65+
cursor: pointer;
66+
}
67+
68+
// .background-gradient-color {
69+
// background: linear-gradient(
70+
// 270deg,
71+
// rgba(35, 128, 242, 0.5) 15.55%,
72+
// rgba(35, 128, 242, 0) 99.31%
73+
// ),
74+
// rgba(49, 227, 222, 0.7);
75+
// }
76+
77+
.main-content {
78+
max-width: Max(70%, 1080px);
79+
padding-bottom: 50px;
80+
}
81+
82+
.flex {
83+
display: flex;
84+
}
85+
86+
.flex-column {
87+
flex-direction: column;
88+
}
89+
90+
.align-items-center {
91+
align-items: center;
92+
}
93+
94+
.vertical-align-center {
95+
margin: 0 auto;
96+
}
97+
98+
.justify-content-space-around {
99+
justify-content: space-around;
100+
}
101+
102+
.justify-content-space-between {
103+
justify-content: space-between;
104+
}
105+
106+
.justify-content-center {
107+
justify-content: center;
108+
}
109+
110+
.gap-sm {
111+
gap: 20px;
112+
}
113+
114+
.text-center {
115+
text-align: center;
116+
}
117+
118+
.text-bold {
119+
font-size: 1.1rem;
120+
font-weight: 600;
121+
}
122+
123+
.text-underline {
124+
text-decoration: underline;
125+
text-decoration-thickness: 2px;
126+
text-underline-offset: 10px;
127+
}
128+
129+
.text-white {
130+
color: white;
131+
}
132+
133+
.text-black {
134+
color: black;
135+
}
136+
137+
.padding-bottom-20 {
138+
padding-bottom: 20px;
139+
}
140+
141+
.padding-bottom-10 {
142+
padding-bottom: 10px;
143+
}
144+
145+
.btn-container {
146+
display: flex;
147+
gap: 15px;
148+
margin-top: 20px;
149+
}
150+
151+
.btn-primary {
152+
background-color: #2380f2;
153+
color: white;
154+
}
155+
156+
.btn-secondary {
157+
background-color: #f1f1f1;
158+
color: #476581;
159+
}
160+
161+
.breaking-word-all {
162+
word-break: break-all;
163+
}
164+
165+
.font-weight-300 {
166+
font-weight: 300;
167+
}
168+
169+
.hero-container {
170+
padding: 100px 3% 100px;
171+
}
172+
173+
.hero-text {
174+
font-size: 3rem;
175+
color: #f8f8f8;
176+
}
177+
178+
.hero-tags {
179+
padding: 7px 20px;
180+
color: #9ca3af;
181+
background-color: #14151a;
182+
border-radius: 0.5rem;
183+
cursor: pointer;
184+
// overflow-wrap: break-word;
185+
// word-wrap: break-word;
186+
display: inline-block;
187+
margin-bottom: 10px;
188+
}
189+
190+
.hero-text-secondary {
191+
width: 65%;
192+
margin-top: 10px;
193+
color: white;
194+
font-weight: 300;
195+
font-size: larger;
196+
}
197+
198+
.feature-section {
199+
padding: 100px 3% 25px;
200+
font-size: larger;
201+
}
202+
203+
.feature-section > .main-content {
204+
margin: 0 auto;
205+
}
206+
207+
.feature-item {
208+
width: 45%;
209+
}
210+
211+
.feature-item > p {
212+
font-weight: 300;
213+
}
214+
215+
.feature-item-sm > h4 {
216+
display: inline-block;
217+
height: 1rem;
218+
}
219+
220+
.feature-item-sm > p {
221+
font-weight: 100;
222+
}
223+
224+
.feature-item-sm > span {
225+
margin: auto 1em 1em 0;
226+
text-align: right;
227+
}
228+
229+
.feature-item-sm {
230+
width: 18em;
231+
height: 15em;
232+
background-color: #ffffff;
233+
padding: 0 0.5em 0 0.5em;
234+
display: flex;
235+
flex-direction: column;
236+
border-radius: 0 1.25em 0 1.25em;
237+
}
238+
239+
.use-case-section {
240+
background-color: ghostwhite;
241+
}
242+
243+
.banner {
244+
padding: 120px 0px 70px;
245+
font-weight: 500;
246+
font-size: 1.5rem;
247+
margin: 0 auto;
248+
}
249+
250+
.banner-link {
251+
text-decoration: underline;
252+
color: #2380f2;
253+
}
254+
255+
// .footer {
256+
// padding: 50px 20%;
257+
// color: white;
258+
// background-color: black;
259+
// font-weight: 300;
260+
// }
261+
262+
// .footer-info-text {
263+
// font-size: 0.85rem;
264+
// padding-top: 10px;
265+
// }
266+
267+
// .footer-link-text {
268+
// color: white;
269+
// text-decoration: underline;
270+
// }
271+
272+
.img-container {
273+
width: 300px;
274+
height: 100px;
275+
object-fit: cover;
276+
margin: 0 auto;
277+
}
278+
279+
.media-section {
280+
display: flex;
281+
}
282+
283+
.text-wrapping {
284+
overflow-wrap: break-word;
285+
word-wrap: break-word;
286+
-ms-word-break: break-all;
287+
word-break: break-word;
288+
-ms-hyphens: auto;
289+
-moz-hyphens: auto;
290+
-webkit-hyphens: auto;
291+
hyphens: auto;
292+
}
293+
294+
@media only screen and (max-width: 786px) {
295+
.media-section {
296+
display: none;
297+
}
298+
299+
.hero-container {
300+
width: 90%;
301+
}
302+
303+
.hero-text-secondary {
304+
width: 70%;
305+
}
306+
307+
.feature-container {
308+
display: grid;
309+
grid-template-columns: repeat(1, 1fr);
310+
padding-bottom: 1em;
311+
}
312+
313+
.feature-section-mobile {
314+
padding: 100px 3% 0px;
315+
}
316+
317+
.feature-section {
318+
padding: 100px 3% 0px;
319+
font-size: initial;
320+
}
321+
322+
.feature-item {
323+
width: 80%;
324+
margin: 0 auto;
325+
}
326+
327+
.feature-item-sm {
328+
margin: 0 auto;
329+
width: 80%;
330+
height: auto;
331+
}
332+
}
333+
334+
// @media (min-width: 768px) {
335+
// .td-navbar-cover {
336+
// background: #0d0e11 !important;
337+
// }
338+
// }

‎assets/scss/_variables_project.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ Add styles or override variables from the theme here.
44
55
*/
66

7+
// Theme colors
8+
$body-bg: #0d0e11;
9+
$body-color: #ffffff

‎content/en/about/index.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: About Goldydocs
33
linkTitle: About
4-
menu: {main: {weight: 10}}
54
---
65

76
{{% blocks/cover title="About Goldydocs" image_anchor="bottom" height="auto" %}}

0 commit comments

Comments
 (0)