Commit f64244c8e6e9c31f8454a65bf11a342a19df4fde

Authored by Georg Hopp
1 parent a4e76586

add more content...currently this has not much structure

1.8 MB | W: | H:

1.6 MB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -78,7 +78,6 @@ p {
78 78 left: 30px;
79 79 top: 50%;
80 80 transform: translate(0, -50%);
81   -
82 81 }
83 82 #logo img {
84 83 border: 2px solid white;
... ... @@ -124,19 +123,21 @@ p {
124 123 width: 100%;
125 124 height: 100%;
126 125 }
127   -#section1 {
128   - background: image_url("resized/blown.jpg") fixed;
129   - background-position: center top;
130   -}
131   -#section1,#section3 .content {
  126 +#section1 .content ,#section3, .content, #section5 .content {
132 127 color: rgb(214,206,204);
  128 + background-position: center top;
133 129 }
134   -#section2,#section4 {
  130 +#section2, #section4, #section6 {
135 131 background-color: rgb(255,255,255);
136 132 }
  133 +#section1 {
  134 + background: image_url("resized/blown.jpg") fixed;
  135 +}
137 136 #section3 {
138 137 background: image_url("resized/beach3.jpg") fixed;
139   - background-position: center top;
  138 +}
  139 +#section5 {
  140 + background: image_url("resized/robin.jpg") fixed;
140 141 }
141 142
142 143 #footer {
... ... @@ -171,12 +172,27 @@ p {
171 172 overflow: hidden;
172 173 box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
173 174 }
  175 +#weird {
  176 + position: relative;
  177 + width: 70%;
  178 + left: 50%;
  179 + top: 50%;
  180 + transform: translate(-50%, -50%);
  181 +}
  182 +#weird .textbox {
  183 + overflow: hidden;
  184 + box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
  185 + text-align: justify;
  186 +}
174 187
175 188 .textbox {
176 189 display: inline-block;
177 190 border-color: rgba(100,190,12,0.7);
178 191 background-color: rgba(255,255,255,0.7);
179 192 }
  193 +.textbox h1 {
  194 + text-align: center;
  195 +}
