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 85375a8

Browse files
feat: updated algorithm page responsive styles
1 parent 8a5bf33 commit 85375a8

File tree

3 files changed

+57
-8
lines changed

3 files changed

+57
-8
lines changed

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

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
.contentContainer {
22
grid-area: main;
3+
max-width: 900px;
4+
margin: 0 auto;
35
padding: 20px 100px;
46
background-color: var(--mainPanelBg);
57
overflow-y: scroll;
68
--contentPadding: 20px;
79
scroll-padding-top: var(--contentPadding);
810

911
.content {
10-
width: 70%;
12+
width: 100%;
1113
margin: 0 auto;
1214
padding: var(--contentPadding) 0;
1315

@@ -17,24 +19,29 @@
1719
}
1820

1921
&__detail {
20-
font-size: 18px;
22+
font-size: 16px;
2123
text-align: justify;
24+
font-weight: 400;
2225
}
2326

2427
ol {
2528
padding-left: 25px;
29+
& > li {
30+
margin-bottom: 10px;
31+
}
2632
}
2733

2834
img {
2935
display: block;
30-
width: 60%;
31-
padding: 20px;
32-
margin: 0auto;
36+
width: 80%;
37+
margin: 20pxauto;
38+
border: 5pxsolidwhite;
3339
}
3440

3541
.sorting-algo-table {
3642
width: 100%;
3743
border-collapse: collapse;
44+
font-size: 14px;
3845

3946
th {
4047
background-color: #474747;
@@ -54,4 +61,32 @@
5461
}
5562
}
5663
}
64+
65+
@media screen and (max-width: 768px) {
66+
padding: 20px 40px;
67+
68+
.content {
69+
width: 100%;
70+
&__header {
71+
font-size: 20px;
72+
padding-bottom: 20px;
73+
}
74+
75+
&__detail {
76+
font-size: 14px;
77+
}
78+
79+
ol {
80+
padding-left: 15px;
81+
}
82+
83+
.sorting-algo-table {
84+
font-size: 12px;
85+
td,
86+
th {
87+
padding: 7px;
88+
}
89+
}
90+
}
91+
}
5792
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,14 @@
1414
width: 100%;
1515
overflow: hidden;
1616
scroll-behavior: smooth;
17+
18+
@media screen and (max-width: 768px) {
19+
grid-template-columns: 1fr;
20+
grid-template-areas:
21+
'main'
22+
'main'
23+
'main'
24+
'main'
25+
'main';
26+
}
1727
}

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
grid-area: side;
33
background-color: var(--sidePanelBg);
44
color: hsl(0, 2%, 91%);
5+
font-size: 16px;
56

67
.panelHeader {
7-
font-size: 20px;
8+
font-weight: bolder;
89
padding: 40px 20px 0 40px;
910
}
1011

1112
.contentLink {
12-
font-size: 20px;
1313
padding: 20px 40px;
14-
border-bottom: 0.1px solid var(--mainPanelBg);
14+
border-bottom: 1px solid var(--mainPanelBg);
1515

1616
&:hover {
1717
cursor: pointer;
@@ -24,4 +24,8 @@
2424
background-color: var(--mainPanelBg);
2525
color: black;
2626
}
27+
28+
@media screen and (max-width: 768px) {
29+
display: none;
30+
}
2731
}

0 commit comments

Comments
(0)

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