Blog styles from JC

web/wp-content/themes/dctx2/archive.php

@@ -11,14 +11,18 @@
 
 	<main id="main" class="site-main">
 
-		<?php if ( have_posts() ) : ?>
+		<header class="blog-header full-width">
+
+			<div class="container">
+
+				<?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
+
+			</div><!-- .container -->
 
-			<header class="page-header">
-				<?php
-					the_archive_title( '<h1 class="page-title">', '</h1>' );
-					the_archive_description( '<div class="archive-description">', '</div>' );
-				?>
-			</header><!-- .page-header -->
+		</header><!-- .blog-header -->
+		<div class="article-wrapper">
+
+		<?php if ( have_posts() ) : ?>
 
 			<?php
 			/* Start the Loop */
@@ -30,7 +34,7 @@
 					* If you want to override this in a child theme, then include a file
 					* called content-___.php (where ___ is the Post Format name) and that will be used instead.
 					*/
-				get_template_part( 'template-parts/content', get_post_format() );
+				get_template_part( 'template-parts/content', 'blog' );
 
 			endwhile;
 
@@ -42,6 +46,6 @@
 
 		endif;
 		?>
-
+		</div><!-- .article-wrapper -->
 	</main><!-- #main -->
 <?php get_footer(); ?>

web/wp-content/themes/dctx2/assets/sass/modules/_buttons.scss

@@ -13,7 +13,7 @@ input[type='submit'] {
 	appearance: none;
 	background-color: $color-background-button;
 	border: none;
-	border-radius: 0;
+	border-radius: rem(5);
 	border-width: 0;
 	box-shadow: none;
 	color: $color-text-button;

web/wp-content/themes/dctx2/assets/sass/modules/_comments.scss

@@ -42,6 +42,7 @@
 .comment-form-url {
 
 	label {
+		display: block;
 		font-size: rem(16);
 		text-transform: uppercase;
 		width: 100%;

web/wp-content/themes/dctx2/assets/sass/modules/_content.scss

@@ -12,21 +12,23 @@
 } // .entry-title
 
 // Sticy and Comments Link
-.sticky,
-.comments-link {
+.stickyk {
 	display: block;
-} // .sticky, .comments-link
+} // .sticky
+
+.comments-link {
+	display: inline-block;
+} // .comments-link
 
 // hentry
 .hentry {
 	@include margin(0 0 $space 0);
 } // .hentry
 
-// Byline and update post date
-.byline,
+// update post date
 .updated:not(.published) {
 	display: none;
-} // .byline, .updated:not(.published)
+} // .updated:not(.published)
 
 // Byline for single and group
 .single .byline,

web/wp-content/themes/dctx2/assets/sass/modules/navigation/_post-navigation.scss

@@ -20,10 +20,29 @@
 		flex: 0 0 100%;
 		flex-flow: row wrap;
 		width: 100%; // For IE11.
+
+		a {
+			text-decoration: none;
+
+			&:hover,
+			&:active,
+			&:focus {
+
+				.arrow {
+					opacity: 0.5;
+				} //.arrow
+
+			} // &:hover, &:active, &:focus
+
+			.arrow {
+				@include size(rem(30));
+			} // .arrow
+		} // a
+
 	} // .nav-links
 
 	.site-main & {
-		@include margin(0 0 $space);
+		@include margin(0 auto $space);
 
 		overflow: hidden;
 	} // .site-main &

web/wp-content/themes/dctx2/assets/sass/utilities/variables/_color-var.scss

@@ -158,16 +158,16 @@ $color-link-focus: $color-robins-egg;
 //-----------------------------------------
 
 /// Button background.
-$color-background-button: $color-dove-gray;
+$color-background-button: $color-robins-egg;
 
 /// Button background on hover.
-$color-background-button-hover: $color-mineshaft;
+$color-background-button-hover: $color-limeaid;
 
 /// Button text.
 $color-text-button: $color-white;
 
 /// Input border.
-$color-border-input: $color-silver;
+$color-border-input: $color-robins-egg;
 
 /// Input focused color.
 $color-focus-text-input: $color-cod-gray;

web/wp-content/themes/dctx2/assets/sass/views/_blog.scss

@@ -1,57 +1,64 @@
 //--------------------------------------------------------------
-// Blog
+// Blog/Archive Page
 //--------------------------------------------------------------
