diff --git a/_config.yml b/_config.yml index af4dc8b..cf22d89 100644 --- a/_config.yml +++ b/_config.yml @@ -22,7 +22,7 @@ description: >- # this means to ignore newlines until "baseurl:" and clinical practice. # twitter_username: username # github_username: doc -minimal_mistakes_skin: contrast +minimal_mistakes_skin: safehr search: true # Build settings diff --git a/_sass/minimal-mistakes.scss b/_sass/minimal-mistakes.scss new file mode 100644 index 0000000..ba9d13d --- /dev/null +++ b/_sass/minimal-mistakes.scss @@ -0,0 +1,37 @@ +/* Copyright comment */ +@import "minimal-mistakes/copyright"; + +/* Variables */ +@import "minimal-mistakes/variables"; + +/* Mixins and functions */ +@import "minimal-mistakes/vendor/breakpoint/breakpoint"; +@include breakpoint-set("to ems", true); +@import "minimal-mistakes/vendor/magnific-popup/magnific-popup"; // Magnific Popup +@import "minimal-mistakes/vendor/susy/susy"; +@import "minimal-mistakes/mixins"; + +/* Core CSS */ +@import "minimal-mistakes/reset"; +@import "minimal-mistakes/base"; +@import "minimal-mistakes/forms"; +@import "minimal-mistakes/tables"; +@import "minimal-mistakes/animations"; + +/* Components */ +@import "minimal-mistakes/buttons"; +@import "minimal-mistakes/notices"; +@import "minimal-mistakes/masthead"; +@import "minimal-mistakes/navigation"; +@import "minimal-mistakes/footer"; +@import "minimal-mistakes/search"; +@import "minimal-mistakes/syntax"; + +/* Utility classes */ +@import "minimal-mistakes/utilities"; + +/* Layout specific */ +@import "minimal-mistakes/page"; +@import "minimal-mistakes/archive"; +@import "minimal-mistakes/sidebar"; +@import "minimal-mistakes/print"; diff --git a/_sass/minimal-mistakes/_animations.scss b/_sass/minimal-mistakes/_animations.scss new file mode 100644 index 0000000..25ef77f --- /dev/null +++ b/_sass/minimal-mistakes/_animations.scss @@ -0,0 +1,21 @@ +/* ========================================================================== + ANIMATIONS + ========================================================================== */ + +@-webkit-keyframes intro { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes intro { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss new file mode 100644 index 0000000..9f57632 --- /dev/null +++ b/_sass/minimal-mistakes/_archive.scss @@ -0,0 +1,463 @@ +/* ========================================================================== + ARCHIVE + ========================================================================== */ + +.archive { + margin-top: 1em; + margin-bottom: 2em; + + @include breakpoint($large) { + float: right; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; + } +} + +.archive__item { + position: relative; + + a { + position: relative; + z-index: 10; + } + + a[rel="permalink"] { + position: static; + } +} + +.archive__subtitle { + margin: 1.414em 0 0.5em; + padding-bottom: 0.5em; + font-size: $type-size-5; + color: $muted-text-color; + border-bottom: 1px solid $border-color; + + + .list__item .archive__item-title { + margin-top: 0.5em; + } +} + +.archive__item-title { + margin-bottom: 0.25em; + font-family: $sans-serif-narrow; + line-height: initial; + overflow: hidden; + text-overflow: ellipsis; + + a[rel="permalink"]::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + a + a { + opacity: 0.5; + } +} + +/* remove border*/ +.page__content { + .archive__item-title { + margin-top: 1em; + border-bottom: none; + } +} + +.archive__item-excerpt { + margin-top: 0; + font-size: $type-size-6; + + & + p { + text-indent: 0; + } + + a { + position: relative; + } +} + +.archive__item-teaser { + position: relative; + border-radius: $border-radius; + overflow: hidden; + + img { + width: 100%; + } +} + +.archive__item-caption { + position: absolute; + bottom: 0; + right: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-8; + background: #000; + text-align: right; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; + + @include breakpoint($large) { + padding: 5px 10px; + } + + a { + color: #fff; + text-decoration: none; + } +} + +/* + List view + ========================================================================== */ + +.list__item { + .page__meta { + margin: 0 0 4px; + font-size: 0.6em; + } +} + +/* + Grid view + ========================================================================== */ + +.archive { + .grid__wrapper { + /* extend grid elements to the right */ + + @include breakpoint($large) { + margin-right: -1 * $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + margin-right: -1 * $right-sidebar-width; + } + } +} + +.grid__item { + margin-bottom: 2em; + + @include breakpoint($small) { + float: left; + width: span(5 of 10); + + &:nth-child(2n + 1) { + clear: both; + margin-left: 0; + } + + &:nth-child(2n + 2) { + clear: none; + margin-left: gutter(of 10); + } + } + + @include breakpoint($medium) { + margin-left: 0; /* override margin*/ + margin-right: 0; /* override margin*/ + width: span(3 of 12); + + &:nth-child(2n + 1) { + clear: none; + } + + &:nth-child(4n + 1) { + clear: both; + } + + &:nth-child(4n + 2) { + clear: none; + margin-left: gutter(1 of 12); + } + + &:nth-child(4n + 3) { + clear: none; + margin-left: gutter(1 of 12); + } + + &:nth-child(4n + 4) { + clear: none; + margin-left: gutter(1 of 12); + } + } + + .page__meta { + margin: 0 0 4px; + font-size: 0.6em; + } + + .page__meta-sep { + display: block; + + &::before { + display: none; + } + } + + .archive__item-title { + margin-top: 0.5em; + font-size: $type-size-5; + } + + .archive__item-excerpt { + display: none; + + @include breakpoint($medium) { + display: block; + font-size: $type-size-6; + } + } + + .archive__item-teaser { + @include breakpoint($small) { + max-height: 200px; + } + + @include breakpoint($medium) { + max-height: 120px; + } + } +} + +/* + Features + ========================================================================== */ + +.feature__wrapper { + @include clearfix(); + margin-bottom: 2em; + border-bottom: 1px solid $border-color; + + .archive__item-title { + margin-bottom: 0; + } +} + +.feature__item { + position: relative; + margin-bottom: 2em; + font-size: 1.125em; + + @include breakpoint($small) { + float: left; + margin-bottom: 0; + width: span(4 of 12); + + &:nth-child(3n + 1) { + clear: both; + margin-left: 0; + } + + &:nth-child(3n + 2) { + clear: none; + margin-left: gutter(of 12); + } + + &:nth-child(3n + 3) { + clear: none; + margin-left: gutter(of 12); + } + + .feature__item-teaser { + max-height: 200px; + overflow: hidden; + } + } + + .archive__item-body { + padding-left: gutter(1 of 12); + padding-right: gutter(1 of 12); + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + &--left { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + .archive__item { + float: left; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @include breakpoint($small) { + .archive__item-teaser { + float: left; + width: span(5 of 12); + } + + .archive__item-body { + float: right; + padding-left: gutter(0.5 of 12); + padding-right: gutter(1 of 12); + width: span(7 of 12); + } + } + } + + &--right { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + .archive__item { + float: left; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @include breakpoint($small) { + text-align: right; + + .archive__item-teaser { + float: right; + width: span(5 of 12); + } + + .archive__item-body { + float: left; + width: span(7 of 12); + padding-left: gutter(0.5 of 12); + padding-right: gutter(1 of 12); + } + } + } + + &--center { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + .archive__item { + float: left; + width: 100%; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @include breakpoint($small) { + text-align: center; + + .archive__item-teaser { + margin: 0 auto; + width: span(5 of 12); + } + + .archive__item-body { + margin: 0 auto; + width: span(7 of 12); + } + } + } +} + +/* Place inside an archive layout */ + +.archive { + .feature__wrapper { + .archive__item-title { + margin-top: 0.25em; + font-size: 1em; + } + } + + .feature__item, + .feature__item--left, + .feature__item--center, + .feature__item--right { + font-size: 1em; + } +} + +/* + Wide Pages + ========================================================================== */ + + .wide { + .archive { + @include breakpoint($large) { + padding-right: 0; + } + + @include breakpoint($x-large) { + padding-right: 0; + } + } +} + +/* Place inside a single layout */ + +.layout--single { + .feature__wrapper { + display: inline-block; + } +} diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss new file mode 100644 index 0000000..01c8a49 --- /dev/null +++ b/_sass/minimal-mistakes/_base.scss @@ -0,0 +1,339 @@ +/* ========================================================================== + 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: $h-size-1; +} + +h2 { + font-size: $h-size-2; +} + +h3 { + font-size: $h-size-3; +} + +h4 { + font-size: $h-size-4; +} + +h5 { + font-size: $h-size-5; +} + +h6 { + font-size: $h-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*/ +} + +/* 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 { + 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; +} diff --git a/_sass/minimal-mistakes/_buttons.scss b/_sass/minimal-mistakes/_buttons.scss new file mode 100644 index 0000000..9ef60a8 --- /dev/null +++ b/_sass/minimal-mistakes/_buttons.scss @@ -0,0 +1,97 @@ +/* ========================================================================== + BUTTONS + ========================================================================== */ + +/* + Default button + ========================================================================== */ + +.btn { + /* default */ + display: inline-block; + margin-bottom: 0.25em; + padding: 0.5em 1em; + font-family: $sans-serif; + font-size: $type-size-6; + font-weight: bold; + text-align: center; + text-decoration: none; + border-width: 0; + border-radius: $border-radius; + cursor: pointer; + + .icon { + margin-right: 0.5em; + } + + .icon + .hidden { + margin-left: -0.5em; /* override for hidden text*/ + } + + /* button colors */ + $buttoncolors: + (primary, $primary-color), + (inverse, #fff), + (light-outline, transparent), + (success, $success-color), + (warning, $warning-color), + (danger, $danger-color), + (info, $info-color), + (facebook, $facebook-color), + (twitter, $twitter-color), + (linkedin, $linkedin-color); + + @each $buttoncolor, $color in $buttoncolors { + &--#{$buttoncolor} { + @include yiq-contrasted($color); + @if ($buttoncolor == inverse) { + border: 1px solid $border-color; + } + @if ($buttoncolor == light-outline) { + border: 1px solid #fff; + } + + &:visited { + @include yiq-contrasted($color); + } + + &:hover { + @include yiq-contrasted(mix(#000, $color, 20%)); + } + } + } + + /* fills width of parent container */ + &--block { + display: block; + width: 100%; + + + .btn--block { + margin-top: 0.25em; + } + } + + /* disabled */ + &--disabled { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + box-shadow: none; + opacity: 0.65; + } + + /* extra large button */ + &--x-large { + font-size: $type-size-4; + } + + /* large button */ + &--large { + font-size: $type-size-5; + } + + /* small button */ + &--small { + font-size: $type-size-7; + } +} \ No newline at end of file diff --git a/_sass/minimal-mistakes/_copyright.scss b/_sass/minimal-mistakes/_copyright.scss new file mode 100644 index 0000000..b70c037 --- /dev/null +++ b/_sass/minimal-mistakes/_copyright.scss @@ -0,0 +1,6 @@ +/*! + * Minimal Mistakes Jekyll Theme 4.26.2 by Michael Rose + * Copyright 2013-2024 Michael Rose - mademistakes.com | @mmistakes + * Free for personal and commercial use under the MIT license + * https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE + */ diff --git a/_sass/minimal-mistakes/_footer.scss b/_sass/minimal-mistakes/_footer.scss new file mode 100644 index 0000000..c0b0625 --- /dev/null +++ b/_sass/minimal-mistakes/_footer.scss @@ -0,0 +1,85 @@ +/* ========================================================================== + FOOTER + ========================================================================== */ + +.page__footer { + @include clearfix; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + margin-top: 3em; + color: $muted-text-color; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.45s; + animation-delay: 0.45s; + background-color: $footer-background-color; + + footer { + @include clearfix; + margin-left: auto; + margin-right: auto; + margin-top: 2em; + max-width: 100%; + padding: 0 1em 2em; + + @include breakpoint($x-large) { + max-width: $x-large; + } + } + + a { + color: inherit; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + .fas, + .fab, + .far, + .fal { + color: $muted-text-color; + } +} + +.page__footer-copyright { + font-family: $global-font-family; + font-size: $type-size-7; +} + +.page__footer-follow { + ul { + margin: 0; + padding: 0; + list-style-type: none; + } + + li { + display: inline-block; + padding-top: 5px; + padding-bottom: 5px; + font-family: $sans-serif-narrow; + font-size: $type-size-6; + text-transform: uppercase; + } + + li + li:before { + content: ""; + padding-right: 5px; + } + + a { + padding-right: 10px; + font-weight: bold; + } + + .social-icons { + a { + white-space: nowrap; + } + } +} diff --git a/_sass/minimal-mistakes/_forms.scss b/_sass/minimal-mistakes/_forms.scss new file mode 100644 index 0000000..0dd9b48 --- /dev/null +++ b/_sass/minimal-mistakes/_forms.scss @@ -0,0 +1,359 @@ +/* ========================================================================== + Forms + ========================================================================== */ + +form { + margin: 0 0 5px 0; + padding: 1em; + background-color: $form-background-color; + + fieldset { + margin-bottom: 5px; + padding: 0; + border-width: 0; + } + + legend { + display: block; + width: 100%; + margin-bottom: 5px * 2; + *margin-left: -7px; + padding: 0; + color: $text-color; + border: 0; + white-space: normal; + } + + p { + margin-bottom: (5px / 2); + } + + ul { + list-style-type: none; + margin: 0 0 5px 0; + padding: 0; + } + + br { + display: none; + } +} + +label, +input, +button, +select, +textarea { + vertical-align: baseline; + *vertical-align: middle; +} + +input, +button, +select, +textarea { + box-sizing: border-box; + font-family: $sans-serif; +} + +label { + display: block; + margin-bottom: 0.25em; + color: $text-color; + cursor: pointer; + + small { + font-size: $type-size-6; + } + + input, + textarea, + select { + display: block; + } +} + +input, +textarea, +select { + display: inline-block; + width: 100%; + padding: 0.25em; + margin-bottom: 0.5em; + color: $text-color; + background-color: $background-color; + border: $border-color; + border-radius: $border-radius; + box-shadow: $box-shadow; +} + +.input-mini { + width: 60px; +} + +.input-small { + width: 90px; +} + +input[type="image"], +input[type="checkbox"], +input[type="radio"] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; + line-height: normal; + cursor: pointer; + border-radius: 0; + border: 0 \9; + box-shadow: none; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; +} + +input[type="image"] { + border: 0; +} + +input[type="file"] { + width: auto; + padding: initial; + line-height: initial; + border: initial; + background-color: transparent; + background-color: initial; + box-shadow: none; +} + +input[type="button"], +input[type="reset"], +input[type="submit"] { + width: auto; + height: auto; + cursor: pointer; + *overflow: visible; +} + +select, +input[type="file"] { + *margin-top: 4px; +} + +select { + width: auto; + background-color: #fff; +} + +select[multiple], +select[size] { + height: auto; +} + +textarea { + resize: vertical; + height: auto; + overflow: auto; + vertical-align: top; +} + +input[type="hidden"] { + display: none; +} + +.form { + position: relative; +} + +.radio, +.checkbox { + padding-left: 18px; + font-weight: normal; +} + +.radio input[type="radio"], +.checkbox input[type="checkbox"] { + float: left; + margin-left: -18px; +} + +.radio.inline, +.checkbox.inline { + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; +} + +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} + +/* + Disabled state + ========================================================================== */ + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + opacity: 0.5; + cursor: not-allowed; +} + +/* + Focus & active state + ========================================================================== */ + +input:focus, +textarea:focus { + border-color: $primary-color; + outline: 0; + outline: thin dotted \9; + box-shadow: inset 0 1px 3px rgba($text-color, 0.06), + 0 0 5px rgba($primary-color, 0.7); +} + +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + box-shadow: none; +} + +/* + Help text + ========================================================================== */ + +.help-block, +.help-inline { + color: $muted-text-color; +} + +.help-block { + display: block; + margin-bottom: 1em; + line-height: 1em; +} + +.help-inline { + display: inline-block; + vertical-align: middle; + padding-left: 5px; +} + +/* + .form-group + ========================================================================== */ + +.form-group { + margin-bottom: 5px; + padding: 0; + border-width: 0; +} + +/* + .form-inline + ========================================================================== */ + +.form-inline input, +.form-inline textarea, +.form-inline select { + display: inline-block; + margin-bottom: 0; +} + +.form-inline label { + display: inline-block; +} + +.form-inline .radio, +.form-inline .checkbox, +.form-inline .radio { + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { + float: left; + margin-left: 0; + margin-right: 3px; +} + +/* + .form-search + ========================================================================== */ + +.form-search input, +.form-search textarea, +.form-search select { + display: inline-block; + margin-bottom: 0; +} + +.form-search .search-query { + padding-left: 14px; + padding-right: 14px; + margin-bottom: 0; + border-radius: 14px; +} + +.form-search label { + display: inline-block; +} + +.form-search .radio, +.form-search .checkbox, +.form-inline .radio { + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.form-search .radio input[type="radio"], +.form-search .checkbox input[type="checkbox"] { + float: left; + margin-left: 0; + margin-right: 3px; +} + +/* + .form--loading + ========================================================================== */ + +.form--loading:before { + content: ""; +} + +.form--loading .form__spinner { + display: block; +} + +.form:before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.7); + z-index: 10; +} + +.form__spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + z-index: 11; +} diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss new file mode 100644 index 0000000..2dfefcc --- /dev/null +++ b/_sass/minimal-mistakes/_masthead.scss @@ -0,0 +1,93 @@ +/* ========================================================================== + MASTHEAD + ========================================================================== */ + +.masthead { + position: relative; + border-bottom: 1px solid $border-color; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + z-index: 20; + + &__inner-wrap { + @include clearfix; + margin-left: auto; + margin-right: auto; + padding: 1em; + max-width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + font-family: $sans-serif-narrow; + + @include breakpoint($x-large) { + max-width: $max-width; + } + + nav { + z-index: 10; + } + + a { + text-decoration: none; + } + } +} + +.site-logo img { + max-height: 2rem; +} + +.site-title { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-item-align: center; + align-self: center; + font-weight: bold; + // z-index: 20; +} + +.site-subtitle { + display: block; + font-size: $type-size-8; +} + +.masthead__menu { + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + + .site-nav { + margin-left: 0; + + @include breakpoint($small) { + float: right; + } + } + + ul { + margin: 0; + padding: 0; + clear: both; + list-style-type: none; + } +} + +.masthead__menu-item { + display: block; + list-style-type: none; + white-space: nowrap; + + &--lg { + padding-right: 2em; + font-weight: 700; + } +} diff --git a/_sass/minimal-mistakes/_mixins.scss b/_sass/minimal-mistakes/_mixins.scss new file mode 100644 index 0000000..4aa9eb0 --- /dev/null +++ b/_sass/minimal-mistakes/_mixins.scss @@ -0,0 +1,92 @@ +/* ========================================================================== + MIXINS + ========================================================================== */ + +%tab-focus { + /* Default*/ + outline: thin dotted $focus-color; + /* Webkit*/ + outline: 5px auto $focus-color; + outline-offset: -2px; +} + +/* + em function + ========================================================================== */ + +@function em($target, $context: $doc-font-size) { + @return ($target / $context) * 1em; +} + + +/* + Bourbon clearfix + ========================================================================== */ + +/* + * Provides an easy way to include a clearfix for containing floats. + * link http://cssmojo.com/latest_new_clearfix_so_far/ + * + * example scss - Usage + * + * .element { + * @include clearfix; + * } + * + * example css - CSS Output + * + * .element::after { + * clear: both; + * content: ""; + * display: table; + * } +*/ + +@mixin clearfix { + clear: both; + + &::after { + clear: both; + content: ""; + display: table; + } +} + +/* + Compass YIQ Color Contrast + https://github.com/easy-designs/yiq-color-contrast + ========================================================================== */ + +@function yiq-is-light( + $color, + $threshold: $yiq-contrasted-threshold +) { + $red: red($color); + $green: green($color); + $blue: blue($color); + + $yiq: (($red*299)+($green*587)+($blue*114))/1000; + + @if $yiq-debug { @debug $yiq, $threshold; } + + @return if($yiq >= $threshold, true, false); +} + +@function yiq-contrast-color( + $color, + $dark: $yiq-contrasted-dark-default, + $light: $yiq-contrasted-light-default, + $threshold: $yiq-contrasted-threshold +) { + @return if(yiq-is-light($color, $threshold), $yiq-contrasted-dark-default, $yiq-contrasted-light-default); +} + +@mixin yiq-contrasted( + $background-color, + $dark: $yiq-contrasted-dark-default, + $light: $yiq-contrasted-light-default, + $threshold: $yiq-contrasted-threshold +) { + background-color: $background-color; + color: yiq-contrast-color($background-color, $dark, $light, $threshold); +} \ No newline at end of file diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss new file mode 100644 index 0000000..24d1b1b --- /dev/null +++ b/_sass/minimal-mistakes/_navigation.scss @@ -0,0 +1,573 @@ +/* ========================================================================== + NAVIGATION + ========================================================================== */ + +/* + Breadcrumb navigation links + ========================================================================== */ + +.breadcrumbs { + @include clearfix; + margin: 0 auto; + max-width: 100%; + padding-left: 1em; + padding-right: 1em; + font-family: $sans-serif; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + + @include breakpoint($x-large) { + max-width: $x-large; + } + + ol { + padding: 0; + list-style: none; + font-size: $type-size-6; + + @include breakpoint($large) { + float: right; + width: calc(100% - #{$right-sidebar-width-narrow}); + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + } + } + + li { + display: inline; + } + + .current { + font-weight: bold; + } +} + +/* + Post pagination navigation links + ========================================================================== */ + +.pagination { + @include clearfix(); + float: left; + margin-top: 1em; + padding-top: 1em; + width: 100%; + + ul { + margin: 0; + padding: 0; + list-style-type: none; + font-family: $sans-serif; + } + + li { + display: block; + float: left; + margin-left: -1px; + + a { + display: block; + margin-bottom: 0.25em; + padding: 0.5em 1em; + font-family: $sans-serif; + font-size: 14px; + font-weight: bold; + line-height: 1.5; + text-align: center; + text-decoration: none; + color: $muted-text-color; + border: 1px solid mix(#000, $border-color, 25%); + border-radius: 0; + + &:hover { + color: $link-color-hover; + } + + &.current, + &.current.disabled { + color: #fff; + background: $primary-color; + } + + &.disabled { + color: rgba($muted-text-color, 0.5); + pointer-events: none; + cursor: not-allowed; + } + } + + &:first-child { + margin-left: 0; + + a { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } + } + + &:last-child { + a { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + } + } + + /* next/previous buttons */ + &--pager { + display: block; + padding: 1em 2em; + float: left; + width: 50%; + font-family: $sans-serif; + font-size: $type-size-5; + font-weight: bold; + text-align: center; + text-decoration: none; + color: $muted-text-color; + border: 1px solid mix(#000, $border-color, 25%); + border-radius: $border-radius; + + &:hover { + @include yiq-contrasted($muted-text-color); + } + + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:last-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &.disabled { + color: rgba($muted-text-color, 0.5); + pointer-events: none; + cursor: not-allowed; + } + } +} + +.page__content + .pagination, +.page__meta + .pagination, +.page__share + .pagination, +.page__comments + .pagination { + margin-top: 2em; + padding-top: 2em; + border-top: 1px solid $border-color; +} + +/* + Priority plus navigation + ========================================================================== */ + +.greedy-nav { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: $nav-height; + background: $background-color; + + a { + display: block; + margin: 0 1rem; + color: $masthead-link-color; + text-decoration: none; + -webkit-transition: none; + transition: none; + + &:hover { + color: $masthead-link-color-hover; + } + + &.site-logo { + margin-left: 0; + margin-right: 0.5rem; + } + + &.site-title { + margin-left: 0; + } + } + + img { + -webkit-transition: none; + transition: none; + } + + &__toggle { + -ms-flex-item-align: center; + align-self: center; + height: $nav-toggle-height; + border: 0; + outline: none; + background-color: transparent; + cursor: pointer; + } + + .visible-links { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + overflow: hidden; + + li { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + } + + a { + position: relative; + + &:before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 4px; + background: $primary-color; + width: 100%; + -webkit-transition: $global-transition; + transition: $global-transition; + -webkit-transform: scaleX(0) translate3d(0, 0, 0); + transform: scaleX(0) translate3d(0, 0, 0); // hide + } + + &:hover:before { + -webkit-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); // reveal + } + } + } + + .hidden-links { + position: absolute; + top: 100%; + right: 0; + margin-top: 15px; + padding: 5px; + border: 1px solid $border-color; + border-radius: $border-radius; + background: $background-color; + -webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16), + 0 2px 10px 0 rgba(#000, 0.12); + box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12); + + &.hidden { + display: none; + } + + a { + margin: 0; + padding: 10px 20px; + font-size: $type-size-5; + + &:hover { + color: $masthead-link-color-hover; + background: $navicon-link-color-hover; + } + } + + &:before { + content: ""; + position: absolute; + top: -11px; + right: 10px; + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: $border-color transparent; + display: block; + z-index: 0; + } + + &:after { + content: ""; + position: absolute; + top: -10px; + right: 10px; + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: $background-color transparent; + display: block; + z-index: 1; + } + + li { + display: block; + border-bottom: 1px solid $border-color; + + &:last-child { + border-bottom: none; + } + } + } +} + +.no-js { + .greedy-nav { + .visible-links { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + overflow: visible; + } + } +} + +/* + Navigation list + ========================================================================== */ + +.nav__list { + margin-bottom: 1.5em; + + input[type="checkbox"], + label { + display: none; + } + + @include breakpoint(max-width $large - 1px) { + label { + position: relative; + display: inline-block; + padding: 0.5em 2.5em 0.5em 1em; + color: $gray; + font-size: $type-size-6; + font-weight: bold; + border: 1px solid $light-gray; + border-radius: $border-radius; + z-index: 20; + -webkit-transition: 0.2s ease-out; + transition: 0.2s ease-out; + cursor: pointer; + + &:before, + &:after { + content: ""; + position: absolute; + right: 1em; + top: 1.25em; + width: 0.75em; + height: 0.125em; + line-height: 1; + background-color: $gray; + -webkit-transition: 0.2s ease-out; + transition: 0.2s ease-out; + } + + &:after { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + } + + &:hover { + color: #fff; + border-color: $gray; + background-color: mix(white, #000, 20%); + + &:before, + &:after { + background-color: #fff; + } + } + } + + /* selected*/ + input:checked + label { + color: white; + background-color: mix(white, #000, 20%); + + &:before, + &:after { + background-color: #fff; + } + } + + /* on hover show expand*/ + label:hover:after { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + } + + input:checked + label:hover:after { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + + ul { + margin-bottom: 1em; + } + + a { + display: block; + padding: 0.25em 0; + + @include breakpoint($large) { + padding-top: 0.125em; + padding-bottom: 0.125em; + } + + &:hover { + text-decoration: underline; + } + } + } +} + +.nav__list .nav__items { + margin: 0; + font-size: 1.25rem; + + a { + color: inherit; + } + + .active { + margin-left: -0.5em; + padding-left: 0.5em; + padding-right: 0.5em; + font-weight: bold; + } + + @include breakpoint(max-width $large - 1px) { + position: relative; + max-height: 0; + opacity: 0%; + overflow: hidden; + z-index: 10; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; + -webkit-transform: translate(0, 10%); + -ms-transform: translate(0, 10%); + transform: translate(0, 10%); + } +} + +@include breakpoint(max-width $large - 1px) { + .nav__list input:checked ~ .nav__items { + -webkit-transition: 0.5s ease-in-out; + transition: 0.5s ease-in-out; + max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/ + overflow: visible; + opacity: 1; + margin-top: 1em; + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } +} + +.nav__title { + margin: 0; + padding: 0.5rem 0.75rem; + font-family: $sans-serif-narrow; + font-size: $type-size-5; + font-weight: bold; +} + +.nav__sub-title { + display: block; + margin: 0.5rem 0; + padding: 0.25rem 0; + font-family: $sans-serif-narrow; + font-size: $type-size-6; + font-weight: bold; + text-transform: uppercase; + border-bottom: 1px solid $border-color; +} + +/* + Table of contents navigation + ========================================================================== */ + +.toc { + font-family: $sans-serif-narrow; + color: $gray; + background-color: $background-color; + border: 1px solid $border-color; + border-radius: $border-radius; + -webkit-box-shadow: $box-shadow; + box-shadow: $box-shadow; + + .nav__title { + color: #fff; + font-size: $type-size-6; + background: $primary-color; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + } + + // Scrollspy marks toc items as .active when they are in focus + .active a { + @include yiq-contrasted($active-color); + } +} + +.toc__menu { + margin: 0; + padding: 0; + width: 100%; + list-style: none; + font-size: $type-size-6; + + @include breakpoint($large) { + font-size: $type-size-7; + } + + a { + display: block; + padding: 0.25rem 0.75rem; + color: $muted-text-color; + font-weight: bold; + line-height: 1.5; + border-bottom: 1px solid $border-color; + + &:hover { + color: $text-color; + } + } + + li ul > li a { + padding-left: 1.25rem; + font-weight: normal; + } + + li ul li ul > li a { + padding-left: 1.75rem; + } + + li ul li ul li ul > li a { + padding-left: 2.25rem; + } + + li ul li ul li ul li ul > li a { + padding-left: 2.75rem; + } + + li ul li ul li ul li ul li ul > li a { + padding-left: 3.25rem + } +} diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss new file mode 100644 index 0000000..90570b0 --- /dev/null +++ b/_sass/minimal-mistakes/_notices.scss @@ -0,0 +1,109 @@ +/* ========================================================================== + NOTICE TEXT BLOCKS + ========================================================================== */ + +/** + * Default Kramdown usage (no indents!): + *
+ * #### Headline for the Notice + * Text for the notice + *
+ */ + +@mixin notice($notice-color) { + margin: 2em 0 !important; /* override*/ + padding: 1em; + color: $text-color; + font-family: $global-font-family; + font-size: $type-size-6 !important; + text-indent: initial; /* override*/ + background-color: mix($background-color, $notice-color, $notice-background-mix); + border-radius: $border-radius; + box-shadow: 0 1px 1px rgba($notice-color, 0.25); + + h4 { + margin-top: 0 !important; /* override*/ + margin-bottom: 0.75em; + line-height: inherit; + } + + @at-root .page__content #{&} h4 { + /* using at-root to override .page-content h4 font size*/ + margin-bottom: 0; + font-size: 1em; + } + + p { + &:last-child { + margin-bottom: 0 !important; /* override*/ + } + } + + h4 + p { + /* remove space above paragraphs that appear directly after notice headline*/ + margin-top: 0; + padding-top: 0; + } + + a { + color: mix(#000, $notice-color, 10%); + + &:hover { + color: mix(#000, $notice-color, 50%); + } + } + + @at-root #{selector-unify(&, "blockquote")} { + border-left-color: mix(#000, $notice-color, 10%); + } + + code { + background-color: mix($background-color, $notice-color, $code-notice-background-mix) + } + + pre code { + background-color: inherit; + } + + ul { + &:last-child { + margin-bottom: 0; /* override*/ + } + } +} + +/* Default notice */ + +.notice { + @include notice($light-gray); +} + +/* Primary notice */ + +.notice--primary { + @include notice($primary-color); +} + +/* Info notice */ + +.notice--info { + @include notice($info-color); +} + +/* Warning notice */ + +.notice--warning { + @include notice($warning-color); +} + +/* Success notice */ + +.notice--success { + @include notice($success-color); +} + +/* Danger notice */ + +.notice--danger { + @include notice($danger-color); +} diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss new file mode 100644 index 0000000..847dc4c --- /dev/null +++ b/_sass/minimal-mistakes/_page.scss @@ -0,0 +1,578 @@ +/* ========================================================================== + SINGLE PAGE/POST + ========================================================================== */ + +#main { + @include clearfix; + margin-left: auto; + margin-right: auto; + padding-left: 1em; + padding-right: 1em; + -webkit-animation: $intro-transition; + animation: $intro-transition; + max-width: 100%; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + + @include breakpoint($x-large) { + max-width: $max-width; + } +} + +body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 100vh; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.initial-content, +.search-content { + flex: 1 0 auto; +} + +.page { + @include breakpoint($large) { + float: right; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; + } + + .page__inner-wrap { + float: left; + margin-top: 1em; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + + .page__content, + .page__meta, + .page__share { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + } + } +} + +.page__title { + margin-top: 0; + line-height: 1; + + a { + color: $text-color; + text-decoration: none; + } + + & + .page__meta { + margin-top: -0.5em; + } +} + +.page__lead { + font-family: $global-font-family; + font-size: $type-size-4; +} + +.page__content { + h2 { + padding-bottom: 0.5em; + border-bottom: 1px solid $border-color; + } + + h1, h2, h3, h4, h5, h6 { + .header-link { + position: relative; + left: 0.5em; + opacity: 0; + font-size: 0.8em; + -webkit-transition: opacity 0.2s ease-in-out 0.1s; + -moz-transition: opacity 0.2s ease-in-out 0.1s; + -o-transition: opacity 0.2s ease-in-out 0.1s; + transition: opacity 0.2s ease-in-out 0.1s; + } + + &:hover .header-link { + opacity: 1; + } + } + + p, + li, + dl { + font-size: 1em; + } + + /* paragraph indents */ + p { + margin: 0 0 $indent-var; + + /* sibling indentation*/ + @if $paragraph-indent == true { + & + p { + text-indent: $indent-var; + margin-top: -($indent-var); + } + } + } + + a:not(.btn) { + &:hover { + text-decoration: underline; + + img { + box-shadow: 0 0 10px rgba(#000, 0.25); + } + } + } + + :not(pre) > 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*/ + } + } + + dt { + margin-top: 1em; + font-family: $sans-serif; + font-weight: bold; + } + + dd { + margin-left: 1em; + font-family: $sans-serif; + font-size: $type-size-6; + } + + .small { + font-size: $type-size-6; + } + + /* blockquote citations */ + blockquote + .small { + margin-top: -1.5em; + padding-left: 1.25rem; + } +} + +.page__hero { + position: relative; + margin-bottom: 2em; + @include clearfix; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; + + &--overlay { + position: relative; + margin-bottom: 2em; + padding: 3em 0; + @include clearfix; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; + + a { + color: #fff; + } + + .wrapper { + padding-left: 1em; + padding-right: 1em; + + @include breakpoint($x-large) { + max-width: $x-large; + } + } + + .page__title, + .page__meta, + .page__lead, + .btn { + color: #fff; + text-shadow: 1px 1px 4px rgba(#000, 0.5); + } + + .page__lead { + max-width: $medium; + } + + .page__title { + font-size: $type-size-2; + + @include breakpoint($small) { + font-size: $type-size-1; + } + } + } +} + +.page__hero-image { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; +} + +.page__hero-caption { + position: absolute; + bottom: 0; + right: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-7; + background: #000; + text-align: right; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; + + @include breakpoint($large) { + padding: 5px 10px; + } + + a { + color: #fff; + text-decoration: none; + } +} + +/* + Social sharing + ========================================================================== */ + +.page__share { + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint(max-width $small) { + .btn span { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + } +} + +.page__share-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; +} + +/* + Page meta + ========================================================================== */ + +.page__meta { + margin-top: 2em; + color: $muted-text-color; + font-family: $sans-serif; + font-size: $type-size-6; + + p { + margin: 0; + } + + a { + color: inherit; + } +} + +.page__meta-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; +} + +.page__meta-sep::before { + content: "\2022"; + padding-left: 0.5em; + padding-right: 0.5em; +} + +/* + Page taxonomy + ========================================================================== */ + +.page__taxonomy { + .sep { + display: none; + } + + strong { + margin-right: 10px; + } +} + +.page__taxonomy-item { + display: inline-block; + margin-right: 5px; + margin-bottom: 8px; + padding: 5px 10px; + text-decoration: none; + border: 1px solid mix(#000, $border-color, 25%); + border-radius: $border-radius; + + &:hover { + text-decoration: none; + color: $link-color-hover; + } +} + +.taxonomy__section { + margin-bottom: 2em; + padding-bottom: 1em; + + &:not(:last-child) { + border-bottom: solid 1px $border-color; + } + + .archive__item-title { + margin-top: 0; + } + + .archive__subtitle { + clear: both; + border: 0; + } + + + .taxonomy__section { + margin-top: 2em; + } +} + +.taxonomy__title { + margin-bottom: 0.5em; + color: $muted-text-color; +} + +.taxonomy__count { + color: $muted-text-color; +} + +.taxonomy__index { + display: grid; + grid-column-gap: 2em; + grid-template-columns: repeat(2, 1fr); + margin: 1.414em 0; + padding: 0; + font-size: 0.75em; + list-style: none; + + @include breakpoint($large) { + grid-template-columns: repeat(3, 1fr); + } + + a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.25em 0; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + color: inherit; + text-decoration: none; + border-bottom: 1px solid $border-color; + } +} + +.back-to-top { + display: block; + clear: both; + color: $muted-text-color; + font-size: 0.6em; + text-transform: uppercase; + text-align: right; + text-decoration: none; +} + +/* + Comments + ========================================================================== */ + +.page__comments { + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; +} + +.page__comments-title { + margin-top: 2rem; + margin-bottom: 10px; + padding-top: 2rem; + font-size: $type-size-6; + border-top: 1px solid $border-color; + text-transform: uppercase; +} + +.page__comments-form { + -webkit-transition: $global-transition; + transition: $global-transition; + + &.disabled { + input, + button, + textarea, + label { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + box-shadow: none; + opacity: 0.65; + } + } +} + +.comment { + @include clearfix(); + margin: 1em 0; + + &:not(:last-child) { + border-bottom: 1px solid $border-color; + } +} + +.comment__avatar-wrapper { + float: left; + width: 60px; + height: 60px; + + @include breakpoint($large) { + width: 100px; + height: 100px; + } +} + +.comment__avatar { + width: 40px; + height: 40px; + border-radius: 50%; + + @include breakpoint($large) { + width: 80px; + height: 80px; + padding: 5px; + border: 1px solid $border-color; + } +} + +.comment__content-wrapper { + float: right; + width: calc(100% - 60px); + + @include breakpoint($large) { + width: calc(100% - 100px); + } +} + +.comment__author { + margin: 0; + + a { + text-decoration: none; + } +} + +.comment__date { + @extend .page__meta; + margin: 0; + + a { + text-decoration: none; + } +} + +/* + Related + ========================================================================== */ + +.page__related { + @include clearfix(); + float: left; + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint($large) { + float: right; + width: calc(100% - #{$right-sidebar-width-narrow}); + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + } + + a { + color: inherit; + text-decoration: none; + } +} + +.page__related-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; +} + +/* + Wide Pages + ========================================================================== */ + +.wide { + .page { + @include breakpoint($large) { + padding-right: 0; + } + + @include breakpoint($x-large) { + padding-right: 0; + } + } + + .page__related { + @include breakpoint($large) { + padding-right: 0; + } + + @include breakpoint($x-large) { + padding-right: 0; + } + } +} diff --git a/_sass/minimal-mistakes/_print.scss b/_sass/minimal-mistakes/_print.scss new file mode 100644 index 0000000..b93f1d4 --- /dev/null +++ b/_sass/minimal-mistakes/_print.scss @@ -0,0 +1,252 @@ +/* ========================================================================== + PRINT STYLES + ========================================================================== */ + +@media print { + + [hidden] { + display: none; + } + + * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + html { + margin: 0; + padding: 0; + min-height: auto !important; + font-size: 16px; + } + + body { + margin: 0 auto; + background: #fff !important; + color: #000 !important; + font-size: 1rem; + line-height: 1.5; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: #000; + line-height: 1.2; + margin-bottom: 0.75rem; + margin-top: 0; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1.5rem; + } + + h5 { + font-size: 1.25rem; + } + + h6 { + font-size: 1rem; + } + + a, + a:visited { + color: #000; + text-decoration: underline; + word-wrap: break-word; + } + + table { + border-collapse: collapse; + } + + thead { + display: table-header-group; + } + + table, + th, + td { + border-bottom: 1px solid #000; + } + + td, + th { + padding: 8px 16px; + } + + img { + border: 0; + display: block; + max-width: 100% !important; + vertical-align: middle; + } + + hr { + border: 0; + border-bottom: 2px solid #bbb; + height: 0; + margin: 2.25rem 0; + padding: 0; + } + + dt { + font-weight: bold; + } + + dd { + margin: 0; + margin-bottom: 0.75rem; + } + + abbr[title], + acronym[title] { + border: 0; + text-decoration: none; + } + + table, + blockquote, + pre, + code, + figure, + li, + hr, + ul, + ol, + a, + tr { + page-break-inside: avoid; + } + + h2, + h3, + h4, + p, + a { + orphans: 3; + widows: 3; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + page-break-after: avoid; + page-break-inside: avoid; + } + + h1 + p, + h2 + p, + h3 + p { + page-break-before: avoid; + } + + img { + page-break-after: auto; + page-break-before: auto; + page-break-inside: avoid; + } + + pre { + white-space: pre-wrap !important; + word-wrap: break-word; + } + + a[href^='http://']:after, + a[href^='https://']:after, + a[href^='ftp://']:after { + content: " (" attr(href) ")"; + font-size: 80%; + } + + abbr[title]:after, + acronym[title]:after { + content: " (" attr(title) ")"; + } + + #main { + max-width: 100%; + } + + .page { + margin: 0; + padding: 0; + width: 100%; + } + + .page-break, + .page-break-before { + page-break-before: always; + } + + .page-break-after { + page-break-after: always; + } + + .no-print { + display: none; + } + + a.no-reformat:after { + content: ''; + } + + abbr[title].no-reformat:after, + acronym[title].no-reformat:after { + content: ''; + } + + .page__hero-caption { + color: #000 !important; + background: #fff !important; + opacity: 1; + + a { + color: #000 !important; + } + } + +/* + Hide the following elements on print + ========================================================================== */ + + .masthead, + .toc, + .page__share, + .page__related, + .pagination, + .ads, + .page__footer, + .page__comments-form, + .author__avatar, + .author__content, + .author__urls-wrapper, + .nav__list, + .sidebar, + .adsbygoogle { + display: none !important; + height: 1px !important; + } +} \ No newline at end of file diff --git a/_sass/minimal-mistakes/_reset.scss b/_sass/minimal-mistakes/_reset.scss new file mode 100644 index 0000000..2259fd0 --- /dev/null +++ b/_sass/minimal-mistakes/_reset.scss @@ -0,0 +1,187 @@ +/* ========================================================================== + STYLE RESETS + ========================================================================== */ + +* { box-sizing: border-box; } + +html { + /* apply a natural box layout model to all elements */ + box-sizing: border-box; + background-color: $background-color; + font-size: 16px; + + @include breakpoint($medium) { + font-size: 18px; + } + + @include breakpoint($large) { + font-size: 20px; + } + + @include breakpoint($x-large) { + font-size: 22px; + } + + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* Remove margin */ + +body { margin: 0; } + +/* Selected elements */ + +::-moz-selection { + color: #fff; + background: #000; +} + +::selection { + color: #fff; + background: #000; +} + +/* Display HTML5 elements in IE6-9 and FF3 */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { + display: block; +} + +/* Display block in IE6-9 and FF3 */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* Prevents modern browsers from displaying 'audio' without controls */ + +audio:not([controls]) { + display: none; +} + +a { + color: $link-color; +} + +/* Apply focus state */ + +a:focus { + @extend %tab-focus; +} + +/* Remove outline from links */ + +a:hover, +a:active { + outline: 0; +} + +/* Prevent sub and sup affecting line-height in all browsers */ + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* img border in anchor's and image quality */ + +img { + /* Responsive images (ensure images don't scale beyond their parents) */ + max-width: 100%; /* part 1: Set a maximum relative to the parent*/ + width: auto\9; /* IE7-8 need help adjusting responsive images*/ + height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/ + + vertical-align: middle; + border: 0; + -ms-interpolation-mode: bicubic; +} + +/* Prevent max-width from affecting Google Maps */ + +#map_canvas img, +.google-maps img { + max-width: none; +} + +/* Consistent form font size in all browsers, margin changes, misc */ + +button, +input, +select, +textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; +} + +button, +input { + *overflow: visible; /* inner spacing ie IE6/7*/ + line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/ +} + +button::-moz-focus-inner, +input::-moz-focus-inner { /* inner padding and border oddities in FF3/4*/ + padding: 0; + border: 0; +} + +button, +html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/ + cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/ +} + +label, +select, +button, +input[type="button"], +input[type="reset"], +input[type="submit"], +input[type="radio"], +input[type="checkbox"] { + cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/ +} + +input[type="search"] { /* Appearance in Safari/Chrome*/ + box-sizing: border-box; + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/ +} + +textarea { + overflow: auto; /* remove vertical scrollbar in IE6-9*/ + vertical-align: top; /* readability and alignment cross-browser*/ +} \ No newline at end of file diff --git a/_sass/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/_search.scss new file mode 100644 index 0000000..fa7ee83 --- /dev/null +++ b/_sass/minimal-mistakes/_search.scss @@ -0,0 +1,132 @@ +/* ========================================================================== + SEARCH + ========================================================================== */ + +.layout--search { + .archive__item-teaser { + margin-bottom: 0.25em; + } +} + +.search__toggle { + margin-left: 1rem; + margin-right: 1rem; + height: $nav-toggle-height; + border: 0; + outline: none; + color: $primary-color; + background-color: transparent; + cursor: pointer; + -webkit-transition: 0.2s; + transition: 0.2s; + + &:hover { + color: mix(#000, $primary-color, 25%); + } +} + +.search-icon { + width: 100%; + height: 100%; +} + +.search-content { + display: none; + visibility: hidden; + padding-top: 1em; + padding-bottom: 1em; + + &__inner-wrap { + width: 100%; + margin-left: auto; + margin-right: auto; + padding-left: 1em; + padding-right: 1em; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + + @include breakpoint($x-large) { + max-width: $max-width; + } + + } + + &__form { + background-color: transparent; + } + + .search-input { + display: block; + margin-bottom: 0; + padding: 0; + border: none; + outline: none; + box-shadow: none; + background-color: transparent; + font-size: $type-size-3; + + @include breakpoint($large) { + font-size: $type-size-2; + } + + @include breakpoint($x-large) { + font-size: $type-size-1; + } + } + + &.is--visible { + display: block; + visibility: visible; + + &::after { + content: ""; + display: block; + } + } + + .results__found { + margin-top: 0.5em; + font-size: $type-size-6; + } + + .archive__item { + margin-bottom: 2em; + + @include breakpoint($large) { + width: 75%; + } + + @include breakpoint($x-large) { + width: 50%; + } + } + + .archive__item-title { + margin-top: 0; + } + + .archive__item-excerpt { + margin-bottom: 0; + } +} + +/* Algolia search */ + +.ais-search-box { + max-width: 100% !important; + margin-bottom: 2em; +} + +.archive__item-title .ais-Highlight { + color: $primary-color; + font-style: normal; + text-decoration: underline; +} + +.archive__item-excerpt .ais-Highlight { + color: $primary-color; + font-style: normal; + font-weight: bold; +} diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss new file mode 100644 index 0000000..02b455b --- /dev/null +++ b/_sass/minimal-mistakes/_sidebar.scss @@ -0,0 +1,353 @@ +/* ========================================================================== + SIDEBAR + ========================================================================== */ + +/* + Default + ========================================================================== */ + +.sidebar { + @include clearfix(); + // @include breakpoint(max-width $large) { + // /* fix z-index order of follow links */ + // position: relative; + // z-index: 10; + // -webkit-transform: translate3d(0, 0, 0); + // transform: translate3d(0, 0, 0); + // } + + @include breakpoint($large) { + float: left; + width: calc(#{$right-sidebar-width-narrow} - 1em); + opacity: 0.75; + -webkit-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + + &:hover { + opacity: 1; + } + + &.sticky { + overflow-y: auto; + /* calculate height of nav list + viewport height - nav height - masthead x-padding + */ + max-height: calc(100vh - #{$nav-height} - 2em); + } + } + + @include breakpoint($x-large) { + width: calc(#{$right-sidebar-width} - 1em); + } + + > * { + margin-top: 1em; + margin-bottom: 1em; + } + + h2, + h3, + h4, + h5, + h6 { + margin-bottom: 0; + font-family: $sans-serif-narrow; + } + + p, + li { + font-family: $sans-serif; + font-size: $type-size-6; + line-height: 1.5; + } + + img { + width: 100%; + + &.emoji { + width: 20px; + height: 20px; + } + } +} + +.sidebar__right { + margin-bottom: 1em; + + @include breakpoint($large) { + position: absolute; + top: 0; + right: 0; + width: $right-sidebar-width-narrow; + margin-right: -1 * $right-sidebar-width-narrow; + padding-left: 1em; + z-index: 10; + + &.sticky { + @include clearfix(); + position: -webkit-sticky; + position: sticky; + top: 2em; + float: right; + + .toc { + .toc__menu { + overflow-y: auto; + max-height: calc(100vh - 7em); + } + } + } + } + + @include breakpoint($x-large) { + width: $right-sidebar-width; + margin-right: -1 * $right-sidebar-width; + } +} + +.splash .sidebar__right { + @include breakpoint($large) { + position: relative; + float: right; + margin-right: 0; + } + + @include breakpoint($x-large) { + margin-right: 0; + } +} + +/* + Author profile and links + ========================================================================== */ + +.author__avatar { + display: table-cell; + vertical-align: top; + width: 36px; + height: 36px; + + @include breakpoint($large) { + display: block; + width: auto; + height: auto; + } + + img { + max-width: 110px; + border-radius: 50%; + + @include breakpoint($large) { + padding: 5px; + border: 1px solid $border-color; + } + } +} + +.author__content { + display: table-cell; + vertical-align: top; + padding-left: 15px; + padding-right: 25px; + line-height: 1; + + @include breakpoint($large) { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; + } + + a { + color: inherit; + text-decoration: none; + } +} + +.author__name { + margin: 0; + + @include breakpoint($large) { + margin-top: 10px; + margin-bottom: 10px; + } +} +.sidebar .author__name { + font-family: $sans-serif; + font-size: $type-size-5; +} + +.author__bio { + margin: 0; + + @include breakpoint($large) { + margin-top: 10px; + margin-bottom: 20px; + } +} + +.author__urls-wrapper { + position: relative; + display: table-cell; + vertical-align: middle; + font-family: $sans-serif; + z-index: 20; + cursor: pointer; + + li:last-child { + a { + margin-bottom: 0; + } + } + + .author__urls { + span.label { + padding-left: 5px; + } + } + + @include breakpoint($large) { + display: block; + } + + button { + position: relative; + margin-bottom: 0; + + &:before { + @supports (pointer-events: none) { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + } + + &.open { + &:before { + pointer-events: auto; + } + } + + @include breakpoint($large) { + display: none; + } + } +} + +.author__urls { + display: none; + position: absolute; + right: 0; + margin-top: 15px; + padding: 10px; + list-style-type: none; + border: 1px solid $border-color; + border-radius: $border-radius; + background: $background-color; + box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12); + cursor: default; + + &.is--visible { + display: block; + } + + @include breakpoint($large) { + display: block; + position: relative; + margin: 0; + padding: 0; + border: 0; + background: transparent; + box-shadow: none; + } + + &:before { + display: block; + content: ""; + position: absolute; + top: -11px; + left: calc(50% - 10px); + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: $border-color transparent; + z-index: 0; + + @include breakpoint($large) { + display: none; + } + } + + &:after { + display: block; + content: ""; + position: absolute; + top: -10px; + left: calc(50% - 10px); + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: $background-color transparent; + z-index: 1; + + @include breakpoint($large) { + display: none; + } + } + + ul { + padding: 10px; + list-style-type: none; + } + + li { + white-space: nowrap; + } + + a { + display: block; + margin-bottom: 5px; + padding-right: 5px; + padding-top: 2px; + padding-bottom: 2px; + color: inherit; + font-size: $type-size-5; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +/* + Wide Pages + ========================================================================== */ + +.wide .sidebar__right { + margin-bottom: 1em; + + @include breakpoint($large) { + position: initial; + top: initial; + right: initial; + width: initial; + margin-right: initial; + padding-left: initial; + z-index: initial; + + &.sticky { + float: none; + } + } + + @include breakpoint($x-large) { + width: initial; + margin-right: initial; + } +} + diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss new file mode 100644 index 0000000..7265202 --- /dev/null +++ b/_sass/minimal-mistakes/_syntax.scss @@ -0,0 +1,324 @@ +/* ========================================================================== + Syntax highlighting + ========================================================================== */ + +div.highlighter-rouge, +figure.highlight { + position: relative; + margin-bottom: 1em; + background: $base00; + color: $base05; + font-family: $monospace; + font-size: $type-size-6; + line-height: 1.8; + border-radius: $border-radius; + + > pre, + pre.highlight { + margin: 0; + padding: 1em; + } +} + +.highlight table { + margin-bottom: 0; + font-size: 1em; + border: 0; + + td { + padding: 0; + width: calc(100% - 1em); + border: 0; + + /* line numbers*/ + &.gutter, + &.rouge-gutter { + padding-right: 1em; + width: 1em; + color: $base04; + border-right: 1px solid $base04; + text-align: right; + } + + /* code */ + &.code, + &.rouge-code { + padding-left: 1em; + } + } + + pre { + margin: 0; + } +} + +.highlight pre { + width: 100%; +} + +.highlight .hll { + background-color: $base06; +} +.highlight { + .c { + /* Comment */ + color: $base04; + } + .err { + /* Error */ + color: $base08; + } + .k { + /* Keyword */ + color: $base0e; + } + .l { + /* Literal */ + color: $base09; + } + .n { + /* Name */ + color: $base05; + } + .o { + /* Operator */ + color: $base0c; + } + .p { + /* Punctuation */ + color: $base05; + } + .cm { + /* Comment.Multiline */ + color: $base04; + } + .cp { + /* Comment.Preproc */ + color: $base04; + } + .c1 { + /* Comment.Single */ + color: $base04; + } + .cs { + /* Comment.Special */ + color: $base04; + } + .gd { + /* Generic.Deleted */ + color: $base08; + } + .ge { + /* Generic.Emph */ + font-style: italic; + } + .gh { + /* Generic.Heading */ + color: $base05; + font-weight: bold; + } + .gi { + /* Generic.Inserted */ + color: $base0b; + } + .gp { + /* Generic.Prompt */ + color: $base04; + font-weight: bold; + } + .gs { + /* Generic.Strong */ + font-weight: bold; + } + .gu { + /* Generic.Subheading */ + color: $base0c; + font-weight: bold; + } + .kc { + /* Keyword.Constant */ + color: $base0e; + } + .kd { + /* Keyword.Declaration */ + color: $base0e; + } + .kn { + /* Keyword.Namespace */ + color: $base0c; + } + .kp { + /* Keyword.Pseudo */ + color: $base0e; + } + .kr { + /* Keyword.Reserved */ + color: $base0e; + } + .kt { + /* Keyword.Type */ + color: $base0a; + } + .ld { + /* Literal.Date */ + color: $base0b; + } + .m { + /* Literal.Number */ + color: $base09; + } + .s { + /* Literal.String */ + color: $base0b; + } + .na { + /* Name.Attribute */ + color: $base0d; + } + .nb { + /* Name.Builtin */ + color: $base05; + } + .nc { + /* Name.Class */ + color: $base0a; + } + .no { + /* Name.Constant */ + color: $base08; + } + .nd { + /* Name.Decorator */ + color: $base0c; + } + .ni { + /* Name.Entity */ + color: $base05; + } + .ne { + /* Name.Exception */ + color: $base08; + } + .nf { + /* Name.Function */ + color: $base0d; + } + .nl { + /* Name.Label */ + color: $base05; + } + .nn { + /* Name.Namespace */ + color: $base0a; + } + .nx { + /* Name.Other */ + color: $base0d; + } + .py { + /* Name.Property */ + color: $base05; + } + .nt { + /* Name.Tag */ + color: $base0c; + } + .nv { + /* Name.Variable */ + color: $base08; + } + .ow { + /* Operator.Word */ + color: $base0c; + } + .w { + /* Text.Whitespace */ + color: $base05; + } + .mf { + /* Literal.Number.Float */ + color: $base09; + } + .mh { + /* Literal.Number.Hex */ + color: $base09; + } + .mi { + /* Literal.Number.Integer */ + color: $base09; + } + .mo { + /* Literal.Number.Oct */ + color: $base09; + } + .sb { + /* Literal.String.Backtick */ + color: $base0b; + } + .sc { + /* Literal.String.Char */ + color: $base05; + } + .sd { + /* Literal.String.Doc */ + color: $base04; + } + .s2 { + /* Literal.String.Double */ + color: $base0b; + } + .se { + /* Literal.String.Escape */ + color: $base09; + } + .sh { + /* Literal.String.Heredoc */ + color: $base0b; + } + .si { + /* Literal.String.Interpol */ + color: $base09; + } + .sx { + /* Literal.String.Other */ + color: $base0b; + } + .sr { + /* Literal.String.Regex */ + color: $base0b; + } + .s1 { + /* Literal.String.Single */ + color: $base0b; + } + .ss { + /* Literal.String.Symbol */ + color: $base0b; + } + .bp { + /* Name.Builtin.Pseudo */ + color: $base05; + } + .vc { + /* Name.Variable.Class */ + color: $base08; + } + .vg { + /* Name.Variable.Global */ + color: $base08; + } + .vi { + /* Name.Variable.Instance */ + color: $base08; + } + .il { + /* Literal.Number.Integer.Long */ + color: $base09; + } +} + +.gist { + th, td { + border-bottom: 0; + } +} \ No newline at end of file diff --git a/_sass/minimal-mistakes/_tables.scss b/_sass/minimal-mistakes/_tables.scss new file mode 100644 index 0000000..c270a77 --- /dev/null +++ b/_sass/minimal-mistakes/_tables.scss @@ -0,0 +1,39 @@ +/* ========================================================================== + TABLES + ========================================================================== */ + +table { + display: block; + margin-bottom: 1em; + width: 100%; + font-family: $global-font-family; + font-size: $type-size-6; + border-collapse: collapse; + overflow-x: auto; + + & + table { + margin-top: 1em; + } +} + +thead { + background-color: $border-color; + border-bottom: 2px solid mix(#000, $border-color, 25%); +} + +th { + padding: 0.5em; + font-weight: bold; + text-align: left; +} + +td { + padding: 0.5em; + border-bottom: 1px solid mix(#000, $border-color, 25%); +} + +tr, +td, +th { + vertical-align: middle; +} \ No newline at end of file diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss new file mode 100644 index 0000000..aeb0838 --- /dev/null +++ b/_sass/minimal-mistakes/_utilities.scss @@ -0,0 +1,584 @@ +/* ========================================================================== + UTILITY CLASSES + ========================================================================== */ + +/* + Visibility + ========================================================================== */ + +/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */ + +.hidden, +.is--hidden { + display: none; + visibility: hidden; +} + +/* for preloading images */ + +.load { + display: none; +} + +.transparent { + opacity: 0; +} + +/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */ + +.visually-hidden, +.screen-reader-text, +.screen-reader-text span, +.screen-reader-shortcut { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + height: 1px !important; + width: 1px !important; + border: 0 !important; + overflow: hidden; +} + +body:hover .visually-hidden a, +body:hover .visually-hidden input, +body:hover .visually-hidden button { + display: none !important; +} + +/* screen readers */ + +.screen-reader-text:focus, +.screen-reader-shortcut:focus { + clip: auto !important; + height: auto !important; + width: auto !important; + display: block; + font-size: 1em; + font-weight: bold; + padding: 15px 23px 14px; + background: #fff; + z-index: 100000; + text-decoration: none; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); +} + +/* + Skip links + ========================================================================== */ + +.skip-link { + position: fixed; + z-index: 20; + margin: 0; + font-family: $sans-serif; + white-space: nowrap; +} + +.skip-link li { + height: 0; + width: 0; + list-style: none; +} + +/* + Type + ========================================================================== */ + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-justify { + text-align: justify; +} + +.text-nowrap { + white-space: nowrap; +} + +/* + Task lists + ========================================================================== */ + +.task-list { + padding:0; + + li { + list-style-type: none; + } + + .task-list-item-checkbox { + margin-right: 0.5em; + opacity: 1; + } +} + +.task-list .task-list { + margin-left: 1em; +} + +/* + Alignment + ========================================================================== */ + +/* clearfix */ + +.cf { + clear: both; +} + +.wrapper { + margin-left: auto; + margin-right: auto; + width: 100%; +} + +/* + Images + ========================================================================== */ + +/* image align left */ + +.align-left { + display: block; + margin-left: auto; + margin-right: auto; + + @include breakpoint($small) { + float: left; + margin-right: 1em; + } +} + +/* image align right */ + +.align-right { + display: block; + margin-left: auto; + margin-right: auto; + + @include breakpoint($small) { + float: right; + margin-left: 1em; + } +} + +/* image align center */ + +.align-center { + display: block; + margin-left: auto; + margin-right: auto; +} + +/* file page content container */ + +.full { + @include breakpoint($large) { + margin-right: -1 * span(2.5 of 12) !important; + } +} + +/* + Icons + ========================================================================== */ + +.icon { + display: inline-block; + fill: currentColor; + width: 1em; + height: 1.1em; + line-height: 1; + position: relative; + top: -0.1em; + vertical-align: middle; +} + +/* social icons*/ + +.social-icons { + .fas, + .fab, + .far, + .fal { + color: $text-color; + } + + @each $color, $icons in ( + $behance-color: ".fa-behance, .fa-behance-square", + $bitbucket-color: ".fa-bitbucket", + $dribbble-color: ".fa-dribbble, .fa-dribbble-square", + $facebook-color: ".fa-facebook, .fa-facebook-square, .fa-facebook-f", + $flickr-color: ".fa-flickr", + $foursquare-color: ".fa-foursquare", + $github-color: ".fa-github, .fa-github-alt, .fa-github-square", + $gitlab-color: ".fa-gitlab", + $instagram-color: ".fa-instagram", + $keybase-color: ".fa-keybase", + $lastfm-color: ".fa-lastfm, .fa-lastfm-square", + $linkedin-color: ".fa-linkedin, .fa-linkedin-in", + $mastodon-color: ".fa-mastodon, .fa-mastodon-square", + $pinterest-color: ".fa-pinterest, .fa-pinterest-p, .fa-pinterest-square", + $reddit-color: ".fa-reddit", + $rss-color: ".fa-rss, .fa-rss-square", + $soundcloud-color: ".fa-soundcloud", + $stackoverflow-color: ".fa-stack-exchange, .fa-stack-overflow", + $tumblr-color: ".fa-tumblr, .fa-tumblr-square", + $twitter-color: ".fa-twitter, .fa-twitter-square", + $vimeo-color: ".fa-vimeo, .fa-vimeo-square, .fa-vimeo-v", + $vine-color: ".fa-vine", + $xing-color: ".fa-xing, .fa-xing-square", + $youtube-color: ".fa-youtube", + ) { + #{$icons} { + color: $color; + } + } +} + +/* + Navicons + ========================================================================== */ + +.navicon { + position: relative; + width: $navicon-width; + height: $navicon-height; + background: $primary-color; + margin: auto; + -webkit-transition: 0.3s; + transition: 0.3s; + + &:before, + &:after { + content: ""; + position: absolute; + left: 0; + width: $navicon-width; + height: $navicon-height; + background: $primary-color; + -webkit-transition: 0.3s; + transition: 0.3s; + } + + &:before { + top: (-2 * $navicon-height); + } + + &:after { + bottom: (-2 * $navicon-height); + } +} + +.close .navicon { + /* hide the middle line*/ + background: transparent; + + /* overlay the lines by setting both their top values to 0*/ + &:before, + &:after { + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + top: 0; + width: $navicon-width; + } + + /* rotate the lines to form the x shape*/ + &:before { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + } + &:after { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + } +} + +.greedy-nav__toggle { + &:before { + @supports (pointer-events: none) { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + background-color: $background-color; + -webkit-transition: $global-transition; + transition: $global-transition; + pointer-events: none; + } + } + + &.close { + &:before { + opacity: 0.9; + -webkit-transition: $global-transition; + transition: $global-transition; + pointer-events: auto; + } + } +} + +.greedy-nav__toggle:hover { + .navicon, + .navicon:before, + .navicon:after { + background: mix(#000, $primary-color, 25%); + } + + &.close { + .navicon { + background: transparent; + } + } +} + +/* + Sticky, fixed to top content + ========================================================================== */ + +.sticky { + @include breakpoint($large) { + @include clearfix(); + position: -webkit-sticky; + position: sticky; + top: 2em; + + > * { + display: block; + } + } +} + +/* + Wells + ========================================================================== */ + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: $border-radius; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} + +/* + Modals + ========================================================================== */ + +.show-modal { + overflow: hidden; + position: relative; + + &:before { + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 999; + background-color: rgba(255, 255, 255, 0.85); + } + + .modal { + display: block; + } +} + +.modal { + display: none; + position: fixed; + width: 300px; + top: 50%; + left: 50%; + margin-left: -150px; + margin-top: -150px; + min-height: 0; + z-index: 9999; + background: #fff; + border: 1px solid $border-color; + border-radius: $border-radius; + box-shadow: $box-shadow; + + &__title { + margin: 0; + padding: 0.5em 1em; + } + + &__supporting-text { + padding: 0 1em 0.5em 1em; + } + + &__actions { + padding: 0.5em 1em; + border-top: 1px solid $border-color; + } +} + +/* + Footnotes + ========================================================================== */ + +.footnote { + color: mix(#fff, $gray, 25%); + text-decoration: none; +} + +.footnotes { + color: mix(#fff, $gray, 25%); + + ol, + li, + p { + margin-bottom: 0; + font-size: $type-size-6; + } +} + +a.reversefootnote { + color: $gray; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +/* + Required + ========================================================================== */ + +.required { + color: $danger-color; + font-weight: bold; +} + +/* + Google Custom Search Engine + ========================================================================== */ + +.gsc-control-cse { + table, + tr, + td { + border: 0; /* remove table borders widget */ + } +} + +/* + Responsive Video Embed + ========================================================================== */ + +.responsive-video-container { + position: relative; + margin-bottom: 1em; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + max-width: 100%; + + iframe, + object, + embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// full screen video fixes +:-webkit-full-screen-ancestor { + .masthead, + .page__footer { + position: static; + } +} + +/* + Copy
 block to clipboard
+   ========================================================================== */
+
+// a