Add post meta styles for mobile

godaddy-wordpress · Sep 8, 2016 · c20ea09 · c20ea09
1 parent cbe9600
commit c20ea09
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 30 deletions.
diff --git a/.dev/sass/partials/_posts-and-pages.scss b/.dev/sass/partials/_posts-and-pages.scss
@@ -1,15 +1,16 @@
 .sticky {}
 
 .no-results,
-.not-found{
-	.page-header{
+.not-found {
+	.page-header {
 		margin-bottom: 1em;
 	}
 }
 
 .hentry {
 	margin-bottom: 3em;
-	.attachment-basis-featured{
+
+	.attachment-basis-featured {
 		width: 100%;
 		height: auto;
 	}
@@ -19,7 +20,7 @@
 	}
 }
 
-.featured-image{
+.featured-image {
 	margin-bottom: 1em;
 	margin-bottom: 1.5rem;
 }
@@ -63,12 +64,11 @@
 	}
 
 	@media #{$large-up} {
-	 font-size: rem-calc(35);
+		font-size: rem-calc(35);
 	}
-
 }
 
-.entry-title, .archive-title{
+.entry-title, .archive-title {
 	margin-bottom: .25em;
 	font-size: rem-calc(25);
 	font-weight: lighter;
@@ -79,7 +79,7 @@
 	}
 
 	@media #{$large-up} {
-	 font-size: rem-calc(40);
+		font-size: rem-calc(40);
 	}
 
 	a {
@@ -88,18 +88,19 @@
 	}
 }
 
