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,7 +78,6 @@ p {
78 left: 30px; 78 left: 30px;
79 top: 50%; 79 top: 50%;
80 transform: translate(0, -50%); 80 transform: translate(0, -50%);
81 -  
82 } 81 }
83 #logo img { 82 #logo img {
84 border: 2px solid white; 83 border: 2px solid white;
@@ -124,19 +123,21 @@ p { @@ -124,19 +123,21 @@ p {
124 width: 100%; 123 width: 100%;
125 height: 100%; 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 color: rgb(214,206,204); 127 color: rgb(214,206,204);
  128 + background-position: center top;
133 } 129 }
134 -#section2,#section4 { 130 +#section2, #section4, #section6 {
135 background-color: rgb(255,255,255); 131 background-color: rgb(255,255,255);
136 } 132 }
  133 +#section1 {
  134 + background: image_url("resized/blown.jpg") fixed;
  135 +}
137 #section3 { 136 #section3 {
138 background: image_url("resized/beach3.jpg") fixed; 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 #footer { 143 #footer {
@@ -171,12 +172,27 @@ p { @@ -171,12 +172,27 @@ p {
171 overflow: hidden; 172 overflow: hidden;
172 box-shadow: 10px 10px 10px rgba(0,0,0,0.7); 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 .textbox { 188 .textbox {
176 display: inline-block; 189 display: inline-block;
177 border-color: rgba(100,190,12,0.7); 190 border-color: rgba(100,190,12,0.7);
178 background-color: rgba(255,255,255,0.7); 191 background-color: rgba(255,255,255,0.7);
179 } 192 }
  193 +.textbox h1 {
  194 + text-align: center;
  195 +}
180 196
181 .projectspace { 197 .projectspace {
182 display: inline-block; 198 display: inline-block;
@@ -269,6 +285,63 @@ p { @@ -269,6 +285,63 @@ p {
269 border-width: 3px; 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 #title { 346 #title {
274 position: fixed; 347 position: fixed;
@@ -74,107 +74,43 @@ @@ -74,107 +74,43 @@
74 </div> 74 </div>
75 <div id="section3" class="section"> 75 <div id="section3" class="section">
76 <div class="content"> 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 </div> 114 </div>
179 </div> 115 </div>
180 <div id="section4" class="section"> 116 <div id="section4" class="section">
@@ -202,4 +138,119 @@ @@ -202,4 +138,119 @@
202 <% end -%> 138 <% end -%>
203 </div> 139 </div>
204 </div> 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 <!-- vim: set ts=2 sw=2: --> 256 <!-- vim: set ts=2 sw=2: -->
Please register or login to post a comment