Jamiewarb

<figure>
    <a href="{{ $url }}">
      <div class="aspect-ratio-wrap relative" style="padding-bottom: {{ $aspect_ratio ?? '0%' }};">
        <img src="{{ $img_url }}" @if($alt) alt="{!! $alt !!}" @endif 
             class="block absolute top-0 left-0 object-cover w-full h-full">
      </div>
    </a>
</figure>

Jamiewarb

<header class="banner w-full bg-white border-grey-100 shadow-md">
  <div class="menu-wrap flex items-center flex-wrap justify-between p-3 w-full z-20 max-w-screen-xl
              sm:px-6 sm:py-5 lg:relative lg:mx-auto">
    <div class="flex items-center flex-no-shrink max-w-2/3">
        <a class="brand lg:block lg:pt-2" href="{{ home_url('/') }}">
          <img src="{{\Roots\asset('images/brand.png')}}" alt="Brand" 
            class="max-w-200">
        </a>
    </div>

Jamiewarb

<?php
namespace App;

/**
 * Custom fork of WP's native Walker functionality revised so we can output
 * classes for tailwind
 *
 */

/**

Jamiewarb

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Jamiewarb

addEventListener('fetch', event => {

    event.respondWith(purgeCache(event.request))

})

async function purgeCache(request) {

    const url = new URL(request.url)

Jamiewarb

<template>
  <component :is="tag" :class="classes">
    <slot />
  </component>
</template>

<script>
const availableAlign = ['top', 'middle', 'bottom', 'baseline', 'stretch'];
const availableJustify = ['center', 'left', 'right', 'between', 'around', 'evenly'];
const availableSizes = ['small', 'base', 'large'];

Jamiewarb

<!--Drop in replacement for img lazy loading-->

<!--Lazy load image replacement-->

<!--Fade in - Wordpress image size as 10x10 with CSS blur-->

<!--https://vuetensils.stegosource.com-->

<script>
const NAME = 'vts-img';

Jamiewarb

<template>
  <div :class="classes">
    <div v-if="$slots.image" class="v-base-media__img">
      <slot name="image" />
    </div>
    <div v-if="$slots.default" class="v-base-media__body">
      <slot />
    </div>
  </div>
</template>

Jamiewarb

<template>
  <div :class="layoutClasses"><slot /></div>
</template>

<script>
/**
 * Base Layout - A grid-like layout system.
 *
 * A BaseLayout must only ever have BaseLayoutItem components as immediate children.
 *

Jamiewarb

const slashOptions = {
  STRIP: 'strip',
  ADD: 'add',
};

const modifySlashes = (option, url) => {
  if (!option) {
    return url;
  }