on master help sign in
Add vids to index
13736bdMatilde Park
static/scripts.js+22−20
@@ -165,11 +165,9 @@ function makeTeaser(body, terms) {
165function formatSearchResultTitle(item) {
165function formatSearchResultTitle(item) {
166 var pathArray = item.ref.split( '/' );
166 var pathArray = item.ref.split( '/' );
167
167
168− // first directory is in 4th element of split path array
169 var firstPartTitle = pathArray[3];
168 var firstPartTitle = pathArray[3];
170 let firstTitleCapitals = firstPartTitle.charAt(0).toUpperCase() + firstPartTitle.slice(1);
169 let firstTitleCapitals = firstPartTitle.charAt(0).toUpperCase() + firstPartTitle.slice(1);
171
170
172− // last directory is in 2nd to last element of array
173 var lastPartTitle = item.doc.title;
171 var lastPartTitle = item.doc.title;
174
172
175 var fullTitle = firstTitleCapitals + '<span class="gray1 dib pl2">' + ' / ' + lastPartTitle + '</span>';
173 var fullTitle = firstTitleCapitals + '<span class="gray1 dib pl2">' + ' / ' + lastPartTitle + '</span>';
@@ -390,22 +388,26 @@ window.addEventListener("scroll", event => {
390 link.classList.remove("current");
388 link.classList.remove("current");
391 }
389 }
392 });
390 });
391+})};
393
392
394− // this is honestly weird UX when selecting a link,
393+// homepage video load behaviour on mobile
395− // as every header flies open as you scroll.
394+
396− // for later discussion and experimentation --
395+
397− // may just need debouncing.
396+if (document.body.classList.contains("index")) {
398− // Also still working out the logic for closing other summary
397+ if( navigator.userAgent.match(/Android/i)
399− // headers as you scroll.
398+ || navigator.userAgent.match(/webOS/i)
400−
399+ || navigator.userAgent.match(/iPhone/i)
401−// headers.forEach(summary => {
400+ || navigator.userAgent.match(/iPad/i)
402−// let thisH2 = document.querySelector("h2#" + CSS.escape(summary.id));
401+ || navigator.userAgent.match(/iPod/i)
403−// if (
402+ || navigator.userAgent.match(/BlackBerry/i)
404−// (thisH2.offsetTop <= fromTop) &&
403+ || navigator.userAgent.match(/Windows Phone/i)
405−// (thisH2.offsetTop + thisH2.offsetHeight > fromTop)
404+ ){
406−// ) {
405+ } else {
407−// summary.parentElement.open = true;
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">`;
408−// }
412+ }
409−// })
410−//
411−})};
413+ }
templates/index.html+18−6
@@ -5,6 +5,7 @@ a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
5content: " ↗";
5content: " ↗";
6}
6}
7{% endblock templatestyles %}
7{% endblock templatestyles %}
8+{% block bodyclasses %}class="index"{% endblock bodyclasses %}
8
9
9{% block title %} {{ section.title }} {% endblock title %}
10{% block title %} {{ section.title }} {% endblock title %}
10
11
@@ -61,8 +62,14 @@ content: " ↗";
61
62
62<article class="full-bleed full grid12 mt6">
63<article class="full-bleed full grid12 mt6">
63
64
64− <section id="introduction" class="full tc pt7 pb7 mt4 mb4 ba b--black">
65+ <section id="introduction" class="full tl mt5 mb5 relative">
66+ <p class="absolute"
65− Urbit is a simple, durable computer that you own 100% and forever.
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>
66 </section>
73 </section>
67
74
68 <section id="intro-drawing" class="c4-10-md c4-10-lg full">
75 <section id="intro-drawing" class="c4-10-md c4-10-lg full">
@@ -106,10 +113,15 @@ content: " ↗";
106 </figure>
113 </figure>
107 </section>
114 </section>
108
115
109− <section id="vid-ocean" class="full tc pt7 pb7 mt4 mb4 ba b--black">
116+ <section id="vid-ocean" class="full tl mt5 mb5 relative">
117+ <p class="absolute white"
110− <p>Nothing quite like this has ever <br />
118+ style="top: 3%; left: 3%; z-index: 1;">Nothing quite like this has ever been done before,
111− been done before, <br />
112− and nothing is quite like it.</p>
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>
113 </section>
125 </section>
114
126
115 <section id="megacorp" class="c4-10-md c4-10-lg full">
127 <section id="megacorp" class="c4-10-md c4-10-lg full">