|
1 | 1 | #main {
|
2 |
| - overflow: scroll; |
| 2 | + width: calc(100vw - 313px); |
3 | 3 | height: 100%;
|
| 4 | + overflow-y: scroll; |
| 5 | + overflow-x: hidden; |
| 6 | + position: absolute; |
| 7 | + right: 0; |
| 8 | + scroll-behavior: smooth; |
4 | 9 | }
|
5 | 10 |
|
6 | 11 | #content {
|
7 |
| - margin-left: calc(39 * var(--base-spacing)); |
8 | 12 | display: flex;
|
9 | 13 | flex-flow: row;
|
10 | 14 | 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; |
15 | 26 | }
|
16 | 27 |
|
17 | 28 | #content > div:first-child {
|
18 |
| - overflow: clip; |
19 |
| - padding-left: 28px; |
| 29 | + width: calc(100vw - 232px - 313px - 68px * 3); |
| 30 | + max-width: 720px; |
20 | 31 | }
|
21 | 32 |
|
22 | 33 |
|
23 | 34 | #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; |
28 | 39 | }
|
29 | 40 |
|
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) { |
35 | 42 |
|
36 |
| - #content > div:first-child { |
37 |
| - width: calc(90 * var(--base-spacing)); |
| 43 | + #content { |
| 44 | + justify-content: left; |
| 45 | + padding-left: 294px; |
38 | 46 | }
|
39 | 47 | }
|
40 | 48 |
|
41 | 49 | @media (max-width: 1920px) {
|
| 50 | + |
42 | 51 | #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)); |
47 | 52 | justify-content: center;
|
48 |
| - float: right; |
49 | 53 | }
|
| 54 | + |
50 | 55 | #content > div:first-child {
|
51 |
| - width: calc(90 * var(--base-spacing)); |
| 56 | + padding: 0; |
52 | 57 | }
|
53 | 58 | }
|
54 | 59 |
|
55 | 60 | @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 |
| -} |
69 | 61 |
|
70 |
| -@media (max-width: 1376px) { |
71 | 62 | #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; |
79 | 66 | }
|
| 67 | + |
80 | 68 | #content > div:first-child {
|
81 |
| - width: auto; |
| 69 | + width: calc(100vw - 232px - 313px - 48px * 3); |
82 | 70 | }
|
83 | 71 | }
|
84 | 72 |
|
85 | 73 | @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; |
91 | 79 | }
|
92 | 80 |
|
93 | 81 | #content > div:first-child {
|
94 |
| - width: calc(100% - calc(29 * var(--base-spacing))); |
| 82 | + width: calc(100vw - 232px - 48px * 3); |
95 | 83 | }
|
96 | 84 |
|
97 | 85 | #content.sidebar-shown {
|
98 |
| - width: calc(100% - calc(51 * var(--base-spacing))); |
99 |
| - padding-right: 0; |
| 86 | + margin-left: 313px; |
100 | 87 | }
|
101 | 88 |
|
102 |
| - #content.sidebar-shown > div:first-child { |
103 |
| - width: auto; |
104 |
| - } |
105 | 89 | }
|
106 | 90 |
|
107 | 91 | @media (max-width: 768px) {
|
| 92 | + |
108 | 93 | #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)); |
113 | 95 | }
|
114 | 96 |
|
115 | 97 | #content > div:first-child {
|
116 |
| - width: auto; |
| 98 | + width: calc(100vw - 48px * 2); |
117 | 99 | }
|
118 | 100 |
|
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) { |
123 | 104 |
|
124 |
| - #content.sidebar-shown > div:first-child { |
125 |
| - width: auto; |
| 105 | + #content { |
| 106 | + padding-bottom: 0; |
126 | 107 | }
|
| 108 | + |
127 | 109 | }
|
128 | 110 |
|
129 | 111 | @media (max-width: 428px) {
|
| 112 | + |
130 | 113 | #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; |
135 | 116 | }
|
136 | 117 |
|
137 | 118 | #content > div:first-child {
|
138 |
| - width: auto; |
| 119 | + width: calc(100vw - 32px * 2); |
139 | 120 | }
|
140 | 121 |
|
141 | 122 | #content.sidebar-shown {
|
142 |
| - width: calc(100% - calc(51 * var(--base-spacing))); |
143 |
| - padding-right: 0; |
| 123 | + margin-left: 100%; |
144 | 124 | }
|
145 | 125 |
|
146 |
| - #content.sidebar-shown > div:first-child { |
147 |
| - width: auto; |
148 |
| - } |
149 | 126 | }
|
150 | 127 |
|
151 | 128 | #content::after {
|
|
0 commit comments