Commit 4d18c31c authored by i❤computers's avatar i❤computers
Browse files

* Rewrite text a bit to have better reading flow

* Don't highlight some text, but also allow user to play from that point
 of the article.
* Fine tune stylings
parent 5dd4771b
...@@ -24,14 +24,13 @@ ...@@ -24,14 +24,13 @@
} }
aside { aside {
text-align: center;
height: 2.5em; height: 2.5em;
} }
article { article {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
background-color: rgb(255, 233, 125); background-color: rgb(255, 233, 125);
padding: 0.5em; padding: 2em;
} }
article:after { article:after {
...@@ -43,19 +42,22 @@ ...@@ -43,19 +42,22 @@
article header { article header {
float: left; float: left;
text-align: center; text-align: center;
margin: 0 30px; margin: -2em 2em 2em -2em;
} }
h1 { h1 {
font-size: 2.5em; font-size: 3em;
}
h2 {
font-size: 2em;
} }
p { p {
font-size: 1.9em; font-size: 1.7em;
margin: 0;
} }
span { span:not([data-highlight="false"]) {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12) 50%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12) 50%);
background-size: 200%; background-size: 200%;
transition: background .4s; /* make sure transition time matches MAX_TRANSITION_TIME in script.js */ transition: background .4s; /* make sure transition time matches MAX_TRANSITION_TIME in script.js */
...@@ -83,7 +85,11 @@ ...@@ -83,7 +85,11 @@
} }
h1 { h1 {
font-size: 1.6em; font-size: 2em;
}
h2 {
font-size: 1.5em;
} }
p { p {
...@@ -379,16 +385,14 @@ ...@@ -379,16 +385,14 @@
<button>Play ▶️ the article from the beginning</button> or click anywhere in the text to start playing from that point. <button>Play ▶️ the article from the beginning</button> or click anywhere in the text to start playing from that point.
</aside> </aside>
<h1> <h1>
<span data-cue-position="7">The </span> <span data-cue-position="8">5 </span>
<span data-cue-position="8">five </span> <span data-cue-position="10">Principles </span>
<span data-cue-position="9">basic </span>
<span data-cue-position="10">principles </span>
<span data-cue-position="11">of </span> <span data-cue-position="11">of </span>
<span data-cue-position="12">flag </span> <span data-cue-position="12">Flag </span>
<span data-cue-position="13">design </span> <span data-cue-position="13">Design </span>
</h1> </h1>
<p> <p>
<span data-cue-position="7">The </span> <span data-cue-position="7" data-highlight="false">There are</span>
<span data-cue-position="8">five </span> <span data-cue-position="8">five </span>
<span data-cue-position="9">basic </span> <span data-cue-position="9">basic </span>
<span data-cue-position="10">principles </span> <span data-cue-position="10">principles </span>
...@@ -399,12 +403,12 @@ ...@@ -399,12 +403,12 @@
<span data-cue-position="15">to the </span> <span data-cue-position="15">to the </span>
<span data-cue-position="16">North American </span> <span data-cue-position="16">North American </span>
<span data-cue-position="17">Vexillological </span> <span data-cue-position="17">Vexillological </span>
<span data-cue-position="19">(Vex-</span><span data-cue-position="20">illo-</span><span <span data-cue-position="19">(Vex-il</span><span data-cue-position="20">-lol-</span><span
data-cue-position="21">logical. </span> data-cue-position="21">logical. </span>
<span data-cue-position="26">It&#39;s the </span> <span data-cue-position="26" data-highlight="false">That</span>
<span data-cue-position="27">extra </span> <span data-cue-position="27">extra </span>
<span data-cue-position="28">&#39;lol&#39; </span> <span data-cue-position="28">&#39;lol&#39; </span>
<span data-cue-position="29">that makes </span> <span data-cue-position="29">makes </span>
<span data-cue-position="30">it sound </span> <span data-cue-position="30">it sound </span>
<span data-cue-position="31">weird) </span> <span data-cue-position="31">weird) </span>
<span data-cue-position="18">Association. </span> <span data-cue-position="18">Association. </span>
...@@ -413,12 +417,11 @@ ...@@ -413,12 +417,11 @@
<span data-cue-position="24">study of </span> <span data-cue-position="24">study of </span>
<span data-cue-position="25">flags. </span> <span data-cue-position="25">flags. </span>
</p> </p>
<h1> <h2>
<span data-cue-position="32">Number </span> <span data-cue-position="32">#</span><span data-cue-position="33">1: </span>
<span data-cue-position="33">one: </span>
<span data-cue-position="34">Keep </span> <span data-cue-position="34">Keep </span>
<span data-cue-position="35">it simple. </span> <span data-cue-position="35">it simple</span>
</h1> </h2>
<p> <p>
<span data-cue-position="36">The flag </span> <span data-cue-position="36">The flag </span>
<span data-cue-position="37">should be </span> <span data-cue-position="37">should be </span>
...@@ -427,6 +430,8 @@ ...@@ -427,6 +430,8 @@
<span data-cue-position="40">child </span> <span data-cue-position="40">child </span>
<span data-cue-position="41">can draw it </span> <span data-cue-position="41">can draw it </span>
<span data-cue-position="42">from memory. </span> <span data-cue-position="42">from memory. </span>
</p>
<p>
<span data-cue-position="43">Before I </span> <span data-cue-position="43">Before I </span>
<span data-cue-position="44">moved to </span> <span data-cue-position="44">moved to </span>
<span data-cue-position="45">Chicago, </span> <span data-cue-position="45">Chicago, </span>
...@@ -568,15 +573,15 @@ ...@@ -568,15 +573,15 @@
Wikipedia</a>). Wikipedia</a>).
</figcaption> </figcaption>
</figure> </figure>
<h1> <h2>
<span data-cue-position="95">Number </span> <span data-cue-position="95">#</span><span data-cue-position="96">2: </span>
<span data-cue-position="96">two: </span>
<span data-cue-position="103">Use </span> <span data-cue-position="103">Use </span>
<span data-cue-position="104">meaningful </span> <span data-cue-position="104">meaningful </span>
<span data-cue-position="105">symbolism. </span> <span data-cue-position="105">symbolism</span>
</h1> </h2>
<p> <p>
<span data-cue-position="97">The </span> <span data-cue-position="97" data-highlight="false">In the Chicago flag, </span>
<span data-cue-position="97">the </span>
<span data-cue-position="98">blue </span> <span data-cue-position="98">blue </span>
<span data-cue-position="99">stripes </span> <span data-cue-position="99">stripes </span>
<span data-cue-position="100">represent </span> <span data-cue-position="100">represent </span>
......
...@@ -110,7 +110,7 @@ document.addEventListener('DOMContentLoaded', function initializePage() { ...@@ -110,7 +110,7 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
} }
function cuePositionSelector(id) { function cuePositionSelector(id) {
return "[data-cue-position='" + id + "']" return "[data-cue-position='" + id + "']:not([data-highlight='false'])"
} }
function addHighlightClass($cueElement) { function addHighlightClass($cueElement) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment