More fluid boxes in about section.

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

More fluid boxes in about section.
There is still some special handling neccessary when display width is to small.
Georg Hopp
1 parent bb655fdc
Showing 3 changed files with 34 additions and 41 deletions
app/assets/stylesheets/welcome.scss
app/views/layouts/application.html.erb
app/views/welcome/index.html.erb
--- a/app/assets/stylesheets/welcome.scss
View file @e6bccd7
+++ b/app/assets/stylesheets/welcome.scss
View file @e6bccd7
@@ -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 {
--- a/app/views/layouts/application.html.erb
View file @e6bccd7
+++ b/app/views/layouts/application.html.erb
View file @e6bccd7
@@ -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>
--- a/app/views/welcome/index.html.erb
View file @e6bccd7
+++ b/app/views/welcome/index.html.erb
View file @e6bccd7
@@ -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>