Skip to content
This repository was archived by the owner on Nov 29, 2023. It is now read-only.

Commit 47a5179

Browse files
ckoegelckoegel
authored
DX-3022 Optimize Sass (#864)
* DX-3022 Optimize Sass * fix instances of px instead of rem * fixes to nesting * fix more nesting * update font weight in tab switchers * update fonts to use variables * overpass light variable * revert size and layout css * update sizing and layouts to use px * use variable for item grid item size
1 parent b58093f commit 47a5179

20 files changed

+440
-434
lines changed

‎site/src/components/Carousel.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,14 +118,14 @@ export default function Carousel({itemList, title}) {
118118

119119
return (
120120
<div className="slide" style={slideStyle}>
121-
<div className="item" style={itemStyle} data-cy="item">
122-
<div className="image" style={imageStyle} data-cy="image"></div>
123-
<div className="categories" style={categoriesStyle} data-cy="categories">
121+
<div className="slide-item" style={itemStyle} data-cy="item">
122+
<div className="slide-image" style={imageStyle} data-cy="image"></div>
123+
<div className="slide-categories" style={categoriesStyle} data-cy="categories">
124124
{categories.map((category, idx) => (
125125
<a href={categoryLinks[idx]} key={idx}>{category}</a>
126126
))}
127127
</div>
128-
<div className="post" style={postStyle} data-cy="post">
128+
<div className="slide-post" style={postStyle} data-cy="post">
129129
<a href={postLink}>{postTitle}</a>
130130
</div>
131131
</div>

‎site/src/components/FeaturePanels.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import React from 'react';
33
function FeaturePanel({Svg, title, text, link}) {
44
return (
55
<a className="panel" href={link}>
6-
<div className="header">
7-
<Svg className="icon"/>
8-
<div className="title">{title}</div>
6+
<div className="panel-header">
7+
<Svg className="panel-icon"/>
8+
<div className="panel-title">{title}</div>
99
</div>
10-
<div className="content">
10+
<div className="panel-content">
1111
<div className="panel-text">{text}</div>
1212
</div>
1313
</a>

‎site/src/components/ItemGrid.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
function Item({Svg, title, link}) {
44
return (
5-
<div className="item">
5+
<div className="item-grid-item">
66
<a href={link} className="item-image">
77
<Svg className="item-svg" alt={title}/>
88
</a>

‎site/src/components/LandingPage.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import ItemGrid from '@site/src/components/ItemGrid.js';
44
export default function LandingPage({itemList, Svg, h1Text, h2Text}) {
55
return (
66
<div className="landing-page">
7-
<div className="left">
8-
<div className="title">
7+
<div className="landing-page-left">
8+
<div className="landing-page-title">
99
<h1>{h1Text}</h1>
1010
<h2>{h2Text}</h2>
1111
</div>
1212
<ItemGrid itemList={itemList}/>
1313
</div>
14-
<div className="right">
15-
<Svg className="right-image" />
14+
<div className="landing-page-right">
15+
<Svg className="landing-page-right-image" />
1616
</div>
1717
</div>
1818
);

‎site/src/components/SplashPage.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ function SplashPageImage({Svg}) {
4646
function SplashPageTextBlock({title, text, linkText, link}) {
4747
return (
4848
<div className="text-block">
49-
<div className="title" data-cy="title">{title}</div>
50-
<div className="text" data-cy="text">{text}</div>
51-
<div className="link" data-cy="link"><a href={link}>{linkText}</a></div>
49+
<div className="text-block-title" data-cy="title">{title}</div>
50+
<div className="text-block-text" data-cy="text">{text}</div>
51+
<div className="text-block-link" data-cy="link"><a href={link}>{linkText}</a></div>
5252
</div>
5353
)
5454
}

‎site/src/css/base/_root.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
--ifm-color-primary-lightest: #{$blue25};
1818

1919
/* Infima Font Overrides */
20-
--ifm-font-family-base: 'Overpass';
21-
--ifm-font-family-monospace: 'Overpass Mono';
20+
--ifm-font-family-base: #{$overpass};
21+
--ifm-font-family-monospace: #{$overpass-mono};
2222
--ifm-font-color-base: var(--ifm-color-content);
2323
--ifm-font-color-secondary: var(--ifm-color-content-secondary);
2424
--ifm-font-size-base: 95%;

‎site/src/css/components/_Carousel.scss

Lines changed: 85 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
height: 550px;
88
display: flex;
99
flex-direction: column;
10-
margin: 2em 0;
10+
margin: 30px 0;
1111

1212
@include mobile-view {
1313
height: 300px;
@@ -17,10 +17,6 @@
1717
height: 240px;
1818
}
1919

20-
.decoration {
21-
22-
}
23-
2420
.top-amoeba {
2521
@extend %carousel-decoration;
2622
margin-bottom: -1px;
@@ -55,100 +51,100 @@
5551
@include mobile-view {
5652
height: 100%;
5753
}
54+
}
5855

59-
.carousel-header {
60-
width: auto;
61-
height: 50px;
62-
color: var(--ifm-font-color-base);
63-
font-family: 'Overpass Bold';
64-
font-size: 2.2rem;
65-
display: flex;
66-
justify-content: center;
67-
align-items: center;
68-
69-
@include mobile-view {
70-
height: 30px;
71-
font-size: 1.8rem;
72-
}
73-
@include slim-mobile-view {
74-
height: 22px;
75-
font-size: 1.5rem;
76-
}
77-
@include ultra-slim-mobile-view {
78-
height: 20px;
79-
font-size: 1.2rem;
80-
}
81-
}
82-
83-
.carousel-content {
84-
height: auto;
85-
margin: 0 auto;
86-
position: relative;
87-
display: flex;
88-
justify-content: center;
89-
}
90-
91-
.carousel {
92-
width: 100%;
93-
height: 100%;
94-
overflow: visible;
95-
position: relative;
96-
}
97-
98-
.carousel-slides {
99-
display: flex;
100-
overflow: visible;
101-
position: relative;
102-
width: 100%;
103-
height: 100%;
56+
.carousel-header {
57+
width: auto;
58+
height: 50px;
59+
color: var(--ifm-font-color-base);
60+
font-family: $overpass-bold;
61+
font-size: 2.2rem;
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
10465

105-
@include slide;
66+
@include mobile-view {
67+
height: 30px;
68+
font-size: 1.8rem;
10669
}
107-
108-
.transition {
109-
transition: all .25s ease-out;
70+
@include slim-mobile-view {
71+
height: 22px;
72+
font-size: 1.5rem;
11073
}
111-
112-
.disabled {
113-
pointer-events: none;
74+
@include ultra-slim-mobile-view {
75+
height: 20px;
76+
font-size: 1.2rem;
11477
}
78+
}
11579

116-
.nav-buttons {
117-
position: absolute;
118-
width: 100vw;
119-
height: auto;
120-
display: flex;
121-
padding: 0 3em;
122-
justify-content: space-between;
123-
124-
@include mobile-view {
125-
padding: 0 2em;
126-
}
80+
.carousel-content {
81+
height: auto;
82+
margin: 0 auto;
83+
position: relative;
84+
display: flex;
85+
justify-content: center;
86+
}
12787

128-
button {
129-
border-radius: 50%;
130-
border: none;
131-
background-color: $white;
132-
font-family: 'Material Icons';
133-
color: $blue50;
134-
font-size: 2.4rem;
135-
line-height: 2.2rem;
136-
padding: 0;
88+
.carousel {
89+
width: 100%;
90+
height: 100%;
91+
overflow: visible;
92+
position: relative;
93+
}
13794

138-
&:hover {
139-
cursor: pointer;
140-
}
141-
}
95+
.carousel-slides {
96+
display: flex;
97+
overflow: visible;
98+
position: relative;
99+
width: 100%;
100+
height: 100%;
101+
102+
@include slide;
103+
}
142104

143-
.left-button::before {
144-
content: 'chevron_left';
145-
margin-left: -2px;
146-
}
147-
148-
.right-button::before {
149-
content: 'chevron_right';
150-
margin-left: 2px;
105+
.transition {
106+
transition: all .25s ease-out;
107+
}
108+
109+
.disabled {
110+
pointer-events: none;
111+
}
112+
113+
.nav-buttons {
114+
position: absolute;
115+
width: 100vw;
116+
height: auto;
117+
display: flex;
118+
padding: 0 3em;
119+
justify-content: space-between;
120+
121+
@include mobile-view {
122+
padding: 0 2em;
123+
}
124+
125+
button {
126+
border-radius: 50%;
127+
border: none;
128+
background-color: $white;
129+
font-family: 'Material Icons';
130+
color: $blue50;
131+
font-size: 2.4rem;
132+
line-height: 2.2rem;
133+
padding: 0;
134+
135+
&:hover {
136+
cursor: pointer;
151137
}
152138
}
139+
140+
.left-button::before {
141+
content: 'chevron_left';
142+
margin-left: -2px;
143+
}
144+
145+
.right-button::before {
146+
content: 'chevron_right';
147+
margin-left: 2px;
148+
}
153149
}
154150
}

‎site/src/css/components/_FeaturePanel.scss

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
.panel {
1010
width: 300px;
1111
height: 250px;
12-
margin: 0 .6em 1.2em;
12+
margin: 0 9px 18px;
1313
display: flex;
1414
flex-direction: column;
1515
background-color: var(--ifm-background-color);
@@ -19,51 +19,51 @@
1919
text-decoration: none;
2020

2121
@include slim-mobile-view {
22-
margin: 0 0 1.2rem;
22+
margin: 0 0 18px;
2323
height: auto;
2424
}
2525

2626
&:hover {
2727
text-decoration: none;
2828
}
29+
}
2930

30-
.header {
31-
width: auto;
32-
height: 50px;
33-
margin: 20px 15px;
34-
display: flex;
31+
.panel-header {
32+
width: auto;
33+
height: 50px;
34+
margin: 20px 15px;
35+
display: flex;
36+
}
3537

36-
.icon {
37-
width: 50px;
38-
height: auto;
39-
}
40-
41-
.title {
42-
width: calc(100% - 50px);
43-
height: auto;
44-
padding-left: 5px;
45-
padding-top: 2px;
46-
color: var(--ifm-font-color-base);
47-
font-family: 'Overpass Bold';
48-
font-size: 1.1rem;
49-
line-height: 1.1rem;
50-
display: flex;
51-
align-items: center;
52-
}
53-
}
54-
55-
.content {
56-
width: 100%;
57-
flex-grow: 1;
58-
padding: 5px 25px 10px;
59-
display: flex;
60-
flex-direction: column;
38+
.panel-icon {
39+
width: 50px;
40+
height: auto;
41+
}
42+
43+
.panel-title {
44+
width: calc(100% - 50px);
45+
height: auto;
46+
padding-left: 5px;
47+
padding-top: 2px;
48+
color: var(--ifm-font-color-base);
49+
font-family: $overpass-bold;
50+
font-size: 1.1rem;
51+
line-height: 1.1rem;
52+
display: flex;
53+
align-items: center;
54+
}
55+
56+
.panel-content {
57+
width: 100%;
58+
flex-grow: 1;
59+
padding: 5px 25px 10px;
60+
display: flex;
61+
flex-direction: column;
62+
}
6163

62-
.panel-text {
63-
width: 100%;
64-
flex-grow: 1;
65-
color: var(--ifm-font-color-base);
66-
}
67-
}
64+
.panel-text {
65+
width: 100%;
66+
flex-grow: 1;
67+
color: var(--ifm-font-color-base);
6868
}
6969
}

0 commit comments

Comments
 (0)