git.iko.soy/urbit.org
on master help sign in
VIdeo content text scales responsively
0476b0bMatilde Park
sass/_responsive.scss+15−2
compare with master
unifiedsplit
@@ -1,4 +1,3 @@
1−// The cascading isn't operating as expected using just indigo here. :(
2@media all and (min-width: 1260px) {
1@media all and (min-width: 1260px) {
3 nav.previous, nav.next {
2 nav.previous, nav.next {
4 width: auto !important;
3 width: auto !important;
@@ -12,11 +11,25 @@
12 }
11 }
13}
12}
14
13
15−// essay scaling below desktop
14+// scaling below desktop
16@media all and (max-width: 59em) {
15@media all and (max-width: 59em) {
17 body.essay {
16 body.essay {
18 article > *:not(figure) {
17 article > *:not(figure) {
19 grid-area: auto / 1 / auto / 13;
18 grid-area: auto / 1 / auto / 13;
20 }
19 }
21 }
20 }
21+}
22+
23+// custom L breakpoint classes
24+@media screen and (min-width: 46.875em) and (max-width: 60em) {
25+ .white-l {
26+ color: #fff;
27+ }
28+}
29+
30+// custom XL breakpoint classes
31+@media screen and (min-width: 60em) {
32+ .white-xl {
33+ color: #fff;
34+ }
22}
35}
templates/index.html+4−4
@@ -63,11 +63,11 @@ content: " ↗";
63<article class="full-bleed full grid12 mt6">
63<article class="full-bleed full grid12 mt6">
64
64
65 <section id="introduction" class="full tl mt5 mb5 relative">
65 <section id="introduction" class="full tl mt5 mb5 relative">
66− <p class="absolute"
66+ <p class="static mb4 mb0-l mb0-xl absolute-l absolute-xl black f2 f4-l f4-xl"
67 style="top: 3%; left: 3%; z-index: 1;">So, <em>your</em> Urbit is a simple, durable computer that you own 100% and forever.</p>
67 style="top: 3%; left: 3%; z-index: 1;">So, <em>your</em> Urbit is a simple, durable computer that you own 100% and forever.</p>
68 <video loop muted autoplay
68 <video loop muted autoplay
69 poster="https://media.urbit.org/site/understanding-urbit/landscape.png"
69 poster="https://media.urbit.org/site/understanding-urbit/landscape.png"
70− class="w-100 ba b--black"
70+ class="w-100 ba b--black dn db-l db-xl"
71 id="landscapevid">
71 id="landscapevid">
72 </video>
72 </video>
73 </section>
73 </section>
@@ -114,12 +114,12 @@ content: " ↗";
114 </section>
114 </section>
115
115
116 <section id="vid-ocean" class="full tl mt5 mb5 relative">
116 <section id="vid-ocean" class="full tl mt5 mb5 relative">
117− <p class="absolute white"
117+ <p class="static mb4 mb0-l mb0-xl absolute-l absolute-xl black white-l white-xl f2 f4-l f4-xl"
118 style="top: 3%; left: 3%; z-index: 1;">Nothing quite like this has ever been done before,
118 style="top: 3%; left: 3%; z-index: 1;">Nothing quite like this has ever been done before,
119 and nothing is quite like it.</p>
119 and nothing is quite like it.</p>
120 <video loop muted autoplay
120 <video loop muted autoplay
121 poster="https://media.urbit.org/site/understanding-urbit/ocean.png"
121 poster="https://media.urbit.org/site/understanding-urbit/ocean.png"
122− class="w-100 ba b--black"
122+ class="w-100 ba b--black dn db-l db-xl"
123 id="oceanvid">
123 id="oceanvid">
124 </video>
124 </video>
125 </section>
125 </section>