Skip to content

Commit 6c73d2b

Browse files
jdudrakjdudrak
committed
Layout Fixes
1 parent ef0a6f9 commit 6c73d2b

File tree

9 files changed

+126
-150
lines changed

9 files changed

+126
-150
lines changed

‎scaladoc/resources/dotty_res/styles/theme/components/api-member.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,14 @@ color: var(--text-secondary);
8888
top: calc(2 * var(--base-spacing));
8989
}
9090

91+
@media (max-width: 480px) {
92+
93+
.documentableElement .icon-button {
94+
left: calc(3 * var(--base-spacing) / -1);
95+
}
96+
97+
}
98+
9199
.documentableElement:hover .icon-button {
92100
display: block;
93101
}

‎scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
#toc {
22
display: flex;
33
flex-direction: column;
4-
margin-left: calc(6 * var(--base-spacing));
54
width: 232px;
65
}
76

@@ -14,7 +13,7 @@
1413

1514
.toc-list {
1615
margin-block-start: calc(2 * var(--base-spacing));
17-
margin-block-end: 0;;
16+
margin-block-end: 0;
1817
}
1918

2019
#toc ul {
@@ -31,41 +30,11 @@
3130
padding-left: calc(3 * var(--base-spacing));
3231
}
3332

34-
@media (min-width: 1920px) {
35-
#toc {
36-
margin-left: calc(8.5 * var(--base-spacing));
37-
}
38-
}
39-
40-
@media (max-width: 1920px) {
41-
#toc {
42-
margin-left: calc(8.5 * var(--base-spacing));
43-
}
44-
}
45-
46-
@media (max-width: 1467px) {
47-
#toc {
48-
margin-left: calc(8.5 * var(--base-spacing));
49-
}
50-
}
51-
52-
@media (max-width: 1376px) {
53-
#toc {
54-
margin-left: calc(6 * var(--base-spacing));
55-
}
56-
}
57-
58-
@media (max-width: 1366px) {
33+
/*@media (max-width: 1366px) {
5934
#toc {
6035
left: calc(102 * var(--base-spacing));
6136
}
62-
}
63-
64-
@media (max-width: 1024px) {
65-
#toc.sidebar-shown {
66-
display: none;
67-
}
68-
}
37+
}*/
6938

7039
@media (max-width: 768px) {
7140
#toc {

‎scaladoc/resources/dotty_res/styles/theme/layout/arrowNavigation.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@
22
display: flex;
33
margin-bottom: calc(6 * var(--base-spacing));
44
margin-top: calc(6 * var(--base-spacing));
5+
gap: 24px;
56
}
67

78
.arrow-navigation > div {
89
width: 100%;
9-
padding-right: 12px;
1010
}
1111

12-
.arrow-navigation > div:has(.arrow-navigation--next) {
12+
.arrow-navigation > div .arrow-navigation--next {
13+
text-align: right;
14+
}
15+
16+
.arrow-navigation > div .arrow-navigation--next ~ a {
17+
display: inline-block;
18+
width: 100%;
1319
text-align: right;
14-
padding-right: 0;
15-
padding-left: 12px;
1620
}
1721

1822
.arrow-navigation > div > span {

‎scaladoc/resources/dotty_res/styles/theme/layout/container.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,19 @@ body {
44
background-color: var(--background-main);
55
height: 100%;
66
overflow: hidden;
7+
scroll-behavior: smooth;;
78
}
89

910
p {
1011
margin-block: calc(3 * var(--base-spacing));
1112
}
1213

14+
p, span, a, h1, h2, h3, h4, h5, h6, strong, dt, dl {
15+
word-break: break-all;
16+
}
17+
1318
[id] {
14-
scroll-margin-top: calc(10 * var(--base-spacing));
19+
scroll-margin-top: calc(18 * var(--base-spacing));
1520
}
1621

1722
#container {

‎scaladoc/resources/dotty_res/styles/theme/layout/content.css

Lines changed: 56 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,128 @@
11
#main {
2-
overflow: scroll;
2+
width: calc(100vw - 313px);
33
height: 100%;
4+
overflow-y: scroll;
5+
overflow-x: hidden;
6+
position: absolute;
7+
right: 0;
8+
scroll-behavior: smooth;
49
}
510

611
#content {
7-
margin-left: calc(39 * var(--base-spacing));
812
display: flex;
913
flex-flow: row;
1014
color: var(--text-primary);
11-
-webkit-transition: width 0.3s ease-in-out;
12-
-moz-transition: width 0.3s ease-in-out;
13-
-o-transition: width 0.3s ease-in-out;
14-
transition: width 0.3s ease-in-out;
15+
16+
padding-top: calc(18 * var(--base-spacing));
17+
padding-bottom: calc(10 * var(--base-spacing));
18+
width: calc(100% - 68px * 2);
19+
padding-inline: 68px;
20+
gap: 68px;;
21+
22+
-webkit-transition: margin-left 0.2s ease-in-out;
23+
-moz-transition: margin-left 0.2s ease-in-out;
24+
-o-transition: margin-left 0.2s ease-in-out;
25+
transition: margin-left 0.2s ease-in-out;
1526
}
1627

1728
#content > div:first-child {
18-
overflow: clip;
19-
padding-left: 28px;
29+
width: calc(100vw - 232px - 313px - 68px * 3);
30+
max-width: 720px;
2031
}
2132

2233

