git.iko.soy/urbit.org
on master help sign in
divide all rems by 4 to fix Chrome rendering bug
4c79d45Morgan Sutherland
sass/_main.scss+62−62
compare with master
unifiedsplit
@@ -4,8 +4,8 @@
4
4
5body {
5body {
6 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
6 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7− font-size: 3.5rem;
7+ font-size: (3.5rem / 4);
8− line-height: 6rem;
8+ line-height: (6rem / 4);
9 color: #000000;
9 color: #000000;
10}
10}
11
11
@@ -14,7 +14,7 @@ a {
14}
14}
15
15
16p img {
16p img {
17− margin: 4rem 0;
17+ margin: (4rem / 4) 0;
18 width: 100%;
18 width: 100%;
19}
19}
20
20
@@ -27,34 +27,34 @@ iframe {
27 */
27 */
28
28
29.main-wrapper {
29.main-wrapper {
30− margin-top: 24rem;
30+ margin-top: (24rem / 4);
31}
31}
32
32
33.wrapper {
33.wrapper {
34 position: relative;
34 position: relative;
35 margin: 0 auto;
35 margin: 0 auto;
36− padding: 0 2rem;
36+ padding: 0 (2rem / 4);
37 max-width: 960px;
37 max-width: 960px;
38}
38}
39
39
40.container {
40.container {
41 display: flex;
41 display: flex;
42− padding-bottom: 32rem;
42+ padding-bottom: (32rem / 4);
43}
43}
44
44
45.container--fixed {
45.container--fixed {
46 position: fixed;
46 position: fixed;
47− margin-top: -24rem;
47+ margin-top: -(24rem / 4);
48}
48}
49
49
50.content-nav {
50.content-nav {
51 width: 20%;
51 width: 20%;
52 min-width: 200px;
52 min-width: 200px;
53− padding-right: 1rem;
53+ padding-right: (1rem / 4);
54− margin-top: 24rem;
54+ margin-top: (24rem / 4);
55 &__item {
55 &__item {
56− line-height: 8rem;
56+ line-height: (8rem / 4);
57− margin-bottom: 1rem;
57+ margin-bottom: (1rem / 4);
58 }
58 }
59 li {
59 li {
60 font-size: inherit;
60 font-size: inherit;
@@ -64,8 +64,8 @@ iframe {
64
64
65.content-nav-icon {
65.content-nav-icon {
66 position: fixed;
66 position: fixed;
67− left: 2rem;
67+ left: (2rem / 4);
68− top: 24rem;
68+ top: (24rem / 4);
69 width: 10px;
69 width: 10px;
70 height: 10px;
70 height: 10px;
71 cursor: pointer;
71 cursor: pointer;
@@ -85,7 +85,7 @@ iframe {
85 .content-nav {
85 .content-nav {
86 overflow-y: scroll;
86 overflow-y: scroll;
87 .list:first-child {
87 .list:first-child {
88− padding-bottom: 14rem;
88+ padding-bottom: (14rem / 4);
89 }
89 }
90 .list li:last-child .subsub-list li:last-child {
90 .list li:last-child .subsub-list li:last-child {
91 padding-bottom: 0;
91 padding-bottom: 0;
@@ -96,10 +96,10 @@ iframe {
96.content-nav-spacer {
96.content-nav-spacer {
97 width: 20%;
97 width: 20%;
98 min-width: 200px;
98 min-width: 200px;
99− padding-right: 5rem;
99+ padding-right: (5rem / 4);
100 &__item {
100 &__item {
101− line-height: 8rem;
101+ line-height: (8rem / 4);
102− margin-bottom: 1rem;
102+ margin-bottom: (1rem / 4);
103 }
103 }
104}
104}
105
105
@@ -111,7 +111,7 @@ iframe {
111.content {
111.content {
112 position: relative;
112 position: relative;
113 z-index: 3;
113 z-index: 3;
114− margin-top: -16rem;
114+ margin-top: -(16rem / 4);
115}
115}
116
116
117.content-nav-icon {
117.content-nav-icon {
@@ -130,12 +130,12 @@ iframe {
130}
130}
131
131
132.sub-list {
132.sub-list {
133− padding-left: 4rem;
133+ padding-left: (4rem / 4);
134 .sub-list {
134 .sub-list {
135 padding-left: 0;
135 padding-left: 0;
136 }
136 }
137 .subsub-list {
137 .subsub-list {
138− padding-left: 4rem;
138+ padding-left: (4rem / 4);
139 }
139 }
140}
140}
141
141
@@ -150,12 +150,12 @@ iframe {
150 display: flex;
150 display: flex;
151 justify-content: flex-start;
151 justify-content: flex-start;
152 .list__item {
152 .list__item {
153− margin-right: 4rem;
153+ margin-right: (4rem / 4);
154 }
154 }
155}
155}
156
156
157.body-regular {
157.body-regular {
158− margin-bottom: 7rem;
158+ margin-bottom: (7rem / 4);
159}
159}
160
160
161.video-wrapper {
161.video-wrapper {
@@ -179,7 +179,7 @@ iframe {
179
179
180.header {
180.header {
181 position: fixed;
181 position: fixed;
182− height: 24rem;
182+ height: (24rem / 4);
183 width: 100%;
183 width: 100%;
184 z-index: 2;
184 z-index: 2;
185 top: 0;
185 top: 0;
@@ -192,24 +192,24 @@ iframe {
192 supported by Chrome and Opera */
192 supported by Chrome and Opera */
193 &__navigation {
193 &__navigation {
194 display: none;
194 display: none;
195− padding-top: 9rem;
195+ padding-top: (9rem / 4);
196 }
196 }
197 &__nav-icon {
197 &__nav-icon {
198 position: absolute;
198 position: absolute;
199− margin-left: 2rem;
199+ margin-left: (2rem / 4);
200− width: 6rem;
200+ width: (6rem / 4);
201− height: 10rem;
201+ height: (10rem / 4);
202 left: 0;
202 left: 0;
203− top: 6rem;
203+ top: (6rem / 4);
204 z-index: 3;
204 z-index: 3;
205 cursor: pointer;
205 cursor: pointer;
206 &:before, &:after {
206 &:before, &:after {
207 content: '';
207 content: '';
208 position: absolute;
208 position: absolute;
209 width: 100%;
209 width: 100%;
210− height: 1rem;
210+ height: (1rem / 4);
211 background: #000;
211 background: #000;
212− margin-bottom: 4rem;
212+ margin-bottom: (4rem / 4);
213 top: 50%;
213 top: 50%;
214 left: 0;
214 left: 0;
215 transform-origin: 50%;
215 transform-origin: 50%;
@@ -256,7 +256,7 @@ iframe {
256.posts {
256.posts {
257 &__content {
257 &__content {
258 z-index: 3;
258 z-index: 3;
259− margin-left: -8rem;
259+ margin-left: -(8rem / 4);
260 }
260 }
261}
261}
262
262
@@ -284,10 +284,10 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {
284button, .btn {
284button, .btn {
285 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
285 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
286 font-weight: 500;
286 font-weight: 500;
287− font-size: 4rem;
287+ font-size: (4rem / 4);
288− line-height: 4rem;
288+ line-height: (4rem / 4);
289 user-select: none;
289 user-select: none;
290− padding: 3rem 6rem;
290+ padding: (3rem /4) (6rem / 4);
291 margin: 0 0 6px;
291 margin: 0 0 6px;
292 border: none;
292 border: none;
293 cursor: pointer;
293 cursor: pointer;
@@ -348,59 +348,59 @@ h1, h2, h3, h4 {
348 font-weight: 700;
348 font-weight: 700;
349}
349}
350h1 {
350h1 {
351− font-size: 8rem;
351+ font-size: (8rem / 4);
352− line-height: 8rem;
352+ line-height: (8rem / 4);
353}
353}
354h2 {
354h2 {
355− font-size: 6rem;
355+ font-size: (6rem / 4);
356− line-height: 6rem;
356+ line-height: (6rem / 4);
357}
357}
358h3 {
358h3 {
359− font-size: 5rem;
359+ font-size: (5rem / 4);
360− line-height: 5rem;
360+ line-height: (5rem / 4);
361}
361}
362h4 {
362h4 {
363− font-size: 4.5rem;
363+ font-size: (4.5rem / 4);
364− line-height: 4.5rem;
364+ line-height: (4.5rem / 4);
365}
365}
366h5 {
366h5 {
367− font-size: 4rem;
367+ font-size: (4rem / 4);
368− line-height: 4rem;
368+ line-height: (4rem / 4);
369}
369}
370
370
371.article {
371.article {
372 h1 {
372 h1 {
373− margin-bottom: 7rem;
373+ margin-bottom: (7rem / 4);
374 }
374 }
375 h2 {
375 h2 {
376− margin-top: 8rem;
376+ margin-top: (8rem / 4);
377− margin-bottom: 4rem;
377+ margin-bottom: (4rem / 4);
378 }
378 }
379 h3 {
379 h3 {
380− margin-top: 7rem;
380+ margin-top: (7rem / 4);
381− margin-bottom: 3rem;
381+ margin-bottom: (3rem / 4);
382 }
382 }
383 h4 {
383 h4 {
384− margin-top: 6.5rem;
384+ margin-top: (6.5rem / 4);
385− margin-bottom: 2.5rem;
385+ margin-bottom: (2.5rem / 4);
386 }
386 }
387 h5 {
387 h5 {
388− margin-top: 6rem;
388+ margin-top: (6rem / 4);
389− margin-bottom: 2rem;
389+ margin-bottom: (2rem / 4);
390 }
390 }
391}
391}
392
392
393li {
393li {
394− font-size: 4rem;
394+ font-size: (4rem / 4);
395− line-height: 8rem;
395+ line-height: (8rem / 4);
396 font-weight: 400;
396 font-weight: 400;
397}
397}
398
398
399p, .p {
399p, .p {
400− font-size: 4rem;
400+ font-size: (4rem / 4);
401 font-weight: 400;
401 font-weight: 400;
402− line-height: 8rem;
402+ line-height: (8rem / 4);
403− margin: 0 0 4rem;
403+ margin: (0 0 4rem / 4);
404}
404}
405
405
406pre, code {
406pre, code {
@@ -412,15 +412,15 @@ pre, code {
412 span {
412 span {
413 color: #000 !important;
413 color: #000 !important;
414 }
414 }
415− padding: 1rem;
415+ padding: (1rem / 4);
416− font-size: 4rem;
416+ font-size: (4rem / 4);
417}
417}
418
418
419textarea, input[type="text"], input[type="email"], input[type="number"] {
419textarea, input[type="text"], input[type="email"], input[type="number"] {
420 border: 1px solid #B1B2B3;
420 border: 1px solid #B1B2B3;
421 font-family: "Source Code Pro", mono;
421 font-family: "Source Code Pro", mono;
422− font-size: 4rem;
422+ font-size: (4rem / 4);
423− line-height: 6rem;
423+ line-height: (6rem / 4);
424 transition: all 0.1s linear;
424 transition: all 0.1s linear;
425 padding-right: 40px;
425 padding-right: 40px;
426 position: relative;
426 position: relative;
sass/_responsive.scss+3−3
@@ -17,7 +17,7 @@
17 max-width: 90%;
17 max-width: 90%;
18 }
18 }
19 .posts__content {
19 .posts__content {
20− margin-left: 8rem;
20+ margin-left: (8rem / 4);
21 }
21 }
22 .no-side-nav-column {
22 .no-side-nav-column {
23 flex-basis: 66.66666667%;
23 flex-basis: 66.66666667%;
@@ -54,13 +54,13 @@
54 width: 100%;
54 width: 100%;
55 top: 0;
55 top: 0;
56 left: 0;
56 left: 0;
57− padding: 0 4rem;
57+ padding: 0 (4rem / 4);
58 background: white;
58 background: white;
59 overflow-y: scroll;
59 overflow-y: scroll;
60 }
60 }
61 .content-nav {
61 .content-nav {
62 display: block;
62 display: block;
63− margin: 7rem;
63+ margin: (7rem) / 4;
64 overflow: initial;
64 overflow: initial;
65 }
65 }
66 .content-nav-icon {
66 .content-nav-icon {
sass/indigo.scss+6014−6017

This diff is too big to show here.