dutchcelt

/**
 * Global CSS Variable Object
 * This object provides a convenient way to manage global CSS variables.
 * @example globalCssVar.style = "--color: rebeccapurple";
 * @example globalCssVar.style = ["--weight: 100;", "--size: 4rem;"];
 *
 * @type {object}
 * @property {CSSStyleRule} cssRule - CSSStyleRule for managing global Custom Properties.
 * @property {(type: string) => void} addProp - add global CSS properties
 * @property {CSSStyleDeclaration} style - Getter/Setter for CSSStyleDeclaration

dutchcelt

/**
 * Converts a step value to a corresponding T-shirt size.
 * The default value '0' is equal to 'm'.
 * @param {number} step - The step value to convert into a T-shirt size.
 * @returns {string} The T-shirt size corresponding to the given step value.
 */
const convertToTShirtSize = (step = 0) => {
	const times = Math.max(0, Math.abs(step) - 1);
	const index = Math.sign(step) + 1;
	return 'x'.repeat(times) + ['s','m','l'][index];

dutchcelt

/**
 * clamp
 * @param {number} num
 * @param {number} min
 * @param {number} max
 * @returns {number}
 */
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);

dutchcelt

/**
 * pascalcase
 * @param {string} s
 */
const pascalcase = s => {
	const wordList = s.split(/-|_|\./);
	let str = '';
	for (const word of wordList) {
		str += word.charAt(0).toUpperCase() + word.slice(1);
	}

dutchcelt

/*
https://verpex.com/blog/website-tips/how-to-create-breadcrumb-navigation-with-css
*/

.breadcrumb {
  --s: 15px;
}
.breadcrumb ol li {
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%);
}

dutchcelt

:host {
	container: host / inline-size;
	display: flex;

	/* force host to be the width of the viewport */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

dutchcelt

/* https://twitter.com/jh3yy/status/1564926775620243456
 * This 👇 */

const ELEMENT = Object.assign(
  document.createElement('button'),
  {
    className: 'fab',
    popUp: 'manual',
    style: '--index: 1;',
    innerHTML: `

dutchcelt

/* `1fr` in grid templates allows for content to be wider than the fraction to prevent content overflow. 
 * In this context `1fr` is actually: `minmax(min-content, 1fr)`. 
 * Replacing `min-content` with `0` forces the fraction to be upheld. 
 */
.columns {  
  --_cols: var(--cols, 3);
  display: grid;
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
}

dutchcelt

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;

dutchcelt

.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	webkit-box-orient: vertical;  
	overflow: hidden;
}