git.iko.soy/urbit.org
on master help sign in
replacing video-container % with vw
bf338e9Jimmy
sass/_main.scss+14−14
compare with master
unifiedsplit
@@ -8,31 +8,31 @@
8 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-extralight.woff");
8 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-extralight.woff");
9 font-weight: 200;
9 font-weight: 200;
10 }
10 }
11−
11+
12 @font-face {
12 @font-face {
13 font-family: "Source Code Pro";
13 font-family: "Source Code Pro";
14 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-light.woff");
14 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-light.woff");
15 font-weight: 300;
15 font-weight: 300;
16 }
16 }
17−
17+
18 @font-face {
18 @font-face {
19 font-family: "Source Code Pro";
19 font-family: "Source Code Pro";
20 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-regular.woff");
20 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-regular.woff");
21 font-weight: 400;
21 font-weight: 400;
22 }
22 }
23−
23+
24 @font-face {
24 @font-face {
25 font-family: "Source Code Pro";
25 font-family: "Source Code Pro";
26 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-medium.woff");
26 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-medium.woff");
27 font-weight: 500;
27 font-weight: 500;
28 }
28 }
29−
29+
30 @font-face {
30 @font-face {
31 font-family: "Source Code Pro";
31 font-family: "Source Code Pro";
32 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-bold.woff");
32 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-bold.woff");
33 font-weight: 600;
33 font-weight: 600;
34 }
34 }
35−
35+
36 @font-face {
36 @font-face {
37 font-family: "Source Code Pro";
37 font-family: "Source Code Pro";
38 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-black.woff");
38 src: url("https://storage.googleapis.com/media.urbit.org/fonts/scp-black.woff");
@@ -51,7 +51,7 @@ body {
51
51
52nav {
52nav {
53 font-size: 1rem;
53 font-size: 1rem;
54− line-height: 1.33;
54+ line-height: 1.33;
55 // If you need to flush the nav to break
55 // If you need to flush the nav to break
56 // the body's margin, use this:
56 // the body's margin, use this:
57 &.full-left {
57 &.full-left {
@@ -139,7 +139,7 @@ footer nav {
139 }
139 }
140}
140}
141
141
142−// essay template
142+// essay template
143
143
144body.essay {
144body.essay {
145 h1 {
145 h1 {
@@ -337,11 +337,11 @@ input[type="search"] {
337 }
337 }
338 }
338 }
339 }
339 }
340−
340+
341 .search-results {
341 .search-results {
342 max-height: 400px;
342 max-height: 400px;
343 ul {
343 ul {
344− position: relative;
344+ position: relative;
345 }
345 }
346 &__item a:hover {
346 &__item a:hover {
347 background: #F9F9F9;
347 background: #F9F9F9;
@@ -358,7 +358,7 @@ input[type="search"] {
358 .glossary-results__item {
358 .glossary-results__item {
359 padding: 0 1rem 0 1rem;
359 padding: 0 1rem 0 1rem;
360 &:hover {
360 &:hover {
361− background-color: #F9F9F9;
361+ background-color: #F9F9F9;
362 }
362 }
363 }
363 }
364
364
@@ -481,7 +481,7 @@ nav.docs:not(.mobile) {
481}
481}
482nav.docs details {
482nav.docs details {
483 summary {
483 summary {
484− @extend .fw4, .black, .mt2;
484+ @extend .fw4, .black, .mt2;
485 }
485 }
486 & > summary::before {
486 & > summary::before {
487 content: "› ";
487 content: "› ";
@@ -505,10 +505,10 @@ nav.docs details {
505
505
506.video-container {
506.video-container {
507 position: relative;
507 position: relative;
508− padding-bottom: 56.25%;
508+ padding-bottom: 56.25vw;
509 padding-top: 30px; height: 0; overflow: hidden;
509 padding-top: 30px; height: 0; overflow: hidden;
510}
510}
511−
511+
512.video-container iframe,
512.video-container iframe,
513.video-container object,
513.video-container object,
514.video-container embed {
514.video-container embed {
@@ -532,4 +532,4 @@ hr {
532
532
533.scroll-smooth {
533.scroll-smooth {
534 scroll-behavior: smooth;
534 scroll-behavior: smooth;
535−}
535+}
templates/index.html+3−6
@@ -16,13 +16,10 @@ style=" z-index: 2;">
16Urbit is your last computer.
16Urbit is your last computer.
17</h1>
17</h1>
18
18
19−<section class="full w-100 video-container bg-black full-bleed relative" id="video" style="
19+<section class="full video-container bg-black full-bleed relative" id="video" style="
20− width: 130%;
21− margin-left: -20%;
22">
20">
23− <iframe src="https://player.vimeo.com/video/365181756?background=1"
21+ <iframe src="https://player.vimeo.com/video/365181756?background=1"
24 class="w-100 ma0 h-100" frameborder="0" allow="autoplay;fullscreen" allowfullscreen="" style="
22 class="w-100 ma0 h-100" frameborder="0" allow="autoplay;fullscreen" allowfullscreen="" style="
25− height: 130%; z-index: 1;
26"></iframe>
23"></iframe>
27</section>
24</section>
28
25
@@ -66,7 +63,7 @@ Urbit is your last computer.
66 <nav class="full grid12 mt4 mb6">
63 <nav class="full grid12 mt4 mb6">
67 <section class="full c4-7-lg">
64 <section class="full c4-7-lg">
68 <h1>Understanding Urbit</h1>
65 <h1>Understanding Urbit</h1>
69− <p class="lh-copy mt1">For a quick explanation of what Urbit is and how Urbit works, see the <a href="/understanding-urbit">introduction</a>.
66+ <p class="lh-copy mt1">For a quick explanation of what Urbit is and how Urbit works, see the <a href="/understanding-urbit">introduction</a>.
70 If you're more technical, feel free to skip ahead to the <a href="/understanding-urbit/technical-overview">technical overview.</a></p>
67 If you're more technical, feel free to skip ahead to the <a href="/understanding-urbit/technical-overview">technical overview.</a></p>
71 <ul class="full c4-7-lg">
68 <ul class="full c4-7-lg">
72 {% set posts = get_section(path="understanding-urbit/_index.md") %}
69 {% set posts = get_section(path="understanding-urbit/_index.md") %}