chrismademe

/**
 * Written by Philip Walton
 * @see https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
 */

if ('ResizeObserver' in self) {
  
  // Create a single ResizeObserver instance to handle all
  // container elements. The instance is created with a callback,
  // which is invoked as soon as an element is observed as well

chrismademe

<?php

/**
 * Order Has Product
 * 
 * Checks a WooCommerce order to see if it contains
 * a given product ID
 * 
 * @param object $order
 * @param int $product_id

chrismademe

<?php

add_action( 'init', function() {
    $role = get_role('editor');
    $role->add_cap('edit_theme_options');
} );

chrismademe

.image-gallery {
    --min-width: 14rem;
    --gap: 1rem;
    
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(var(--min-width), 1fr) );
    gap: var(--gap);
}

chrismademe

<div x-data="{ checked: false, ready: false }" x-init="ready = true" @click="checked = !checked" class="flex items-center space-x-2">
    <button type="button" class="hidden" :class="{ 'flex bg-gray-300 rounded-full w-12 cursor-pointer border': ready, 'hidden': !ready }">
        <div :class="{ 'bg-green-600 translate-x-6': checked, 'bg-gray-500': !checked }" class="pointer-events-none rounded-full w-6 h-6 transition duration-150 ease-in-out transform"></div>
    </button>
    <label class="flex items-center" for="remember_me">
      <input :class="{ 'hidden': ready }" class="mr-2" type="checkbox" name="remember_me" x-bind:checked="checked">
      <span>Remember Me</span>
    </label>
</div>

chrismademe

{
	"workbench.iconTheme": "material-icon-theme",
	"editor.fontFamily": "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
	"editor.fontSize": 14,
	"editor.lineHeight": 34,
	"editor.formatOnSave": true,
	"editor.fontLigatures": true,
	"editor.minimap.enabled": false,
	"editor.codeLens": false,
	"workbench.startupEditor": "none",

chrismademe

// Sometimes it can be tidier not to use temporary variables :)

// Before
async render() {
    let inputPath = path.join(__dirname, '/assets/css/style.scss');
    let { sassOptions } = siteConfig || {};

    const { css } = sass.renderSync({
        file: inputPath,
        ...sassOptions,

chrismademe

:root {
    --color-gray-90: #373946;
    --color-gray-70: #565869;
    --color-gray-50: #77798a;
    --color-gray-30: #b3b4bd;
    --color-gray-10: #eeeef0;

    --color-neutral-90: #002c59;
    --color-neutral-50: #0779e4;
    --color-neutral-10: #e1eefa;

chrismademe

{
	"workbench.iconTheme": "material-icon-theme",
	"editor.fontFamily": "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
	"editor.fontSize": 14, //14
	"editor.lineHeight": 42,
	"editor.fontLigatures": true,
	"editor.minimap.enabled": false,
	"editor.codeLens": false,
	"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?_",
	"editor.snippetSuggestions": "top",

chrismademe

<?php

/**
 * Date diff in days
 * The difference in days between 2 dates
 *
 * @param $from string Y-m-d date string
 * @param $to string Y-m-d date string
 */
function date_diff_in_days($from, $to) {