Commit bb655fdc6dfd22db4aa95a987922ca18a55ad640

Authored by Georg Hopp
1 parent 0cef5f80

px to em

@@ -52,7 +52,7 @@ hr { @@ -52,7 +52,7 @@ hr {
52 } 52 }
53 p { 53 p {
54 padding-top: 5px; 54 padding-top: 5px;
55 - text-indent: 10px; 55 + text-indent: 0.5em;
56 } 56 }
57 57
58 #header { 58 #header {
@@ -60,8 +60,8 @@ p { @@ -60,8 +60,8 @@ p {
60 60
61 position: fixed; 61 position: fixed;
62 width: 100%; 62 width: 100%;
63 - height: 80px;  
64 - margin-top: 30px; 63 + height: 5em;
  64 + margin-top: 1.875em;
65 65
66 z-index: 10; 66 z-index: 10;
67 } 67 }
@@ -71,26 +71,31 @@ p { @@ -71,26 +71,31 @@ p {
71 left: 85%; 71 left: 85%;
72 transform: translate(-50%, -50%); 72 transform: translate(-50%, -50%);
73 73
74 - width: 430px; 74 + width: 26.875em;
  75 + clear: both;
75 } 76 }
76 -#logo img,#logo a {  
77 - position: absolute;  
78 - left: 30px; 77 +#logo {
  78 + height: 100%;
  79 + width: 100%;
  80 +}
  81 +#logo img,
  82 +#logo a {
  83 + position: relative;
79 top: 50%; 84 top: 50%;
80 transform: translate(0, -50%); 85 transform: translate(0, -50%);
  86 + float: left;
81 } 87 }
82 #logo img { 88 #logo img {
83 - border: 2px solid white;  
84 - border-radius: 10px; 89 + border: 0.125em solid white;
  90 + border-radius: 0.625em;
85 padding: 2px; 91 padding: 2px;
86 opacity: 0.4; 92 opacity: 0.4;
  93 + margin: 0 1em;
