Commit 0006a3d6e4108dfade248680a289807a69df3f08

Authored by Georg Hopp
1 parent f64244c8

latest additions

... ... @@ -21,6 +21,7 @@
21 21
22 22 # Ignore changes on the application config.
23 23 /config/gitlab.yml
  24 +/config/application.rb
24 25
25 26 Gemfile.lock
26 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 39 bg_pos = -((v_scroll-(section*$(window).innerHeight()))/2)
40 40 section_element = $($(".section")[section])
41 41 if section_element and section_element.css("background-image") != "none"
  42 + content = section_element.find(".content")
  43 + content.css("display", "none")
42 44 section_element.css(
43 45 "background-position",
44 46 "center " + bg_pos + "px")
  47 + content.css("display", "block")
45 48
46 49 $(document).on "page:change", ->
47 50 App.init()
... ...
... ... @@ -123,21 +123,23 @@ p {
123 123 width: 100%;
124 124 height: 100%;
125 125 }
126   -#section1 .content ,#section3, .content, #section5 .content {
  126 +#section1 .content, #section3 .content, #section5 .content {
127 127 color: rgb(214,206,204);
128   - background-position: center top;
129 128 }
130 129 #section2, #section4, #section6 {
131 130 background-color: rgb(255,255,255);
132 131 }
133 132 #section1 {
134 133 background: image_url("resized/blown.jpg") fixed;
  134 + background-position: center top;
135 135 }
136 136 #section3 {
137 137 background: image_url("resized/beach3.jpg") fixed;
  138 + background-position: center top;
138 139 }
139 140 #section5 {
140 141 background: image_url("resized/robin.jpg") fixed;
  142 + background-position: center top;
141 143 }
142 144
143 145 #footer {
... ... @@ -172,17 +174,19 @@ p {
172 174 overflow: hidden;
173 175 box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
174 176 }
175   -#weird {
  177 +#weird, #web {
176 178 position: relative;
177 179 width: 70%;
178 180 left: 50%;
179 181 top: 50%;
180 182 transform: translate(-50%, -50%);
181 183 }
182   -#weird .textbox {
  184 +#weird .textbox, #web .textbox {
  185 + padding: 10px;
183 186 overflow: hidden;
184 187 box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
185 188 text-align: justify;
  189 + width: 100%;
186 190 }
187 191
188 192 .textbox {
... ... @@ -218,7 +222,7 @@ p {
218 222 }
219 223 .section .watermark {
220 224 position: absolute;
221   - opacity: 0.08;
  225 + opacity: 0.02;
222 226 width: 60%;
223 227 top: 50%;
224 228 left: 50%;
... ... @@ -298,10 +302,10 @@ p {
298 302
299 303 .dictionary {
300 304 position: relative;
301   - width: 70%;
  305 + width: 60%;
302 306 left: 50%;
303 307 transform: translate(-50%, 0);
304   - font-size: small;
  308 + font-size: x-small;
305 309 }
306 310 .dictionary .headword {
307 311 display: inline-block;
... ... @@ -333,6 +337,10 @@ p {
333 337 text-decoration: underline;
334 338 font-family: serif;
335 339 }
  340 +.dictionary ol.fifth {
  341 + counter-reset: section 4;
  342 + list-style-type: none;
  343 +}
336 344 .dictionary ol {
337 345 counter-reset: section;
338 346 list-style-type: none;
... ...
... ... @@ -77,7 +77,6 @@
77 77 <div id="weird">
78 78 <div class="textbox">
79 79 <h1>WEIRD</h1>
80   - <div class="separator"></div>
81 80 <div class="dictionary">
82 81 <div class="headword">weird <i>adj.</i></div>
83 82 <div class="pronounciation">/'wɪəd/</div>
... ... @@ -101,14 +100,13 @@
101 100 the Fates.
102 101 </li>
103 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 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 110 </div>
113 111 </div>
114 112 </div>
... ... @@ -140,37 +138,25 @@
140 138 </div>
141 139 <div id="section5" class="section">
142 140 <div class="content">
143   - <div id="weird">
  141 + <div id="web">
144 142 <div class="textbox">
145 143 <h1>WEB</h1>
146   - <div class="separator"></div>
147 144 <div class="dictionary">
148 145 <div class="headword">web <i>n.</i></div>
149 146 <div class="pronounciation">/web/</div>
150   - <ol class="sense">
  147 + <ol start="1" class="sense">
151 148 <li>&nbsp;
152 149 <ol>
153 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 153 </li>
157 154 <li>The structural part of cloth.</li>
158 155 </ol>
159 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 160 <li>
175 161 A complex, interconnected structure or arrangement:
176 162 <span class="example">a web of telephone wires.</span>
... ... @@ -178,49 +164,15 @@
178 164 <li>
179 165 often Web The World Wide Web.
180 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 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 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 176 </div>
225 177 </div>
226 178 </div>
... ...
Please register or login to post a comment