Showing
6 changed files
with
39 additions
and
75 deletions
... | ... | @@ -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> |
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>…</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>…</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