MattMcAdams

"commentAnchors.tags.list": [
  {
    "tag": "ANCHOR",
    "iconColor": "default",
    "highlightColor": "",
    "scope": "file",
    "styleComment": true
  },
  {
    "tag": "TEMP",

MattMcAdams

function filterSelection(filter) {
  const posts = document.getElementsByClassName("post-card"); // find all posts
  console.log(posts);
  if (filter === "all") filter = null;
  console.log(filter);

  for ( let i = 0; i < posts.length; i++) {
    let post = posts[i];
    console.log(post);

MattMcAdams

// The initial idea here is that we want to have a typographical scale based on a ratio
// and then use a different ratio for larger screens.
// This gist uses mixins and functions from other gists and the current build of Stratus, which will
// hoepfully implement this in the future.

$scale: 1.2; // Set the type scale for the small screen

:root {
  --type-size-h1: type-size(h1); // This will set the CSS variable for h1 to the h1 size as calculated by our function
}

MattMcAdams

@mixin reset($properties...) {
  @for $i from 0 to length($properties) {
    @if nth($properties, $i + 1) == margin {
      margin: 0;
    }
    @if nth($properties, $i + 1) == padding {
      padding: 0;
    }
    @if nth($properties, $i + 1) == border {
      border: 0;

MattMcAdams

/// Shorthand for the position property
/// includes quick option to make the element cover its parent
/// @group utility
/// @param {string | keyword(cover)} $position - value for position property
/// @param {number} $top - value for top property
/// @param {number} $right [$top] - value for right property
/// @param {number} $bottom [$top] - value for bottom property
/// @param {number} $left [$right] - value for the left property
@mixin position($position, $top: null, $right: $top, $bottom: $top, $left: $right) {
  @if $position == cover {

MattMcAdams

/// Clearfix for floated containers, used as a bugfix
/// @group utility
@mixin clearfix {
  content: '';
  visibility: hidden;
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
}

MattMcAdams

/// Power function
/// @group utility
/// @param {number} $base - number to be multiplied
/// @param {number (unitless)} $exponents - number of times it should be multiplied
/// @return `$base` to the power of `$exponents`
@function pow($base, $exponents) {
  $raised: 1;
  @for $i from 1 through $exponents {
    $raised: $raised * $base;
  }

MattMcAdams

/// base unit of measurement for spacing
/// @type number
$space-unit: $line-height !default;

/// function to create a general unit of measurement for spacing
/// @requires $space-unit
/// @group spacing
/// @param {number} $value
/// @return number(rem) = `$space-unit` times `$value`
@function s($value) {

MattMcAdams

/// Tint color
/// @group utility
/// @param {color} $color - color to be tinted
/// @param {number(%)} $percentage - key to extract value of
/// @return `$color` mixed with white by `$percentage`
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Shade color

MattMcAdams

/// Get value from a deep map
/// @group utility
/// @param {map} $map - source map to pull key from
/// @param {string...} $keys - key to extract value of
/// @return key value
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;