base.scss

/*!
 _________   ________   ________   _______-+-
/\* ______\ /\* ____ \ /\* ____ \ /\* ____ \
\ \ \_____/ \ \ \__/\ \\ \ \__/\ \\ \ \__/\ \
 \ \ \   ____\ \ \_\_\ \\ \ \_\_\ \\ \ \_\_\ \
  \ \ \ /\__ \\ \  __  _\\ \  __  _\\ \  __  _\
   \ \ \_/_/\ \\ \ \/\ \/_\ \ \/\ \/_\ \ \/\ \/_
    \ \________\\ \_\ \___\\ \_\ \___\\ \_\ \___\
     \/________/ \/_/\/___/ \/_/\/___/ \/_/\/___/.nl -->

      Author: Grrr.nl
*/

/* ==========================================================================
   CONTENTS
   ==========================================================================

 * Imports.............Import external stylesheets
 * Primary styles......Non module styles  (e.g. basic typography)
 * Specific styles.....Common styles used througout the site
 * Layout..............General layout stuff
 * Modules.............Modules based on SMACSS
 * Print styles........Styles for printing
 */

@import '../../node_modules/normalize.css/normalize';

@import 'utility/functions';
@import 'utility/mixins';
@import 'utility/variables';

@import 'utility/font-imports';
@import 'utility/font-mixins';

@import 'layout-mixins/*';
@import 'module-mixins/*';

/* ==========================================================================
    PRIMER
    ========================================================================== */

html {
    box-sizing: border-box; font-size: 62.5%;
    quotes: '“' '”' '‘' '’';
}

// sass-lint:disable no-universal-selectors
*,
*::before,
*::after {
    box-sizing: inherit;
}
// sass-lint:enable no-universal-selectors

body {
    margin: 0; padding: 0;
    background: $white; color: $text-color;
    @include body-font; font-size: 14px; line-height: 1.5;
    @include font-smoothing;
    @include bp-min($small) {
        font-size: 16px;
    }
    @include bp-min($large) {
        font-size: 18px;
    }
}

/**
 * WordPress admin bar
 * Use when having an absolute or fixed header for example.
 */
body.admin-bar {
    /*
    padding-top: 60px + 46px;
    @include bp-min(782) {
        padding-top: 60px + 32px;
    }
    */
}

/*
 * Forms
 */
input,
select,
textarea {
    padding: 8px 10px;
    border-radius: $border-radius; color: $text-color;
    @include body-font; line-height: normal;
}
input[type='checkbox'],
input[type='radio'] {
    border: 0;
}
label {
    line-height: 1.3;
}

/*
 * Links
 */
a {
    color: inherit; text-decoration: underline;
    text-decoration-skip-ink: auto;
}
a:hover,
a:focus {
    text-decoration: none;
}

/*
 * Typography
 */
p {
    margin-top: 0; margin-bottom: 1.5em;
}

@mixin small-text {
    font-size: 12px; line-height: 1.3;
    @include bp-min($small) {
        font-size: 14px;
    }
}
small {
    @include small-text;
}

@mixin h1 {
    margin: 0 auto 0.5em;
    @include heading-font; font-size: 32px; line-height: 1.2;
    @include bp-min($small) {
        font-size: 42px;
    }
}
h1 {
    @include h1;
}

@mixin h2 {
    margin: 0 auto 0.5em;
    @include heading-font; font-size: 24px; line-height: 1.2;
    @include bp-min($small) {
        font-size: 36px;
    }
}
h2 {
    @include h2;
}

@mixin h3 {
    margin: 0 auto 0.5em;
    @include heading-font; font-size: 20px; line-height: 1.2;
    @include bp-min($small) {
        font-size: 28px;
    }
}
h3 {
    @include h3;
}

@mixin h4 {
    margin: 0 auto 0.25em;
    @include heading-font; font-size: 16px; line-height: 1.2;
    @include bp-min($small) {
        font-size: 22px;
    }
}
h4 {
    @include h4;
}

/**
 * Blockquote
 */
blockquote {
    //
}
blockquote p:last-child {
    margin-bottom: 0;
}
blockquote p:first-child::before {
    content: open-quote;
}
blockquote p:last-child::after {
    content: close-quote;
}

/**
 * List
 */
ul,
ol {
    //
}
ul li,
ol li {
    //
}

/**
 * Horizontal rule
 */
hr {
    //
}

/*
 * Media
 */
figure {
    margin: 0;
}
img,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block; vertical-align: middle;
}
img,
object,
iframe,
video {
    max-width: 100%; height: auto;
}

/* ==========================================================================
    LAYOUT
    ========================================================================== */

@import 'layout/*';

/* ==========================================================================
    MODULES
    ========================================================================== */

@import 'flexible-content/*';
@import 'modules/*';

/* ==========================================================================
   HELPERS
   ========================================================================== */

.sr-only {
    position: absolute; overflow: hidden;
    margin: 0; clip: rect(0 0 0 0);
    width: 1px; height: auto; padding: 0; border: 0;
    white-space: nowrap;
}

.error {
    color: #FF0000;
}

// sass-lint:disable no-ids
#__bs_notify__ {
    background: $primary-color !important;
    top: auto !important; bottom: 0 !important;
    border-radius: 0 !important;
    padding: 10px 15px !important;
    @include ui-font; font-size: 14px !important;
}
// sass-lint:enable no-ids

/* ==========================================================================
    HOVER - disable on scroll (see function disableHoverStylesOnScroll() in main.js)
    ========================================================================== */

.disable-hover body {
    pointer-events: none;
}