Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3db38d0

Browse files
fix: converted rem to px
1 parent 10c997f commit 3db38d0

File tree

13 files changed

+89
-95
lines changed

13 files changed

+89
-95
lines changed

‎src/components/Home/Legend.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,9 @@ const Legend: FC<{ type: BarStatus }> = ({ type }) => {
77
<div className='legend'>
88
<div
99
className='legend__color'
10-
style={{
11-
backgroundColor: `var(--${type})`
12-
}}
13-
></div>
14-
<div className='legend__text'>
15-
<strong>{type}</strong>
16-
</div>
10+
style={{ backgroundColor: `var(--${type})` }}
11+
/>
12+
<strong>{type}</strong>
1713
</div>
1814
)
1915
}

‎src/components/shared/NavBar/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const NavBar: FC<IProps> = ({ children }) => {
1111
return (
1212
<div className='navbar'>
1313
<Header className='navbar__header'>
14-
<Link to='/'>SORTING ALGORITHM VISUALIZER</Link>
14+
<Link to='/'>
15+
SORTING ALGORITHM <br /> VISUALIZER
16+
</Link>
1517
</Header>
1618
<div className='navbar__content'>{children}</div>
1719
</div>

‎src/styles/app.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ html {
1313
}
1414

1515
:root {
16-
font-size: 62.5%; // 1rem = 10px, (10px / 16px) => 62.5%
1716
// background colors
1817
--appBg: hsl(0, 0%, 80%);
1918
--navBarBg: hsl(0, 0%, 19%);

‎src/styles/pages/Algorithms/contentContainer.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.contentContainer {
22
grid-area: main;
3-
padding: 2rem10rem;
3+
padding: 20px100px;
44
background-color: var(--mainPanelBg);
55
overflow-y: scroll;
6-
--contentPadding: 2rem;
6+
--contentPadding: 20px;
77
scroll-padding-top: var(--contentPadding);
88

99
.content {
@@ -12,23 +12,23 @@
1212
padding: var(--contentPadding) 0;
1313

1414
&__header {
15-
font-size: 2.5rem;
16-
padding-bottom: 3rem;
15+
font-size: 25px;
16+
padding-bottom: 30px;
1717
}
1818

1919
&__detail {
20-
font-size: 1.8rem;
20+
font-size: 18px;
2121
text-align: justify;
2222
}
2323

2424
ol {
25-
padding-left: 2.5rem;
25+
padding-left: 25px;
2626
}
2727

2828
img {
2929
display: block;
3030
width: 60%;
31-
padding: 2rem;
31+
padding: 20px;
3232
margin: 0 auto;
3333
}
3434

@@ -44,7 +44,7 @@
4444
td,
4545
th {
4646
text-align: center;
47-
padding: 1rem;
47+
padding: 10px;
4848
border: 1px solid #474747;
4949
}
5050

‎src/styles/pages/Algorithms/sideMenu.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
color: hsl(0, 2%, 91%);
55

66
.panelHeader {
7-
font-size: 2rem;
8-
padding: 4rem2rem 0 4rem;
7+
font-size: 20px;
8+
padding: 40px20px 0 40px;
99
}
1010

1111
.contentLink {
12-
font-size: 2rem;
13-
padding: 2rem4rem;
14-
border-bottom: 0.1rem solid var(--mainPanelBg);
12+
font-size: 20px;
13+
padding: 20px40px;
14+
border-bottom: 0.1px solid var(--mainPanelBg);
1515

1616
&:hover {
1717
cursor: pointer;

‎src/styles/pages/Home/bottomPanel.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@
1111
border-collapse: collapse;
1212

1313
& .rowData {
14-
font-size: 1.4rem;
14+
font-size: 14px;
1515

1616
& td {
17-
padding: 1.5rem5rem;
17+
padding: 15px50px;
1818
}
1919

2020
&:nth-child(odd) {
2121
background-color: hsl(0, 0%, 73%);
2222
}
2323

2424
&__key {
25-
width: 20rem;
25+
width: 200px;
2626
font-weight: bold;
2727
}
2828
}

‎src/styles/pages/Home/mainPanel.scss‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
'. barContainer barContainer barContainer barContainer barContainer legend'
1111
'. barContainer barContainer barContainer barContainer barContainer legend'
1212
'. controls controls controls controls controls . ';
13-
padding: 4rem;
13+
padding: 40px;
1414
text-align: justify;
1515
height: 100%;
1616

@@ -25,18 +25,18 @@
2525
& .barContainer {
2626
grid-area: barContainer;
2727
align-self: end;
28-
height: 30rem;
28+
height: 300px;
2929
display: flex;
3030
flex-direction: row;
3131
justify-content: center;
3232
align-items: flex-end;
3333

3434
.bar {
35-
width: 1rem;
36-
margin: 0.1rem;
35+
width: 10px;
36+
margin: 1px;
3737
opacity: 1;
3838
color: white;
39-
box-shadow: 0.4rem0.4rem1rem0.2rem background-color;
39+
box-shadow: 4px4px10px2px background-color;
4040
}
4141
}
4242

@@ -46,13 +46,13 @@
4646
display: flex;
4747
flex-direction: row;
4848
justify-content: center;
49-
padding: 1rem;
49+
padding: 10px;
5050

5151
& button {
52-
max-height: 5rem;
53-
margin: 0.5rem;
54-
padding: 0.5rem;
55-
min-width: 8rem;
52+
max-height: 50px;
53+
margin: 5px;
54+
padding: 5px;
55+
min-width: 80px;
5656
}
5757
}
5858

@@ -61,22 +61,22 @@
6161
align-self: center;
6262

6363
&__header {
64-
margin-bottom: 1rem;
64+
margin-bottom: 10px;
6565
}
6666

6767
& .legend {
6868
display: flex;
6969
flex-direction: row;
7070
align-items: center;
71-
font-size: 1.4rem;
72-
margin: 0.5rem0rem;
71+
font-size: 14px;
72+
margin: 5px0;
7373

7474
&__color {
75-
height: 1.8rem;
76-
width: 1.8rem;
75+
height: 18px;
76+
width: 18px;
7777
border: 1px solid white;
78-
border-radius: 0rem;
79-
margin-right: 1rem;
78+
border-radius: 3px;
79+
margin-right: 10px;
8080
}
8181
}
8282
}

‎src/styles/pages/Home/sidePanel.scss‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
flex: 2;
33
height: 100%;
44
overflow-y: auto;
5-
padding: 4rem2rem;
6-
margin-bottom: 4rem;
5+
padding: 40px20px;
6+
margin-bottom: 40px;
77
text-align: justify;
88
color: hsl(0, 0%, 90%);
99
background-color: var(--sidePanelBg);
@@ -13,7 +13,7 @@
1313
justify-content: flex-start;
1414

1515
.algorithmDetail {
16-
font-size: 1.4rem;
16+
font-size: 14px;
1717

1818
select {
1919
margin: 0;
@@ -22,23 +22,23 @@
2222

2323
table {
2424
width: 100%;
25-
margin: 1.5rem 0;
25+
margin: 15px 0;
2626

2727
thead {
2828
th {
29-
font-size: 2.2rem;
29+
font-size: 22px;
3030
font-weight: 500;
31-
padding: 1rem 0;
31+
padding: 10px 0;
3232
}
3333
}
3434

3535
tbody {
3636
color: hsl(0, 0%, 80%);
3737
tr {
38-
font-size: 1.8rem;
39-
line-height: 2rem;
38+
font-size: 18px;
39+
line-height: 20px;
4040
td {
41-
padding: 0.5rem 0;
41+
padding: 5px 0;
4242
border: none;
4343
}
4444
}
@@ -49,7 +49,7 @@
4949
}
5050

5151
tr :last-child {
52-
font-size: 2rem;
52+
font-size: 20px;
5353
text-align: right;
5454

5555
var {
@@ -67,18 +67,18 @@
6767
height: 50%;
6868

6969
&__title {
70-
font-size: 2.2rem;
70+
font-size: 22px;
7171
font-weight: 500;
72-
margin-bottom: 1rem;
72+
margin-bottom: 10px;
7373
}
7474

7575
code {
76-
border-radius: 0.5rem;
77-
letter-spacing: 0.12rem;
78-
font-size: 1.5rem;
76+
border-radius: 5px;
77+
letter-spacing: 12px;
78+
font-size: 15px;
7979
font-weight: 300;
80-
line-height: 2rem;
81-
padding: 2rem;
80+
line-height: 20px;
81+
padding: 20px;
8282
}
8383
}
8484
}

‎src/styles/pages/about/index.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
.aboutPage {
22
width: 70%;
33
margin: 0 auto;
4-
padding: 4rem;
5-
font-size: 1.8rem;
4+
padding: 40px;
5+
font-size: 18px;
66

77
@media (max-width: 600px) {
88
width: 80%;
99
}
1010

1111
.header {
12-
font-size: 4rem;
12+
font-size: 40px;
1313
font-weight: 300;
14-
padding: 2rem 0;
14+
padding: 20px 0;
1515
text-transform: uppercase;
1616
}
1717

1818
.description {
19-
font-size: 2rem;
19+
font-size: 20px;
2020
font-weight: 300;
2121
text-align: justify;
22-
padding-bottom: 2rem;
22+
padding-bottom: 20px;
2323
}
2424

2525
.details-table {
2626
width: 100%;
2727
border-collapse: collapse;
2828

2929
td {
30-
padding: 1rem;
30+
padding: 10px;
3131
li {
3232
list-style: none;
33-
margin-bottom: 0.2rem;
33+
margin-bottom: 0.2px;
3434
}
3535
}
3636

@@ -39,7 +39,7 @@
3939
white-space: nowrap;
4040
text-align: left;
4141
vertical-align: top;
42-
font-size: 2rem;
42+
font-size: 20px;
4343
}
4444

4545
td:nth-child(2) {
@@ -48,7 +48,7 @@
4848
}
4949

5050
.link {
51-
margin: 2rem 0;
51+
margin: 20px 0;
5252
text-decoration: underline;
5353
color: blue;
5454
}

‎src/styles/shared/dropdown.scss‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
.dropdown {
2-
width: 20rem;
3-
padding: 0.8rem 1.5rem;
4-
margin: 0 0.5rem;
2+
padding: 5px;
3+
margin: 0 5px;
54
background: hsl(0, 0%, 77%);
6-
font-size: 1.5rem;
7-
letter-spacing: 0.01rem;
5+
font-size: 12px;
86

97
&:hover {
108
cursor: pointer;
@@ -15,6 +13,6 @@
1513
}
1614

1715
& option {
18-
font-size: 1.7rem;
16+
font-size: 1rem;
1917
}
2018
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /