Merge pull request #135 from elmastudio/update/1.2.2

Update 1.2.2
elmastudio · Nov 2, 2020 · 84bf52a · 84bf52a
2 parents 5a78c82 + 23a5c70
commit 84bf52a
Show file tree

Hide file tree

Showing 41 changed files with 1,329 additions and 913 deletions.
diff --git a/404.php b/404.php
@@ -11,7 +11,7 @@
 	<main id="main" class="site-main" role="main">
 
 			<div class="error-404 not-found">
-				<header class="entry-header push-center small-margins">
+				<header class="entry-header push-center outer-margins">
 					<h1 class="entry-title"><?php esc_html_e( 'Oops! Page Not Found', 'aino' ); ?></h1>
 				</header><!-- .page-header -->
 

diff --git a/archive.php b/archive.php
@@ -9,9 +9,9 @@
 
 	<section id="primary" class="content-area">
 		<?php
-		if ( have_posts() ) :
-			?>
-		<header class="page-header grid-margins">
+			if ( have_posts() ) :
+		?>
+		<header class="page-header outer-margins">
 			<?php
 			the_archive_title( '<h1 class="page-title">', '</h1>' );
 

diff --git a/assets/sass/1-base/_accessibility.scss b/assets/sass/1-base/_accessibility.scss
@@ -1,4 +1,3 @@
-
 /* Text meant only for screen readers. */
 .screen-reader-text {
 	border: 0;
@@ -17,25 +16,31 @@
 
 .screen-reader-text:focus {
 	background-color: $color__background;
+	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	clip: auto !important;
 	-webkit-clip-path: none;
 	clip-path: none;
+	color: #21759b;
 	display: block;
-	font-size: 14px;
-	font-weight: bold;
+	font-size: 0.875rem;
+	font-weight: 700;
 	height: auto;
-	left: 5px;
+	right: 5px;
 	line-height: normal;
-	padding: 0;
+	padding: 15px 23px 14px;
 	text-decoration: none;
 	top: 5px;
 	width: auto;
 	z-index: 100000;
-	/* Above WP toolbar. */
 }
 
-/* Show the skip link when focused. */
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+	outline: 0;
+}
+
+/* Skip Link */
 .skip-link {
 	left: -9999rem;
 	top: 2.5rem;
@@ -54,4 +59,4 @@
 	padding: 15px 23px 14px;
 	z-index: 100000;
 	right: auto;
-}
+}
diff --git a/assets/sass/1-base/_grid.scss b/assets/sass/1-base/_grid.scss
@@ -1,4 +1,3 @@
-/* 12 Grid */
 .col,
 .column {
 	box-sizing: border-box;
@@ -20,207 +19,104 @@
 .col1 {
 	max-width: $col1;
 
-	&__no-gutter {
-		max-width: $col1-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col1} - #{$s-9});
 	}
 }
 
 .col2 {
 	max-width: $col2;
 
-	&__no-gutter {
-		max-width: $col2-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col2} - #{$s-9});
 	}
 }
 
 .col3 {
 	max-width: $col3;
 
-	&__no-gutter {
-		max-width: $col3-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col3} - #{$s-9});
 	}
 }
 
 .col4 {
 	max-width: $col4;
 
-	&__no-gutter {
-		max-width: $col4-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col4} - #{$s-9});
 	}
 }
 
 .col5 {
 	max-width: $col5;
 
-	&__no-gutter {
-		max-width: $col5-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col5} - #{$s-9});
 	}
 }
 
 .col6 {
 	max-width: $col6;
 
-	&__no-gutter {
-		max-width: $col6-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col6} - #{$s-9});
 	}
 }
 
 .col7 {
 	max-width: $col7;
 
-	&__no-gutter {
-		max-width: $col7-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col7} - #{$s-9});
 	}
 }
 
 .col8 {
 	max-width: $col8;
 
-	&__no-gutter {
-		max-width: $col8-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col8} - #{$s-9});
 	}
 }
 
 .col9 {
 	max-width: $col9;
 
-	&__no-gutter {
-		max-width: $col9-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col9} - #{$s-9});
 	}
 }
 
 .col10 {
 	max-width: $col10;
 
-	&__no-gutter {
-		max-width: $col10-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col10} - #{$s-9});
 	}
 }
 
 .col11 {
 	max-width: $col11;
 
-	&__no-gutter {
-		max-width: $col11-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col11} - #{$s-9});
 	}
 }
 
 .col12 {
 	max-width: $col12;
 
-	&__no-gutter {
-		max-width: $col12-no-gutter;
+	&.no-margins {
+		max-width: calc(#{$col12} - #{$s-9});
 	}
 }
 
-
-// Push padding left or right (Desktop only)
-@include breakpoint(md) {
-	.push-left-col1 {
-		padding-left: $col1;
-	}
-
-	.push-left-col2 {
-		padding-left: $col2;
-	}
-
-	.push-left-col3 {
-		padding-left: $col3;
-	}
-
-	.push-left-col4 {
-		padding-left: $col4;
-	}
-
-	.push-left-col5 {
-		padding-left: $col5;
-	}
-
-	.push-left-col6 {
-		padding-left: $col6;
-	}
-
-	.push-left-col7 {
-		padding-left: $col7;
-	}
-
-	.push-left-col8 {
-		padding-left: $col8;
-	}
-
-	.push-left-col9 {
-		padding-left: $col9;
-	}
-
-	.push-left-col10 {
-		padding-left: $col10;
-	}
-
-	.push-left-col11 {
-		padding-left: $col11;
-	}
-
-	.push-right-col1 {
-		padding-right: $col1;
-	}
-
-	.push-right-col2 {
-		padding-right: $col2;
-	}
-
-	.push-right-col3 {
-		padding-right: $col3;
-	}
-
-	.push-right-col4 {
-		padding-right: $col4;
-	}
-
-	.push-right-col5 {
-		padding-right: $col5;
-	}
-
-	.push-right-col6 {
-		padding-right: $col6;
-	}
-
-	.push-right-col7 {
-		padding-right: $col7;
-	}
-
-	.push-right-col8 {
-		padding-right: $col8;
-	}
-
-	.push-right-col9 {
-		padding-right: $col9;
-	}
-
-	.push-right-col10 {
-		padding-right: $col10;
-	}
-
-	.push-right-col11 {
-		padding-right: $col11;
-	}
+.outer-margins {
+	@include outer-margins;
 }
 
-.grid-margins {
-	padding-left: $s-4;
-	padding-right: $s-4;
-
-	@include breakpoint(sm) {
-		padding-left: $s-7;
-		padding-right: $s-7;
-	}
-
-	@include breakpoint(lg) {
-		padding-left: $s-9;
-		padding-right: $s-9;
-	}
-}
-
-// Grid margins for elements which only require them on mobile.
+// Outer margins for elements which only require them on mobile.
 .mobile-margins {
 	padding-left: $s-4;
 	padding-right: $s-4;
@@ -236,21 +132,10 @@
 	}
 }
 
-// Mobile Grid margins for elements with default content width.
-.small-margins,
+// Outer Grid margins for elements with default content width.
+.default-margins,
 .search-no-results .entry-content {
-	padding-left: $s-4;
-	padding-right: $s-4;
-
-	@include breakpoint(sm) {
-		padding-left: $s-7;
-		padding-right: $s-7;
-	}
-
-	@include breakpoint(lg) {
-		padding-left: 0;
-		padding-right: 0;
-	}
+	@include default-margins;
 }
 
 .col-margins {
@@ -292,16 +177,17 @@
 .comment-list,
 .comment-respond,
 .authorbox__details,
-.author-pic-link {
+.author-pic-link,
+.default-content-width {
 	@include push--auto;
-	max-width: $col6-no-gutter;
+	max-width: $default-content-width;
 }
 
 /* Full width page template */
 .tpl-fullwidth .entry-content>*,
 .tpl-fullwidth .entry-header {
 	@include push--auto;
-	max-width: $col12-no-gutter;
+	max-width: $wide-content-width;
 }
 
 /* Fullscreen and hero page template */
@@ -315,7 +201,7 @@
 
 /* Alignwide and fullwidth Content widths */
 .entry-content>*.alignwide {
-	max-width: $col12-no-gutter;
+	max-width: $wide-content-width;
 }
 
 // All containers with 1200px default width.