diff options
Diffstat (limited to '_sass/minimal-mistakes/_base.scss')
| -rw-r--r-- | _sass/minimal-mistakes/_base.scss | 357 |
1 files changed, 357 insertions, 0 deletions
diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss new file mode 100644 index 0000000..dd94cda --- /dev/null +++ b/_sass/minimal-mistakes/_base.scss @@ -0,0 +1,357 @@ +/* ========================================================================== + BASE ELEMENTS + ========================================================================== */ + +html { + /* sticky footer fix */ + position: relative; + min-height: 100%; +} + +body { + margin: 0; + padding: 0; + color: $text-color; + font-family: $global-font-family; + line-height: 1.5; + + &.overflow--hidden { + /* when primary navigation is visible, the content in the background won't scroll */ + overflow: hidden; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 2em 0 0.5em; + line-height: 1.2; + font-family: $header-font-family; + font-weight: bold; +} + +h1 { + margin-top: 0; + font-size: $type-size-3; +} + +h2 { + font-size: $type-size-4; +} + +h3 { + font-size: $type-size-5; +} + +h4 { + font-size: $type-size-6; +} + +h5 { + font-size: $type-size-6; +} + +h6 { + font-size: $type-size-6; +} + +small, +.small { + font-size: $type-size-6; +} + +p { + margin-bottom: 1.3em; +} + +u, +ins { + text-decoration: none; + border-bottom: 1px solid $text-color; + a { + color: inherit; + } +} + +del a { + color: inherit; +} + +/* reduce orphans and widows when printing */ + +p, +pre, +blockquote, +ul, +ol, +dl, +figure, +table, +fieldset { + orphans: 3; + widows: 3; +} + +/* abbreviations */ + +abbr[title], +abbr[data-original-title] { + text-decoration: none; + cursor: help; + border-bottom: 1px dotted $text-color; +} + +/* blockquotes */ + +blockquote { + margin: 2em 1em 2em 0; + padding-left: 1em; + padding-right: 1em; + font-style: italic; + border-left: 0.25em solid $primary-color; + + cite { + font-style: italic; + + &:before { + content: "\2014"; + padding-right: 5px; + } + } +} + +/* links */ + +a { + &:focus { + @extend %tab-focus; + } + + &:visited { + color: $link-color-visited; + } + + &:hover { + color: $link-color-hover; + outline: 0; + } +} + +/* buttons */ + +button:focus { + @extend %tab-focus; +} + +/* code */ + +tt, +code, +kbd, +samp, +pre { + font-family: $monospace; +} + +pre { + overflow-x: auto; /* add scrollbars to wide code blocks*/ +} + +p > code, +a > code, +li > code, +figcaption > code, +td > code { + padding-top: 0.1rem; + padding-bottom: 0.1rem; + font-size: 0.8em; + background: $code-background-color; + border-radius: $border-radius; + + &:before, + &:after { + letter-spacing: -0.2em; + content: "\00a0"; /* non-breaking space*/ + } +} + +/* horizontal rule */ + +hr { + display: block; + margin: 1em 0; + border: 0; + border-top: 1px solid $border-color; +} + +/* lists */ + +ul li, +ol li { + margin-bottom: 0.5em; +} + +li ul, +li ol { + margin-top: 0.5em; +} + +/* + Media and embeds + ========================================================================== */ + +/* Figures and images */ + +figure { + display: -webkit-box; + display: flex; + -webkit-box-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + align-items: flex-start; + flex-wrap: wrap; + margin: 2em 0; + + img, + iframe, + .fluid-width-video-wrapper { + margin-bottom: 1em; + } + + img { + width: 100%; + border-radius: $border-radius; + -webkit-transition: $global-transition; + transition: $global-transition; + } + + > a { + display: block; + } + + &.half { + > a, + > img { + @include breakpoint($small) { + width: calc(50% - 0.5em); + } + } + + figcaption { + width: 100%; + } + } + + &.third { + > a, + > img { + @include breakpoint($small) { + width: calc(33.3333% - 0.5em); + } + } + + figcaption { + width: 100%; + } + } +} + +/* Figure captions */ + +figcaption { + margin-bottom: 0.5em; + color: $muted-text-color; + font-family: $caption-font-family; + font-size: $type-size-6; + + a { + -webkit-transition: $global-transition; + transition: $global-transition; + + &:hover { + color: $link-color-hover; + } + } +} + +/* Fix IE9 SVG bug */ + +svg:not(:root) { + overflow: hidden; +} + +/* + Navigation lists + ========================================================================== */ + +/** + * Removes margins, padding, and bullet points from navigation lists + * + * Example usage: + * <nav> + * <ul> + * <li><a href="#link-1">Link 1</a></li> + * <li><a href="#link-2">Link 2</a></li> + * <li><a href="#link-3">Link 3</a></li> + * </ul> + * </nav> + */ + +nav { + ul { + margin: 0; + padding: 0; + } + + li { + list-style: none; + } + + a { + text-decoration: none; + } + + /* override white-space for nested lists */ + ul li, + ol li { + margin-bottom: 0; + } + + li ul, + li ol { + margin-top: 0; + } +} + +/* + Global animation transition + ========================================================================== */ + +b, +i, +strong, +em, +blockquote, +p, +q, +span, +figure, +img, +h1, +h2, +header, +input, +a, +tr, +td, +form button, +input[type="submit"], +.btn, +.highlight, +.archive__item-teaser { + -webkit-transition: $global-transition; + transition: $global-transition; +} |