180 196
181 197 .projectspace {
182 198 display: inline-block;
... ... @@ -269,6 +285,63 @@ p {
269 285 border-width: 3px;
270 286 }
271 287
  288 +.separator {
  289 + position: relative;
  290 + border-bottom: 1px dotted black;
  291 + height: 0px;
  292 + width: 20%;
  293 + left: 50%;
  294 + transform: translate(-50%, 0);
  295 + margin-top: 10px;
  296 + margin-bottom: 10px;
  297 +}
  298 +
  299 +.dictionary {
  300 + position: relative;
  301 + width: 70%;
  302 + left: 50%;
  303 + transform: translate(-50%, 0);
  304 + font-size: small;
  305 +}
  306 +.dictionary .headword {
  307 + display: inline-block;
  308 + color: red;
  309 + font-weight: bold;
  310 + text-decoration: underline;
  311 +}
  312 +.dictionary .headword i {
  313 + color: inherit;
  314 +}
  315 +.dictionary .pronounciation {
  316 + display: inline-block;
  317 + font-family: monospace;
  318 +}
  319 +.dictionary .conjugation {
  320 + display: inline-block;
  321 + font-weight: bold;
  322 +}
  323 +.dictionary ol li {
  324 + margin-left: 10px;
  325 +}
  326 +.dictionary ol li:before {
  327 + font-weight: bold;
  328 +}
  329 +.dictionary .sense .example {
  330 + font-style: italic;
  331 +}
  332 +.dictionary .sense .reference {
  333 + text-decoration: underline;
  334 + font-family: serif;
  335 +}
  336 +.dictionary ol {
  337 + counter-reset: section;
  338 + list-style-type: none;
  339 +}
  340 +.dictionary li::before {
  341 + counter-increment: section;
  342 + content: counters(section,".") " ";
  343 +}
  344 +
272 345 /*
273 346 #title {
274 347 position: fixed;
... ...
... ... @@ -74,107 +74,43 @@
74 74 </div>
75 75 <div id="section3" class="section">
76 76 <div class="content">
77   - <h1>Dictionary</h1>
78   - <p>
79   - <b>weird</b> / 'wɪəd /<br/>
80   - <i>adj.</i> weird·er, weird·est
81   - <ol>
82   - <li>
83   - Strikingly odd or unusual, especially in an unsettling way; strange:
84   - <i>
85   - <b>
86   - He lives in a weird old house on a dark street. Your neighbor is
87   - said to be a little weird. I felt a little weird after drinking
88   - that tea.
89   - </b>
90   - </i>
91   - </li>
92   - <li>
93   - Suggestive of the supernatural:
94   - <i><b>weird stories about ghosts.</b></i>
95   - </li>
96   - <li>
97   - <i>Archaic</i> Of or relating to fate or the Fates.
98   - </li>
99   - </ol>
100   - </p>
101   - <p>
102   - <b>web</b> / web /<br/>
103   - <i>n.</i>
104   - <ol>
105   - <li>
106   - <ol>
107   - <li>
108   - A woven fabric, especially one on a loom or just removed from
109   - it.
110   - </li>
111   - <li>The structural part of cloth.</li>
112   - </ol>
113   - </li>
114   - <li>
115   - A latticed or woven structure:
116   - <i><b>A web of palm branches formed the roof of the hut.</b></i>
117   - </li>
118   - <li>
119   - A structure of delicate, threadlike filaments characteristically
120   - spun by spiders or certain insect larvae.
121   - </li>
122   - <li>
123   - Something intricately contrived, especially something that ensnares
124   - or entangles: <i><b>caught in a web of lies.</b></i>
125   - </li>
126   - <li>
127   - A complex, interconnected structure or arrangement:
128   - <i><b>a web of telephone wires.</b></i>
129   - </li>
130   - <li>
131   - often Web The World Wide Web.
132   - </li>
133   - <li>
134   - A radio or television network.
135   - </li>
136   - <li>
137   - A membrane or fold of skin connecting the toes, as of certain
138   - amphibians, birds, and mammals.
139   - </li>
140   - <li>
141   - The barbs on each side of the shaft of a bird's feather; a vane.
142   - </li>
143   - <li>
144   - <i>Baseball</i> A piece of leather or leather mesh that fills the
145   - space between the thumb and forefinger of a baseball glove. Also
146   - called <i>trap</i>, <i>webbing</i>.
147   - </li>
148   - <li>
149   - <i>Architecture</i> A space or compartment between the ribs or
150   - groins of a vault. Also called <i>cell</i>.
151   - </li>
152   - <li>
153   - A metal sheet or plate connecting the heavier sections, ribs, or
154   - flanges of a structural element.
155   - </li>
156   - <li>
157   - A thin metal plate or strip, as the bit of a key or the blade of a
158   - saw.
159   - </li>
160   - <li>
161   - A large continuous roll of paper, such as newsprint, either in the
162   - process of manufacture or as it is fed into a web press.
163   - </li>
164   - </ol>
165   - </p>
166   - <p>
167   - <b>workers</b> / 'wɜ:kəz /<br/>
168   - See: personnel</br>
169   - <b>personnel</b> / ˌpɜːsəˈnel /<br/>
170   - band of employees, body of employees, cast, clerical staff, company,
171   - corps of employyes, coworkers, crew, factotums, fellow workers, help,
172   - labor supply, laborers, laboring force, manpower, members, office force,
173   - servantry, servants, staff, team of emmloyees, work force, work party,
174   - workers, working people
175   - </p>
176   - Take from
177   - <a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
  77 + <div id="weird">
  78 + <div class="textbox">
  79 + <h1>WEIRD</h1>
  80 + <div class="separator"></div>
  81 + <div class="dictionary">
  82 + <div class="headword">weird <i>adj.</i></div>
  83 + <div class="pronounciation">/'wɪəd/</div>
  84 + <div class="conjugation">weird·er, weird·est</div>
  85 + <ol class="sense">
  86 + <li>
  87 + Strikingly odd or unusual, especially in an unsettling way;
  88 + strange:
  89 + <span class="example">
  90 + He lives in a weird old house on a dark street. Your neighbor
  91 + is said to be a little weird. I felt a little weird after
  92 + drinking that tea.
  93 + </span>
  94 + </li>
  95 + <li>
  96 + Suggestive of the supernatural:
  97 + <span class="example">weird stories about ghosts.</span>
  98 + </li>
  99 + <li>
  100 + <span class="reference">Archaic</span> Of or relating to fate or
  101 + the Fates.
  102 + </li>
  103 + </ol>
  104 + </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>
  113 + </div>
178 114 </div>
179 115 </div>
180 116 <div id="section4" class="section">
... ... @@ -202,4 +138,119 @@
202 138 <% end -%>
203 139 </div>
204 140 </div>
  141 +<div id="section5" class="section">
  142 + <div class="content">
  143 + <div id="weird">
  144 + <div class="textbox">
  145 + <h1>WEB</h1>
  146 + <div class="separator"></div>
  147 + <div class="dictionary">
  148 + <div class="headword">web <i>n.</i></div>
  149 + <div class="pronounciation">/web/</div>
  150 + <ol class="sense">
  151 + <li>&nbsp;
  152 + <ol>
  153 + <li>
  154 + A woven fabric, especially one on a loom or just removed from
  155 + it.
  156 + </li>
  157 + <li>The structural part of cloth.</li>
  158 + </ol>
  159 + </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>
  174 + <li>
  175 + A complex, interconnected structure or arrangement:
  176 + <span class="example">a web of telephone wires.</span>
  177 + </li>
  178 + <li>
  179 + often Web The World Wide Web.
  180 + </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>
  216 + </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>
  225 + </div>
  226 + </div>
  227 +</div>
  228 +<div id="section6" class="section">
  229 + <%= image_tag "dogs2.svg", class: "watermark" %>
  230 + <div class="content">
  231 + <h1>Dictionary</h1>
  232 + <div class="separator"></div>
  233 + <div class="separator"></div>
  234 + <div class="dictionary">
  235 + <div class="headword">workers <i>n.</i></div>
  236 + <div class="pronounciation">/'wɜ:kəz/</div>
  237 + <div class="sense">See: personnel</div>
  238 + <div class="headword">personnel <i>n.</i></div>
  239 + <div class="pronounciation">/ˌpɜːsəˈnel/</div>
  240 + <div class="sense">
  241 + band of employees, body of employees, cast, clerical staff, company,
  242 + corps of employyes, coworkers, crew, factotums, fellow workers, help,
  243 + labor supply, laborers, laboring force, manpower, members, office force,
  244 + servantry, servants, staff, team of emmloyees, work force, work party,
  245 + workers, working people
  246 + </div>
  247 + Taken from
  248 + <a href="http://www.thefreedictionary.com/">"The free dictionary"</a>
  249 + Phonetics from
  250 + <a href="http://www.photransedit.com/online/text2phonetics.aspx">
  251 + PhoTransEdit
  252 + </a>
  253 + </div>
  254 + </div>
  255 +</div>
205 256 <!-- vim: set ts=2 sw=2: -->
... ...
Please register or login to post a comment