hardpool-flat 0.1.0 → 3.0.0

data/_layouts/portfolio-landing.html

@@ -0,0 +1,137 @@
+---
+layout: default
+---
+<!-- banner start -->
+{%- assign banners = site.posts | where: "categories", "banner" | slice: 0, 4 -%}
+<div class="container-fluid bg-grad mb-5 pb-3 pb-md-0 px-0">
+  <div class="container">
+    <div id="mainbanner" class="carousel slide carousel-fade banner-carousel" data-ride="carousel">
+      <ol class="carousel-indicators  d-none d-md-flex">
+        {%- for post in banners -%}
+        <li data-target="#mainbanner" data-slide-to="{{ forloop.index | minus: 1 }}" {% if forloop.first %}class="active"{% endif %}></li>
+        {%- endfor -%}
+      </ol>
+      <div class="carousel-inner">
+        {%- for post in banners -%}
+        <div class="carousel-item {% if forloop.first %}active{% endif %}">
+          <div class="row">
+            <div class="col-md-9 p-0">
+              <a href="{{ post.url }}"><div class="img-43 gtm-landing-banner" data-title="{{ post.title }}" style="background-image:url('{{ post.img_h }}')"></div></a>
+              <!-- <img src="{{ post.img_h }}" class="d-block w-100" alt="{{ post.title }}"> -->
+            </div>
+            <div class="col-md-5 p-0 overlap-right position-relative d-flex align-items-center h-100">
+              <div class="text-center text-md-left w-100">
+                <div class="py-1 px-4 py-md-3 px-md-3 bnr-wrapper text-left">
+                  <h2>{{ post.title }}</h2>
+                  <p class="mb-0">{{ post.excerpt | strip_html | truncate: 150 }}</p>
+                </div>
+                <a href="{{ post.url }}" class="btn btn-secondary float-md-right mt-3 gtm-landing-banner" data-title="{{ post.title }}">View post</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        {%- endfor -%}
+      </div>
+      <div class="carousel-control-wrapper d-none d-md-block">
+        <a class="carousel-control-prev" href="#mainbanner" role="button" data-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+        <a class="carousel-control-next" href="#mainbanner" role="button" data-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- banner end -->
+<!-- shop outfit start -->
+{% if site.landing.shop %}
+  {{ site.landing.shop }}
+{% else %}
+<p class="section-heading"><span>My outfits</span></p>
+{% assign thumbs = site.posts | slice: 0, 5 %}
+<div class="container mb-5">
+  <div class="row sm-gutters">
+    {%- for post in thumbs -%}
+    <div class="col-4 col-md">
+      {%- if post.img_t contains 'insta_sc|' -%}
+        {%- capture t_url -%}https://instagram.com/p/{{ post.img_t | replace_first: "insta_sc|", "" }}/media/?size=l{%- endcapture -%}
+      {%- else -%}
+        {%- assign t_url = post.img_t -%}
+      {%- endif -%}
+      <div class="thumb-post gtm-landing-shop" data-title="{{ post.title }}" data-toggle="modal" data-target="#mdShop{{ forloop.index }}" style="background-image:url('{{ t_url }}')"></div>
+    </div>
+    {%- endfor -%}
+  </div>
+</div>
+{% endif %}
+<!-- shop outfit start end -->
+<!-- section 3 start -->
+{%- assign featured = site.posts | where: "categories", "featured" -%}
+<div class="container mb-5">
+  {%- for post in featured -%}
+  {%- assign ri = forloop.index | modulo: 2 -%}
+  <div class="row my-7 position-relative">
+    <div class="col-md-7 {% if ri==0 %}order-md-2 offset-md-5{% endif %}">
+      <a href="{{ post.url }}"><div class="img-34 gtm-landing-featured" data-title="{{ post.title }}" style="background-image:url('{{ post.img_v }}')"></div></a>
+      <!-- <img src="{{ post.img_v }}" class="d-block w-100" alt="{{ post.title }}"> -->
+    </div>
+    <div class="col-md-6 p-md-0 pt-3 {% if ri==0 %}overlap-left order-md-1{% else %}overlap-right{% endif %} d-flex align-items-center h-100">
+      <div class="row">
+        <div class="col-md-12 d-none d-md-block">
+          <a href="{{ post.url }}"><div class="img-43 img-overlap gtm-landing-featured" data-title="{{ post.title }}" style="background-image:url('{{ post.img_h }}')"></div></a>
+          <!-- <img src="{{ post.img_h }}" class="d-block w-100 img-overlap" alt="{{ post.title }}"> -->
+        </div>
+        <div class="col-md-10 mt-md-2 px-5 {% if ri==1 %}offset-md-2{% endif %}">
+          <h2>{{ post.title }}</h2>
+          <p class="mb-2 outfits-info">
+          {%- assign unique_outfits = post.outfits | uniq -%}
+          {%- for outfit in unique_outfits -%}
+          <span class="px-2 text-primary">{{ outfit.title }}</span>
+          {%- endfor -%}
+          </p>
+          <p>{{ post.excerpt | strip_html | truncate: 80 }}</p>
+          <!-- outfits carousel -->
+          {%- if post.outfits -%}
+          <div id="outfitBanner{{forloop.index}}" class="carousel slide default-carousel" data-ride="carousel">
+            <div class="carousel-inner">
+            {%- for outfit in post.outfits -%}
+            {%- assign rio = forloop.index0 | modulo: 3 -%}
+            {%- if rio!=0 -%}{%- continue -%}{%- else -%}
+            {%- assign i1 = forloop.index0 | plus: 1 -%}
+            {%- assign i2 = forloop.index0 | plus: 2 -%}
+            <div class="carousel-item {% if forloop.first %}active{% endif %}">
+              <div class="row sm-gutters">
+                <div class="col"><a href="{{ post.outfits[forloop.index0].link }}" target="_blank"><div class="thumb-post gtm-shop-item" data-title="{{ post.outfits[forloop.index0].title }} | {{ post.outfits[forloop.index0].link }}" style="background-image:url('{{ post.outfits[forloop.index0].img }}')"></div></a></div>
+                <div class="col"><a href="{{ post.outfits[i1].link }}" target="_blank"><div class="thumb-post gtm-shop-item" data-title="{{ post.outfits[i1].title }} | {{ post.outfits[i1].link }}" style="background-image:url('{{ post.outfits[i1].img }}')"></div></a></div>
+                <div class="col"><a href="{{ post.outfits[i2].link }}" target="_blank"><div class="thumb-post gtm-shop-item" data-title="{{ post.outfits[i2].title }} | {{ post.outfits[i2].link }}" style="background-image:url('{{ post.outfits[i2].img }}')"></div></a></div>
+              </div>
+            </div>
+            {%- endif -%}
+            {%- endfor -%}
+            </div>
+            <div class="carousel-control-wrapper">
+              <a class="carousel-control-prev" href="#outfitBanner{{forloop.index}}" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+              </a>
+              <a class="carousel-control-next" href="#outfitBanner{{forloop.index}}" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+              </a>
+            </div>
+          </div>
+          {%- endif -%}
+          <!-- outfits carousel -->
+          <a href="{{ post.url }}" class="btn btn-secondary mt-3 gtm-landing-featured" data-title="{{ post.title }}">View post</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  {%- endfor -%}
+</div>
+<!-- section 3 end -->
+
+{%- include qv_modal.html data=thumbs modalId="mdShop" -%}