87 } 94 }
88 #logo a { 95 #logo a {
89 color: rgb(255,255,255); 96 color: rgb(255,255,255);
90 - left: 120px;  
91 -  
92 text-decoration: none; 97 text-decoration: none;
93 - font-size: 30px; 98 + font-size: 1.875em;
94 font-family: Arkitech; 99 font-family: Arkitech;
95 } 100 }
96 101
@@ -104,7 +109,7 @@ p { @@ -104,7 +109,7 @@ p {
104 } 109 }
105 #nav li a { 110 #nav li a {
106 color: rgba(255,255,255,0.4); 111 color: rgba(255,255,255,0.4);
107 - font-size: 16px; 112 + font-size: 1em;
108 text-decoration: none; 113 text-decoration: none;
109 font-weight: bold; 114 font-weight: bold;
110 outline: 0; 115 outline: 0;
@@ -115,7 +120,7 @@ p { @@ -115,7 +120,7 @@ p {
115 } 120 }
116 #nav li a.active { 121 #nav li a.active {
117 color: rgba(255,255,255,1); 122 color: rgba(255,255,255,1);
118 - border-bottom: 2px solid rgb(255,255,255); 123 + border-bottom: 0.125em solid rgb(255,255,255);
119 } 124 }
120 125
121 #section1 .content, #section3 .content, #section5 .content { 126 #section1 .content, #section3 .content, #section5 .content {
@@ -147,7 +152,7 @@ p { @@ -147,7 +152,7 @@ p {
147 background: rgb(22, 27, 28); 152 background: rgb(22, 27, 28);
148 position: relative; 153 position: relative;
149 width: 100%; 154 width: 100%;
150 - height: 140px; 155 + height: 8.75em;
151 font-size: x-small; 156 font-size: x-small;
152 } 157 }
153 #footer p { 158 #footer p {
@@ -160,10 +165,10 @@ p { @@ -160,10 +165,10 @@ p {
160 float: left; 165 float: left;
161 padding-left: 10px; 166 padding-left: 10px;
162 padding-right: 10px; 167 padding-right: 10px;
163 - border-right: 1px solid rgb(214,206,204); 168 + border-right: 0.0625em solid rgb(214,206,204);
164 } 169 }
165 #footer .license { 170 #footer .license {
166 - bottom: 0px; 171 + bottom: 0;
167 width: 100%; 172 width: 100%;
168 position: absolute; 173 position: absolute;
169 } 174 }
@@ -176,7 +181,7 @@ p { @@ -176,7 +181,7 @@ p {
176 #footer .license div { 181 #footer .license div {
177 display: inline-block; 182 display: inline-block;
178 position: relative; 183 position: relative;
179 - left: 0px; 184 + left: 0;
180 vertical-align: middle; 185 vertical-align: middle;
181 } 186 }
182 187
@@ -199,9 +204,9 @@ p { @@ -199,9 +204,9 @@ p {
199 text-align: justify; 204 text-align: justify;
200 padding: 10px; 205 padding: 10px;
201 width: 30%; 206 width: 30%;
202 - height: 160px; 207 + height: 10em;
203 overflow: hidden; 208 overflow: hidden;
204 - box-shadow: 10px 10px 10px rgba(0,0,0,0.7); 209 + box-shadow: 0.625em 0.625em 0.625em rgba(0,0,0,0.7);
205 } 210 }
206 #about a { 211 #about a {
207 outline: 0; 212 outline: 0;
@@ -269,8 +274,8 @@ p { @@ -269,8 +274,8 @@ p {
269 274
270 .quote-container { 275 .quote-container {
271 position: relative; 276 position: relative;
272 - width: 500px;  
273 - top: 10px; 277 + width: 31.25em;
  278 + top: 0.625em;
274 left: 50%; 279 left: 50%;
275 transform: translate(-50%, 0); 280 transform: translate(-50%, 0);
276 } 281 }
@@ -337,14 +342,14 @@ p { @@ -337,14 +342,14 @@ p {
337 .textbox { 342 .textbox {
338 text-align: center; 343 text-align: center;
339 border-style: solid; 344 border-style: solid;
340 - border-radius: 10px;  
341 - border-width: 3px; 345 + border-radius: 0.625em;
  346 + border-width: 0.1875em;
342 } 347 }
343 348
344 .separator { 349 .separator {
345 position: relative; 350 position: relative;
346 - border-bottom: 1px dotted black;  
347 - height: 0px; 351 + border-bottom: 0.0625em dotted black;
  352 + height: 0;
348 width: 20%; 353 width: 20%;
349 left: 50%; 354 left: 50%;
350 transform: translate(-50%, 0); 355 transform: translate(-50%, 0);
@@ -381,13 +386,13 @@ p { @@ -381,13 +386,13 @@ p {
381 } 386 }
382 .dictionary ol li q { 387 .dictionary ol li q {
383 display: block; 388 display: block;
384 - text-indent: 10px; 389 + text-indent: 0.625em;
385 font-family: serif; 390 font-family: serif;
386 font-size: small; 391 font-size: small;
387 } 392 }
388 .dictionary ol li i { 393 .dictionary ol li i {
389 display: block; 394 display: block;
390 - right: 10px; 395 + right: 0.625em;
391 font-size: x-small; 396 font-size: x-small;
392 position: absolute; 397 position: absolute;
393 } 398 }
@@ -417,7 +422,7 @@ p { @@ -417,7 +422,7 @@ p {
417 .source { 422 .source {
418 position: absolute; 423 position: absolute;
419 font-size: x-small; 424 font-size: x-small;
420 - bottom: 35px; 425 + bottom: 3.5em;
421 width: 30%; 426 width: 30%;
422 } 427 }
423 /* 428 /*
Please register or login to post a comment