web / weird-web-workers · Commits

Commit 0006a3d6e4108dfade248680a289807a69df3f08

Authored by Georg Hopp
1 parent f64244c8

latest additions

Inline Side-by-side
Showing 6 changed files with 39 additions and 75 deletions
@@ -21,6 +21,7 @@ @@ -21,6 +21,7 @@
21 21
22 # Ignore changes on the application config. 22 # Ignore changes on the application config.
23 /config/gitlab.yml 23 /config/gitlab.yml
  24 +/config/application.rb
24 25
25 Gemfile.lock 26 Gemfile.lock
26 /public/ 27 /public/

11.6 KB | W: | H:

6.61 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

9.89 KB | W: | H:

4.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -39,9 +39,12 @@ App.scroll = -> @@ -39,9 +39,12 @@ App.scroll = ->
39 bg_pos = -((v_scroll-(section*$(window).innerHeight()))/2) 39 bg_pos = -((v_scroll-(section*$(window).innerHeight()))/2)
40 section_element = $($(".section")[section]) 40 section_element = $($(".section")[section])
41 if section_element and section_element.css("background-image") != "none" 41 if section_element and section_element.css("background-image") != "none"
  42 + content = section_element.find(".content")
  43 + content.css("display", "none")
42 section_element.css( 44 section_element.css(
43 "background-position", 45 "background-position",
44 "center " + bg_pos + "px") 46 "center " + bg_pos + "px")
  47 + content.css("display", "block")
45 48
46 $(document).on "page:change", -> 49 $(document).on "page:change", ->
47 App.init() 50 App.init()
@@ -123,21 +123,23 @@ p { @@ -123,21 +123,23 @@ p {
123 width: 100%; 123 width: 100%;
124 height: 100%; 124 height: 100%;
125 } 125 }
126 -#section1 .content ,#section3, .content, #section5 .content { 126 +#section1 .content, #section3 .content, #section5 .content {
127 color: rgb(214,206,204); 127 color: rgb(214,206,204);
128 - background-position: center top;  
129 } 128 }
130 #section2, #section4, #section6 { 129 #section2, #section4, #section6 {
131 background-color: rgb(255,255,255); 130 background-color: rgb(255,255,255);
132 } 131 }
133 #section1 { 132 #section1 {
134 background: image_url("resized/blown.jpg") fixed; 133 background: image_url("resized/blown.jpg") fixed;
  134 + background-position: center top;
135 } 135 }
136 #section3 { 136 #section3 {
137 background: image_url("resized/beach3.jpg") fixed; 137 background: image_url("resized/beach3.jpg") fixed;
  138 + background-position: center top;
138 } 139 }
139 #section5 { 140 #section5 {
140 background: image_url("resized/robin.jpg") fixed; 141 background: image_url("resized/robin.jpg") fixed;
  142 + background-position: center top;
141 } 143 }
142 144
143 #footer { 145 #footer {
@@ -172,17 +174,19 @@ p { @@ -172,17 +174,19 @@ p {
172 overflow: hidden; 174 overflow: hidden;
173 box-shadow: 10px 10px 10px rgba(0,0,0,0.7); 175 box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
174 } 176 }
175 -#weird { 177 +#weird, #web {
176 position: relative; 178 position: relative;
177 width: 70%; 179 width: 70%;
178 left: 50%; 180 left: 50%;
179 top: 50%; 181 top: 50%;
180 transform: translate(-50%, -50%); 182 transform: translate(-50%, -50%);
181 } 183 }
182 -#weird .textbox { 184 +#weird .textbox, #web .textbox {
  185 + padding: 10px;
183 overflow: hidden; 186 overflow: hidden;
184 box-shadow: 10px 10px 10px rgba(0,0,0,0.7); 187 box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
185 text-align: justify; 188 text-align: justify;
  189 + width: 100%;
