Small bugfixes for mobile

starburst1977 · May 20, 2015 · d2a20d9 · d2a20d9
1 parent 7fe4f1b
commit d2a20d9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 28 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -13,21 +13,29 @@
 
 .highlight-header.post-head {
   margin: 0 auto;
-  width: 80%;
-  padding-top: 38%;
+  width: 100%;
+  padding-top: 62%;
   max-width: 960px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   text-indent: -9999px;
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-  position: relative; }
+  position: relative;
+  overflow: hidden; }
+  @media only screen and (min-width: 800px) {
+    .highlight-header.post-head {
+      padding-top: 38%;
+      width: 80%;
+      border-bottom-left-radius: 0.5rem;
+      border-bottom-right-radius: 0.5rem; } }
   .highlight-header.post-head .post-header {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     padding: 2.4rem;
     text-indent: 0;
     background: linear-gradient(to top, black 0%, transparent 100%); }
@@ -81,7 +89,7 @@
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  padding: 0 0 3rem; }
+  padding: 1.8rem 0 3rem; }
 .post-template .post-header {
   width: 90%;
   max-width: 900px;
@@ -860,9 +868,12 @@ body, html {
 .header {
   position: relative;
   max-height: 700px;
-  padding-top: 38%;
+  padding-top: 62%;
   overflow: hidden;
   background-image: radial-gradient(ellipse at top center, #ffe483, rgba(255, 255, 255, 0.38) 62%), radial-gradient(ellipse at top right, #b5eb8e, rgba(255, 255, 255, 0.38) 38%), radial-gradient(ellipse at top left, #7ad9fd, rgba(255, 255, 255, 0.38) 38%); }
+  @media only screen and (min-width: 800px) {
+    .header {
+      padding-top: 38%; } }
   .header .teaser {
     text-indent: -9999px;
     position: absolute;
@@ -878,27 +889,34 @@ body, html {
       overflow: hidden; }
     .header .teaser .teaser-image-big {
       margin: 0 auto;
-      width: 80%;
-      padding-top: 38%;
+      width: 100%;
+      padding-top: 62%;
       max-width: 960px;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       text-indent: -9999px;
-      border-bottom-left-radius: 0.5rem;
-      border-bottom-right-radius: 0.5rem;
       position: relative; }
+      @media only screen and (min-width: 800px) {
+        .header .teaser .teaser-image-big {
+          padding-top: 38%;
+          width: 80%;
+          border-bottom-left-radius: 0.5rem;
+          border-bottom-right-radius: 0.5rem; } }
       .header .teaser .teaser-image-big .shoutout {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
-        padding: 2.4rem;
+        padding: 1.8rem 1.8rem 2.4rem;
         text-indent: 0;
         background: linear-gradient(to top, black 0%, transparent 100%); }
+        @media only screen and (min-width: 800px) {
+          .header .teaser .teaser-image-big .shoutout {
+            padding: 2.4rem 2.4rem 3.6rem; } }
         .header .teaser .teaser-image-big .shoutout h1 {
           text-align: center;
-          padding: 0 0 1.8rem;
+          padding: 0 0 1.2rem;
           font-size: 2.4rem;
           line-height: 3rem;
           font-family: Source Sans Pro;
@@ -909,7 +927,8 @@ body, html {
           @media only screen and (min-width: 800px) {
             .header .teaser .teaser-image-big .shoutout h1 {
               font-size: 3.6rem;
-              line-height: 4rem; } }
+              line-height: 4rem;
+              padding: 0 0 1.8rem; } }
         .header .teaser .teaser-image-big .shoutout h2 {
           text-align: center;
           font-size: 0.9rem;

diff --git a/assets/css/index.sass b/assets/css/index.sass
@@ -117,7 +117,9 @@ body, html
 .header
 	position: relative
 	max-height: 700px
-	padding-top: 38%
+	padding-top: 62%
+	@include respond-to(800)
+		padding-top: 38%
 	overflow: hidden
 	background-image: radial-gradient(ellipse at top center, lighten($yellow, 25%), rgba(255,255,255,0.38) 62%), radial-gradient(ellipse at top right, lighten($green, 15%), rgba(255,255,255,0.38) 38%), radial-gradient(ellipse at top left, lighten($blue, 15%), rgba(255,255,255,0.38) 38%)	
 	.teaser
@@ -135,27 +137,32 @@ body, html
 			overflow: hidden
 		.teaser-image-big
 			margin: 0 auto
-			width: 80%
-			padding-top: 38%
+			width: 100%
+			padding-top: 62%
+			@include respond-to(800)
+				padding-top: 38%
+				width: 80%
+				border-bottom-left-radius: 0.5rem
+				border-bottom-right-radius: 0.5rem
 			max-width: 960px
 			background-size: cover
 			background-repeat: no-repeat
 			background-position: center
 			text-indent: -9999px
-			border-bottom-left-radius: 0.5rem
-			border-bottom-right-radius: 0.5rem
 			position: relative
 			.shoutout
 				position: absolute
 				bottom: 0
 				left: 0
 				right: 0
-				padding: 2.4rem
+				padding: 1.8rem 1.8rem 2.4rem
+				@include respond-to(800)
+					padding: 2.4rem 2.4rem 3.6rem
 				text-indent: 0
 				background: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%)
 				h1
 					text-align: center
-					padding: 0 0 1.8rem
+					padding: 0 0 1.2rem
 					font-size: 2.4rem
 					line-height: 3rem
 					font-family: $font-headline
@@ -166,6 +173,7 @@ body, html
 					@include respond-to(800)
 						font-size: 3.6rem
 						line-height: 4rem
+						padding: 0 0 1.8rem
 				h2
 					text-align: center
 					font-size: 0.9rem

diff --git a/assets/css/post.sass b/assets/css/post.sass
@@ -7,21 +7,28 @@
 
 .highlight-header.post-head
 	margin: 0 auto
-	width: 80%
-	padding-top: 38%
+	width: 100%
+	padding-top: 62%
+	@include respond-to(800)
+		padding-top: 38%
+		width: 80%
+		border-bottom-left-radius: 0.5rem
+		border-bottom-right-radius: 0.5rem
 	max-width: 960px
 	background-size: cover
 	background-repeat: no-repeat
 	background-position: center
 	text-indent: -9999px
-	border-bottom-left-radius: 0.5rem
-	border-bottom-right-radius: 0.5rem
 	position: relative
+	overflow: hidden
 	.post-header
 		position: absolute
 		bottom: 0
 		left: 0
 		right: 0
+		width: 100%
+		max-width: 100%
+		box-sizing: border-box
 		padding: 2.4rem
 		text-indent: 0
 		background: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%)
@@ -74,7 +81,7 @@
 		width: 90%
 		max-width: 900px
 		margin: 0 auto
-		padding: 0 0 3rem
+		padding: 1.8rem 0 3rem
 	.post-header
 		width: 90%
 		max-width: 900px

diff --git a/default.hbs b/default.hbs
@@ -66,7 +66,7 @@
 
     <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
 
-    <!--<script>
+    <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -75,7 +75,7 @@
       ga('create', 'UA-47305801-1', 'svenread.com');
       ga('send', 'pageview');
     
-</script>-->
+    </script>
 
 </body>
 </html>