seriously_simple_static_starter 0.5.1 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4efcc48f1d89aaab066c4acc44352e7c8a2a04b8420bce57c56e66660eab2ef8
-  data.tar.gz: e027a6c61725bf623ca0a20453e04620dcfa20fdaf7f6fa70358fa380859ad46
+  metadata.gz: 5a775cd82675a95e28c1a0db7b6a8398aee69e8061737411660bb3e788230b78
+  data.tar.gz: f10f062c7170946f8587486a51c7a8c95a5fc1eee101edf0dcad715335f7a48d
 SHA512:
-  metadata.gz: 67a10a68c65f796346ea0aa4c4b589ab09377d47118f45e934be11324ceefc2eaa6cabd3c819376985fb79d9d24684693e855915160635c1e2357a0ec2cddac2
-  data.tar.gz: 01d7ba66a4d68f422eef2e3f90d9ffcb6e0c76bdec43d629dd6088bfd2911478e3d9bbdedb1f21c0f68514ed6e6fdd1be8406f65c5d54ef2444d63876d5544af
+  metadata.gz: 4e6463fa05938d14965b3f53af71d2ab7eaf597a2ac2fe4c314ffc2e71c1563448ed28e94658a41c21d6078f0d68a62b09d34042b026f5f0c9cadb7704abf8de
+  data.tar.gz: 10a022c569bfb5f6058521fd229ae03802ece6338a3178c074f6f1e9a35e4a1a088b26f9fa62a3ee8f0b18ac493c1f0e2a1ccc3ea676e0d7160a677dd2e5b65a

data/_includes/cards.html

@@ -24,4 +24,4 @@
             {% endfor %}
         </div>
     </div>
-</div>
+</div>

data/_includes/core/blocks.html

@@ -0,0 +1,21 @@
+<div class="col-xs-12">
+    <div class="row equal">
+    {% for block in include.object.content %}
+        <div class="col-xs-12 col-sm-{{include.object.item_width}} block {% if include.object.style %}{{include.object.style}}{% endif %}">
+            {% if block.url %}<a href="{{block.url}}">{% endif%}
+            <div class="block-inner" {% if block.background_image %}style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url({{block.background_image}});"{% endif %}>
+                {% if block.title %}
+                    {% include core/title.html object=block.title %}
+                {% endif %}
+                {% if block.text %}
+                    {% include core/text.html object=block.text %}
+                {% endif %}
+                {% if block.buttons %}
+                    {% include core/buttons.html object=block.buttons %}
+                {% endif %}
+            </div>
+            {% if block.url %}</a>{% endif%}
+        </div>
+    {% endfor %}
+    </div>
+</div>

data/_includes/core/button.html

@@ -0,0 +1,6 @@
+<a href="{{include.object.url}}" class="btn {% if include.object.style %}{{include.object.style}}{% else %}btn-primary{% endif %}">
+    {{include.object.title}}
+    {% if include.object.icon %}
+        <i class="{{include.object.icon}}" aria-hidden="true"></i>
+    {% endif %}
+</a> 

data/_includes/core/buttons.html

@@ -0,0 +1,5 @@
+<div class="col-xs-12 buttons no-padding {% if include.style %}{{include.style}}{% endif %}">
+    {% for button in include.object %}
+        {% include core/button.html object=button %}
+    {% endfor %}
+</div>

data/_includes/core/call-to-action-banner.html

@@ -0,0 +1,8 @@
+<div class="row" id="call_to_action_banner">
+    {% if include.object.image %}
+        {% picture backgroundImage {{include.object.image.path}} alt=include.object.image.alt %}
+    {% endif %}
+    <div class="container">
+        {% if include.object.title %}<h1>{{include.object.title}}</h1>{% endif %}
+    </div>
+</div>

data/_includes/core/container_row.html

@@ -0,0 +1,7 @@
+<div class="row {% if include.object.style %}{{include.object.style}}{% endif %}
+{% if include.object.background_image %}background_image_row overlay{% endif %}" 
+{% if include.object.background_image %}style="background-image: url({{include.object.background_image}})"{% endif %}>
+    <div class="container">
+        {% include flow_inner.html sections=include.object.sections %}
+    </div>
+</div>

data/_includes/core/feature_block.html

@@ -0,0 +1,38 @@
+<div class="row feature__block p-t-50 p-b-50">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7 block__image order-md-{% if include.object.side_content.position == "right" %}2{% else %}1{% endif %}">
+                {% if include.object.side_content.type == "image" %}
+                    {% assign image_path = include.object.side_content.image.path | replace: '/assets/images/','' %}
+                    {% if include.object.side_content.image.svg %}
+                        <img class="img-fluid svg_image {% if include.object.side_content.image.style %}{{include.object.side_content.image.style}}{% endif %}" alt="{{include.object.side_content.image.alt}}" src="{{include.object.side_content.image.path}}" />
+                    {% else %}
+                        {% picture feature_block_image {{image_path}} alt=include.object.image.alt %}
+                    {% endif %}
+                {% elsif include.object.side_content.type == "slider" %}
+                    {% include core/slider.html object=include.object.side_content.content %}
+                {% elsif include.object.side_content.type == "youtube_video" %}
+                    {% include core/youtube_video_embed.html object=include.object.side_content.content %}
+                {% else %}
+                    <h2>TODO</h2>
+                {% endif %}
+            </div>
+            <div class="col-md-5 block__text order-md-{% if include.object.side_content.position == "right" %}1{% else %}2{% endif %}">
+                <h2>{{include.object.title}}</h2>
+                {% if include.object.highlight-text %}
+                    <div class="font-weight-bold">
+                        {{include.object.highlight-text | markdownify }}
+                    </div>
+                {% endif %}
+                {% if include.object.text == "page_content" %}
+                    {{page.content | markdownify }}
+                {% else %}
+                    {{include.object.text | markdownify}}
+                {% endif %}
+                {% if include.object.buttons %}
+                    {% include core/buttons.html object=include.object.buttons %}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>

data/_includes/core/full_width_row.html

@@ -0,0 +1,5 @@
+<div class="row {% if include.object.style %}{{include.object.style}}{% endif %}
+{% if include.object.background_image %}background_image_row overlay{% endif %}" 
+{% if include.object.background_image %}style="background-image: url({{include.object.background_image}}), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));"{% endif %}>
+    {% include flow_inner.html sections=include.object.sections %}
+</div>

data/_includes/core/members_section.html

@@ -0,0 +1,27 @@
+{% if include.object.data_source %}
+    {% assign members = site.data[include.object.data_source] %}
+{% else %}
+    {% assign members = include.object.content %}
+{% endif %}
+<div class="members_section {% if include.object.style %}{{include.object.style}}{% endif %}">
+{% for member in members %}
+    {% if member.url %}<a href="{{member.url}}">{% endif %}
+    {% if member.image.path contains "http" %}
+    <div class="col-xs-6 col-sm-{{include.object.item_width}}">
+        <img class="lazyload img-responsive" alt="{{member.image.alt}}"
+        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+        data-src="{{member.image.path}}"/>
+    </div>
+    {% else %}
+        <div class="col-xs-6 col-sm-{{include.object.item_width}}">
+            {% assign image_path = member.image.path | replace: '/assets/images/','' %}
+            {% if member.image.svg %}
+                <img class="img-fluid svg_image {% if include.object.image.style %}{{include.object.image.style}}{% endif %}" alt="{{include.object.image.alt}}" src="{{image_path}}" />
+            {% else %}
+                {% picture feature_block_image {{image_path}} alt=include.object.image.alt %}
+            {% endif %}
+        </div>
+    {% endif %}
+    {% if member.url %}</a>{% endif %}
+{% endfor %}
+</div>

data/_includes/core/slider.html