186 } 190 }
187 191
188 .textbox { 192 .textbox {
@@ -218,7 +222,7 @@ p { @@ -218,7 +222,7 @@ p {
218 } 222 }
219 .section .watermark { 223 .section .watermark {
220 position: absolute; 224 position: absolute;
221 - opacity: 0.08; 225 + opacity: 0.02;
222 width: 60%; 226 width: 60%;
223 top: 50%; 227 top: 50%;
224 left: 50%; 228 left: 50%;
@@ -298,10 +302,10 @@ p { @@ -298,10 +302,10 @@ p {
298 302
299 .dictionary { 303 .dictionary {
300 position: relative; 304 position: relative;
301 - width: 70%; 305 + width: 60%;
302 left: 50%; 306 left: 50%;
303 transform: translate(-50%, 0); 307 transform: translate(-50%, 0);
304 - font-size: small; 308 + font-size: x-small;
305 } 309 }
306 .dictionary .headword { 310 .dictionary .headword {
307 display: inline-block; 311 display: inline-block;
@@ -333,6 +337,10 @@ p { @@ -333,6 +337,10 @@ p {
333 text-decoration: underline; 337 text-decoration: underline;
334 font-family: serif; 338 font-family: serif;
335 } 339 }
  340 +.dictionary ol.fifth {
  341 + counter-reset: section 4;
  342 + list-style-type: none;
  343 +}
336 .dictionary ol { 344 .dictionary ol {
337 counter-reset: section; 345 counter-reset: section;
338 list-style-type: none; 346 list-style-type: none;
@@ -77,7 +77,6 @@ @@ -77,7 +77,6 @@
77 <div id="weird"> 77 <div id="weird">
78 <div class="textbox"> 78 <div class="textbox">
79 <h1>WEIRD</h1> 79 <h1>WEIRD</h1>
80 - <div class="separator"></div>  
81 <div class="dictionary"> 80 <div class="dictionary">
82 <div class="headword">weird <i>adj.</i></div> 81 <div class="headword">weird <i>adj.</i></div>
83 <div class="pronounciation">/'wɪəd/</div> 82 <div class="pronounciation">/'wɪəd/</div>
@@ -101,14 +100,13 @@ @@ -101,14 +100,13 @@
101 the Fates. 100 the Fates.
102 </li> 101 </li>
103 </ol> 102 </ol>
  103 + Taken from
  104 + <a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
  105 + Phonetics from
  106 + <a href="http://www.photransedit.com/online/text2phonetics.aspx">
  107 + PhoTransEdit
  108 + </a>
104 </div> 109 </div>
105 - <div class="separator"></div>  
106 - Taken from  
107 - <a href="http://www.thefreedictionary.com/">"The free dictionary"</a>  
108 - Phonetics from  
109 - <a href="http://www.photransedit.com/online/text2phonetics.aspx">  
110 - PhoTransEdit  
111 - </a>  
112 </div> 110 </div>
113 </div> 111 </div>
114 </div> 112 </div>
@@ -140,37 +138,25 @@ @@ -140,37 +138,25 @@
140 </div> 138 </div>
141 <div id="section5" class="section"> 139 <div id="section5" class="section">
142 <div class="content"> 140 <div class="content">
143 - <div id="weird"> 141 + <div id="web">
144 <div class="textbox"> 142 <div class="textbox">
145 <h1>WEB</h1> 143 <h1>WEB</h1>
146 - <div class="separator"></div>  
147 <div class="dictionary"> 144 <div class="dictionary">
148 <div class="headword">web <i>n.</i></div> 145 <div class="headword">web <i>n.</i></div>
149 <div class="pronounciation">/web/</div> 146 <div class="pronounciation">/web/</div>
150 - <ol class="sense"> 147 + <ol start="1" class="sense">
151 <li>&nbsp; 148 <li>&nbsp;
152 <ol> 149 <ol>
153 <li> 150 <li>
154 - A woven fabric, especially one on a loom or just removed from  
155 - it. 151 + A woven fabric, especially one on a loom or just removed
  152 + from it.
156 </li> 153 </li>
157 <li>The structural part of cloth.</li> 154 <li>The structural part of cloth.</li>
158 </ol> 155 </ol>
159 </li> 156 </li>
160 - <li>  
161 - A latticed or woven structure:  
162 - <span class="example">  
163 - A web of palm branches formed the roof of the hut.  
164 - </span>  
165 - </li>  
166 - <li>  
167 - A structure of delicate, threadlike filaments characteristically  
168 - spun by spiders or certain insect larvae.  
169 - </li>  
170 - <li>  
171 - Something intricately contrived, especially something that ensnares  
172 - or entangles: <span class="example">caught in a web of lies.</span>  
173 - </li> 157 + </ol>
  158 + <p>&hellip;</p>
  159 + <ol class="sense fifth">
174 <li> 160 <li>
175 A complex, interconnected structure or arrangement: 161 A complex, interconnected structure or arrangement:
176 <span class="example">a web of telephone wires.</span> 162 <span class="example">a web of telephone wires.</span>
@@ -178,49 +164,15 @@ @@ -178,49 +164,15 @@
178 <li> 164 <li>
179 often Web The World Wide Web. 165 often Web The World Wide Web.
180 </li> 166 </li>
181 - <li>  
182 - A radio or television network.  
183 - </li>  
184 - <li>  
185 - A membrane or fold of skin connecting the toes, as of certain  
186 - amphibians, birds, and mammals.  
187 - </li>  
188 - <li>  
189 - The barbs on each side of the shaft of a bird's feather; a vane.  
190 - </li>  
191 - <li>  
192 - <span class="reference">Baseball</span> A piece of leather or  
193 - leather mesh that fills the space between the thumb and forefinger  
194 - of a baseball glove. Also called  
195 - <span class="reference">trap</span>,  
196 - <span class="reference">webbing</span>.  
197 - </li>  
198 - <li>  
199 - <span class="reference">Architecture</span> A space or compartment  
200 - between the ribs or groins of a vault. Also called  
201 - <span class="reference">cell</span>.  
202 - </li>  
203 - <li>  
204 - A metal sheet or plate connecting the heavier sections, ribs, or  
205 - flanges of a structural element.  
206 - </li>  
207 - <li>  
208 - A thin metal plate or strip, as the bit of a key or the blade of a  
209 - saw.  
210 - </li>  
211 - <li>  
212 - A large continuous roll of paper, such as newsprint, either in the  
213 - process of manufacture or as it is fed into a web press.  
214 - </li>  
215 </ol> 167 </ol>
  168 + <p>&hellip;</p>
  169 + Taken from
  170 + <a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
  171 + Phonetics from
  172 + <a href="http://www.photransedit.com/online/text2phonetics.aspx">
  173 + PhoTransEdit
  174 + </a>
216 </div> 175 </div>
217 - <div class="separator"></div>  
218 - Taken from  
219 - <a href="http://www.thefreedictionary.com/">"The free dictionary"</a>  
220 - Phonetics from  
221 - <a href="http://www.photransedit.com/online/text2phonetics.aspx">  
222 - PhoTransEdit  
223 - </a>  
224 </div> 176 </div>
225 </div> 177 </div>
226 </div> 178 </div>
Please register or login to post a comment