latest additions

.gitignore

@@ -21,6 +21,7 @@
 
 # Ignore changes on the application config.
 /config/gitlab.yml
+/config/application.rb
 
 Gemfile.lock
 /public/

app/assets/javascripts/parallax.coffee

@@ -39,9 +39,12 @@ App.scroll = ->
 		bg_pos = -((v_scroll-(section*$(window).innerHeight()))/2)
 		section_element = $($(".section")[section])
 		if section_element and section_element.css("background-image") != "none"
+			content = section_element.find(".content")
+			content.css("display", "none")
 			section_element.css(
 				"background-position",
 				"center " + bg_pos + "px")
+			content.css("display", "block")
 
 $(document).on "page:change", ->
 	App.init()

app/assets/stylesheets/welcome.scss

@@ -123,21 +123,23 @@ p {
 	width: 100%;
 	height: 100%;
 }
-#section1 .content ,#section3, .content, #section5 .content {
+#section1 .content, #section3 .content, #section5 .content {
 	color: rgb(214,206,204);
-	background-position: center top;
 }
 #section2, #section4, #section6 {
 	background-color: rgb(255,255,255);
 }
 #section1 {
 	background: image_url("resized/blown.jpg") fixed;
+	background-position: center top;
 }
 #section3 {
 	background: image_url("resized/beach3.jpg") fixed;
+	background-position: center top;
 }
 #section5 {
 	background: image_url("resized/robin.jpg") fixed;
+	background-position: center top;
 }
 
 #footer {
@@ -172,17 +174,19 @@ p {
 	overflow: hidden;
 	box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
 }
-#weird {
+#weird, #web {
 	position: relative;
 	width: 70%;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
-#weird .textbox {
+#weird .textbox, #web .textbox {
+	padding: 10px;
 	overflow: hidden;
 	box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
 	text-align: justify;
+	width: 100%;
 }
 
 .textbox {
@@ -218,7 +222,7 @@ p {
 }
 .section .watermark {
 	position: absolute;
-	opacity: 0.08;
+	opacity: 0.02;
 	width: 60%;
 	top: 50%;
 	left: 50%;
@@ -298,10 +302,10 @@ p {
 
 .dictionary {
 	position: relative;
-	width: 70%;
+	width: 60%;
 	left: 50%;
 	transform: translate(-50%, 0);
-	font-size: small;
+	font-size: x-small;
 }
 .dictionary .headword {
 	display: inline-block;
@@ -333,6 +337,10 @@ p {
 	text-decoration: underline;
 	font-family: serif;
 }
+.dictionary ol.fifth {
+	counter-reset: section 4;
+	list-style-type: none;
+}
 .dictionary ol {
 	counter-reset: section;
 	list-style-type: none;

app/views/welcome/index.html.erb

@@ -77,7 +77,6 @@
 		<div id="weird">
 			<div class="textbox">
 				<h1>WEIRD</h1>
-				<div class="separator"></div>
 				<div class="dictionary">
 					<div class="headword">weird <i>adj.</i></div>
 					<div class="pronounciation">/'wɪəd/</div>
@@ -101,14 +100,13 @@
 							the Fates.
 						</li>
 					</ol>
+					Taken from
+					<a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
+					Phonetics from
+					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
+						PhoTransEdit
+					</a>
 				</div>
-				<div class="separator"></div>
-				Taken from
-				<a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
-				Phonetics from
-				<a href="http://www.photransedit.com/online/text2phonetics.aspx">
-					PhoTransEdit
-				</a>
 			</div>
 		</div>
 	</div>
@@ -140,37 +138,25 @@
 </div>
 <div id="section5" class="section">
 	<div class="content">
-		<div id="weird">
+		<div id="web">
 			<div class="textbox">
 				<h1>WEB</h1>
-				<div class="separator"></div>
 				<div class="dictionary">
 					<div class="headword">web <i>n.</i></div>
 					<div class="pronounciation">/web/</div>
-					<ol class="sense">
+					<ol start="1" class="sense">
 						<li>&nbsp;
 							<ol>
 								<li>
-									A woven fabric, especially one on a loom or just removed from
-									it.
+									A woven fabric, especially one on a loom or just removed
+									from it.
 								</li>
 								<li>The structural part of cloth.</li>
 							</ol>
 						</li>
-						<li>
-							A latticed or woven structure:
-							<span class="example">
-								A web of palm branches formed the roof of the hut.
-							</span>
-						</li>
-						<li>
-							A structure of delicate, threadlike filaments characteristically
-							spun by spiders or certain insect larvae.
-						</li>
-						<li>
-							Something intricately contrived, especially something that ensnares
-							or entangles: <span class="example">caught in a web of lies.</span>
-						</li>
+					</ol>
+					<p>&hellip;</p>
+					<ol class="sense fifth">
 						<li>
 							A complex, interconnected structure or arrangement:
 							<span class="example">a web of telephone wires.</span>
@@ -178,49 +164,15 @@
 						<li>
 							often Web The World Wide Web.
 						</li>
-						<li>
-							A radio or television network.
-						</li>
-						<li>
-							A membrane or fold of skin connecting the toes, as of certain
-							amphibians, birds, and mammals.
-						</li>
-						<li>
-							The barbs on each side of the shaft of a bird's feather; a vane.
-						</li>
-						<li>
-							<span class="reference">Baseball</span> A piece of leather or
-							leather mesh that fills the space between the thumb and forefinger
-							of a baseball glove. Also called
-							<span class="reference">trap</span>,
-							<span class="reference">webbing</span>.
-						</li>
-						<li>
-							<span class="reference">Architecture</span> A space or compartment
-							between the ribs or groins of a vault. Also called
-							<span class="reference">cell</span>.
-						</li>
-						<li>
-							A metal sheet or plate connecting the heavier sections, ribs, or
-							flanges of a structural element.
-						</li>
-						<li>
-							A thin metal plate or strip, as the bit of a key or the blade of a
-							saw.
-						</li>
-						<li>
-							A large continuous roll of paper, such as newsprint, either in the
-							process of manufacture or as it is fed into a web press.
-						</li>
 					</ol>
+					<p>&hellip;</p>
+					Taken from
+					<a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
+					Phonetics from
+					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
+						PhoTransEdit
+					</a>
 				</div>
-				<div class="separator"></div>
-				Taken from
-				<a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
-				Phonetics from
-				<a href="http://www.photransedit.com/online/text2phonetics.aspx">
-					PhoTransEdit
-				</a>
 			</div>
 		</div>
 	</div>