@@ -0,0 +1,28 @@
+<div class="owl-carousel slider-block owl-theme" data-size="{{include.object.items | size }}"
+{% if include.object.xs_items %}data-xs-number="{{include.object.xs_items}}"{% endif %}
+{% if include.object.sm_items %}data-sm-number="{{include.object.sm_items}}"{% endif %}
+{% if include.object.md_items %}data-md-number="{{include.object.md_items}}"{% endif %}
+{% if include.object.lg_items %}data-lg-number="{{include.object.lg_items}}"{% endif %}
+{% if include.object.dots %}data-dots="true"{% endif %}
+{% if include.object.nav %}data-nav="true"{% endif %}
+{% if include.object.seconds_per_slide %}data-seconds-per-slide="{{include.object.seconds_per_slide}}"{% endif %}>
+    {% if include.object.items %}
+        {% assign carousel_items = include.object.items %}
+    {% elsif include.object.data_source %}
+        {% assign carousel_items = site.data[include.object.data_source] %}
+    {% endif %}
+    {% for item in carousel_items %}
+        {% if include.object.lightbox_enabled %}<a data-featherlight="{{item.image}}">{% endif %}
+        <div class="item">
+            {% if item.image %}
+                {% assign image_path = member.image.path | replace: '/assets/images/','' %}
+                {% if item.image %}
+                    <img class="img-fluid svg_image {% if include.object.image.style %}{{include.object.image.style}}{% endif %}" alt="{{include.object.image.alt}}" src="{{image_path}}" />
+                {% else %}
+                    {% picture feature_block_image {{image_path}} alt=include.object.image.alt %}
+                {% endif %}
+            {% endif %}
+        </div>
+        {% if include.object.lightbox_enabled %}</a>{% endif %}
+    {% endfor %}
+</div>

data/_includes/core/slider_row.html

@@ -0,0 +1,3 @@
+<div class="col-xs-12 slider_row">
+    {% include core/slider.html object=include.object %}
+</div>

data/_includes/core/text.html

@@ -0,0 +1,3 @@
+<div class="col-xs-12 text_block {% if include.object.style %}{{include.object.style}}{% endif %}">
+    {{include.object.content | markdownify }}
+</div>

data/_includes/core/title.html

@@ -0,0 +1,3 @@
+<div class="col-xs-12 title {{include.object.class}}">
+    <{{include.object.size}} class="{{include.object.class}}">{{include.object.content}}</{{include.object.size}}>
+</div>

data/_includes/core/youtube_video_embed.html

@@ -0,0 +1,11 @@
+{% if include.object.url contains "https://youtu.be/" %}
+    {% assign media_url = include.object.url | replace: 'https://youtu.be/','https://youtube.com/embed/'%}
+{% elsif include.object.url contains "https://www.youtube.com/watch?v=" %}
+    {% assign media_url = include.object.url | replace: 'https://www.youtube.com/watch?v=','https://youtube.com/embed/'%}
+{% else %}
+    {% assign media_url = include.object.url %}
+{% endif %}
+
+<div class="embed-responsive embed-responsive-16by9">
+  <iframe src='about:blank' allowFullScreen="allowFullScreen" frameBorder="0" class="lazyload embed-responsive-item" data-src="{{media_url}}"></iframe>
+</div>

data/_includes/flow.html

@@ -1,19 +1,17 @@
 <div class="container-fluid content {% if page.header %}not_top{% endif %}" id="main_container">
-{% for section in include.flow %}
-    {% if section.type == "main-content" %}
-        <div class="row" id="main_content">
-            <div class="container">
-                {{content}}
+    {% for each in include.flow %}
+        {% if each.row == "main_content_row" %}
+            <div class="row" id="main_content">
+                <div class="container">
+                    {{content}}
+                </div>
             </div>
-        </div>
-    {% elsif section.type == "slider" %}
-        {% include slider.html object=section %}
-    {% elsif section.type == "latest-posts" %}
-        {% include latest_posts.html limit=section.number_of_posts %}
-    {% elsif section.type == "feature-block" %}
-        {% include feature-block.html object=section %}
-    {% elsif section.type == "cards" %}
-        {% include cards.html object=section %}
-    {% endif %}
-{% endfor %}
-</div>
+        {% elsif each.row == "container_row" %}
+            {% include core/container_row.html object=each %}
+        {% elsif each.row == "full_width_row" %}
+            {% include core/full_width_row.html object=each %}
+        {% elsif each.row == "custom_include_row" %}
+            {% include {{each.source}} %}
+        {% endif %}
+    {% endfor %}
+</div>

