git.iko.soy/urbit.org
on master help sign in
Add vids to index
commit13736bdbf409c86cc10c4d069b9c76c86238b95f authorMatilde Park <matilde@tlon.io> dateThu 3 Oct 2019, 17:53 (7 years ago) parent4dab374
2 files changed+40−26
compare with master
unifiedsplit
static/scripts.js+22−20 templates/index.html+18−6
static/scripts.js+22−20
@@ -165,11 +165,9 @@ function makeTeaser(body, terms) {
165165function formatSearchResultTitle(item) {
166166 var pathArray = item.ref.split( '/' );
167167
168− // first directory is in 4th element of split path array
169168 var firstPartTitle = pathArray[3];
170169 let firstTitleCapitals = firstPartTitle.charAt(0).toUpperCase() + firstPartTitle.slice(1);
171170
172− // last directory is in 2nd to last element of array
173171 var lastPartTitle = item.doc.title;
174172
175173 var fullTitle = firstTitleCapitals + '<span class="gray1 dib pl2">' + ' / ' + lastPartTitle + '</span>';
@@ -390,22 +388,26 @@ window.addEventListener("scroll", event => {
390388 link.classList.remove("current");
391389 }
392390 });
391+})};
393392
394− // this is honestly weird UX when selecting a link,
395− // as every header flies open as you scroll.
396− // for later discussion and experimentation --
397− // may just need debouncing.
398− // Also still working out the logic for closing other summary
399− // headers as you scroll.
400−
401−// headers.forEach(summary => {
402−// let thisH2 = document.querySelector("h2#" + CSS.escape(summary.id));
403−// if (
404−// (thisH2.offsetTop <= fromTop) &&
405−// (thisH2.offsetTop + thisH2.offsetHeight > fromTop)
406−// ) {
407−// summary.parentElement.open = true;
408−// }
409−// })
410−//
411−})};
393+// homepage video load behaviour on mobile
394+
395+
396+if (document.body.classList.contains("index")) {
397+ if( navigator.userAgent.match(/Android/i)
398+ || navigator.userAgent.match(/webOS/i)
399+ || navigator.userAgent.match(/iPhone/i)
400+ || navigator.userAgent.match(/iPad/i)
401+ || navigator.userAgent.match(/iPod/i)
402+ || navigator.userAgent.match(/BlackBerry/i)
403+ || navigator.userAgent.match(/Windows Phone/i)
404+ ){
405+ } else {
406+ document.getElementById("landscapevid").innerHTML = `
407+ <source src="https://media.urbit.org/site/understanding-urbit/landscape.webm" type="video/webm">
408+ <source src="https://media.urbit.org/site/understanding-urbit/landscape.mp4" type="video/mp4">`;
409+ document.getElementById("oceanvid").innerHTML = `
410+ <source src="https://media.urbit.org/site/understanding-urbit/ocean.webm" type="video/webm">
411+ <source src="https://media.urbit.org/site/understanding-urbit/ocean.mp4" type="video/mp4">`;
412+ }
413+ }
templates/index.html+18−6
@@ -5,6 +5,7 @@ a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
55content: " ↗";
66}
77{% endblock templatestyles %}
8+{% block bodyclasses %}class="index"{% endblock bodyclasses %}
89
910{% block title %} {{ section.title }} {% endblock title %}
1011
@@ -61,8 +62,14 @@ content: " ↗";
6162
6263<article class="full-bleed full grid12 mt6">
6364
64− <section id="introduction" class="full tc pt7 pb7 mt4 mb4 ba b--black">
65− Urbit is a simple, durable computer that you own 100% and forever.
65+ <section id="introduction" class="full tl mt5 mb5 relative">
66+ <p class="absolute"
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
69+ poster="https://media.urbit.org/site/understanding-urbit/landscape.png"
70+ class="w-100 ba b--black"
71+ id="landscapevid">
72+ </video>
6673 </section>
6774
6875 <section id="intro-drawing" class="c4-10-md c4-10-lg full">
@@ -106,10 +113,15 @@ content: " ↗";
106113 </figure>
107114 </section>
108115
109− <section id="vid-ocean" class="full tc pt7 pb7 mt4 mb4 ba b--black">
110− <p>Nothing quite like this has ever <br />
111− been done before, <br />
112− and nothing is quite like it.</p>
116+ <section id="vid-ocean" class="full tl mt5 mb5 relative">
117+ <p class="absolute white"
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>
120+ <video loop muted autoplay
121+ poster="https://media.urbit.org/site/understanding-urbit/ocean.png"
122+ class="w-100 ba b--black"
123+ id="oceanvid">
124+ </video>
113125 </section>
114126
115127 <section id="megacorp" class="c4-10-md c4-10-lg full">