+.blog,
+.archive {
 
-article.post {
-	margin-bottom: 40px;
-    padding: 30px 40px 40px;
-    border-radius: 8px;
-    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
-}
-
-time,
-.author a,
-.tags-links a {
-	text-decoration: underline;
-	color: #00BCD4;
-}
-
-.blog .site-header {
-    margin-bottom: 0;
-}
-
-.blog .site-main > header {
-    text-align: center;
-    color: white;
-    background: #ff7043;
-    max-width: 100%;
-    position: relative;
-    height: auto;
-    padding: 20px;
-    margin-bottom: 40px;
-}
-
-.blog .page-title.screen-reader-text {
-    all: unset;
-    font-size: 2em;
-    font-weight: bold;
-    padding: 20px;
-    margin-bottom: 20px;
-    text-align: center;
-}
-
-.blog a.button {
-    background-color: #00BCD4;
-    border: 1px solid #00BCD4;
-    border-radius: 30px;
-    color: #fff;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 1.125rem;
-    font-weight: 600;
-    padding: 8px 36px;
-    text-align: center;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    -webkit-transition: all 0.3s ease;
-}
+	.site-header {
+		margin-bottom: 0;
+	} //.site-header
+
+	.blog-header {
+		@include margin(0 auto rem(60));
+		@include padding(rem(20));
+
+		background-color: $color-tango;
+		color: $color-white;
+		text-align: center;
+
+		.page-title {
+			margin-bottom: 0;
+		} // .page-title
+	} // .blog-header
+
+	.article-wrapper {
+		@include padding(null 10%);
+		@include margin(null auto);
+
+		max-width: 100% !important;
+	} // .article-wrapper
+
+	article {
+		@include padding(rem(20) rem(50));
+		@include margin(null 10%);
+
+		border-radius: rem(10);
+		box-shadow: 0 rem(5) rem(20) rgba($color-black, 0.1);
+		max-width: 100% !important;
+
+		.entry-meta {
+			color: $color-gray;
+
+			a {
+				color: $color-robins-egg;
+			} // a
+		} // .entry-meta
+
+		.read-more {
+			background-color: $color-robins-egg;
+			border: rem(1) solid $color-robins-egg;
+			border-radius: rem(30);
+			color: $color-white;
+			text-decoration: none;
+
+			&:hover,
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: $color-robins-egg;
+				opacity: 1;
+			} // &:hover, &:focus, &:active
+		} // .read-more
+
+	} // article
+} // .blog

web/wp-content/themes/dctx2/assets/sass/views/_single.scss

@@ -0,0 +1,55 @@
+//--------------------------------------------------------------
+// Blog Page
+//--------------------------------------------------------------
+.single {
+
+	.site-header {
+		margin-bottom: rem(30);
+	} //.site-header
+
+	.entry-header {
+		@include margin(null null rem(50));
+		@include padding(rem(20) null);
+
+		border-bottom: rem(2) solid $color-robins-egg;
+
+		.entry-title {
+			font-size: rem(30);
+			line-height: rem(36);
+			margin-bottom: 0;
+
+			@include media($tablet-portrait) {
+				font-size: rem(50);
+				line-height: rem(60);
+			}
+		} // .page-title
+	} // .blog-header
+
+	article {
+
+		.entry-meta {
+			color: $color-gray;
+
+			a {
+				color: $color-robins-egg;
+			} // a
+		} // .entry-meta
+
+		.read-more {
+			background-color: $color-robins-egg;
+			border: rem(1) solid $color-robins-egg;
+			border-radius: rem(30);
+			color: $color-white;
+			text-decoration: none;
+
+			&:hover,
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: $color-robins-egg;
+				opacity: 1;
+			} // &:hover, &:focus, &:active
+		} // .read-more
+
+	} // article
+} // .blog

web/wp-content/themes/dctx2/assets/sass/views/index.scss

@@ -5,4 +5,4 @@
 @import 'homepage';
 @import 'rapidpass';
 @import 'blog';
-@import 'archive';
+@import 'single';

web/wp-content/themes/dctx2/functions.php

@@ -239,24 +239,3 @@ function dctx_widgets_init() {
  * Scaffolding Library.
  */
 require get_template_directory() . '/inc/scaffolding.php';
-
-/**
- * Add security headers for Nginx based sites
- *
- * @param [type] $headers add security headers as array.
- *
- * @return array
- */
-function additional_securityheaders( $headers ) {
-	if ( ! is_admin() ) {
-		$headers['Referrer-Policy']         = 'no-referrer-when-downgrade';
-		$headers['X-Content-Type-Options']  = 'nosniff';
-		$headers['XX-XSS-Protection']       = '1; mode=block';
-		$headers['Feature-Policy']          = 'geolocation "none" ; camera "none"';
-		$headers['X-Frame-Options']         = 'SAMEORIGIN';
-		$headers['Content-Security-Policy'] = "script-src-elem 'self' 'unsafe-inline' https://www.google.com https://js-agent.newrelic.com https://bam.nr-data.net https://www.gstatic.com https://cdnjs.cloudflare.com https://cdn.datatables.net; script-src 'unsafe-inline' 'unsafe-eval' https://www.google.com https://fonts.googleapis.com https://cdnjs.cloudflare.com https://www.gstatic.com https://js-agent.newrelic.com https://cdn.datatables.net";
-	}
-
-	return $headers;
-}
-add_filter( 'wp_headers', 'additional_securityheaders' );