data/_includes/flow_inner.html

@@ -0,0 +1,23 @@
+{% for section in include.sections %}
+    {% if section.format == "title" %}
+        {% include core/title.html object=section %}
+    {% elsif section.format == "members" %}
+        {% include core/members_section.html object=section %}
+    {% elsif section.format == "block" %}
+        {% include core/blocks.html object=section %}
+    {% elsif section.format == "buttons" %}
+        {% include core/buttons.html object=section.content style=section.style %}
+    {% elsif section.format == "text" %}
+        {% include core/text.html object=section %}
+    {% elsif section.format == "custom" %}
+        {% include {{section.include_name}} object=section %}
+    {% elsif section.format == "slider" %}
+        {% include core/slider_row.html object=section %}
+    {% elsif section.format == "feature_block" %}
+        {% include core/feature_block.html object=section.content %}
+    {% elsif section.format == "latest-posts" %}
+        {% include latest_posts.html limit=section.number_of_posts %}
+    {% elsif section.format == "cards" %}
+        {% include cards.html object=section %}
+    {% endif %}
+{% endfor %}

data/_includes/header.html

@@ -6,23 +6,25 @@
     {% endif %}
     <div class="container">
         <div class="jumbotron text-white d-flex flex-column">
-            {% if include.object.items %}
-                {% for section in include.object.items %}
-                    {% if section.type == "title" %} 
-                        <h1 class="display-3 font-weight-bold">{{section.content}}</h1>                
-                    {% elsif section.type == "para" %}
-                        <p class="lead font-weight-bold">
-                            {{section.content}}
-                        </p>
-                    {% elsif section.type  == "buttons" %}
-                        <p class="lead">
-                            {% for btn in section.content %}
-                                <a class="btn {% if btn.class %}{{btn.class}}{% endif %}"
-                                href="{{btn.url}}" role="button">{{btn.title}}</a>
-                            {% endfor %}
-                        </p>
-                    {% endif %}
-                {% endfor %}
+            {% if include.object.sections %}
+                {% if include.object.showcase_image %}
+                <div class="row">
+                    <div class="col col-xs-12 col-md-8">
+                        {% include flow_inner.html sections=include.object.sections %}
+                    </div>
+                    <div class="col col-xs-12 col-md-4">
+                        {% assign image_path = include.object.showcase_image.path | replace: '/assets/images/','' %}
+                        {% if include.object.showcase_image.svg %}
+                            <img class="img-fluid svg_image {% if include.object.showcase_image.style %}{{include.object.showcase_image.style}}{% endif %}"
+                             alt="{{include.object.showcase_image.alt}}" src="{{include.object.showcase_image.path}}" />
+                        {% else %}
+                            {% picture feature_block_image {{image_path}} alt=include.object.showcase_image.alt %}
+                        {% endif %}
+                    </div>
+                </div>
+                {% else %}
+                    {% include flow_inner.html sections=include.object.sections %}
+                {% endif %}
             {% else %}
                 <h1 class="display-3 font-weight-bold">{{include.object.title}}</h1>
                 <p class="lead font-weight-bold">
@@ -31,11 +33,11 @@
                 {% assign author = site.data.authors[page.author] %}
                 {% if author %}
                     <span class="author">
-                        Posted by <a href="{{ author.web }}" target="_blank">{{ author.name }}</a> on 
+                        Posted by <a href="{{ author.web }}" target="_blank">{{ author.name }}</a> on
                         {{include.object.date | date: "%A, %B %-d, %Y" }}
                     </span>
                 {% endif %}
             {% endif %}
-        </div> 
+        </div>
     </div>
-</header>
+</header>

data/_layouts/page.html

@@ -4,14 +4,14 @@ layout: base
 {% if page.header %}
     {% include header.html object=page.header %}
 {% endif %}
