mherchel

mherchel

/* 
https://css-tricks.com/theming-with-variables-globals-and-locals/
https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421
https://bradfrost.com/blog/post/creating-themeable-design-systems/

*/

.root-frontend {
  --color-primary: xxx;
  --color-neutral: #777;

mherchel

@import "../base/media-queries.pcss.css";

/* Breakpoint where tabs switch between vertical and horizontal layouts. */
@custom-media --tabs-layout-switch (--md);

.tabs {
  --tabs-height: var(--sp3);
  --tabs-padding-inline: var(--sp1-5);
  --tabs-active-border-size: 6px;
  --tabs-highlight-color: var(--color--blue-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */

mherchel

# This is a dotenv file used by JavaScript tasks.
# Copy this to '.env' to override.

#############################
# General Test Environment #
#############################
# This is the URL that Drupal can be accessed by. You don't need an installed
# site here, just make sure you can at least access the installer screen. If you
# don't already have one running, e.g. Apache, you can use PHP's built-in web
# server by running the following command in your Drupal root folder:

mherchel

• https://www.pace-il.ca/
• https://www.albertawhitewater.ca/
• https://www.lllc.ca/
• https://webform-civicrm.io/
• https://www.ivimey.org/
• https://rachelnorfolk.me/

mherchel

{{ attach_library('lullabotcom/mp3player') }}

{% for item in items %}

  {# Default implentation of audio element is hidden from modern browsers and shown to IE11. #}
  <audio class="u-noscript-visible u-ie11-visible mp3player--default" controls>
    <source src="{{ item.content }}" type="audio/mpeg">
  </audio>

  <div class="u-noscript-hidden u-ie11-hidden mp3player">

mherchel

New stuff

• selector list argument of :not() - https://codepen.io/mherchel/pen/NWppGbR
• math functions min(), max() and clamp(): https://codepen.io/mherchel/pen/BaWWomL?editors=1100
• Reflections: https://codepen.io/mherchel/pen/yLMMYjv
• :focus-within & :focus-visible pseudo-classes: https://codepen.io/mherchel/pen/gOmmaBM?editors=1100
• display: contents: https://codepen.io/mherchel/pen/abJJdog
• all and revert: https://codepen.io/mherchel/pen/YzZZwXq
• line-clamp: https://codepen.io/mherchel/pen/eYvvJNx
• :is() and :where(): https://codepen.io/mherchel/pen/GRWWpLj

mherchel

layout_onecol:
  label: 'One column'
  path: layouts/onecol
  template: layout--onecol
  library: layout_discovery/onecol
  category: 'Columns: 1'
  default_region: content
  icon_map:
    - [content]

mherchel

const mobileNavButtonSelector = 'button.mobile-nav-button';
const headerNavSelector = '#header-nav';
const linkSubMenuId = 'home-submenu-1';
const buttonSubMenuId = 'button-submenu-2';
const focusTrapCheck = (browser, tabCount, tabBackwards) => {
  if (tabBackwards === true) browser.keys(browser.Keys.SHIFT);
  for (let i = 0; i < tabCount; i++) {
    browser.keys(browser.Keys.TAB).pause(50);
  }
  browser.execute(

mherchel

"black": (
  100: #000000),
"blue": (
  10: #edf5ff,
  20: #d0e2ff,
  30: #a6c8ff,
  40: #78a9ff,
  50: #4589ff,
  60: #0f62fe,
  70: #0043ce,