More fluid boxes in about section.

There is still some special handling neccessary when display width is to
small.

app/assets/stylesheets/welcome.scss

@@ -70,20 +70,18 @@ p {
 	top: 50%;
 	left: 85%;
 	transform: translate(-50%, -50%);
-
 	width: 26.875em;
 	clear: both;
 }
 #logo {
 	height: 100%;
-	width: 100%;
+	width: 60%;
 }
 #logo img,
-#logo a {
+#logo .logotitle {
 	position: relative;
 	top: 50%;
 	transform: translate(0, -50%);
-	float: left;
 }
 #logo img {
 	border: 0.125em solid white;
@@ -91,13 +89,19 @@ p {
 	padding: 2px;
 	opacity: 0.4;
 	margin: 0 1em;
+	float: left;
 }
-#logo a {
+#logo .logotitle a {
 	color: rgb(255,255,255);
 	text-decoration: none;
 	font-size: 1.875em;
 	font-family: Arkitech;
 }
+#logo .logotitle span {
+	color: rgb(255,255,255);
+	text-decoration: none;
+	font-family: Arkitech;
+}
 
 #nav ul {
 	display: block;
@@ -190,6 +194,7 @@ p {
 	list-style: none;
 	text-align: justify;
 	width: 100%;
+	height: 20em;
 	top: 50%;
 	transform: translate(0, -50%);
 	position: absolute;
@@ -202,15 +207,20 @@ p {
 }
 #about .textbox {
 	text-align: justify;
-	padding: 10px;
-	width: 30%;
-	height: 10em;
+	padding: 0.625em;
+	width: calc(32% - 1.625em);
+	height: calc(100% - 1.625em);
 	overflow: hidden;
 	box-shadow: 0.625em 0.625em 0.625em rgba(0,0,0,0.7);
 }
 #about a {
 	outline: 0;
 }
+#about .source {
+	width: calc(32% - 2.875em);
+	bottom: 1.4375em;
+}
+
 
 .textbox {
 	display: inline-block;
@@ -221,23 +231,6 @@ p {
 	text-align: center;
 }
 
-.projectspace {
-	display: inline-block;
-	width: 35%;
-}
-.projects {
-	display: inline-block;
-	width: 60%;
-	list-style: none;
-	text-align: justify;
-	vertical-align: top;
-}
-.projects .textbox {
-	padding: 3px;
-	margin-top: 3px;
-	background-color: rgba(0,0,0,0);
-}
-
 .section {
 	position: relative;
 	overflow: hidden;
@@ -422,8 +415,6 @@ p {
 .source {
 	position: absolute;
 	font-size: x-small;
-	bottom: 3.5em;
-	width: 30%;
 }
 /*
 #title {

app/views/layouts/application.html.erb

@@ -10,8 +10,10 @@
 		<header id="header">
 			<div id="logo">
 				<%= image_tag "me-white.png", width: "62", height: "70" %>
-				<a href=""> Georg Hopp </a>
-				<span>aka Steffers</span>
+				<div class="logotitle">
+					<a href=""> Georg Hopp </a>
+					<span>aka Steffers</span>
+				</div>
 			</div>
 			<nav id="nav">
 				<ul>

app/views/welcome/index.html.erb

@@ -4,8 +4,8 @@
 			<div class="textbox">
 				<h1>COMPUTER SCIENTIST</h1>
 				<div class="dictionary">
-					<div class="headword">Computer-scientist <i>n.s.</i></div>
-					<div class="pronounciation">/kəmˈpjuːtə-ˈsaɪəntɪst/</div>
+					<span class="headword">Computer-scientist <i>n.s.</i></span>
+					<span class="pronounciation">/kəmˈpjuːtə-ˈsaɪəntɪst/</span>
 					<ol class="sense">
 						<li>
 							A writer of computer programs; a harmless drudge that busies
@@ -14,7 +14,7 @@
 						</li>
 					</ol>
 				</div>
-				<div class="source">
+				<p class="source">
 					Shamelessly taken and slightly modified definition of lexicographer
 					from Samual Johnsons
 					<a href="http://johnsonsdictionaryonline.com/?p=4848">
@@ -24,13 +24,13 @@
 					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
 						PhoTransEdit
 					</a>
-				</div>
+				</p>
 			</div>
 			<div class="textbox">
 				<h1>DAD</h1>
 				<div class="dictionary">
-					<div class="headword">Dad <i>n.s.</i></div>
-					<div class="pronounciation">/dæd/</div>
+					<span class="headword">Dad <i>n.s.</i></span>
+					<span class="pronounciation">/dæd/</span>
 					<ol class="sense">
 						<li>
 							[The child's way of expressing father. It is remarkable, that,
@@ -41,7 +41,7 @@
 						</li>
 					</ol>
 				</div>
-				<div class="source">
+				<p class="source">
 					Taken from the
 					<a href="http://johnsonsdictionaryonline.com/?p=4848">
 						"Dictionary of the english language (1755)"
@@ -50,13 +50,13 @@
 					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
 						PhoTransEdit
 					</a>
-				</div>
+				</p>
 			</div>
 			<div class="textbox">
 				<h1>HUMANIST</h1>
 				<div class="dictionary">
-					<div class="headword">Humanist <i>n.s.</i></div>
-					<div class="pronounciation">/ˈhjuːmənɪst/</div>
+					<span class="headword">Humanist <i>n.s.</i></span>
+					<span class="pronounciation">/ˈhjuːmənɪst/</span>
 					<ol class="sense">
 						<li>a person devoted to or versed in the humanities.</li>
 						<li>a person who follows a form of scientific or philosophical
@@ -68,14 +68,14 @@
 						</li>
 					</ol>
 				</div>
-				<div class="source">
+				<p class="source">
 					Taken from the
 					<a href="http://www.dictionary.com/">Dictionary.com</a>
 					Phonetics from
 					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
 						PhoTransEdit
 					</a>
-				</div>
+				</p>
 			</div>
 		</div>
 	</div>