mobile-first styling

1 files changed, 22 insertions, 12 deletions

diff --git a/style.scss b/style.scss
index 44316e0..b154d8b 100644
--- a/style.scss
+++ b/style.scss
@@ -6,6 +6,8 @@
 @import "blueprint";
 @import "breakpoint";
 
+@include h5bp-media;
+
 @include h5bp-normalize;
 
 @include ikiwiki-style;
@@ -15,22 +17,31 @@ h1 {
 	font-size: 2.75em;
 }
 
-.branding {
-	z-index: -1;
-	position: fixed;
-	bottom: 0; // full height isn't enough on Replicant browser
-	height: 100%;
+#branding-logo {
+	top: 75px;
 	width: 100%;
-	background-color: transparent;
-	background-image: url("logo.jpg");
-	background-repeat: no-repeat;
-	background-position: right bottom;
+	right: 2%;
+	text-align: right;
+}
+
+
+.branding {
+	@media screen and(min-width:790px) {
+		z-index: -1;
+		position: absolute;
+		margin-top: 8em;
+		height: 100%;
+		width: 100%;
+		background-color: transparent;
+		background-image: url("logo.jpg");
+		background-repeat: no-repeat;
+		background-position: top right;
+	}
 }
 
 .pageheader {
 	padding: 0;
 	header {
-		float: right;
 		padding: 1em 2%;
 	}
 }
@@ -89,7 +100,7 @@ a {
 }
 
 #content {
-	width: 100%;
+	width: 96%;
 	max-width: 52em;
 	min-height: 480px;
 	margin: 0 auto;
@@ -101,7 +112,6 @@ a {
 }
 
 img {
-	float: right;
 	vertical-align: top;
 	margin: 0 1em 1em 0;
 	padding: 0;