-{% if page.sections %}
-    {% include flow.html flow=page.sections %}
-{% else %}    
-    <div class="container-fluid content {% if page.header %}not_top{% endif %}" id="main_container">
-        <div class="row" id="main_content">
-            <div class="container">
-                {{content}}
-            </div>
+{% if page.flow %}
+    {% include flow.html flow=page.flow %}
+{% else %}
+<div class="container-fluid content {% if page.header %}not_top{% endif %}" id="main_container">
+    <div class="row" id="main_content">
+        <div class="container">
+            {{content}}
         </div>
     </div>
-{% endif %}
+</div>
+{% endif %}

data/_sass/_header.scss

@@ -6,9 +6,13 @@ header {
         background-color: transparent;
         padding-left: 0px;
         padding-right:0px;
+        position: relative;
         h1 {
             padding-top:100px;
         }
+        img {
+            padding-top: 100px;
+        }
         span.author {
             a {
                 color: $secondary;
@@ -19,17 +23,17 @@ header {
         }
     }
     &.svg {
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 2560 1600' version='1.1' viewBox='0 0 2560 1600' xml:space='preserve'%3E%3Cstyle xmlns='http://www.w3.org/2000/svg' type='text/css'%3E .st0%7Bfill:%23000;%7D .st1%7Bfill:url(%23a);%7D polygon%7Bfill:%231b1b1b%7D;%0A%3C/style%3E%3Cpattern id='a' width='319.998' height='319.998' overflow='visible' patternUnits='userSpaceOnUse' viewBox='0 -399.997 319.998 319.998'%3E%3Crect class='st0' y='-400' width='320' height='320'/%3E%3Cpolygon points='240 -79.999 240 0 160 -79.999 160 -160'/%3E%3Cpolygon points='320 -160 240 -79.999 240 -160'/%3E%3Cpolygon points='79.999 -79.999 79.999 0 0 -79.999 0 -160'/%3E%3Cpolygon points='160 -160 79.999 -79.999 79.999 -160'/%3E%3Cpolygon points='320 -240 320 -160 240 -240 240 -320'/%3E%3Cpolygon points='160 -240 160 -160 79.999 -240 79.999 -320'/%3E%3Cpolygon points='240 -320 160 -240 160 -320'/%3E%3Cpolygon points='240 -240 240 -160 160 -160'/%3E%3Cpolygon points='79.999 -320 0 -240 0 -320'/%3E%3Cpolygon points='79.999 -240 79.999 -160 0 -160'/%3E%3Cpolygon points='240 -400 240 -320 160 -400 160 -480'/%3E%3Cpolygon points='320 -400 320 -320 240 -320'/%3E%3Cpolygon points='79.999 -400 79.999 -320 0 -400 0 -480'/%3E%3Cpolygon points='160 -400 160 -320 79.999 -320'/%3E%3C/pattern%3E%3Crect class='st1' width='2560' height='1600'/%3E%3C/svg%3E");    
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 2560 1600' version='1.1' viewBox='0 0 2560 1600' xml:space='preserve'%3E%3Cstyle xmlns='http://www.w3.org/2000/svg' type='text/css'%3E .st0%7Bfill:%23000;%7D .st1%7Bfill:url(%23a);%7D polygon%7Bfill:%231b1b1b%7D;%0A%3C/style%3E%3Cpattern id='a' width='319.998' height='319.998' overflow='visible' patternUnits='userSpaceOnUse' viewBox='0 -399.997 319.998 319.998'%3E%3Crect class='st0' y='-400' width='320' height='320'/%3E%3Cpolygon points='240 -79.999 240 0 160 -79.999 160 -160'/%3E%3Cpolygon points='320 -160 240 -79.999 240 -160'/%3E%3Cpolygon points='79.999 -79.999 79.999 0 0 -79.999 0 -160'/%3E%3Cpolygon points='160 -160 79.999 -79.999 79.999 -160'/%3E%3Cpolygon points='320 -240 320 -160 240 -240 240 -320'/%3E%3Cpolygon points='160 -240 160 -160 79.999 -240 79.999 -320'/%3E%3Cpolygon points='240 -320 160 -240 160 -320'/%3E%3Cpolygon points='240 -240 240 -160 160 -160'/%3E%3Cpolygon points='79.999 -320 0 -240 0 -320'/%3E%3Cpolygon points='79.999 -240 79.999 -160 0 -160'/%3E%3Cpolygon points='240 -400 240 -320 160 -400 160 -480'/%3E%3Cpolygon points='320 -400 320 -320 240 -320'/%3E%3Cpolygon points='79.999 -400 79.999 -320 0 -400 0 -480'/%3E%3Cpolygon points='160 -400 160 -320 79.999 -320'/%3E%3C/pattern%3E%3Crect class='st1' width='2560' height='1600'/%3E%3C/svg%3E");
     }
     &.background_image {
       background: transparent !important;
       img.header__image {
           filter: brightness(0.4);
           position: absolute;
-          z-index: -1;
+          z-index: 0;
           height: 100%;
-          width: 100%;  
+          width: 100%;
           object-fit: cover;
       }
     }
-}
+}

