Skip to content

Commit 133f5fa

Browse files
Simekkelset
Simek
and
kelset
authored
Showcase page refresh (#3235)
Co-authored-by: Lorenzo Sciandra <[email protected]>
1 parent 47d6a70 commit 133f5fa

Some content is hidden

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

41 files changed

+786
-473
lines changed

‎website/showcase.json

Lines changed: 281 additions & 362 deletions
Large diffs are not rendered by default.

‎website/src/css/index.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,10 @@
6363
.item {
6464
list-style: none;
6565

66-
a img {
67-
border-radius: 20%;
66+
img {
67+
border-radius: 16px;
6868
overflow: hidden;
69+
box-shadow: 0 6px 14px rgb(20 20 20 / 8%);
6970
}
7071
}
7172
}

‎website/src/css/showcase.scss

Lines changed: 217 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,216 @@
11
@import "shared";
22

3+
:root {
4+
--showcase-icon-background: rgb(0 0 0 / 1.5%);
5+
}
6+
7+
html[data-theme="dark"] {
8+
--showcase-icon-background: rgb(255 255 255 / 1.5%);
9+
}
10+
11+
.plugin-pages .main-wrapper {
12+
width: 100%;
13+
max-width: 100%;
14+
}
15+
16+
.sectionContainer {
17+
max-width: 1360px;
18+
padding: 0 20px;
19+
margin: 0 auto;
20+
position: relative;
21+
}
22+
23+
.headerContainer {
24+
h1 {
25+
margin: 16px 0 28px;
26+
color: white;
27+
28+
span {
29+
color: var(--ifm-color-primary);
30+
}
31+
}
32+
33+
p {
34+
color: var(--ifm-color-secondary-dark);
35+
font-size: 19px;
36+
}
37+
}
38+
339
.showcaseSection {
4-
max-width: 800px;
5-
margin: 64px auto;
40+
max-width: 1320px;
641
text-align: center;
7-
padding: 0 20px;
42+
margin: 8px auto 54px;
43+
padding: 20px 16px 16px;
44+
border: 1px solid var(--ifm-hr-border-color);
45+
border-radius: 12px;
46+
47+
&.showcaseCustomers {
48+
border: 0;
49+
box-shadow: none;
50+
}
51+
52+
&:first-child {
53+
margin-top: 12px;
54+
}
55+
56+
&:last-child {
57+
margin-bottom: 0;
58+
}
59+
60+
h2 {
61+
margin: 4px -20px 12px;
62+
padding: 0 40px 0;
63+
text-align: left;
64+
65+
img {
66+
margin: 16px 0 8px;
67+
height: 40px;
68+
}
69+
70+
&.withLogo {
71+
min-height: 60px;
72+
}
73+
}
74+
75+
.showcaseSectionDescription {
76+
text-align: left;
77+
color: var(--subtle);
78+
padding: 0 20px;
79+
margin-bottom: 8px;
80+
}
881

982
.showcase img {
10-
height: 100px;
83+
height: 80px;
1184
border-radius: 20px;
1285
}
1386

14-
.logos img {
15-
padding: 0;
87+
.logos {
88+
display: grid;
89+
grid-template-columns: 1fr;
90+
grid-gap: 28px;
91+
margin: 20px 20px 16px;
92+
93+
.icon {
94+
padding: 0;
95+
}
1696
}
1797

18-
.info {
98+
.showcase {
99+
border-radius: 10px;
100+
display: flex;
101+
flex-direction: column;
102+
border: 1px solid var(--ifm-hr-border-color);
103+
transition: transform 0.25s ease-in-out;
104+
overflow: hidden;
105+
position: relative;
106+
107+
h3 {
108+
margin-bottom: 0;
109+
line-height: 21px;
110+
padding: 0 6px 4px;
111+
font-size: 18px;
112+
}
113+
114+
p {
115+
margin: 8px 0 18px;
116+
padding-top: 0 !important;
117+
118+
a {
119+
@extend %link-style;
120+
}
121+
}
122+
123+
h3,
124+
p {
125+
color: var(--ifm-color-emphasis-800);
126+
}
127+
128+
&:hover .icon {
129+
transform: scale3d(1.03, 1.03, 1);
130+
}
131+
132+
.iconBox {
133+
display: flex;
134+
justify-content: center;
135+
background: linear-gradient(var(--showcase-icon-background), transparent);
136+
padding: 20px 20px 8px;
137+
width: 100%;
138+
overflow: visible;
139+
}
140+
141+
.iconBackground {
142+
filter: blur(28px);
143+
position: absolute;
144+
opacity: 0.16;
145+
transform: scale(1.38);
146+
}
147+
148+
.icon {
149+
box-shadow: 0 8px 16px rgb(20 20 20 / 7%);
150+
position: relative;
151+
z-index: 1;
152+
transition: transform 200ms ease-in-out;
153+
}
154+
155+
.showcaseContent {
156+
padding: 8px 16px 0;
157+
display: flex;
158+
flex-direction: column;
159+
justify-content: space-between;
160+
flex-grow: 1;
161+
}
162+
163+
.showcaseLinks span {
164+
color: var(--subtle);
165+
}
166+
}
167+
168+
.articleButton {
169+
color: var(--ifm-color-emphasis-600);
170+
font-weight: 500;
19171
font-size: 15px;
172+
padding: 6px 12px;
173+
margin: 0 -17px;
174+
border-radius: 0;
175+
border: 0;
176+
border-top: 1px solid var(--ifm-color-emphasis-300);
177+
178+
&:hover {
179+
background: var(--ifm-menu-color-background-hover);
180+
color: var(--ifm-font-color-secondary);
181+
}
20182
}
183+
}
21184

22-
p a {
23-
@extend %link-style;
185+
.footerContainer {
186+
text-align: center;
187+
188+
p {
189+
color: #858a96;
190+
191+
a {
192+
@extend %link-style-dark;
193+
color: #fff;
194+
background: none !important;
195+
196+
&:hover {
197+
background: none !important;
198+
color: var(--ifm-color-primary);
199+
}
200+
}
24201
}
25202

26-
.form-button {
203+
.formButton {
27204
@extend %button-link-style;
205+
color: #fff;
206+
border-color: var(--ifm-color-primary);
207+
margin-top: 20px;
28208
margin-bottom: 36px;
29209
border-width: 2px;
30210
font-weight: 500;
31211

32212
&:hover {
33-
border-color: var(--ifm-color-primary);
34-
color: var(--ifm-font-color-base) !important;
213+
color: var(--ifm-color-primary);
35214
}
36215
}
37216
}
@@ -41,14 +220,22 @@ html[data-theme="dark"] .showcaseSection {
41220
@extend %link-style-dark;
42221
}
43222

44-
.form-button {
223+
.articleButton {
224+
color: var(--ifm-color-emphasis-400);
225+
}
226+
227+
.formButton {
45228
color: var(--ifm-color-secondary-dark);
46229
}
230+
231+
.iconBackground {
232+
opacity: 0.15;
233+
}
47234
}
48235

49236
.home-showcase-section {
50237
max-width: 800px;
51-
margin: 20px auto 20px auto;
238+
margin: 20px auto;
52239
text-align: center;
53240
padding-bottom: 40px;
54241

@@ -88,52 +275,33 @@ html[data-theme="dark"] .showcaseSection {
88275
text-align: center;
89276
}
90277

91-
.showcase {
92-
margin: 30px auto 30px auto;
93-
width: 100%;
94-
display: inline-block;
95-
text-align: center;
96-
vertical-align: top;
97-
98-
h3 {
99-
margin-bottom: 0;
100-
line-height: 21px;
101-
padding: 5px 5px 2px;
102-
font-size: 21px;
103-
}
104-
105-
p {
106-
margin-top: 5px;
107-
padding-top: 0 !important;
108-
}
109-
110-
h3,
111-
p {
112-
color: var(--ifm-color-emphasis-800);
278+
@media only screen and (min-width: 600px) {
279+
.showcaseSection .logos {
280+
grid-template-columns: repeat(2, 1fr);
113281
}
114282
}
115283

116-
@media only screen and (max-device-width: 840px) {
117-
.showcaseSection {
118-
width: 100%;
284+
@media only screen and (min-width: 768px) {
285+
.showcaseSection .logos {
286+
grid-template-columns: repeat(3, 1fr);
119287
}
120288
}
121289

122-
@media only screen and (min-width: 600px) {
123-
.showcase {
124-
width: 50%;
290+
@media only screen and (min-width: 996px) {
291+
.showcaseSection .logos {
292+
grid-template-columns: repeat(4, 1fr);
125293
}
126294
}
127295

128-
@media only screen and (min-width: 960px) {
129-
.showcase {
130-
width: 25%;
296+
@media only screen and (min-width: 1320px) {
297+
.showcaseSection .logos {
298+
grid-template-columns: repeat(5, 1fr);
131299
}
132300
}
133301

134-
@media only screen and (min-device-width: 736px) {
135-
.showcaseSection .showcase img {
136-
width: 100px;
137-
max-height: 100px;
302+
@media only screen and (max-width: 1400px) {
303+
.showcaseSection {
304+
margin-left: 20px;
305+
margin-right: 20px;
138306
}
139307
}

‎website/src/pages/index.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,14 +147,23 @@ function GitHubStarButton() {
147147
);
148148
}
149149

150-
function Section({
150+
export function Section({
151151
element = 'section',
152152
children,
153153
className,
154154
background = 'light',
155155
}) {
156156
const El = element;
157-
return <El className={`Section ${className} ${background}`}>{children}</El>;
157+
return (
158+
<El
159+
className={
160+
className
161+
? `Section ${className} ${background}`
162+
: `Section ${background}`
163+
}>
164+
{children}
165+
</El>
166+
);
158167
}
159168

160169
function TwoColumns({columnOne, columnTwo, reverse}) {
@@ -425,7 +434,9 @@ function VideoContent() {
425434

426435
function AppList() {
427436
const {siteConfig} = useDocusaurusContext();
428-
const apps = siteConfig.customFields.users.filter(app => app.pinned);
437+
const apps = Object.values(siteConfig.customFields.users)
438+
.flat()
439+
.filter(app => app.pinned);
429440

430441
return (
431442
<ul className="AppList">

0 commit comments

Comments
 (0)