data/_layouts/portfolio-post-bnr.html

@@ -0,0 +1,14 @@
+---
+layout: portfolio-post
+---
+<div class="row">
+  <div class="col">
+    <div class="img-43 mb-3" style="background-image:url('{{ page.img_h }}')"></div>
+    <div class="img-34" style="background-image:url('{{ page.img_v }}')"></div>
+  </div>
+</div>
+<div class="row my-3">
+  <div class="col">
+  {{ content }}
+  </div>
+</div>

data/_layouts/portfolio-post.html

@@ -0,0 +1,118 @@
+---
+layout: contained
+---
+<div class="row mt-3">
+  <div class="col-md-8">
+    <!-- heading -->
+    <div class="row mb-3">
+      <div class="col">
+        <h1 class="mb-0">{{ page.title }}</h1>
+        <p class="mb-0 text-primary">
+        <span>{{ page.date | date: "%B %d, %Y" }}</span>
+        {%- if page.location.title -%}
+        <span class="ml-3"><i class="fas fa-map-marker-alt mr-1"></i>{{ page.location.title }}</span>
+        {%- endif -%}
+        </p>
+      </div>
+    </div>
+    <!-- post -->
+    <!-- <div class="row my-3">
+      <div class="col">
+        <div class="img-43 mb-3" style="background-image:url('{{ page.img_h }}')"></div>
+        <div class="img-34" style="background-image:url('{{ page.img_v }}')"></div>
+      </div>
+    </div> -->
+    <div class="row my-3">
+      <div class="col post-content-wrapper">
+      {{ content | replace: 'media/', '/media/' }}
+      </div>
+    </div>
+    <!-- similar posts -->
+    <div class="row my-3">
+      <div class="col">
+        <p class="section-heading"><span class="sm">You may also enjoy</span></p>
+        <div class="row md-gutters">
+        {% assign maxRelated = 4 %}
+        {% assign minCommonTags = site.similar_posts.tags_to_match %}
+        {% assign maxRelatedCounter = 0 %}
+        {% for post in site.posts %}
+      
+          {% assign sameTagCount = 0 %}
+          {% assign commonTags = '' %}
+      
+          {% for tag in post.tags %}
+            {% if post.url != page.url %}
+              {% if page.tags contains tag %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+                {% capture tagmarkup %} <span class="label label-default">{{ tag }}</span> {% endcapture %}
+                {% assign commonTags = commonTags | append: tagmarkup %}
+              {% endif %}
+            {% endif %}
+          {% endfor %}
+      
+          {% if sameTagCount >= minCommonTags %}
+          <div class="col-3">
+            <a href="{{ post.url }}">
+              {%- if post.img_t contains 'insta_sc|' -%}
+                {%- capture t_url -%}https://instagram.com/p/{{ post.img_t | replace_first: "insta_sc|", "" }}/media/?size=l{%- endcapture -%}
+              {%- else -%}
+                {%- assign t_url = post.img_t -%}
+              {%- endif -%}
+              <div class="thumb-post gtm-similar-post" data-title="{{ post.title }}" style="background-image:url('{{ t_url }}')"></div>
+              <h5 class="mx-2 mt-1 text-center">{{ post.title }}</h5>
+            </a>
+          </div>
+            {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+            {% if maxRelatedCounter >= maxRelated %}
+              {% break %}
+            {% endif %}
+          {% endif %}
+      
+        {% endfor %}
+        </div>
+      </div>
+    </div>
+    <!-- next prev posts -->
+    <div class="row">
+      <div class="col-6">
+        <a class="btn btn-link px-0 d-flex align-items-center" href="{{ page.previous.url }}"><div><i class="fas fa-chevron-left mr-2"></i></div><div class="text-truncate lh-15">Previous post<br>{{ page.previous.title }}</div></a>
+      </div>
+      <div class="col-6">
+        <a class="btn btn-link px-0 d-flex align-items-center justify-content-end" href="{{ page.next.url }}"><div class="text-truncate lh-15">Next post<br>{{ page.next.title }}</div><div><i class="fas fa-chevron-right ml-2"></i></div></a>
+      </div>
+    </div>
+  </div>
+  <!-- side bar -->
+  <div class="col-md-4">
+    <div class="row">
+      <div class="col">
+        {% if page.sidebar %}
+          {{ page.sidebar }}
+        {% elsif site.post.sidebar %}
+          {{ site.post.sidebar }}
+        {% else %}
+        <!-- shop outfit start -->
+        <p class="text-center section-heading"><span class="sm">My outfits</span></p>
+        {% assign thumbs = site.posts | slice: 0, 6 %}
+        <div class="row md-gutters">
+          {% for post in thumbs %}
+          <div class="col-6">
+            {%- if post.img_t contains 'insta_sc|' -%}
+              {%- capture t_url -%}https://instagram.com/p/{{ post.img_t | replace_first: "insta_sc|", "" }}/media/?size=l{%- endcapture -%}
+            {%- else -%}
+              {%- assign t_url = post.img_t -%}
+            {%- endif -%}
+            <div class="thumb-post mt-3 gtm-post-shop" data-title="{{ post.title }}" data-toggle="modal" data-target="#mdShop{{ forloop.index }}" style="background-image:url('{{ t_url }}')"></div>
+          </div>
+          {% endfor %}
+        </div>
+        <!-- shop outfit start end -->
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+
+{%- include qv_modal.html data=thumbs modalId="mdShop" -%}
+
+<script>let layout = "post";</script>

data/_layouts/portfolio.html

@@ -0,0 +1,27 @@
+---
+layout: contained
+---
+{% assign allPosts = site.posts %}
+<!-- filter posts for category -->
+{% if page.category %}
+  {% assign catPosts = allPosts | where: "categories", page.category %}
+{% else %}
+  {% assign catPosts = allPosts %}
+{% endif %}
+<!-- filter posts for tag -->
+{% if page.tag %}
+  {% assign posts = catPosts | where: "tags", page.tag %}
+{% else %}
+  {% assign posts = catPosts %}
+{% endif %}
+
+<div class="row mb-5">
+{% for post in posts %}
+  <div class="col-md-4 col-sm-6 portfolio-item">
+    <a class="d-block" href="{{ post.url }}">
+      <div class="img-34" style="background-image:url('{{ post.img_v }}')"></div>
+      <h2 class="mt-2 mb-4 text-center">{{ post.title }}</h2>
+    </a>
+  </div>
+{% endfor %}
+</div>

data/_layouts/posts.html

@@ -0,0 +1,26 @@
+---
+layout: contained
+---
+{% assign data = site.collections | where: "label", page.collection | first %}
+
+<div class="animation-wrapper">
+{% for post in data.docs %}
+{% if post.featured %}
+<a class="fade-in pb-7 d-block" href="{{ post.url }}">
+  <div class="row">
+    <div class="col">
+      <h1 class="display-4 text-center mb-0">{{ post.title }}</h1>
+      <p class="text-center text-info text-lg">{{ post.sub_title }}</p>
+      {% if post.img_h %}<img src="{{ post.img_h }}" class="img-fluid" alt="{{ post.title }}">{% endif %}
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-8 offset-2">
+      <p class="text-lg mt-3">{{ post.excerpt }}</p>
+      {% if post.btn_text %}<a class="btn btn-primary" href="{{ post.url }}">{{ post.btn_text }}</a>{% endif %}
+    </div>
+  </div>
+</a>
+{% endif %}
+{% endfor %}
+</div>

data/_layouts/project.html

@@ -0,0 +1,30 @@
+---
+layout: default
+header: 
+  style: project
+footer: 
+  html: footer.project.html
+---
+<main class="container-fluid project-head">
+  <div class="container">
+    <!-- banner -->
+    <div class="row">
+      <div class="col">
+        <h1>{{page.banner.title}}</h1>
+        <p class="lead">{{page.banner.description}}</p>
+        <div class="d-flex flex-column flex-md-row">
+          <a class="btn btn-lg btn-primary mb-3 mr-md-3" href="#">Get started</a>
+          <a class="btn btn-lg btn-outline-secondary mb-3" href="#">Demo</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+<!-- page content -->
+<div class="container">
+  <div class="row">
+    <div class="col markdown-body">
+      {{content}}
+    </div>
+  </div>
+</div>

data/_sass/_mixins.scss

@@ -9,6 +9,16 @@
 	height: 100vw/$aspect;
 	position: absolute;
 }
+@mixin picture-bg ($height: auto){
+	width: 100%;
+  height: $height;
+
+  background: {
+    size: cover;
+    position: center;
+    repeat: no-repeat; 
+  }
+}
 @mixin circle-image ($size, $url:"not-provided"){
 	background: {
 		size: 100% auto;

data/_sass/_var.scss

@@ -6,35 +6,35 @@ $p-img			: unquote("/assets/img/");
 // =============================================================================
 // colors
 // =============================================================================
-$light-teal	:	rgb(80,215,150);
-$teal				:	rgb(0,180,140);
-$blue				:	rgb(0,80,220);
-$red				:	#f45549; //rgb(240,90,65);
-$yellow			:	rgb(255,220,60);
+// $light-teal	:	rgb(80,215,150);
+// $teal				:	rgb(0,180,140);
+// $blue				:	rgb(0,80,220);
+// $red				:	#f45549; //rgb(240,90,65);
+// $yellow			:	rgb(255,220,60);
 
+$dark				: #333;
 $gray				: #ccc;
-$primary		: $blue;
-$secondary	: $teal;
-$success		: $teal/1.2;
-$info				: $gray/1.25;
-$warning		: $yellow;
-$danger			: $red;
+$primary		: #c59871;
+$secondary	: $dark;
+$success		: #02c33d;
+$info				: darken($gray, 12%);
+$warning		: #d9834f;
+$danger			: #d62337;
 $text-muted	: $gray;
-$dark				: #000;
 
-// =============================================================================
-// height-width
-// =============================================================================
-$h-header			: 6.5rem;
-$h-footer			: 24.5rem;
-$h-footer-br	: 19rem;
-$w-mainLogo		: 7.2rem;
+// // =============================================================================
+// // height-width
+// // =============================================================================
+// $h-header			: 6.5rem;
+// $h-footer			: 24.5rem;
+// $h-footer-br	: 19rem;
+// $w-mainLogo		: 7.2rem;
 
-// =============================================================================
-// font-family
-// =============================================================================
-$f-normal			: sourcesans;
-$f-heading		: colaborate;
+// // =============================================================================
+// // font-family
+// // =============================================================================
+// $f-normal			: sourcesans;
+// $f-heading		: colaborate;
 
 // =============================================================================
 // easing