Course styles WIP

Author: zackkrida

assets/css/child-styles.css

@@ -300,6 +300,29 @@
     }
   }
 
+  // Course template
+  &.single-cc_course .single-header--course {
+    padding-top: 0;
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      min-height: 350px;
+    }
+
+    .breadcrumbs {
+      margin-left: $space-larger;
+    }
+
+    .title-box {
+      z-index: 2;
+      display: inline-block;
+      transform: translateY($space-large * 2);
+    }
+  }
+
   // Stats shortcode
   .stats {
     // Hide WordPress generated brs

front/src/styles/modules.scss

@@ -116,3 +116,7 @@ main {
     padding-right: $space-normal;
   }
 }
+
+.has-background-soft-gold {
+  background-color: #fef6d8;
+}

front/src/styles/shame.scss

@@ -1,6 +1,11 @@
-<?php
-if ( function_exists( 'yoast_breadcrumb' ) ) {
-	yoast_breadcrumb( '<p class="breadcrumbs breadcrumbs--dark" id="breadcrumbs">', '</p>' );
-}
-?>
-<h2 class="title is-1 has-text-black"><?php the_title(); ?></h2>
+<div class="wrapper">
+	<?php
+	if ( function_exists( 'yoast_breadcrumb' ) ) {
+		yoast_breadcrumb( '<p class="breadcrumbs breadcrumbs--dark" id="breadcrumbs">', '</p>' );
+	}
+	?>
+
+	<div class="padding-vertical-large padding-horizontal-larger has-background-white title-box">
+		<h2 class="title is-2 has-text-black"><?php the_title(); ?></h2>
+	</div>
+</div>

inc/partials/entry/course-header.php

@@ -3,18 +3,14 @@
 	the_post();
 ?>
 <section class="main-content">
-	<header class="single-header">
+	<header class="single-header single-header--course">
 		<div class="container">
-			<div class="columns is-centered">
-				<div class="column is-12">
-					<?php get_template_part( 'inc/partials/entry/course', 'header' ); ?>
-				</div>
-			</div>
+			<?php get_template_part( 'inc/partials/entry/course', 'header' ); ?>
 		</div>
 	</header>
 	<div class="container">
 		<div class="columns is-centered">
-		<div class="column is-4">
+		<div class="column is-4 has-background-soft-gold">
 			wow
 		</div>
 			<div class="column is-8">