Merge pull request #73 from elmastudio/update/post-styles

0.2.1 update
elmastudio · Feb 24, 2020 · 8dcfb70 · 8dcfb70
2 parents 96f1aee + 4dc197e
commit 8dcfb70
Show file tree

Hide file tree

Showing 39 changed files with 501 additions and 629 deletions.
diff --git a/404.php b/404.php
@@ -12,12 +12,12 @@
 	<main id="main" class="site-main" role="main">
 
 			<div class="error-404 not-found">
-				<header class="entry-header cf">
-					<h1 class="page-title"><?php esc_html_e( 'Oops! Page Not Found', 'aino' ); ?></h1>
+				<header class="entry-header push-center small-margins">
+					<h1 class="entry-title"><?php esc_html_e( 'Oops! Page Not Found', 'aino' ); ?></h1>
 				</header><!-- .page-header -->
 
-				<div class="entry-content col cf">
-					<p class="intro"><?php esc_html_e( 'We can&rsquo;t seem to find the page you&rsquo;re looking for. The link you clicked may be broken or the page may have been removed.', 'aino' ); ?></p>
+				<div class="entry-content">
+					<p><?php esc_html_e( 'We can&rsquo;t seem to find the page you&rsquo;re looking for. The link you clicked may be broken or the page may have been removed.', 'aino' ); ?></p>
 					<p><?php esc_html_e( 'Maybe try a search instead?', 'aino' ); ?></p>
 
 					<p><?php get_search_form(); ?></p>

diff --git a/archive.php b/archive.php
@@ -14,12 +14,12 @@
 		if ( have_posts() ) :
 			?>
 
-			<header class="page-header">
+			<header class="page-header grid-margins">
 				<?php
-				the_archive_title( '<h1 class="page-title">', '</h1>' );
+				the_archive_title( '<h1 class="page-title col col7">', '</h1>' );
 
 				if ( ! is_author() ) {
-					the_archive_description( '<div class="description">', '</div>' );
+					the_archive_description( '<div class="description col col7">', '</div>' );
 				}
 				?>
 
@@ -31,7 +31,7 @@
 				?>
 			</header><!-- .page-header -->
 
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main mobile-margins" role="main">
 
 				<div class="posts-container" id="posts-container">
 