-.archive-title{
+.archive-title {
 	margin-bottom: 1em;
 	margin-bottom: 2rem;
 }
 
-.entry-footer{
+.entry-footer {
 	color: $small-font-color;
 	font-family: $header-font-family;
 	font-size: rem-calc(14);
+
 	@include clearfix;
 
-	a{
+	a {
 		color: $primary-color;
 
 		&:hover,
@@ -118,14 +119,13 @@
 	.comments-link {
 		display: block;
 		font-size: rem-calc(11.75px);
-	text-transform: uppercase;
-	letter-spacing: 1px;
+		text-transform: uppercase;
+		letter-spacing: 1px;
 	}
 
 	.comments-link a {
 		vertical-align: top;
 	}
-
 }
 
 .entry-meta {
@@ -135,20 +135,30 @@
 	font-family: $sans-font-family;
 	text-transform: uppercase;
 	letter-spacing: 1px;
+
 	@include clearfix;
 
 	.posted-date,
 	.posted-author,
 	.comments-number {
 		margin-right: 20px;
+
+		&:last-child {
+			margin-right: 0;
+		}
+
+		@media #{$small-only} {
+			display: block;
+			margin-right: 0;
+		}
 	}
 
-	i{
+	i {
 		vertical-align: middle;
 		line-height: .8;
 	}
 
-	.has-post-thumbnail &{
+	.has-post-thumbnail & {
 		border-bottom-width: 0;
 	}
 }
@@ -158,7 +168,7 @@
 		margin-right: 1em;
 		margin-right: 1rem;
 
-		@media #{$small-only}{
+		@media #{$small-only} {
 			margin-bottom: 10px;
 		}
 	}
@@ -176,7 +186,6 @@
 		line-height: 2;
 	}
 
-
 	span {
 		-ms-word-wrap: break-word;
 		word-wrap: break-word;
@@ -187,15 +196,15 @@
 	}
 }
 
-.post-format{
+.post-format {
 	color: $primary-color;
 	text-transform: uppercase;
 	font-family: $sans-font-family;
 	font-size: rem-calc(13);
 	font-weight: bold;
 }
 
-.more-link{
+.more-link {
 	font-family: $header-font-family;
 	font-weight: normal;
 	border-radius: $global-radius;
@@ -232,15 +241,16 @@ article.format-link {
 		left: 0;
 		right: 0;
 		bottom: 0;
-		width: 100%!important;
-		height: 100%!important;
+		width: 100% !important;
+		height: 100% !important;
 	}
 
 	.mejs-container {
-		width: 100%!important;
-		height: 100%!important;
+		width: 100% !important;
+		height: 100% !important;
 	}
 }
+
 section > h2 {
 	font-size: 20px;
 	font-weight: lighter;
@@ -252,43 +262,50 @@ section > h2 {
 	@media #{$medium-up} {
 		font-size: 24px;
 		padding-bottom: 11px;
-		border-bottom: 2px solid rgba(117,117,117,0.28);
+		border-bottom: 2px solid rgba(117, 117, 117, 0.28);
 	}
 
 	@media #{$large-up} {
-	 font-size: 30px;
-	 padding-bottom: 18px
+		font-size: 30px;
+		padding-bottom: 18px;
 	}
 }
 
 section.error-404 {
 	text-align: center;
 	padding: 50px;
+
 	p {
 		color: $body-font-color;
 		font-weight: lighter;
 	}
+
 	@media #{$medium-up} {
 		padding: 100px 0;
+
 		p {
 			font-size: 20px;
 		}
+
 		.search-form {
 			padding: 0 100px;
 		}
+
 		.search-field {
 			font-size: 24px;
 			line-height: 54px;
 			height: 56px;
 			padding: 0 15px;
 			background: #f9f9f9;
 		}
+
 		.search-submit {
 			font-size: 24px;
-	    font-weight: bold;
-	    line-height: 54px;
-	    height: 56px;
+			font-weight: bold;
+			line-height: 54px;
+			height: 56px;
 			background: #f9f9f9;
+
 			&:hover {
 				background: $secondary-color;
 			}

diff --git a/editor-style-rtl.css b/editor-style-rtl.css
@@ -903,6 +903,16 @@ legend {
   .entry-meta .posted-author,
   .entry-meta .comments-number {
     margin-left: 20px; }
+    .entry-meta .posted-date:last-child,
+    .entry-meta .posted-author:last-child,
+    .entry-meta .comments-number:last-child {
+      margin-left: 0; }
+    @media only screen and (max-width: 40em) {
+      .entry-meta .posted-date,
+      .entry-meta .posted-author,
+      .entry-meta .comments-number {
+        display: block;
+        margin-left: 0; } }
   .entry-meta i {
     vertical-align: middle;
     line-height: .8; }

diff --git a/editor-style.css b/editor-style.css
@@ -903,6 +903,16 @@ legend {
   .entry-meta .posted-author,
   .entry-meta .comments-number {
     margin-right: 20px; }
+    .entry-meta .posted-date:last-child,
+    .entry-meta .posted-author:last-child,
+    .entry-meta .comments-number:last-child {
+      margin-right: 0; }
+    @media only screen and (max-width: 40em) {
+      .entry-meta .posted-date,
+      .entry-meta .posted-author,
+      .entry-meta .comments-number {
+        display: block;
+        margin-right: 0; } }
   .entry-meta i {
     vertical-align: middle;
     line-height: .8; }

diff --git a/style-rtl.css b/style-rtl.css
@@ -2694,6 +2694,16 @@ body.no-max-width .main-navigation {
   .entry-meta .posted-author,
   .entry-meta .comments-number {
     margin-left: 20px; }
+    .entry-meta .posted-date:last-child,
+    .entry-meta .posted-author:last-child,
+    .entry-meta .comments-number:last-child {
+      margin-left: 0; }
+    @media only screen and (max-width: 40em) {
+      .entry-meta .posted-date,
+      .entry-meta .posted-author,
+      .entry-meta .comments-number {
+        display: block;
+        margin-left: 0; } }
   .entry-meta i {
     vertical-align: middle;
     line-height: .8; }

diff --git a/style.css b/style.css
@@ -2694,6 +2694,16 @@ body.no-max-width .main-navigation {
   .entry-meta .posted-author,
   .entry-meta .comments-number {
     margin-right: 20px; }
+    .entry-meta .posted-date:last-child,
+    .entry-meta .posted-author:last-child,
+    .entry-meta .comments-number:last-child {
+      margin-right: 0; }
+    @media only screen and (max-width: 40em) {
+      .entry-meta .posted-date,
+      .entry-meta .posted-author,
+      .entry-meta .comments-number {
+        display: block;
+        margin-right: 0; } }
   .entry-meta i {
     vertical-align: middle;
     line-height: .8; }