floster

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const imageObserver = new IntersectionObserver((entries, imgObserver) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const lazyImage = entry.target
                    console.log("lazy loading ", lazyImage)
                    lazyImage.src = lazyImage.dataset.src
                    lazyImage.classList.remove("lzy_img");
                    imgObserver.unobserve(lazyImage);

floster

<picture>
    <source srcset="blog-10-wide@1x.webp 1x,
                    blog-10-wide@2x.webp 2x"
            media="(min-width: 600px)"
            type="image/webp">
    <source srcset="blog-10-wide@1x.png 1x,
                    blog-10-wide@2x.png 2x"
            media="(min-width: 600px)">
    <source srcset="blog-10-square@1x.webp 1x,
                    blog-10-square@2x.webp 2x"

floster

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

floster

{% from "macros/swatch.njk" import swatch %}

{% extends "parts/_template.njk" %}

{% block main %}

  {% for color in colors %}
    {{ swatch(color.color_name, color.color_value, color.color_notes) }}
  {% endfor %}

floster

document.addEventListener("DOMContentLoaded", function() {
var svg = document.querySelector('.svg'),
    pos = "left";

  svg.addEventListener('click', function(){
    switch(pos) {
      case "left":
        svg.classList.remove('left');
        svg.classList.add('middle');
        pos = "middle";

floster

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) {

floster

// zoom/search
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.8 21.6l-6.2-6.2c1.2-1.6 2-3.5 2-5.7C19.6 4.4 15 0 9.6 0 4.5 0 0 4.4 0 9.7c0 5.4 4.4 9.8 9.7 9.8 2 0 4-.7 5.5-1.7l6.3 6.2 2.3-2.4zm-21-12C3 6 6 3 10 3s6.8 3 6.8 6.7-3 7-7 7C6 16.7 3 13.4 3 9.7z"/></svg>

floster

$brand-colors: (
  facebook: #3B5998,
  instagram: #2E5E86,
  youtube: #CD201F,
  googleplus: #DD4B39,
  viber: #59267c,
  twitter: #1da1f2,
  whatsapp: #25d366
);

floster

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

gulp.task('mozjpeg', () =>
    gulp.src('src/*.jpg')
    .pipe(imagemin([imageminMozjpeg({
        quality: 85
    })]))
    .pipe(gulp.dest('dist'))

floster

<snippet>
	<content><![CDATA[
<div class="$1"> <!-- begin $1 -->
	$2
</div> <!-- end $1 -->
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>dc</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>text.html</scope>