diff --git a/assets/sass/blocks/_blocks-default.scss b/assets/sass/blocks/_blocks-default.scss
@@ -21,7 +21,7 @@
 
 	&.alignwide,
 	.alignwide {
-		max-width: $website-width;
+		max-width: $col12;
 		position: relative;
 		margin-left: auto;
 		margin-right: auto;
@@ -52,7 +52,7 @@
 .hentry .entry-content .alignfull {
 
 	.alignwide {
-		max-width: $website-width;
+		max-width: $col12;
 		clear: both;
 		overflow: hidden;
 		margin-left: auto;

diff --git a/assets/sass/elements/_buttons.scss b/assets/sass/elements/_buttons.scss
@@ -73,6 +73,7 @@ a.btn-outline,
 
 	.btn,
 	input[type="submit"],
+	button[type="submit"],
 	a.btn-primary,
 	.btn-primary a,
 	a.btn-outline,
@@ -94,6 +95,7 @@ a.btn-outline,
 
 	.btn,
 	input[type="submit"],
+	button[type="submit"],
 	a.btn-primary,
 	.btn-primary a,
 	a.btn-outline,
@@ -103,3 +105,21 @@ a.btn-outline,
 		border-radius: 6.25em;
 	}
 }
+
+/* Edit Button */
+.post-edit-link {
+	@include btn;
+	position: relative;
+	margin-top: $spacing-mobile-4;
+	background: $color__primary;
+	color: $color__white;
+	fill: $color__white;
+	padding: 12px 24px 12px 46px;
+	line-height: 1;
+	width: auto;
+	height: 40px;
+
+	@include breakpoint(l) {
+		margin-top: $spacing-desktop-4;
+	}
+}
diff --git a/assets/sass/elements/_forms.scss b/assets/sass/elements/_forms.scss
@@ -36,29 +36,12 @@ textarea {
 	@include input-placeholder {
 		color: #8e8e8e;
 	}
-}
 
-/* Form Focus State */
-input[type="text"]:focus, input[type="email"]:focus,
-input[type="url"]:focus, input[type="password"]:focus,
-input[type="search"]:focus, input[type="number"]:focus,
-input[type="tel"]:focus, input[type="range"]:focus,
-input[type="date"]:focus, input[type="month"]:focus,
-input[type="week"]:focus, input[type="time"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="color"]:focus, textarea:focus,
-input[type="text"]:active, input[type="email"]:active,
-input[type="url"]:active, input[type="password"]:active,
-input[type="search"]:active, input[type="number"]:active,
-input[type="tel"]:active, input[type="range"]:active,
-input[type="date"]:active, input[type="month"]:active,
-input[type="week"]:active, input[type="time"]:active,
-input[type="datetime"]:active,
-input[type="datetime-local"]:active,
-input[type="color"]:active, textarea:active {
-	outline: 0;
-	border: 1px solid #707070;
+	&:focus,
+	&:active {
+		outline: 0;
+		border: 1px solid #707070;
+	}
 }
 
 .color-notice,
@@ -116,6 +99,17 @@ select {
 	width: 100%;
 }
 
+/* Form Submit */
+input[type="submit"],
+button[type="submit"] {
+	display: block;
+	clear: both;
+	margin-top: $spacing-3;
+	@include breakpoint(m) {
+		margin-top: $spacing-3 0 0;
+	}
+}
+
 /* Search Form */
 .searchform-wrap,
 .form-wrap {
@@ -134,60 +128,24 @@ select {
 	padding: 0;
 }
 
-.widget_search input[type="search"],
-.entry-content input[type="search"] {
-	width: calc(100% - 120px);
-	padding: 0 0 0 12px;
-	height: $spacing-desktop-7;
-	line-height: 1;
-	box-sizing: border-box;
-	border: 1px solid $color__border;
-}
-
-.widget_search input[type="search"]:active,
-.entry-content input[type="search"]:active,
-.widget_search input[type="search"]:focus,
-.entry-content input[type="search"]:focus {
-	box-shadow: none;
-	border: 1px solid $color__notification;
-	caret-color: $color__notification;
-}
-
 .entry-content label .search-icon,
 .widget_search label .search-icon {
 	display: none;
 }
 
-.entry-content .search-submit,
-.widget_search .search-submit {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 120px;
-	height: $spacing-desktop-7;
-	text-align: center;
-	padding: 0;
-	display: inline-block;
-	@include btn-primary;
-}
-
 .entry-content .search-submit span.search-icon,
 .widget_search .search-submit span.search-icon {
 	width: 120px;
 	height: $spacing-desktop-7;
 	padding: 16px 0 0;
 }
 
-.entry-content .search-submit .icon,
-.widget_search .search-submit .icon {
-	fill: $color__white;
-}
-
 /* Form Styles (via Customizer Settings) */
 .form-curved {
 	input,
 	textarea,
-	select {
+	select,
+	.comment-content-wrap {
 		@include border-radius-s;
 	}
 }
@@ -197,8 +155,9 @@ select {
 	select {
 		border-radius: 6.25em;
 	}
-}
 
-.form-round textarea {
-	@include border-radius-m;
+	textarea,
+	.comment-content-wrap {
+		@include border-radius-m;
+	}
 }
diff --git a/assets/sass/elements/_icons.scss b/assets/sass/elements/_icons.scss
@@ -27,21 +27,22 @@
 /* Edit Link Icon */
 .edit-link .icon {
 	position: absolute;
-	top: $spacing-xs;
-	left: $spacing-s;
+	top: 8px;
+	left: 16px;
 	width: $spacing-3;
 	height: $spacing-3;
-	padding: 0;
 }
 
 /* Search Form Icon */
 .search-icon {
 	position: absolute;
+	top: 8px;
+	left: 16px;
 	@include flexbox;
 	@include flex-center;
-	width: $spacing-desktop-5;
-	height: $spacing-desktop-5;
-	color: #8e8e8e;
+	width: $spacing-3;
+	height: $spacing-3;
+	color: #707070;
 
 	.icon {
 		width: $spacing-3;

diff --git a/assets/sass/elements/_links.scss b/assets/sass/elements/_links.scss
@@ -94,23 +94,6 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
 	}
 }
 
-/* Edit Button */
-.post-edit-link {
-	@include btn;
-	position: relative;
-	margin-top: $spacing-mobile-4;
-	background: $color__primary;
-	color: $color__white;
-	fill: $color__white;
-	padding: $spacing-s $spacing-3 $spacing-s $spacing-desktop-6;
-	line-height: 1;
-	width: auto;
-
-	@include breakpoint(l) {
-		margin-top: $spacing-desktop-4;
-	}
-}
-
 /* Link Transitions */
 .site-branding a,
 .primary-menu a,