2334
#content.sidebar-shown {
24-
-webkit-transition: width 0.3s ease-in-out;
25-
-moz-transition: width 0.3s ease-in-out;
26-
-o-transition: width 0.3s ease-in-out;
27-
transition: width 0.3s ease-in-out;
35+
-webkit-transition: margin-left 0.2s ease-in-out;
36+
-moz-transition: margin-left 0.2s ease-in-out;
37+
-o-transition: margin-left 0.2s ease-in-out;
38+
transition: margin-left 0.2s ease-in-out;
2839
}
2940

30-
@media (min-width: 1920px) {
31-
#content {
32-
padding-left: calc(36.75 * var(--base-spacing));
33-
padding-top: calc(18 * var(--base-spacing));
34-
}
41+
@media (min-width: 1921px) {
3542

36-
#content > div:first-child {
37-
width: calc(90 * var(--base-spacing));
43+
#content {
44+
justify-content: left;
45+
padding-left: 294px;
3846
}
3947
}
4048

4149
@media (max-width: 1920px) {
50+
4251
#content {
43-
margin-left: 0;
44-
width: calc(100% - calc(39 * var(--base-spacing)) + 28px);
45-
padding-top: calc(18 * var(--base-spacing));
46-
padding-bottom: calc(10 * var(--base-spacing));
4752
justify-content: center;
48-
float: right;
4953
}
54+
5055
#content > div:first-child {
51-
width: calc(90 * var(--base-spacing));
56+
padding: 0;
5257
}
5358
}
5459

5560
@media (max-width: 1467px) {
56-
#content {
57-
margin-left: 0;
58-
width: calc(100% - calc(56 * var(--base-spacing)) + 28px);
59-
padding-top: calc(18 * var(--base-spacing));
60-
padding-bottom: calc(10 * var(--base-spacing));
61-
margin-right: calc(8.5 * var(--base-spacing));
62-
margin-left: calc(8.5 * var(--base-spacing));
63-
float: right;
64-
}
65-
#content > div:first-child {
66-
width: auto;
67-
}
68-
}
6961

70-
@media (max-width: 1376px) {
7162
#content {
72-
margin-left: 0;
73-
width: calc(100% - calc(51 * var(--base-spacing)) + 28px);
74-
padding-top: calc(18 * var(--base-spacing));
75-
padding-bottom: calc(10 * var(--base-spacing));
76-
margin-right: calc(6 * var(--base-spacing));
77-
margin-left: calc(6 * var(--base-spacing));
78-
float: right;
63+
width: calc(100% - 48px * 2);
64+
padding-inline: 48px;
65+
gap: 48px;
7966
}
67+
8068
#content > div:first-child {
81-
width: auto;
69+
width: calc(100vw - 232px - 313px - 48px * 3);
8270
}
8371
}
8472

8573
@media (max-width: 1024px) {
86-
#content {
87-
width: calc(100% - calc(12 * var(--base-spacing)) + 28px);
88-
margin-right: calc(6 * var(--base-spacing));
89-
margin-left: calc(6 * var(--base-spacing));
90-
padding-right: 0;
74+
75+
#main {
76+
width: 100vw;
77+
position: absolute;
78+
left: 0;
9179
}
9280

9381
#content > div:first-child {
94-
width: calc(100% - calc(29 * var(--base-spacing)));
82+
width: calc(100vw - 232px - 48px * 3);
9583
}
9684

9785
#content.sidebar-shown {
98-
width: calc(100% - calc(51 * var(--base-spacing)));
99-
padding-right: 0;
86+
margin-left: 313px;
10087
}
10188

102-
#content.sidebar-shown > div:first-child {
103-
width: auto;
104-
}
10589
}
10690

10791
@media (max-width: 768px) {
92+
10893
#content {
109-
margin-right: calc(6 * var(--base-spacing));
110-
margin-left: calc(6 * var(--base-spacing));
111-
padding-right: 0;
112-
width: calc(100% - calc(12 * var(--base-spacing)) + 28px);
94+
padding-bottom: calc(6 * var(--base-spacing));
11395
}
11496

11597
#content > div:first-child {
116-
width: auto;
98+
width: calc(100vw - 48px * 2);
11799
}
118100

119-
#content.sidebar-shown {
120-
width: calc(100% - calc(51 * var(--base-spacing)));
121-
padding-right: 0;
122-
}
101+
}
102+
103+
@media (max-width: 428px) {
123104

124-
#content.sidebar-shown > div:first-child {
125-
width: auto;
105+
#content {
106+
padding-bottom: 0;
126107
}
108+
127109
}
128110

129111
@media (max-width: 428px) {
112+
130113
#content {
131-
margin-right: calc(4 * var(--base-spacing));
132-
margin-left: calc(4 * var(--base-spacing));
133-
padding-right: 0;
134-
width: calc(100% - calc(8 * var(--base-spacing)) + 28px);
114+
width: calc(100% - 64px);
115+
padding-inline: 32px;
135116
}
136117

137118
#content > div:first-child {
138-
width: auto;
119+
width: calc(100vw - 32px * 2);
139120
}
140121

141122
#content.sidebar-shown {
142-
width: calc(100% - calc(51 * var(--base-spacing)));
143-
padding-right: 0;
123+
margin-left: 100%;
144124
}
145125

146-
#content.sidebar-shown > div:first-child {
147-
width: auto;
148-
}
149126
}
150127

151128
#content::after {

0 commit comments

Comments
 (0)