Skip to content

Commit 4c44ea4

Browse files
yiqunzhengyiqunzheng
authored
Merge pull request #66 from oslabs-beta/kyler/siteStyling
feat/fix: Some ESlint fixes and more site styling
2 parents 2539456 + 929ae34 commit 4c44ea4

File tree

13 files changed

+347
-360
lines changed

13 files changed

+347
-360
lines changed

‎mlflow-site/src/app/components/DemoCard.tsx

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
1-
import Image from "next/image";
1+
import Image from 'next/image';
22

3-
const DemoCard = ({ header, blurb }: {
4-
key: string,
5-
blurb: string,
6-
header: string
7-
}) => {
8-
return (
9-
<div className='demoCard'>
10-
<Image
11-
src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
12-
alt=''
13-
width={700}
14-
height={475}
15-
sizes="100vw"
16-
style={{
17-
width: "100%",
18-
height: "auto",
19-
}}
20-
/>
3+
const DemoCard = ({
4+
header,
5+
blurb,
6+
}: {
7+
key: string;
8+
blurb: string;
9+
header: string;
10+
}) => {
11+
return (
12+
<div className='demoCard'>
13+
<Image
14+
src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
15+
alt=''
16+
width={700}
17+
height={475}
18+
sizes='100vw'
19+
style={{
20+
width: '100%',
21+
height: 'auto',
22+
}}
23+
/>
24+
<div className='demoCardText'>
2125
<div className='demoCardHeader'>{header}</div>
22-
{blurb}
26+
<div className='demoCardInfo'>{blurb}</div>
2327
</div>
24-
);
25-
};
26-
27-
export default DemoCard;
28-
28+
</div>
29+
);
30+
};
31+
32+
export default DemoCard;

‎mlflow-site/src/app/components/Features.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Features = () => {
1313
'Feature 4',
1414
];
1515
const featureCardBlurbs = [
16-
'Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. ',
16+
'Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. ',
1717
'Feature Card Blurb 2. Feature Card Blurb 2. Feature Card Blurb 2. Feature Card Blurb 2. ',
1818
'Feature Card Blurb 3. Feature Card Blurb 3. Feature Card Blurb 3. Feature Card Blurb 3. ',
1919
'Feature Card Blurb 4. Feature Card Blurb 4. Feature Card Blurb 4. Feature Card Blurb 4. '
@@ -32,7 +32,7 @@ const Features = () => {
3232
<div className='features' id='features'>
3333
<div className='featureHeader'>{featureHeader}</div>
3434
<div className='featureLongBlurb'>{featureLongBlurb}</div>
35-
<div className=''>{cards}</div>
35+
<div className='featureCardsSection'>{cards}</div>
3636
</div>
3737
);
3838
};

‎mlflow-site/src/app/globals.css

Lines changed: 71 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,19 @@ body {
2525
}
2626

2727
.wrapper {
28-
position:absolute;
28+
position: absolute;
2929
background: rgb(51, 51, 58);
3030
width: 100%;
3131
height: 100%;
3232
display: grid;
3333
grid-template-columns: 1fr 100vw 1fr;
3434
grid-template-rows: 1fr;
3535
overflow-y: auto;
36+
overflow-x: hidden;
3637
}
3738

3839
::-webkit-scrollbar {
39-
height: 10px;
40-
width: 10px;
40+
width: 0px;
4141
}
4242

