laras126

<!-- Tease Group -->
<ul class="tease-group-grid tease-list -social">
  
  <!-- Featured Tease -->
  <li class="tease-grid-item -card -overlay" data-aos="fade-up">
    <svg class="icon-tease-type" viewBox="0 0 100 100"><use xlink:href="#svg-twitter" /></svg>
    <img class="tease-img" v-bind:src="'img/social/' + social.follow.img + '.png'">
    <div class="tease-overlay-content">
      <p class="tease-overlay-title">{{ social.follow.name }}</p>
      <a href="#" class="btn-follow -twitter"><span class="follow-btn-text">{{ social.follow.btn_text }}</span> <span class="follow-btn-points">{{ social.follow.points }}</span></a>

laras126

<?php

// ----
// Ajax posts filter by category
// Reference: http://www.bobz.co/ajax-filter-posts-tag/
// ----

// Function to load get_template_part into a variable to abstract markup from response
// Credit: http://wordpress.stackexchange.com/questions/171979/loading-page-content-into-a-variable-in-template
function ifp_return_get_template_part( $slug, $name=null ) {

laras126

@mixin bp($point) {
    @if ($MQs) {
        $bp-sm: "(min-width: #{$screen-sm})";
        $bp-md: "(min-width: #{$screen-md})";
        $bp-lg: "(min-width: #{$screen-lg})";
        $bp-xl: "(min-width: #{$screen-xl})";
        $bp-xxl: "(min-width: #{$screen-xxl})";

        @if $point == sm {
            @media #{$bp-sm} { @content; }

laras126

@media only screen and (min-width: 600px) {

  .grid {
    display: flex;
  }

  .onecol    { width: 5.801104972%;  }       /* 4.85%;  } /* grid_1  */
  .twocol    { width: 14.364640883%; }       /* 13.45%; } /* grid_2  */
  .threecol  { width: 22.928176794%; }       /* 22.05%; } /* grid_3  */

laras126

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

		<!-- ******
		1. Add this HTML to the template where you want the filtering bar to display.
		****** -->
		<ul id="filters">
			<li><a href="#" data-filter="*" class="selected">Everything</a></li>

laras126

<h1>Nice Website About Paragraphs</h1>
<p>We love nice paragraphs!</p>

<h2>About Paragraphs</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci ipsum ratione recusandae aspernatur accusantium a sapiente labore. Consequuntur hic possimus animi voluptatem minus dolores, praesentium ducimus doloribus aut. Atque!</p>

<img src="http://www.floridapest.com/pest_guide/landscape-pest/images/fighting-gopher-01.jpg">

laras126

{# 
	Use case:
	You want to choose between a gallery vs. image display for the header of a page. 
	
	Notes about this code:
	- It can be adapted to non-header parts of the site.
	- It is not stand-alone, and would either be included in another Twig template (e.g. page.twig), or part of the template itself.
	- The file is called header-page.twig so as not to conflict with custom page template naming conventions.
	
	Assumes ACF fields for the following:

laras126

<section class="posts-loop">

	{% for post in posts %}

		<div class="tease-post">
			<div class="contain">
				<header class="tease-header">
					{# Header content in here #}
				</header>

laras126

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$color-accent-light:  #3878EE;
$color-accent-med:    #ED9062;
$color-accent-dark:   #EA6CA4;

$color-link:          $color-accent-med;

laras126

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$screen-sm:     30em;
$screen-md:     40em;
$screen-lg:   	50em;
$screen-xl:     50em;