data/_sass/_navbar.scss

@@ -63,7 +63,7 @@
         }
     }
     img.navbar-brand {
-        height: 40px;
+        height: 66px;
         padding: 0 0;
     }
     .nav-link {
@@ -113,7 +113,7 @@
         border: none;
         background: transparent !important;
         .icon-bar {
-            width: 22px; 
+            width: 22px;
             height: 2px;
             background-color: #fff;
             display: block;
@@ -156,4 +156,4 @@
     .navbar .collapse.in, .navbar .collapsing  {
         clear:both;
     }
-}
+}

data/_sass/_theme.scss

@@ -43,6 +43,7 @@ body{
             padding-top: 110px;
             background-color: #fff;
             padding-bottom: 20px;
+            position: relative;
             &.not_top {
                 padding-top:20px;
                 #main_content {
@@ -50,7 +51,7 @@ body{
                 }
             }
             #main_content {
-                padding-top: 20px;
+                padding-top: 40px;
             }
         }
         .padded {
@@ -112,7 +113,7 @@ div#main-container {
     margin:0 auto;
     position:fixed;
     bottom:20px;
-    right:10px;	
+    right:10px;
 }
 .scroll {
     position: absolute;
@@ -127,14 +128,14 @@ div#main-container {
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
-    -o-transition: 0.5s; 		
+    -o-transition: 0.5s;
 }
 .scroll:hover {
     background:$gray-800;
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
-    -o-transition: 0.5s; 		
+    -o-transition: 0.5s;
 }
 .scroll:hover .fa {
     padding-top:-10px;
@@ -146,7 +147,7 @@ div#main-container {
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
-    -o-transition: 0.5s; 	
+    -o-transition: 0.5s;
 }
 .dropdown-menu.collapsing {
     display:block;
@@ -168,7 +169,7 @@ opacity: 0;
 transform: rotate(-45deg);
 transform-origin: 10% 90%;
 }
-   
+
 /* ANIMATED X COLLAPSED */
 
 .navbar-toggler.collapsed .top-bar {
@@ -185,21 +186,21 @@ transform: rotate(0);
 /* END ANIMATED X */
 
 .icon-bar {
-	width: 22px; 
+	width: 22px;
 	height: 2px;
 	background-color: #B6B6B6;
 	display: block;
 	transition: all 0.2s;
 	margin-top: 4px
 }
- 
+
 .navbar-toggler {
   border: none;
   background: transparent !important;
 }
-//navbar 
+//navbar
 .bg-dark{
-    background-color: $gray-900 !important; 
+    background-color: $gray-900 !important;
 }
 .bg-up {
     background-position-y: -300px !important;
@@ -327,7 +328,7 @@ $sides: (top, bottom, left, right); // Leave this variable alone
     .m-#{str-slice($side, 0, 1)}-#{$space} {
       margin-#{$side}: #{$space}px !important;
     }
-  
+
     .p-#{str-slice($side, 0, 1)}-#{$space} {
       padding-#{$side}: #{$space}px !important;
     }