improved banners styles structure and naming

assets/styles/02-atoms/_author-banner.scss → assets/styles/04-organisms/_author-banner.scss

@@ -1,5 +1,7 @@
 .author-banner {
-  height: 30vh;
+  height: 20vh;
+  min-height: 180px;
+  padding: 15% 0;
 
   @include media-breakpoint-up(md) {
     height: 40vh;

assets/styles/04-organisms/_banner.scss

@@ -0,0 +1,8 @@
+/* Banner */
+.banner {
+	position: relative;
+	width: 100%;
+	background: transparent none no-repeat scroll center center / cover;
+	overflow: hidden;
+	min-height: 85px; // FIXME: provisional
+}

assets/styles/04-organisms/_front-page-banner.scss

@@ -0,0 +1,28 @@
+.front-page-banner {
+  @extend .aligner;
+  height: 40vh;
+  min-height: 240px;
+  padding: 15% 0;
+
+  @include media-breakpoint-up(sm) {
+    height: 60vh;
+  }
+  @include media-breakpoint-up(md) {
+    height: 100vh;
+  }
+
+ /* When home is not in its first page */
+ .paged & {
+  max-height: 20vh;
+  min-height: 160px;
+  padding: 10% 0;
+
+   @include media-breakpoint-up(sm) {
+     max-height: 30vh;
+   }
+
+   @include media-breakpoint-up(md) {
+     padding: 0;
+   }
+  }
+}

assets/styles/main.scss

@@ -53,7 +53,6 @@
 
 @import "02-atoms/custom-logo";
 
-@import "02-atoms/author-banner";
 @import "02-atoms/author-link";
 @import "02-atoms/author-avatar";
 @import "02-atoms/author-location";
@@ -71,7 +70,6 @@
 @import "02-atoms/entry-summary-title";
 @import "02-atoms/entry-summary";
 @import "02-atoms/excerpt-more";
-@import "02-atoms/entry-banner";
 
 @import "02-atoms/entry-title";
 @import "02-atoms/post-updated";
@@ -114,14 +112,19 @@
 @import "03-molecules/embed";
 
 // Organisms
-@import "04-organisms/header-banner";
 @import "04-organisms/main";
 @import "04-organisms/main-container";
 @import "04-organisms/footer";
 @import "04-organisms/post-body";
 @import "04-organisms/entry-post";
 @import "04-organisms/main-menu";
 @import "04-organisms/posts-navigation";
+
+@import "04-organisms/banner";
+@import "04-organisms/entry-banner";
+@import "04-organisms/author-banner";
+@import "04-organisms/front-page-banner";
+
 @import "04-organisms/author-profile";
 
 // Templates

templates/header.php

@@ -1,5 +1,6 @@
   <?php if (is_front_page()) : ?>
-    <!-- Atom: front-page-banner (Add background-image style if is_front_page) -->
+
+    <!-- Organism: front-page-banner (Add background-image style if is_front_page) -->
     <header class="banner front-page-banner" style="background-image: url('http://demo.ghost.io/content/images/2014/09/testimg-home-1.jpg')">
 
 
@@ -12,7 +13,7 @@
     ?>
 
     <?php if ($author_banner) : ?>
-      <!-- Atom: author-banner -->
+      <!-- Organism: author-banner -->
       <header class="banner author-banner" style="background-image: url(' <?php echo $author_banner ?> ')">
     <?php else: ?>
       <header class="banner">
@@ -27,7 +28,7 @@
     ?>
 
     <?php if ($term_banner) : ?>
-      <!-- Atom: term-banner -->
+      <!-- Organism: term-banner -->
       <header class="banner term-banner" style="background-image: url(' <?php echo $term_banner ?> ')">
     <?php else: ?>
       <header class="banner">
@@ -44,11 +45,15 @@
 
         </hgroup>
       </div>
-  <?php else: ?>
 
+  <?php else: ?>
 
-  <!-- Organism: entry-banner (size according to wp_is_mobile) -->
-  <header class="banner entry-banner" style="background-image: url('<?php if (wp_is_mobile()) {the_post_thumbnail_url('medium');} else {the_post_thumbnail_url('');} ?>')">
+    <?php if (has_post_thumbnail()) : ?>
+      <!-- Organism: entry-banner (size according to wp_is_mobile) -->
+      <header class="banner entry-banner" style="background-image: url('<?php if (wp_is_mobile()) {the_post_thumbnail_url('medium');} else {the_post_thumbnail_url('');} ?>')">
+    <?php else: ?>
+      <header class="banner">
+    <?php endif; ?>
 
   <?php endif; ?>
 
@@ -71,26 +76,26 @@
   <!-- If is_front_page -->
   <?php if (is_front_page()) : ?>
 
-  <!-- Molecule: banner-texts -->
-  <div class="vertical">
-    <hgroup class="banner-texts">
+    <!-- Molecule: banner-texts -->
+    <div class="vertical">
+      <hgroup class="banner-texts">
 
-      <!-- Atom: banner-title -->
-      <h1 class="banner-title">Finding The Way Home</h1>
+        <!-- Atom: banner-title -->
+        <h1 class="banner-title">Finding The Way Home</h1>
 
-      <!-- Atom: banner-description -->
-      <h2 class="banner-description">A beautiful narrative written with the world's most elegant publishing platform. The story begins here.</h2>
+        <!-- Atom: banner-description -->
+        <h2 class="banner-description">A beautiful narrative written with the world's most elegant publishing platform. The story begins here.</h2>
 
-    </hgroup>
-  </div>
+      </hgroup>
+    </div>
 
   <?php endif; ?>
 
   <!-- If is first page of pagination -->
   <?php if ( !is_paged() ) : ?>
 
-  <!-- Atom: scroll-down-arrow -->
-  <a class="scroll-down-arrow icon-arrow-left js-scrolltoid radial-gradient" href="#js-scrollto" data-offset="45"><span hidden="true">Scroll Down</span></a>
+    <!-- Atom: scroll-down-arrow -->
+    <a class="scroll-down-arrow icon-arrow-left js-scrolltoid radial-gradient" href="#js-scrollto" data-offset="45"><span hidden="true">Scroll Down</span></a>
 
   <?php endif; ?>