4343
/* Track */
@@ -47,12 +47,12 @@ body {
4747

4848
/* Handle */
4949
::-webkit-scrollbar-thumb {
50-
background: #3c3c3c;
50+
background: #5c5c5c;
5151
}
5252

5353
/* Handle on hover */
5454
::-webkit-scrollbar-thumb:hover {
55-
background: #1b1b1b;
55+
background: #515151;
5656
}
5757

5858
.mobileWrapper {
@@ -62,10 +62,22 @@ body {
6262
grid-column: 2;
6363
grid-row: 1;
6464
display: grid;
65-
grid-template-columns: 0.7rem 1.3rem 1fr 1.3rem 0.7rem;
65+
grid-template-columns:
66+
1vw clamp(1.3rem, 6vw, 8vw) 1fr clamp(1.3rem, 6vw, 8vw)
67+
1vw;
6668
grid-template-rows: 1.3rem min-content 1fr min-content 1.3rem;
6769
}
6870

71+
@media (min-width: 1000px) {
72+
::-webkit-scrollbar {
73+
width: 10px;
74+
}
75+
76+
.mobileWrapper {
77+
grid-template-columns: 1vw 8vw 1fr calc(8vw + 10px) calc(1vw + 10px);
78+
}
79+
}
80+
6981
.navBar {
7082
grid-column: 2/5;
7183
grid-row: 2;
@@ -83,9 +95,11 @@ body {
8395
width: 100%;
8496
height: 100%;
8597
display: grid;
86-
grid-template-columns: repeat(calc(100%/5), 5);
98+
grid-template-columns: repeat(calc(100% / 5), 5);
8799
grid-template-rows: 100%;
88100
align-items: center;
101+
justify-content: right;
102+
column-gap: 2.8vw;
89103
}
90104

91105
.navBarLinksFeatures {
@@ -117,12 +131,12 @@ body {
117131
}
118132

119133
.bigHeadline {
120-
font-size: clamp(1.7rem, 6.531vw, 3rem);
134+
font-size: clamp(1.7rem, 6.531vw, 6.25rem);
121135
font-family: Newsreader;
122136
}
123137

124138
.headLineText {
125-
font-size: clamp(1rem, 4.43vw, 1.76rem);
139+
font-size: clamp(1.1rem, 4.873vw, 2.25rem);
126140
}
127141

128142
.mobileInnerWrapper {
@@ -152,8 +166,8 @@ body {
152166

153167
.homeButton {
154168
padding: clamp(0.1875rem, 0.830625vw, 0.328125rem);
155-
padding-left: clamp(0.375rem, 1.66125vw, .65625rem);
156-
padding-right: clamp(0.375rem, 1.66125vw, .65625rem);
169+
padding-left: clamp(0.375rem, 1.66125vw, 0.65625rem);
170+
padding-right: clamp(0.375rem, 1.66125vw, 0.65625rem);
157171
border-radius: clamp(0.3125rem, 1.384375vw, 0.546875rem);
158172
font-size: clamp(0.8rem, 3.544vw, 1.05rem);
159173
margin-right: 8px;
@@ -178,18 +192,20 @@ body {
178192
display: grid;
179193
place-items: center;
180194
padding: 0.5rem;
181-
margin-bottom: 5rem;
195+
margin-bottom: 4rem;
182196
text-align: center;
183197
color: black;
184198
background-color: white;
199+
margin-top: clamp(1rem, 4.43vw, 3rem);
185200
}
186201

187202
.featureHeader {
188-
font-size: 1.875rem;
203+
font-size: clamp(1.3rem, 5.759vw, 3rem);
189204
margin-bottom: 0.5rem;
190205
}
191206

192207
.featureLongBlurb {
208+
font-size: clamp(1rem, 4.43vw, 1.5rem);
193209
margin-bottom: 0.5rem;
194210
}
195211

@@ -205,7 +221,23 @@ body {
205221
}
206222

207223
.featureCardHeader {
208-
font-size: 1.5rem;
224+
font-size: clamp(1.3rem, 5.316vw, 1.5rem);
225+
}
226+
227+
.featureCardsSection {
228+
margin-top: 1rem;
229+
}
230+
231+
@media (min-width: 1000px) {
232+
.featureCardsSection {
233+
display: grid;
234+
grid-template-columns: 50% 50%;
235+
column-gap: 10px;
236+
}
237+
238+
.featureCard {
239+
text-align: left;
240+
}
209241
}
210242

211243
.demo {
@@ -214,21 +246,40 @@ body {
214246
width: 100%;
215247
display: grid;
216248
grid-template-columns: 100%;
217-
grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3);
249+
grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
218250
color: black;
219251
background-color: white;
220-
margin-bottom: 5rem;
252+
margin-bottom: clamp(1rem, 4.43vw, 3rem);
221253
}
222254

223255
.demoCard {
224256
gap: 1.25rem;
225257
padding: 0.25rem;
226-
margin-bottom: 5rem;
258+
margin-bottom: 4rem;
227259
text-align: center;
228260
}
229261

262+
@media (min-width: 1000px) {
263+
.demoCard {
264+
display: grid;
265+
grid-template-columns: 50% 50%;
266+
column-gap: 10px;
267+
text-align: left;
268+
}
269+
}
270+
271+
@media (max-width: 1000px) {
272+
.demoCardText {
273+
margin-top: 0.8rem;
274+
}
275+
}
276+
230277
.demoCardHeader {
231-
font-size: 1.5rem;
278+
font-size: clamp(1.3rem, 5.759vw, 2rem);
279+
}
280+
281+
.demoCardInfo {
282+
font-size: clamp(1rem, 4vw, 1.25rem);
232283
}
233284

234285
.demoSplit {
@@ -256,7 +307,7 @@ body {
256307
justify-content: center;
257308
align-items: center;
258309
font-size: clamp(1rem, 4.43vw, 1.3rem);
259-
padding: clamp(.22rem, 1.1927vw,0.35rem);
310+
padding: clamp(0.22rem, 1.1927vw, 0.35rem);
260311
margin-left: 0.2rem;
261312
margin-right: 0.2rem;
262313
background-color: rgb(217, 225, 210);
@@ -279,4 +330,4 @@ body {
279330

280331
.teamCardLink2 {
281332
grid-column: 3;
282-
}
333+
}

‎mlflow-site/src/app/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export default function Home() {
1111
<NavBar />
1212
<div className='mobileInnerWrapper'>
1313
<Headline />
14-
<Features/>
15-
<Demo/>
14+
<Features />
15+
<Demo />
1616
</div>
1717
<Team />
1818
</div>

0 commit comments

Comments
 (0)