_reset.scss

/*  =========================================================================
    generic.reset
    A thin layer on top of normalize.css that provides a starting point more
    suitable for web applications.
    ========================================================================= */

/**
 * 1. Set the global `box-sizing` state to `border-box`. As per:
 *    paulirish.com/2012/box-sizing-border-box-ftw
 * 2. Always add the vertical scrollbar to prevent layout shifting
 * 3. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing.
 * 4. Apply the `$supple-font-size` & `$supple-line-height-ratio`
 */
html {
  box-sizing: border-box; /* [1] */
  overflow-y: scroll; /* [2] */
  min-height: 100%;
  font-size: #{($supple-font-size/16px)*1em}; /* [4] */
  line-height: #{$supple-line-height-ratio}; /* [4] */
  -moz-osx-font-smoothing: grayscale; /* [3] */
  -webkit-font-smoothing: antialiased; /* [3] */
}

*,
*::before,
*::after {
  box-sizing: inherit; /* [1] */
}


/**
 * Remove default margins from headings
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}


/**
 * Removes unwanted margins & applies vertical rhythm to designated elements
 * As per: http://csswizardry.com/2012/06/single-direction-margin-declarations
 */
hgroup,
ul,
ol,
dl,
blockquote,
p,
address,
table,
fieldset,
figure,
pre,
hr {
  @include supple-rem(margin, 0 0 $supple-space);
}


/**
 * Default indentation value for lists
 */
ul,
ol,
dd {
  @include supple-rem(margin-left, $supple-space);
}

/**
 * Remove extra vertical spacing when nesting lists.
 */
li > ul,
li > ol {
  margin-bottom: 0;
}


/**
 * Strip unwanted paddings & styling from elements
 */
button {
  background: transparent;
}

button,
fieldset,
ol,
ul {
  padding: 0;
}

button,
iframe,
fieldset {
  border: 0;
}


/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex='-1']:focus {
  outline: none !important;
}


/**
 * Gets rid of the annoying outline for mouse users but preserves it for
 * keyboard users, and is ignored by browsers that don’t support :focus-visible.
 * As per: https://twitter.com/LeaVerou/status/1045768279753666562
 */
:focus:not(:focus-visible) { // stylelint-disable-line selector-pseudo-class-no-unknown
  outline: none;
}


/**
 * Image
 *
 * 1. By default all images are fluid
 * 2. Render `alt` visually offset when images don't load
 */
img {
  max-width: 100%; /* [1] */
  font-style: italic; /* [2] */
}