Blog Layout

css-compiled/template.css

@@ -68,7 +68,7 @@ b, strong, label, th {
   src: url("./fonts/Novecentosanswide-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Novecentosanswide-Medium-webfont.woff2") format("woff2"), url("./fonts/Novecentosanswide-Medium-webfont.woff") format("woff"), url("./fonts/Novecentosanswide-Medium-webfont.ttf") format("truetype"), url("./fonts/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium") format("svg");
   font-weight: normal;
   font-style: normal; }
-.default-animation, #body, .modular .showcase .button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .callout .notebook .screen .screen-content-hover, .logo h3, .logo ul.social-icons li {
+.default-animation, #body, .modular .showcase .button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .callout .notebook .screen .screen-content-hover, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a {
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease; }
@@ -564,17 +564,39 @@ td {
           #panel .navigation li ul li.active > a {
             background: #ccc; }
 
+.blogstyling #body {
+  padding-top: 12rem; }
+.blogstyling #header {
+  color: #656161; }
+  .blogstyling #header a {
+    color: #656161; }
+  .blogstyling #header .search-box i {
+    color: #656161; }
+  .blogstyling #header .search-box input[type=search]:focus {
+    background-color: rgba(101, 97, 97, 0.2); }
+  .blogstyling #header li.active a {
+    color: #87b672; }
+  .blogstyling #header .logo ul.social-icons li {
+    background: rgba(101, 97, 97, 0.2); }
+    .blogstyling #header .logo ul.social-icons li .fa {
+      color: white; }
+    .blogstyling #header .logo ul.social-icons li:hover .fa {
+      color: #656161; }
+
 .blog-header {
-  padding-top: 2rem;
+  padding-top: 1rem !important;
-  padding-bottom: 2rem; }
+  padding-bottom: 1rem;
+  margin-top: 0 !important; }
   .blog-header.blog-header-image {
-    background-size: cover;
+    background-size: cover !important; }
-    background-position: center; }
     .blog-header.blog-header-image h1, .blog-header.blog-header-image h2 {
-      color: #FFFFFF; }
+      color: #FFFFFF;
+      text-align: left; }
   .blog-header h1 {
-    font-size: 4rem;
+    font-size: 2.5rem;
-    margin-top: 0; }
+    margin-top: 0;
+    margin-bottom: 0;
+    text-transform: uppercase; }
     @media only all and (min-width: 48em) and (max-width: 59.938em) {
       .blog-header h1 {
         font-size: 3rem; } }
@@ -594,6 +616,7 @@ td {
   .list-item .list-blog-header {
     position: relative; }
     .list-item .list-blog-header h4 {
+      text-align: left;
       margin-bottom: 0.5rem; }
       .list-item .list-blog-header h4 a {
         color: #9A9898; }
@@ -604,30 +627,30 @@ td {
       margin-top: 1rem;
       border-radius: 0; }
   .list-item .list-blog-date {
-    float: right;
+    text-align: center;
-    text-align: center; }
+    background-color: rgba(101, 97, 97, 0.1);
+    padding: 0.7rem 1rem;
+    margin-bottom: 0.2rem;
+    margin-right: 0.5rem; }
     .list-item .list-blog-date span {
-      display: block;
+      font-size: 1rem;
-      font-size: 1.75rem;
+      text-transform: uppercase;
-      font-weight: 600;
+      color: #9A9898;
-      line-height: 110%; }
+      font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
-    .list-item .list-blog-date em {
-      display: block;
-      border-top: 1px solid #EEEEEE;
-      font-style: normal;
-      text-transform: uppercase; }
 
 .blog-content-item .list-blog-padding > p:nth-child(2) {
   font-size: 1.2rem; }
 
+.tags {
+  background-color: rgba(101, 97, 97, 0.1);
+  padding: 0.7rem 1rem;
+  margin-bottom: 0.2rem; }
   .tags a {
     display: inline-block;
-  font-size: 0.8rem;
+    font-size: 1rem;
-  border: 1px solid #87b672;
+    text-transform: uppercase;
-  border-radius: 0;
+    color: #9A9898;
-  padding: 0.1rem 0.4rem;
+    font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
-  margin-bottom: 0.2rem;
-  text-transform: uppercase; }
 
 .archives, .related-pages {
   padding: 0;
@@ -663,7 +686,8 @@ div#breadcrumbs {
   #sidebar .sidebar-content {
     margin-bottom: 3rem; }
     #sidebar .sidebar-content h4 {
-      margin-bottom: 1rem; }
+      margin-bottom: 1rem;
+      text-align: left; }
     #sidebar .sidebar-content p, #sidebar .sidebar-content ul {
       margin-top: 1rem; }
 

scss/template/_blog.scss

