git.iko.soy/urbit.org
on master help sign in
VIdeo content text scales responsively
commit0476b0b67e200d722aa4369a978663bbdc42f8cb authorMatilde Park <matilde@tlon.io> dateThu 3 Oct 2019, 20:56 (7 years ago) parentda55f27
2 files changed+19−6
compare with master
unifiedsplit
sass/_responsive.scss+15−2 templates/index.html+4−4
sass/_responsive.scss+15−2
@@ -1,4 +1,3 @@
1−// The cascading isn't operating as expected using just indigo here. :(
21@media all and (min-width: 1260px) {
32 nav.previous, nav.next {
43 width: auto !important;
@@ -12,11 +11,25 @@
1211 }
1312}
1413
15−// essay scaling below desktop
14+// scaling below desktop
1615@media all and (max-width: 59em) {
1716 body.essay {
1817 article > *:not(figure) {
1918 grid-area: auto / 1 / auto / 13;
2019 }
2120 }
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+ }
2235}
templates/index.html+4−4
@@ -63,11 +63,11 @@ content: " ↗";
6363<article class="full-bleed full grid12 mt6">
6464
6565 <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"
6767 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>
6868 <video loop muted autoplay
6969 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"
7171 id="landscapevid">
7272 </video>
7373 </section>
@@ -114,12 +114,12 @@ content: " ↗";
114114 </section>
115115
116116 <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"
118118 style="top: 3%; left: 3%; z-index: 1;">Nothing quite like this has ever been done before,
119119 and nothing is quite like it.</p>
120120 <video loop muted autoplay
121121 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"
123123 id="oceanvid">
124124 </video>
125125 </section>