@@ -1,21 +1,59 @@
+.blogstyling {
+    #body {
+        padding-top: 12rem;
+    }
+    #header {
+        color: $light-gray;
+        a {
+            color: $light-gray;
+        }
+        .search-box {
+            i {
+                color: $light-gray;
+            }
+            input[type=search] {
+                &:focus {
+                    background-color: transparentize($light-gray, 0.8);
+                }
+            }
+        }
+        li.active a {
+            color: $core-accent;
+        }
+        .logo ul.social-icons li {
+            background: transparentize($light-gray, 0.8);
+            .fa {
+                color: white;
+            }
+            &:hover {
+                .fa {
+                    color: $light-gray;
+                }
+            }
+        }
+    }
+}
 .blog-header {
 
-    padding-top: 2rem;
+    padding-top: 1rem !important;
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
+    margin-top: 0 !important;
 
     &.blog-header-image {
-        background-size: cover;
+        background-size: cover !important;
-        background-position: center;
 
         h1, h2 {
             color: $header-text;
+            text-align: left;
         }
 
     }
 
     h1 {
-        font-size: 4rem;
+        font-size: 2.5rem;
         margin-top: 0;
+        margin-bottom: 0;
+        text-transform: uppercase;
         @include breakpoint(tablet-range) {
             font-size: 3rem;
         }
@@ -44,7 +82,7 @@
     .list-blog-header {
         position: relative;
         h4 {
-
+            text-align: left;
             margin-bottom: 0.5rem;
             a {
                 color: $core-text;
@@ -62,19 +100,16 @@
     }
 
     .list-blog-date {
-        float: right;
         text-align: center;
+        background-color: transparentize($light-gray, 0.9);
+        padding: 0.7rem 1rem;
+        margin-bottom: 0.2rem;
+        margin-right: 0.5rem;
         span {
-            display: block;
+            font-size: $core-font-size;
-            font-size: 1.75rem;
-            font-weight: $font-weight-bold;
-            line-height: 110%;
-        }
-        em {
-            display: block;
-            border-top: 1px solid $border-color;
-            font-style: normal;
             text-transform: uppercase;
+            color: $core-text;
+            font-family: $font-family-header;
         }
     }
 }
@@ -88,14 +123,15 @@
 
 // Tags
 .tags {
+    background-color: transparentize($light-gray, 0.9);
+    padding: 0.7rem 1rem;
+    margin-bottom: 0.2rem;
     a {
         display: inline-block;
-        font-size: $core-font-size - 0.2rem;
+        font-size: $core-font-size;
-        border: 1px solid $core-accent;
-        border-radius: $border-radius;
-        padding: 0.1rem 0.4rem;
-        margin-bottom: 0.2rem;
         text-transform: uppercase;
+        color: $core-text;
+        font-family: $font-family-header;
     }
 }
 
@@ -150,6 +186,7 @@ div#breadcrumbs {
     .sidebar-content {
         h4 {
             margin-bottom: 1rem;
+            text-align: left;
         }
         p, ul {
             margin-top: 1rem;

scss/template/modular/_all.scss

@@ -38,6 +38,7 @@
                 text-align: center;
                 margin-right: 0.8rem;
                 a {
+                    @extend .default-animation;
                     color: $black;
                     display: block;
                     margin-top: 0.1rem;

templates/blog.html.twig

@@ -13,10 +13,10 @@
     {% endif  %}
     
 	{% block content %}
-		{% set blog_image = page.media.images|first.grayscale().contrast(20).brightness(-100).colorize(-35,81,122) %}
+		{% set blog_image = page.media.images|first %}
         
 		{% if blog_image %}
-		<div class="flush-top blog-header blog-header-image" style="background-image: url({{ blog_image.url }});">
+		<div class="flush-top blog-header blog-header-image" style="background: {{ page.header.bg_color }} url({{ blog_image.url }}) no-repeat right;">
 		{% else %}
 		<div class="blog-header">
 		{% endif %}
@@ -24,11 +24,11 @@
 		</div>
 
         {% if config.plugins.breadcrumbs.enabled %}
-            {% include 'breadcrumbs.html.twig' %}
+				{% include 'partials/breadcrumbs.html.twig' %}
         {% endif %}
 
-		<div class="content-wrapper blog-content-list grid pure-g-r">
+		<div class="content-wrapper blog-content-list g-grid pure-g-r">
-			<div id="listing" class="block pure-u-2-3">
+			<div id="listing" class="g-block pure-u-2-3">
 				{% for child in collection %}
 			        {% include 'partials/blog_item.html.twig' with {'page':child, 'truncate':true} %}
 			    {% endfor %}
@@ -37,7 +37,7 @@
                     {% include 'pagination.html.twig' with {'pagination':collection.params.pagination} %}
                 {% endif %}
 			</div>
-			<div id="sidebar" class="block size-1-3 pure-u-1-3">
+			<div id="sidebar" class="g-block size-1-3 pure-u-1-3">
 				{% include 'partials/sidebar.html.twig' %}
 			</div>
 		</div>

templates/item.html.twig

@@ -12,7 +12,7 @@
     {% endif  %}
    
 	{% block content %}
-		{% include 'breadcrumbs.html.twig' %}
+        {% include 'partials/breadcrumbs.html.twig' %}
 		
 		<div class="blog-content-item grid pure-g-r">
 			<div id="item" class="block pure-u-2-3">

templates/modular.html.twig

@@ -26,9 +26,56 @@
     {% endif %}
 {% endblock %}
 
+
 {% block header_navigation %}
     {% if show_onpage_menu %}
         <ul class="navigation">
+        
+        {% macro loop(page) %}
+        {% for p in page.children %}
+            {% if p.visible %}
+                {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
+                <li class="{{ current_page }}">
+                    <a href="{{ p.url }}" class="external">
+                        {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
+                        {{ p.menu }}
+                    </a>
+                    {% if p.children.count > 0 %}
+                        <ul>
+                            {{ _self.loop(p) }}
+                        </ul>
+                    {% endif %}
+                </li>
+            {% endif %}
+        {% endfor %}
+        {% endmacro %}
+
+
+        {% if config.themes.deliver.dropdown.enabled %}
+            {{ _self.loop(pages) }}
+        {% else %}
+            {% for page in pages.children %}
+                {% if page.visible %}
+                    {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
+                    <li class="{{ current_page }}">
+                        <a href="{{ page.url }}" class="external">
+                            {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
+                            {{ page.menu }}
+                        </a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        {% endif %}
+        {% for mitem in site.menu %}
+            <li>
+                <a href="{{ mitem.url }}">
+                    {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
+                    {{ mitem.text }}
+                </a>
+            </li>
+        {% endfor %}
+         
+        
         {% for module in page.collection() %}
             {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
             <li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
@@ -38,10 +85,6 @@
     {% else %}
         {{  parent() }}
     {% endif %}
-
-
-    {% include 'partials/search.html.twig' %}
-
 {% endblock %}
 
 {% block content %}

templates/partials/base.html.twig

@@ -41,7 +41,6 @@
     <div id="sb-site">
         {% block header %}
         <header id="header">
-
                 <div class="logo">
                     <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
                     {% block social %}
@@ -53,8 +52,8 @@
                     {% block header_navigation %}
                     {% include 'partials/navigation.html.twig' %}
                     {% endblock %}
+                    {% include 'partials/search.html.twig' %}
                 </div>
-
         </header>
         {% endblock %}
 

templates/partials/blog_item.html.twig

@@ -1,10 +1,6 @@
 <div class="list-item">
 
     <div class="list-blog-header">
-        <span class="list-blog-date">
-            <span>{{ page.date|date("d") }}</span>
-            <em>{{ page.date|date("M") }}</em>
-        </span>
         {% if page.header.link %}
             <h4>
                 {% if page.header.continue_link is not sameas(false) %}
@@ -16,13 +12,20 @@
             <h4><a href="{{ page.url }}">{{ page.title }}</a></h4>
         {% endif %}
 
+        <span class="list-blog-date">
+            <i class="fa fa-calendar"></i>
+            {{ page.date|date("d") }}, {{ page.date|date("M") }}
+        </span>
+       
        {% if page.taxonomy.tag %}
         <span class="tags">
+            <i class="fa fa-tag"></i>
             {% for tag in page.taxonomy.tag %}
-            <a href="{{ base_url }}/tag:{{ tag }}">{{ tag }}</a>
+            <a href="{{ base_url }}/tag:{{ tag }}">{{ tag }}</a>, 
             {% endfor %}
         </span>
         {% endif %}
+        
         {% if big_header %}
             {{ page.media.images|first.cropResize(900,600).html }}
         {% else %}

templates/partials/sidebar.html.twig

@@ -21,7 +21,7 @@
 {% if config.plugins.taxonomylist.enabled %}
 <div class="sidebar-content">
     <h4>Popular Tags</h4>
-    {% include 'taxonomylist.html.twig' with {'taxonomy':'tag'} %}
+    {% include 'partials/taxonomylist.html.twig' with {'taxonomy':'tag'} %}
 </div>
 {% endif %}
 {% if config.plugins.archives.enabled %}

templates/partials/taxonomylist.html.twig

@@ -0,0 +1,12 @@
+{% set taxlist = taxonomylist.get() %}
+
+{% if taxlist %}
+
+<span class="tags">
+    {% for tax,value in taxlist[taxonomy] %}
+
+        <a href="{{ base_url }}/tag:{{ tax|e('url') }}">{{ tax }}</a>
+
+    {% endfor %}
+</span>
+{% endif %}