From 00a131a5713cb7f1550d6a0db79a368aa0c9e121 Mon Sep 17 00:00:00 2001 From: neveler <55753029+neveler@users.noreply.github.com> Date: Wed, 8 Apr 2026 15:14:58 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E4=BC=98=E5=8C=96=20minimal-mistakes-plus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 16 +- _data/settings.yaml | 12 +- _includes/head/custom.html | 1 - _sass/minimal-mistakes-plus.scss | 35 +- _sass/minimal-mistakes-plus/_archive.scss | 431 ++++++++++++ _sass/minimal-mistakes-plus/_base.scss | 341 +++++++++ _sass/minimal-mistakes-plus/_buttons.scss | 104 +++ _sass/minimal-mistakes-plus/_common.scss | 647 ++++++++++++++++++ _sass/minimal-mistakes-plus/_footer.scss | 83 +++ _sass/minimal-mistakes-plus/_forms.scss | 348 ++++++++++ _sass/minimal-mistakes-plus/_masthead.scss | 91 +++ _sass/minimal-mistakes-plus/_navigation.scss | 574 ++++++++++++++++ _sass/minimal-mistakes-plus/_notices.scss | 115 ++++ _sass/minimal-mistakes-plus/_page.scss | 567 +++++++++++++++ _sass/minimal-mistakes-plus/_reset.scss | 184 +++++ _sass/minimal-mistakes-plus/_search.scss | 129 ++++ _sass/minimal-mistakes-plus/_sidebar.scss | 349 ++++++++++ _sass/minimal-mistakes-plus/_tables.scss | 39 ++ _sass/minimal-mistakes-plus/_utilities.scss | 582 ++++++++++++++++ _sass/minimal-mistakes-plus/skins/_air.scss | 51 ++ _sass/minimal-mistakes-plus/skins/_aqua.scss | 90 +++ .../skins/_catppuccin-frappe.scss | 33 + .../skins/_catppuccin-latte.scss | 5 + .../skins/_catppuccin-macchiato.scss | 33 + .../skins/_catppuccin-mocha.scss | 33 + .../skins/_catppuccin.scss | 157 +++++ .../skins/_contrast.scss | 77 +++ _sass/minimal-mistakes-plus/skins/_dark.scss | 70 ++ _sass/minimal-mistakes-plus/skins/_dirt.scss | 50 ++ _sass/minimal-mistakes-plus/skins/_mint.scss | 44 ++ _sass/minimal-mistakes-plus/skins/_neon.scss | 100 +++ _sass/minimal-mistakes-plus/skins/_plum.scss | 107 +++ .../minimal-mistakes-plus/skins/_sunrise.scss | 86 +++ assets/css/main.scss | 17 +- assets/css/skins/air.scss | 8 - assets/css/skins/aqua.scss | 8 - assets/css/skins/catppuccin_latte.scss | 8 - assets/css/skins/catppuccin_mocha.scss | 8 - assets/css/skins/contrast.scss | 8 - assets/css/skins/dark.scss | 8 - assets/css/skins/default.scss | 2 - assets/css/skins/dirt.scss | 8 - assets/css/skins/mint.scss | 8 - assets/css/skins/neon.scss | 8 - assets/css/skins/plum.scss | 8 - assets/css/skins/sunrise.scss | 8 - assets/js/theme.js | 5 +- settings.yaml | 12 +- 48 files changed, 5593 insertions(+), 115 deletions(-) create mode 100644 _sass/minimal-mistakes-plus/_archive.scss create mode 100644 _sass/minimal-mistakes-plus/_base.scss create mode 100644 _sass/minimal-mistakes-plus/_buttons.scss create mode 100644 _sass/minimal-mistakes-plus/_common.scss create mode 100644 _sass/minimal-mistakes-plus/_footer.scss create mode 100644 _sass/minimal-mistakes-plus/_forms.scss create mode 100644 _sass/minimal-mistakes-plus/_masthead.scss create mode 100644 _sass/minimal-mistakes-plus/_navigation.scss create mode 100644 _sass/minimal-mistakes-plus/_notices.scss create mode 100644 _sass/minimal-mistakes-plus/_page.scss create mode 100644 _sass/minimal-mistakes-plus/_reset.scss create mode 100644 _sass/minimal-mistakes-plus/_search.scss create mode 100644 _sass/minimal-mistakes-plus/_sidebar.scss create mode 100644 _sass/minimal-mistakes-plus/_tables.scss create mode 100644 _sass/minimal-mistakes-plus/_utilities.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_air.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_aqua.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_catppuccin-frappe.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_catppuccin-latte.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_catppuccin-macchiato.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_catppuccin-mocha.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_catppuccin.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_contrast.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_dark.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_dirt.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_mint.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_neon.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_plum.scss create mode 100644 _sass/minimal-mistakes-plus/skins/_sunrise.scss delete mode 100644 assets/css/skins/air.scss delete mode 100644 assets/css/skins/aqua.scss delete mode 100644 assets/css/skins/catppuccin_latte.scss delete mode 100644 assets/css/skins/catppuccin_mocha.scss delete mode 100644 assets/css/skins/contrast.scss delete mode 100644 assets/css/skins/dark.scss delete mode 100644 assets/css/skins/default.scss delete mode 100644 assets/css/skins/dirt.scss delete mode 100644 assets/css/skins/mint.scss delete mode 100644 assets/css/skins/neon.scss delete mode 100644 assets/css/skins/plum.scss delete mode 100644 assets/css/skins/sunrise.scss diff --git a/.gitignore b/.gitignore index f60b43ac..ce6238b6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,8 @@ -_site -.sass-cache -.jekyll-cache -.jekyll-metadata -vendor -Gemfile.lock -.bundle -/.idea/ \ No newline at end of file +.bundle/ +.jekyll-cache/ +.jekyll-metadata/ +.sass-cache/ +/Gemfile.lock +/_site/ +/.idea/ +/vendor/ diff --git a/_data/settings.yaml b/_data/settings.yaml index bd8f1555..2496b218 100644 --- a/_data/settings.yaml +++ b/_data/settings.yaml @@ -19,8 +19,10 @@ appearance_skin_light: - mint - plum - sunrise - - catppuccin_latte - - catppuccin_mocha + - catppuccin-latte + - catppuccin-frappe + - catppuccin-macchiato + - catppuccin-mocha appearance_skin_dark: type: radio default: dark @@ -35,5 +37,7 @@ appearance_skin_dark: - mint - plum - sunrise - - catppuccin_latte - - catppuccin_mocha + - catppuccin-latte + - catppuccin-frappe + - catppuccin-macchiato + - catppuccin-mocha diff --git a/_includes/head/custom.html b/_includes/head/custom.html index 55de7508..9f365f21 100644 --- a/_includes/head/custom.html +++ b/_includes/head/custom.html @@ -1,2 +1 @@ - diff --git a/_sass/minimal-mistakes-plus.scss b/_sass/minimal-mistakes-plus.scss index b675223b..ded51149 100644 --- a/_sass/minimal-mistakes-plus.scss +++ b/_sass/minimal-mistakes-plus.scss @@ -1,4 +1,37 @@ -@import "minimal-mistakes"; +@import "minimal-mistakes/copyright"; + +@import "minimal-mistakes-plus/common"; + +/* 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"; + +/* Core CSS */ +@import "minimal-mistakes-plus/reset"; +@import "minimal-mistakes-plus/base"; +@import "minimal-mistakes-plus/forms"; +@import "minimal-mistakes-plus/tables"; +@import "minimal-mistakes/animations"; + +/* Components */ +@import "minimal-mistakes-plus/buttons"; +@import "minimal-mistakes-plus/notices"; +@import "minimal-mistakes-plus/masthead"; +@import "minimal-mistakes-plus/navigation"; +@import "minimal-mistakes-plus/footer"; +@import "minimal-mistakes-plus/search"; +@import "minimal-mistakes/syntax"; + +/* Utility classes */ +@import "minimal-mistakes-plus/utilities"; + +/* Layout specific */ +@import "minimal-mistakes-plus/page"; +@import "minimal-mistakes-plus/archive"; +@import "minimal-mistakes-plus/sidebar"; +@import "minimal-mistakes/print"; blockquote { margin-inline: 0; diff --git a/_sass/minimal-mistakes-plus/_archive.scss b/_sass/minimal-mistakes-plus/_archive.scss new file mode 100644 index 00000000..cbcfb417 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_archive.scss @@ -0,0 +1,431 @@ +/* ========================================================================== + ARCHIVE + ========================================================================== */ + +.archive { + margin-top: 1em; + margin-bottom: 2em; + + @include breakpoint(map-get($default-config, "large")) { + float: inline-end; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-inline-end: $right-sidebar-width-narrow; + } + + @include breakpoint(map-get($default-config, "x-large")) { + width: calc(100% - #{$right-sidebar-width}); + padding-inline-end: $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; + inset: 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; + inset-inline-end: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-8; + background: #000; + text-align: end; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "large")) { + margin-inline-end: calc(-1 * #{$right-sidebar-width-narrow}); + } + + @include breakpoint(map-get($default-config, "x-large")) { + margin-inline-end: calc(-1 * #{$right-sidebar-width}); + } + } +} + +.grid__item { + margin-bottom: 2em; + + @include breakpoint(map-get($default-config, "small")) { + float: inline-start; + width: span(5 of 10); + + &:nth-child(2n + 1) { + clear: both; + margin-inline-start: 0; + } + + &:nth-child(2n + 2) { + clear: none; + margin-inline-start: gutter(of 10); + } + } + + @include breakpoint(map-get($default-config, "medium")) { + margin-inline: 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-inline-start: gutter(1 of 12); + } + + &:nth-child(4n + 3) { + clear: none; + margin-inline-start: gutter(1 of 12); + } + + &:nth-child(4n + 4) { + clear: none; + margin-inline-start: 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(map-get($default-config, "medium")) { + display: block; + font-size: $type-size-6; + } + } + + .archive__item-teaser { + @include breakpoint(map-get($default-config, "small")) { + max-height: 200px; + } + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "small")) { + float: inline-start; + margin-bottom: 0; + width: span(4 of 12); + + &:nth-child(3n + 1) { + clear: both; + margin-inline-start: 0; + } + + &:nth-child(3n + 2) { + clear: none; + margin-inline-start: gutter(of 12); + } + + &:nth-child(3n + 3) { + clear: none; + margin-inline-start: gutter(of 12); + } + + .feature__item-teaser { + max-height: 200px; + overflow: hidden; + } + } + + .archive__item-body { + padding-inline: gutter(1 of 12); + } + + a.btn::before { + content: ''; + position: absolute; + inset: 0; + } + + &--left, &--right { + position: relative; + margin-inline: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + a.btn::before { + content: ''; + position: absolute; + inset: 0; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + } + + &--left { + float: inline-start; + + .archive__item { + float: inline-start; + } + + @include breakpoint(map-get($default-config, "small")) { + .archive__item-teaser { + float: inline-start; + width: span(5 of 12); + } + + .archive__item-body { + float: inline-end; + width: span(7 of 12); + padding-inline-start: gutter(0.5 of 12); + padding-inline-end: gutter(1 of 12); + } + } + } + + &--right { + float: inline-end; + + .archive__item { + float: inline-end; + } + + @include breakpoint(map-get($default-config, "small")) { + text-align: end; + + .archive__item-teaser { + float: inline-end; + width: span(5 of 12); + } + + .archive__item-body { + float: inline-start; + width: span(7 of 12); + padding-inline-start: gutter(1 of 12); + padding-inline-end: gutter(0.5 of 12); + } + } + } + + &--center { + position: relative; + float: inline-start; + margin-inline: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + .archive__item { + float: inline-start; + width: 100%; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + + a.btn::before { + content: ''; + position: absolute; + inset: 0; + } + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "large")) { + padding-inline-end: 0; + } + + @include breakpoint(map-get($default-config, "x-large")) { + padding-inline-end: 0; + } + } +} + +/* Place inside a single layout */ + +.layout--single { + .feature__wrapper { + display: inline-block; + } +} diff --git a/_sass/minimal-mistakes-plus/_base.scss b/_sass/minimal-mistakes-plus/_base.scss new file mode 100644 index 00000000..30268954 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_base.scss @@ -0,0 +1,341 @@ +/* ========================================================================== + BASE ELEMENTS + ========================================================================== */ + +html { + /* sticky footer fix */ + position: relative; + min-height: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +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-block: 2em; + margin-inline-end: 1em; + padding-inline: 1em; + font-style: italic; + border-inline-start: 0.25em solid $primary-color; + + cite { + font-style: italic; + + &::before { + content: "\2014"; + padding-inline-end: 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(map-get($default-config, "small")) { + width: calc(50% - 0.5em); + } + } + + figcaption { + width: 100%; + } + } + + &.third { + > a, + > img { + @include breakpoint(map-get($default-config, "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-plus/_buttons.scss b/_sass/minimal-mistakes-plus/_buttons.scss new file mode 100644 index 00000000..8d698ea9 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_buttons.scss @@ -0,0 +1,104 @@ +/* ========================================================================== + 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-inline-end: 0.5em; + } + + .icon + .hidden { + margin-inline-start: -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), + /* brands */ + (bluesky, $bluesky-color), + (facebook, $facebook-color), + (linkedin, $linkedin-color), + (mastodon, $mastodon-color), + (twitter, $twitter-color), + (x, $x-color); + + @each $buttoncolor, $color in $buttoncolors { + &--#{$buttoncolor} { + background-color: $color; + color: var(--mm-func-yiq-contrast-button-color-#{$buttoncolor}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold); + @if ($buttoncolor == inverse) { + border: 1px solid $border-color; + } + @if ($buttoncolor == light-outline) { + border: 1px solid #fff; + } + + &:visited { + background-color: $color; + color: var(--mm-func-yiq-contrast-button-color-#{$buttoncolor}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold); + } + + &:hover { + background-color: var(--mm-func-mix-000-color-20); + color: var(--mm-func-yiq-contrast-button-color-#{$buttoncolor}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold); + } + } + } + + /* 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; + } +} diff --git a/_sass/minimal-mistakes-plus/_common.scss b/_sass/minimal-mistakes-plus/_common.scss new file mode 100644 index 00000000..192cc4e3 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_common.scss @@ -0,0 +1,647 @@ +@function yiq-is-light($color, $threshold) { + $red: red($color); + $green: green($color); + $blue: blue($color); + + $yiq: (($red * 299) + ($green * 587) + ($blue*114)) / 1000; + + @return if($yiq >= $threshold, true, false); +} + +@function yiq-contrast-color($color, $dark, $light, $threshold) { + @return if(yiq-is-light($color, $threshold), $dark, $light); +} + +@mixin clearfix { + clear: both; + + &::after { + clear: both; + content: ""; + display: table; + } +} + +$configs: () !default; + +$default-config: () !default; + +$default-config: map-merge(( + "doc-font-size": 16px, + "paragraph-indent": false, + "indent-var": 1.3em, + "helvetica": (Helvetica, "Helvetica Neue", Arial, sans-serif), + "georgia": (Georgia, serif), + "times": (Times, serif), + "bodoni": ("Bodoni MT", serif), + "calisto": ("Calisto MT", serif), + "garamond": (Garamond, serif), + "monospace-code": (ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace), + "handwritten": ('Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive), + "default-sans-serif": (-apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif), + "default-serif": (Georgia, Times, serif), + "default-monospace": (Monaco, Consolas, "Lucida Console", monospace), + "emoji-native": ('Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'), + "type-size-1": 2.441em, + "type-size-2": 1.953em, + "type-size-3": 1.563em, + "type-size-4": 1.25em, + "type-size-5": 1em, + "type-size-6": 0.75em, + "type-size-7": 0.6875em, + "type-size-8": 0.625em, + "h-size-1": 1.563em, + "h-size-2": 1.25em, + "h-size-3": 1.125em, + "h-size-4": 1.0625em, + "h-size-5": 1.03125em, + "h-size-6": 1em, + "gray": #7a8288, + "background-color": #fff, + "code-background-color": #fafafa, + "primary-color": #6f777d, + "success-color": #3fa63f, + "warning-color": #d67f05, + "danger-color": #ee5f5b, + "info-color": #3b9cba, + "yiq-contrasted-light-default": #fff, + "yiq-contrasted-threshold": 175, + // "yiq-debug": false, + "behance-color": #1769ff, + "bitbucket-color": #205081, + "bluesky-color": #1083fe, + "discord-color": #5865f2, + "dribbble-color": #ea4c89, + "facebook-color": #3b5998, + "flickr-color": #ff0084, + "foursquare-color": #0072b1, + "github-color": #171516, + "gitlab-color": #e24329, + "instagram-color": #cd3376, + "keybase-color": #ef7639, + "lastfm-color": #d51007, + "linkedin-color": #007bb6, + "mastodon-color": #2b90d9, + "pinterest-color": #cb2027, + "reddit-color": #ff4500, + "rss-color": #fa9b39, + "signal-color": #3a76f0, + "soundcloud-color": #ff3300, + "stackoverflow-color": #fe7a15, + "telegram-color": #2aabee, + "tumblr-color": #32506d, + "twitter-color": #55acee, + "x-color": #0f1419, + "vimeo-color": #1ab7ea, + "vine-color": #00bf8f, + "whatsapp-color": #25d366, + "xing-color": #006567, + "youtube-color": #bb0000, + "notice-background-mix": 80%, + "code-notice-background-mix": 90%, + "base00": #263238, + "base01": #2e3c43, + "base02": #314549, + "base03": #546e7a, + "base04": #b2ccd6, + "base05": #eeffff, + "base06": #eeffff, + "base07": #ffffff, + "base08": #f07178, + "base09": #f78c6c, + "base0a": #ffcb6b, + "base0b": #c3e88d, + "base0c": #89ddff, + "base0d": #82aaff, + "base0e": #c792ea, + "base0f": #ff5370, + "small": 600px, + "medium": 768px, + "medium-wide": 900px, + "large": 1024px, + "x-large": 1280px, + "right-sidebar-width-narrow": 200px, + "right-sidebar-width": 300px, + "right-sidebar-width-wide": 400px, + "border-radius": 4px, + "box-shadow": (0 1px 1px rgba(0, 0, 0, 0.125)), + "nav-height": 2em, + "nav-toggle-height": 2rem, + "navicon-width": 1.5rem, + "navicon-height": 0.25rem, + "global-transition": (all 0.2s ease-in-out), + "intro-transition": (intro 0.3s both), +), $default-config); + +$configs: map-merge($configs, ("default": $default-config)); + +@each $name, $config in $configs { + $config: map-merge($default-config, $config); + + $doc-font-size: map-get($config, "doc-font-size"); + @if $doc-font-size { + @if not map-get($config, "doc-font-size-medium") { + $config: map-merge($config, ("doc-font-size-medium": $doc-font-size * 1.125)); + } + @if not map-get($config, "doc-font-size-medium") { + $config: map-merge($config, ("doc-font-size-medium": $doc-font-size * 1.125)); + } + @if not map-get($config, "doc-font-size-large") { + $config: map-merge($config, ("doc-font-size-large": $doc-font-size * 1.25)); + } + @if not map-get($config, "doc-font-size-x-large") { + $config: map-merge($config, ("doc-font-size-x-large": $doc-font-size * 1.375)); + } + } + + $default-serif: map-get($config, "default-serif"); + @if $default-serif { + @if not map-get($config, "serif") { + $config: map-merge($config, ("serif": $default-serif)); + } + } + + $default-sans-serif: map-get($config, "default-sans-serif"); + @if $default-sans-serif { + @if not map-get($config, "sans-serif") { + $config: map-merge($config, ("sans-serif": $default-sans-serif)); + } + } + + $sans-serif: map-get($config, "sans-serif"); + @if $sans-serif { + @if not map-get($config, "sans-serif-narrow") { + $config: map-merge($config, ("sans-serif-narrow": $sans-serif)); + } + @if not map-get($config, "global-font-family") { + $config: map-merge($config, ("global-font-family": $sans-serif)); + } + @if not map-get($config, "header-font-family") { + $config: map-merge($config, ("header-font-family": $sans-serif)); + } + } + + $default-monospace: map-get($config, "default-monospace"); + @if $default-monospace { + @if not map-get($config, "monospace") { + $config: map-merge($config, ("monospace": $default-monospace)); + } + } + + $serif: map-get($config, "serif"); + @if $serif { + @if not map-get($config, "caption-font-family") { + $config: map-merge($config, ("caption-font-family": $serif)); + } + } + + $gray: map-get($config, "gray"); + @if $gray { + @if not map-get($config, "dark-gray") { + $config: map-merge($config, ("dark-gray": mix(#000, $gray, 50%))); + } + @if not map-get($config, "darker-gray") { + $config: map-merge($config, ("darker-gray": mix(#000, $gray, 60%))); + } + @if not map-get($config, "light-gray") { + $config: map-merge($config, ("light-gray": mix(#fff, $gray, 50%))); + } + @if not map-get($config, "lighter-gray") { + $config: map-merge($config, ("lighter-gray": mix(#fff, $gray, 90%))); + } + } + + $light-gray: map-get($config, "light-gray"); + @if $light-gray { + @if not map-get($config, "code-background-color-dark") { + $config: map-merge($config, ("code-background-color-dark": $light-gray)); + } + } + + $dark-gray: map-get($config, "dark-gray"); + @if $dark-gray { + @if not map-get($config, "text-color") { + $config: map-merge($config, ("text-color": $dark-gray)); + } + @if not map-get($config, "yiq-contrasted-dark-default") { + $config: map-merge($config, ("yiq-contrasted-dark-default": $dark-gray)); + } + } + + $text-color: map-get($config, "text-color"); + @if $text-color { + @if not map-get($config, "muted-text-color") { + $config: map-merge($config, ("muted-text-color": mix(#fff, $text-color, 20%))); + } + @if not map-get($config, "func-rgba-text-color-6") { + $config: map-merge($config, ("func-rgba-text-color-6": rgba($text-color, 0.06))); + } + } + + $lighter-gray: map-get($config, "lighter-gray"); + @if $lighter-gray { + @if not map-get($config, "border-color") { + $config: map-merge($config, ("border-color": $lighter-gray)); + } + @if not map-get($config, "form-background-color") { + $config: map-merge($config, ("form-background-color": $lighter-gray)); + } + @if not map-get($config, "footer-background-color") { + $config: map-merge($config, ("footer-background-color": $lighter-gray)); + } + } + + $primary-color: map-get($config, "primary-color"); + @if $primary-color { + @if not map-get($config, "focus-color") { + $config: map-merge($config, ("focus-color": $primary-color)); + } + @if not map-get($config, "active-color") { + $config: map-merge($config, ("active-color": mix(#fff, $primary-color, 80%))); + } + @if not map-get($config, "masthead-link-color") { + $config: map-merge($config, ("masthead-link-color": $primary-color)); + } + @if not map-get($config, "masthead-link-color-hover") { + $config: map-merge($config, ("masthead-link-color-hover": mix(#000, $primary-color, 25%))); + } + @if not map-get($config, "navicon-link-color-hover") { + $config: map-merge($config, ("navicon-link-color-hover": mix(#fff, $primary-color, 75%))); + } + @if not map-get($config, "func-rgba-primary-color-70") { + $config: map-merge($config, ("func-rgba-primary-color-70": rgba($primary-color, 0.7))); + } + } + + $info-color: map-get($config, "info-color"); + @if $info-color { + @if not map-get($config, "link-color") { + $config: map-merge($config, ("link-color": mix(#000, $info-color, 20%))); + } + } + + $link-color: map-get($config, "link-color"); + @if $link-color { + @if not map-get($config, "link-color-hover") { + $config: map-merge($config, ("link-color-hover": mix(#000, $link-color, 25%))); + } + @if not map-get($config, "link-color-visited") { + $config: map-merge($config, ("link-color-visited": mix(#fff, $link-color, 15%))); + } + } + + $x-large: map-get($config, "x-large"); + @if $x-large { + @if not map-get($config, "max-width") { + $config: map-merge($config, ("max-width": $x-large)); + } + } + + $border-color: map-get($config, "border-color"); + @if $border-color { + @if not map-get($config, "func-mix-000-border-color-25") { + $config: map-merge($config, ("func-mix-000-border-color-25": mix(#000, $border-color, 25%))); + } + } + + $primary-color: map-get($config, "primary-color"); + @if $primary-color { + @if not map-get($config, "func-mix-000-primary-color-25") { + $config: map-merge($config, ("func-mix-000-primary-color-25": mix(#000, $primary-color, 25%))); + } + } + + $gray: map-get($config, "gray"); + @if $gray { + @if not map-get($config, "func-mix-fff-gray-25") { + $config: map-merge($config, ("func-mix-fff-gray-25": mix(#fff, $gray, 25%))); + } + } + + $background-color: map-get($config, "background-color"); + $notice-background-mix: map-get($config, "notice-background-mix"); + $code-notice-background-mix: map-get($config, "code-notice-background-mix"); + + $notice-color-keys: ( + "light-gray", + "primary-color", + "info-color", + "warning-color", + "success-color", + "danger-color" + ); + @each $notice-color-key in $notice-color-keys { + $notice-color: map-get($config, $notice-color-key); + @if $notice-color { + @if $background-color and $notice-background-mix { + @if not map-get($config, "func-mix-background-color-#{$notice-color-key}-notice-background-mix") { + $config: map-merge($config, ("func-mix-background-color-#{$notice-color-key}-notice-background-mix": mix($background-color, $notice-color, $notice-background-mix))); + } + } + @if $background-color and $code-notice-background-mix { + @if not map-get($config, "func-mix-background-color-#{$notice-color-key}-code-notice-background-mix") { + $config: map-merge($config, ("func-mix-background-color-#{$notice-color-key}-code-notice-background-mix": mix($background-color, $notice-color, $code-notice-background-mix))); + } + } + @if not map-get($config, "func-rgba-#{$notice-color-key}-25") { + $config: map-merge($config, ("func-rgba-#{$notice-color-key}-25": rgba($notice-color, 0.25))); + } + @if not map-get($config, "func-mix-000-#{$notice-color-key}-10") { + $config: map-merge($config, ("func-mix-000-#{$notice-color-key}-10": mix(#000, $notice-color, 10%))); + } + @if not map-get($config, "func-mix-000-#{$notice-color-key}-50") { + $config: map-merge($config, ("func-mix-000-#{$notice-color-key}-50": mix(#000, $notice-color, 50%))); + } + } + } + + $yiq-contrasted-dark-default: map-get($config, "yiq-contrasted-dark-default"); + $yiq-contrasted-light-default: map-get($config, "yiq-contrasted-light-default"); + $yiq-contrasted-threshold: map-get($config, "yiq-contrasted-threshold"); + + @if $yiq-contrasted-dark-default and $yiq-contrasted-light-default and $yiq-contrasted-threshold { + $button-colors: ( + "primary": map-get($config, "primary-color"), + "inverse": #fff, + "light-outline": transparent, + "success": map-get($config, "success-color"), + "warning": map-get($config, "warning-color"), + "danger": map-get($config, "danger-color"), + "info": map-get($config, "info-color"), + "bluesky": map-get($config, "bluesky-color"), + "facebook": map-get($config, "facebook-color"), + "linkedin": map-get($config, "linkedin-color"), + "mastodon": map-get($config, "mastodon-color"), + "twitter": map-get($config, "twitter-color"), + "x": map-get($config, "x-color"), + ); + + @each $button-color-key, $button-color in $button-colors { + @if $button-color { + @if not map-get($config, "func-yiq-contrast-button-color-#{$button-color-key}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold") { + $config: map-merge($config, ("func-yiq-contrast-button-color-#{$button-color-key}-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold": yiq-contrast-color($button-color, $yiq-contrasted-dark-default, $yiq-contrasted-light-default, $yiq-contrasted-threshold))); + } + } + } + + $muted-text-color: map-get($config, "muted-text-color"); + @if $muted-text-color { + @if not map-get($config, "func-yiq-contrast-muted-text-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold") { + $config: map-merge($config, ("func-yiq-contrast-muted-text-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold": yiq-contrast-color($muted-text-color, $yiq-contrasted-dark-default, $yiq-contrasted-light-default, $yiq-contrasted-threshold))); + } + @if not map-get($config, "func-rgba-muted-text-color-50") { + $config: map-merge($config, ("func-rgba-muted-text-color-50": rgba($muted-text-color, 0.5))); + } + } + + $active-color: map-get($config, "active-color"); + @if $active-color { + @if not map-get($config, "func-yiq-contrast-active-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold") { + $config: map-merge($config, ("func-yiq-contrast-active-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold": yiq-contrast-color($active-color, $yiq-contrasted-dark-default, $yiq-contrasted-light-default, $yiq-contrasted-threshold))); + } + } + } + + $configs: map-merge($configs, (#{$name}: $config)) +} + +$default-config: map-get($configs, "default"); + +@each $name, $config in $configs { + $selector: if($name == "default", ":root", "[data-skin=#{$name}]:root"); + #{$selector} { + @each $key, $value in $config { + @if str-slice($key, 1, 8) != "private-" { + @if $name == "default" or map-get($default-config, $key) != map-get($config, $key) { + --mm-#{$key}: #{$value}; + } + } + } + } +} + +/* ========================================================================== + Variables + ========================================================================== */ + +/* + Typography + ========================================================================== */ + +$doc-font-size: var(--mm-doc-font-size); +$doc-font-size-medium: var(--mm-doc-font-size-medium); +$doc-font-size-large: var(--mm-doc-font-size-large); +$doc-font-size-x-large: var(--mm-doc-font-size-x-large); + +/* paragraph indention */ +$paragraph-indent: var(--mm-paragraph-indent); +$indent-var: var(--mm-indent-var); + +/* Modern font stack */ +/* https://github.com/system-fonts/modern-font-stacks */ + +/* Sans serif - modern font stack */ +$system-ui: system-ui, sans-serif; +$humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; +$geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; +$classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif; +$neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; +$industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; +$rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif; + +/* sans serif typefaces - defined in Minimal Mistakes */ +$helvetica: var(--mm-helvetica); + +/* Serif - modern font stack */ +$transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; +$old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;; +$monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace; +$slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif; +$antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif; +$didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif; + +/* serif typefaces - defined in Minimal Mistakes */ +$georgia: var(--mm-georgia); +$times: var(--mm-times); +$bodoni: var(--mm-bodoni); +$calisto: var(--mm-calisto); +$garamond: var(--mm-garamond); + +/* Monospace - modern font stack */ +$monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + +/* Handwritten - modern font stack */ +$handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; + +/* Defaults used in Minimal mistakes */ +$default-sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; +$default-serif: Georgia, Times, serif; +$default-monospace: Monaco, Consolas, "Lucida Console", monospace; + +/* Emoji native from modern font stack - add to the end of the font-face for native emojis */ +$emoji-native: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + +/* system typefaces */ +$serif: var(--mm-serif); +$sans-serif: var(--mm-sans-serif); +$sans-serif-narrow: var(--mm-sans-serif-narrow); +$monospace: var(--mm-monospace); + +$global-font-family: var(--mm-global-font-family); +$header-font-family: var(--mm-header-font-family); +$caption-font-family: var(--mm-caption-font-family); + +/* type scale */ +$type-size-1: var(--mm-type-size-1); +$type-size-2: var(--mm-type-size-2); +$type-size-3: var(--mm-type-size-3); +$type-size-4: var(--mm-type-size-4); +$type-size-5: var(--mm-type-size-5); +$type-size-6: var(--mm-type-size-6); +$type-size-7: var(--mm-type-size-7); +$type-size-8: var(--mm-type-size-8); + +/* headline scale */ +$h-size-1: var(--mm-h-size-1); +$h-size-2: var(--mm-h-size-2); +$h-size-3: var(--mm-h-size-3); +$h-size-4: var(--mm-h-size-4); +$h-size-5: var(--mm-h-size-5); +$h-size-6: var(--mm-h-size-6); + +/* + Colors + ========================================================================== */ + +$gray: var(--mm-gray); +$dark-gray: var(--mm-dark-gray); +$darker-gray: var(--mm-darker-gray); +$light-gray: var(--mm-light-gray); +$lighter-gray: var(--mm-lighter-gray); + +$background-color: var(--mm-background-color); +$code-background-color: var(--mm-code-background-color); +$code-background-color-dark: var(--mm-code-background-color-dark); +$text-color: var(--mm-text-color); +$muted-text-color: var(--mm-muted-text-color); +$border-color: var(--mm-border-color); +$form-background-color: var(--mm-form-background-color); +$footer-background-color: var(--mm-footer-background-color); + +$primary-color: var(--mm-primary-color); +$success-color: var(--mm-success-color); +$warning-color: var(--mm-warning-color); +$danger-color: var(--mm-danger-color); +$info-color: var(--mm-info-color); +$focus-color: var(--mm-focus-color); +$active-color: var(--mm-active-color); + +/* YIQ color contrast */ +$yiq-contrasted-dark-default: var(--mm-yiq-contrasted-dark-default); +$yiq-contrasted-light-default: var(--mm-yiq-contrasted-light-default); +$yiq-contrasted-threshold: var(--mm-yiq-contrasted-threshold); +// $yiq-debug: var(--mm-yiq-debug); + +/* brands */ +$behance-color: var(--mm-behance-color); +$bitbucket-color: var(--mm-bitbucket-color); +$bluesky-color: var(--mm-bluesky-color); +$discord-color: var(--mm-discord-color); +$dribbble-color: var(--mm-dribbble-color); +$facebook-color: var(--mm-facebook-color); +$flickr-color: var(--mm-flickr-color); +$foursquare-color: var(--mm-foursquare-color); +$github-color: var(--mm-github-color); +$gitlab-color: var(--mm-gitlab-color); +$instagram-color: var(--mm-instagram-color); +$keybase-color: var(--mm-keybase-color); +$lastfm-color: var(--mm-lastfm-color); +$linkedin-color: var(--mm-linkedin-color); +$mastodon-color: var(--mm-mastodon-color); +$pinterest-color: var(--mm-pinterest-color); +$reddit-color: var(--mm-reddit-color); +$rss-color: var(--mm-rss-color); +$signal-color: var(--mm-signal-color); +$soundcloud-color: var(--mm-soundcloud-color); +$stackoverflow-color: var(--mm-stackoverflow-color); +$telegram-color: var(--mm-telegram-color); +$tumblr-color: var(--mm-tumblr-color); +$twitter-color: var(--mm-twitter-color); +$x-color: var(--mm-x-color); +$vimeo-color: var(--mm-vimeo-color); +$vine-color: var(--mm-vine-color); +$whatsapp-color: var(--mm-whatsapp-color); +$xing-color: var(--mm-xing-color); +$youtube-color: var(--mm-youtube-color); + +$black-color: #000000; + +/* links */ +$link-color: var(--mm-link-color); +$link-color-hover: var(--mm-link-color-hover); +$link-color-visited: var(--mm-link-color-visited); +$masthead-link-color: var(--mm-masthead-link-color); +$masthead-link-color-hover: var(--mm-masthead-link-color-hover); +$navicon-link-color-hover: var(--mm-navicon-link-color-hover); + +/* notices */ +$notice-background-mix: var(--mm-notice-background-mix); +$code-notice-background-mix: var(--mm-code-notice-background-mix); + +/* syntax highlighting (base16) */ +$base00: var(--mm-base00); +$base01: var(--mm-base01); +$base02: var(--mm-base02); +$base03: var(--mm-base03); +$base04: var(--mm-base04); +$base05: var(--mm-base05); +$base06: var(--mm-base06); +$base07: var(--mm-base07); +$base08: var(--mm-base08); +$base09: var(--mm-base09); +$base0a: var(--mm-base0a); +$base0b: var(--mm-base0b); +$base0c: var(--mm-base0c); +$base0d: var(--mm-base0d); +$base0e: var(--mm-base0e); +$base0f: var(--mm-base0f); + +/* + Breakpoints + ========================================================================== */ + +$small: var(--mm-small); +$medium: var(--mm-medium); +$medium-wide: var(--mm-medium-wide); +$large: var(--mm-large); +$x-large: var(--mm-x-large); +$max-width: var(--mm-max-width); + +/* + Grid + ========================================================================== */ + +$right-sidebar-width-narrow: var(--mm-right-sidebar-width-narrow); +$right-sidebar-width: var(--mm-right-sidebar-width); +$right-sidebar-width-wide: var(--mm-right-sidebar-width-wide); + +/* + Other + ========================================================================== */ + +$border-radius: var(--mm-border-radius); +$box-shadow: var(--mm-box-shadow); +$nav-height: var(--mm-nav-height); +$nav-toggle-height: var(--mm-nav-toggle-height); +$navicon-width: var(--mm-navicon-width); +$navicon-height: var(--mm-navicon-height); +$global-transition: var(--mm-global-transition); +$intro-transition: var(--mm-intro-transition); + +%tab-focus { + /* Default*/ + outline: thin dotted $focus-color; + /* Webkit*/ + outline: 5px auto $focus-color; + outline-offset: -2px; +} diff --git a/_sass/minimal-mistakes-plus/_footer.scss b/_sass/minimal-mistakes-plus/_footer.scss new file mode 100644 index 00000000..741612f9 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_footer.scss @@ -0,0 +1,83 @@ +/* ========================================================================== + FOOTER + ========================================================================== */ + +.page__footer { + @include clearfix; + float: inline-start; + margin-inline: 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-inline: auto; + margin-top: 2em; + max-width: 100%; + padding: 0 1em 2em; + + @include breakpoint(map-get($default-config, "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-inline-end: 5px; + } + + a { + padding-inline-end: 10px; + font-weight: bold; + } + + .social-icons { + a { + white-space: nowrap; + } + } +} diff --git a/_sass/minimal-mistakes-plus/_forms.scss b/_sass/minimal-mistakes-plus/_forms.scss new file mode 100644 index 00000000..356694c8 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_forms.scss @@ -0,0 +1,348 @@ +/* ========================================================================== + Forms + ========================================================================== */ + +form { + margin-bottom: 5px; + 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-inline-start: -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; +} + +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; + 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; +} + +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; +} + +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-inline-start: 18px; + font-weight: normal; +} + +.radio input[type="radio"], +.checkbox input[type="checkbox"] { + float: inline-start; + margin-inline-start: -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-inline-start: 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 var(--mm-func-rgba-text-color-6), + 0 0 5px var(--mm-func-rgba-primary-color-70); +} + +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-inline-start: 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-inline-start: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { + float: inline-start; + margin-inline-start: 0; + margin-inline-end: 3px; +} + +/* + .form-search + ========================================================================== */ + +.form-search input, +.form-search textarea, +.form-search select { + display: inline-block; + margin-bottom: 0; +} + +.form-search .search-query { + padding-inline: 14px; + margin-bottom: 0; + border-radius: 14px; +} + +.form-search label { + display: inline-block; +} + +.form-search .radio, +.form-search .checkbox, +.form-inline .radio { + padding-inline-start: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.form-search .radio input[type="radio"], +.form-search .checkbox input[type="checkbox"] { + float: inline-start; + margin-inline-start: 0; + margin-inline-end: 3px; +} + +/* + .form--loading + ========================================================================== */ + +.form--loading::before { + content: ""; +} + +.form--loading .form__spinner { + display: block; +} + +.form::before { + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.7); + z-index: 10; +} + +.form__spinner { + display: none; + position: absolute; + top: 50%; + inset-inline-start: 50%; + z-index: 11; +} diff --git a/_sass/minimal-mistakes-plus/_masthead.scss b/_sass/minimal-mistakes-plus/_masthead.scss new file mode 100644 index 00000000..824fcf8a --- /dev/null +++ b/_sass/minimal-mistakes-plus/_masthead.scss @@ -0,0 +1,91 @@ +/* ========================================================================== + 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-inline: 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(map-get($default-config, "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: inline-start; + margin-inline: 0; + width: 100%; + clear: both; + + .site-nav { + margin-inline-start: 0; + + @include breakpoint(map-get($default-config, "small")) { + float: inline-end; + } + } + + 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-inline-end: 2em; + font-weight: 700; + } +} diff --git a/_sass/minimal-mistakes-plus/_navigation.scss b/_sass/minimal-mistakes-plus/_navigation.scss new file mode 100644 index 00000000..d70e10c0 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_navigation.scss @@ -0,0 +1,574 @@ +/* ========================================================================== + NAVIGATION + ========================================================================== */ + +/* + Breadcrumb navigation links + ========================================================================== */ + +.breadcrumbs { + @include clearfix; + margin: 0 auto; + max-width: 100%; + padding-inline: 1em; + font-family: $sans-serif; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + + @include breakpoint(map-get($default-config, "x-large")) { + max-width: $x-large; + } + + ol { + padding: 0; + list-style: none; + font-size: $type-size-6; + + // TODO + @include breakpoint(map-get($default-config, "large")) { + float: inline-end; + width: calc(100% - #{$right-sidebar-width-narrow}); + } + + @include breakpoint(map-get($default-config, "x-large")) { + width: calc(100% - #{$right-sidebar-width}); + } + } + + li { + display: inline; + } + + .current { + font-weight: bold; + } +} + +/* + Post pagination navigation links + ========================================================================== */ + +.pagination { + @include clearfix(); + float: inline-start; + 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: inline-start; + margin-inline-start: -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 var(--mm-func-mix-000-border-color-25); + border-radius: 0; + + &:hover { + color: $link-color-hover; + } + + &.current, + &.current.disabled { + color: #fff; + background: $primary-color; + } + + &.disabled { + color: var(--mm-func-rgba-muted-text-color-50); + pointer-events: none; + cursor: not-allowed; + } + } + + &:first-child { + margin-inline-start: 0; + + a { + border-start-start-radius: $border-radius; + border-end-start-radius: $border-radius; + } + } + + &:last-child { + a { + border-start-end-radius: $border-radius; + border-end-end-radius: $border-radius; + } + } + } + + /* next/previous buttons */ + &--pager { + display: block; + padding: 1em 2em; + float: inline-start; + 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 var(--mm-func-mix-000-border-color-25); + border-radius: $border-radius; + + &:hover { + background-color: $muted-text-color; + color: var(--mm-func-yiq-contrast-muted-text-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold); + } + + &:first-child { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + + &:last-child { + margin-inline-start: -1px; + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + &.disabled { + color: var(--mm-func-rgba-muted-text-color-50); + 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-inline-start: 0; + margin-inline-end: 0.5rem; + } + + &.site-title { + margin-inline-start: 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; + inset-inline-start: 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%; + inset-inline-end: 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; + inset-inline-end: 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; + inset-inline-end: 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 map-get($default-config, "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; + inset-inline-end: 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(map-get($default-config, "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-inline-start: -0.5em; + padding-inline: 0.5em; + font-weight: bold; + } + + @include breakpoint(max-width map-get($default-config, "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 map-get($default-config, "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-start-start-radius: $border-radius; + border-start-end-radius: $border-radius; + } + + // Scrollspy marks toc items as .active when they are in focus + .active a { + background-color: $active-color; + color: var(--mm-func-yiq-contrast-active-color-yiq-contrasted-dark-default-yiq-contrasted-light-default-yiq-contrasted-threshold); + } +} + +.toc__menu { + margin: 0; + padding: 0; + width: 100%; + list-style: none; + font-size: $type-size-6; + + @include breakpoint(map-get($default-config, "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-inline-start: 1.25rem; + font-weight: normal; + } + + li ul li ul > li a { + padding-inline-start: 1.75rem; + } + + li ul li ul li ul > li a { + padding-inline-start: 2.25rem; + } + + li ul li ul li ul li ul > li a { + padding-inline-start: 2.75rem; + } + + li ul li ul li ul li ul li ul > li a { + padding-inline-start: 3.25rem; + } +} diff --git a/_sass/minimal-mistakes-plus/_notices.scss b/_sass/minimal-mistakes-plus/_notices.scss new file mode 100644 index 00000000..07c0d8ba --- /dev/null +++ b/_sass/minimal-mistakes-plus/_notices.scss @@ -0,0 +1,115 @@ +/* ========================================================================== + NOTICE TEXT BLOCKS + ========================================================================== */ + +/** + * Default Kramdown usage (no indents!): + *
+ * #### Headline for the Notice + * Text for the notice + *
+ */ + +@mixin notice($notice-color-key) { + 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: var(--mm-func-mix-background-color-#{$notice-color-key}-notice-background-mix); + border-radius: $border-radius; + box-shadow: 0 1px 1px var(--mm-func-rgba-#{$notice-color-key}-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: var(--mm-func-mix-000-#{$notice-color-key}-10); + + &:hover { + color: var(--mm-func-mix-000-#{$notice-color-key}-50); + } + } + + @at-root #{selector-unify(&, "blockquote")} { + border-inline-start-color: var(--mm-func-mix-000-#{$notice-color-key}-10); + } + + code { + background-color: var(--mm-func-mix-background-color-#{$notice-color-key}-code-notice-background-mix); + } + + pre code { + background-color: inherit; + } + + ul { + &:last-child { + margin-bottom: 0; /* override*/ + } + } +} + +/* Default notice */ + +.notice, +.markdown-alert { + @include notice("light-gray"); +} + +/* Primary notice */ + +.notice--primary, +.markdown-alert-important { + @include notice("primary-color"); +} + +/* Info notice */ + +.notice--info, +.markdown-alert-note { + @include notice("info-color"); +} + +/* Warning notice */ + +.notice--warning, +.markdown-alert-warning { + @include notice("warning-color"); +} + +/* Success notice */ + +.notice--success, +.markdown-alert-tip { + @include notice("success-color"); +} + +/* Danger notice */ + +.notice--danger, +.markdown-alert-caution { + @include notice("danger-color"); +} diff --git a/_sass/minimal-mistakes-plus/_page.scss b/_sass/minimal-mistakes-plus/_page.scss new file mode 100644 index 00000000..66ab9422 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_page.scss @@ -0,0 +1,567 @@ +/* ========================================================================== + SINGLE PAGE/POST + ========================================================================== */ + +#main { + @include clearfix; + margin-inline: auto; + padding-inline: 1em; + -webkit-animation: $intro-transition; + animation: $intro-transition; + max-width: 100%; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "large")) { + float: inline-end; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-inline-end: $right-sidebar-width-narrow; + } + + @include breakpoint(map-get($default-config, "x-large")) { + width: calc(100% - #{$right-sidebar-width}); + padding-inline-end: $right-sidebar-width; + } + + .page__inner-wrap { + float: inline-start; + margin-top: 1em; + margin-inline: 0; + width: 100%; + clear: both; + + .page__content, + .page__meta, + .page__share { + position: relative; + float: inline-start; + margin-inline: 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; + inset-inline-start: 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-inline-start: 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-inline-start: 1.25rem; + } + + /* vertical alignment for first content */ + :first-child, + aside + :nth-child(2) { + margin-top: 0em; + } +} + +.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-inline: 1em; + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "small")) { + font-size: $type-size-1; + } + } + } +} + +.page__hero-image { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; +} + +.page__hero-caption { + position: absolute; + bottom: 0; + inset-inline-end: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-7; + background: #000; + text-align: end; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; + + @include breakpoint(map-get($default-config, "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 map-get($default-config, "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-inline: 0.5em; +} + +/* + Page taxonomy + ========================================================================== */ + +.page__taxonomy { + .sep { + display: none; + } + + strong { + margin-inline-end: 10px; + } +} + +.page__taxonomy-item { + display: inline-block; + margin-inline-end: 5px; + margin-bottom: 8px; + padding: 5px 10px; + text-decoration: none; + border: 1px solid var(--mm-func-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(map-get($default-config, "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: end; + text-decoration: none; +} + +/* + Comments + ========================================================================== */ + +.page__comments { + float: inline-start; + margin-inline: 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: inline-start; + width: 60px; + height: 60px; + + @include breakpoint(map-get($default-config, "large")) { + width: 100px; + height: 100px; + } +} + +.comment__avatar { + width: 40px; + height: 40px; + border-radius: 50%; + + @include breakpoint(map-get($default-config, "large")) { + width: 80px; + height: 80px; + padding: 5px; + border: 1px solid $border-color; + } +} + +.comment__content-wrapper { + float: inline-end; + width: calc(100% - 60px); + + @include breakpoint(map-get($default-config, "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: inline-start; + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint(map-get($default-config, "large")) { + float: inline-end; + width: calc(100% - #{$right-sidebar-width-narrow}); + } + + @include breakpoint(map-get($default-config, "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, .page__related { + @include breakpoint(map-get($default-config, "large")) { + padding-inline-end: 0; + } + + @include breakpoint(map-get($default-config, "x-large")) { + padding-inline-end: 0; + } + } +} diff --git a/_sass/minimal-mistakes-plus/_reset.scss b/_sass/minimal-mistakes-plus/_reset.scss new file mode 100644 index 00000000..316afefb --- /dev/null +++ b/_sass/minimal-mistakes-plus/_reset.scss @@ -0,0 +1,184 @@ +/* ========================================================================== + 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: $doc-font-size; + + @include breakpoint(map-get($default-config, "medium")) { + font-size: $doc-font-size-medium; + } + + @include breakpoint(map-get($default-config, "large")) { + font-size: $doc-font-size-large; + } + + @include breakpoint(map-get($default-config, "x-large")) { + font-size: $doc-font-size-x-large; + } + + -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; +} + +/* 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 { + 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*/ +} diff --git a/_sass/minimal-mistakes-plus/_search.scss b/_sass/minimal-mistakes-plus/_search.scss new file mode 100644 index 00000000..b70b4797 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_search.scss @@ -0,0 +1,129 @@ +/* ========================================================================== + SEARCH + ========================================================================== */ + +.layout--search { + .archive__item-teaser { + margin-bottom: 0.25em; + } +} + +.search__toggle { + margin-inline: 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: var(--mm-func-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-inline: auto; + padding-inline: 1em; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "large")) { + font-size: $type-size-2; + } + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "large")) { + width: 75%; + } + + @include breakpoint(map-get($default-config, "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-plus/_sidebar.scss b/_sass/minimal-mistakes-plus/_sidebar.scss new file mode 100644 index 00000000..b91e4cd3 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_sidebar.scss @@ -0,0 +1,349 @@ +/* ========================================================================== + 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(map-get($default-config, "large")) { + float: inline-start; + 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(map-get($default-config, "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(map-get($default-config, "large")) { + position: absolute; + top: 0; + inset-inline-end: 0; + width: $right-sidebar-width-narrow; + margin-inline-end: calc(-1 * #{$right-sidebar-width-narrow}); + padding-inline-start: 1em; + z-index: 10; + + &.sticky { + @include clearfix(); + position: -webkit-sticky; + position: sticky; + top: 2em; + float: inline-end; + + .toc { + .toc__menu { + overflow-y: auto; + max-height: calc(100vh - 7em); + } + } + } + } + + @include breakpoint(map-get($default-config, "x-large")) { + width: $right-sidebar-width; + margin-inline-end: calc(-1 * #{$right-sidebar-width}); + } +} + +.splash .sidebar__right { + @include breakpoint(map-get($default-config, "large")) { + position: relative; + float: inline-end; + margin-inline-end: 0; + } + + @include breakpoint(map-get($default-config, "x-large")) { + margin-inline-end: 0; + } +} + +/* + Author profile and links + ========================================================================== */ + +.author__avatar { + display: table-cell; + vertical-align: top; + width: 36px; + height: 36px; + + @include breakpoint(map-get($default-config, "large")) { + display: block; + width: auto; + height: auto; + } + + img { + max-width: 110px; + border-radius: 50%; + + @include breakpoint(map-get($default-config, "large")) { + padding: 5px; + border: 1px solid $border-color; + } + } +} + +.author__content { + display: table-cell; + vertical-align: top; + padding-inline: 15px 25px; + line-height: 1; + + @include breakpoint(map-get($default-config, "large")) { + display: block; + width: 100%; + padding-inline: 0; + } + + a { + color: inherit; + text-decoration: none; + } +} + +.author__name { + margin: 0; + + @include breakpoint(map-get($default-config, "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(map-get($default-config, "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-inline-start: 5px; + } + } + + @include breakpoint(map-get($default-config, "large")) { + display: block; + } + + button { + position: relative; + margin-bottom: 0; + + &:before { + @supports (pointer-events: none) { + content: ''; + position: fixed; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + } + + &.open { + &:before { + pointer-events: auto; + } + } + + @include breakpoint(map-get($default-config, "large")) { + display: none; + } + } +} + +.author__urls { + display: none; + position: absolute; + inset-inline-end: 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(map-get($default-config, "large")) { + display: block; + position: relative; + margin: 0; + padding: 0; + border: 0; + background: transparent; + box-shadow: none; + } + + &::before { + display: block; + content: ""; + position: absolute; + top: -11px; + inset-inline-start: calc(50% - 10px); + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: $border-color transparent; + z-index: 0; + + @include breakpoint(map-get($default-config, "large")) { + display: none; + } + } + + &:after { + display: block; + content: ""; + position: absolute; + top: -10px; + inset-inline-start: calc(50% - 10px); + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: $background-color transparent; + z-index: 1; + + @include breakpoint(map-get($default-config, "large")) { + display: none; + } + } + + ul { + padding: 10px; + list-style-type: none; + } + + li { + white-space: nowrap; + } + + a { + display: block; + margin-bottom: 5px; + padding-block: 2px; + padding-inline-end: 5px; + color: inherit; + font-size: $type-size-5; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +/* + Wide Pages + ========================================================================== */ + +.wide .sidebar__right { + margin-bottom: 1em; + + @include breakpoint(map-get($default-config, "large")) { + position: initial; + top: initial; + inset-inline-end: initial; + width: initial; + margin-inline-end: initial; + padding-inline-start: initial; + z-index: initial; + + &.sticky { + float: none; + } + } + + @include breakpoint(map-get($default-config, "x-large")) { + width: initial; + margin-inline-end: initial; + } +} diff --git a/_sass/minimal-mistakes-plus/_tables.scss b/_sass/minimal-mistakes-plus/_tables.scss new file mode 100644 index 00000000..bf3c5461 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_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 var(--mm-func-mix-000-border-color-25); +} + +th { + padding: 0.5em; + font-weight: bold; + text-align: start; +} + +td { + padding: 0.5em; + border-bottom: 1px solid var(--mm-func-mix-000-border-color-25); +} + +tr, +td, +th { + vertical-align: middle; +} diff --git a/_sass/minimal-mistakes-plus/_utilities.scss b/_sass/minimal-mistakes-plus/_utilities.scss new file mode 100644 index 00000000..dd3c56fa --- /dev/null +++ b/_sass/minimal-mistakes-plus/_utilities.scss @@ -0,0 +1,582 @@ +/* ========================================================================== + 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, +.sr-only, +.sr-only-focusable:not(:focus) { + position: absolute !important; + clip: rect(0, 0, 0, 0); + height: 1px !important; + width: 1px !important; + padding: 0 !important; + border: 0 !important; + margin: -1px; + overflow: hidden; + white-space: nowrap; +} + +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-alignments: left, right, start, end, center, justify; +@each $alignment in $text-alignments { + .text-#{$alignment} { + text-align: $alignment; + } +} + +.text-nowrap { + white-space: nowrap; +} + +/* + Task lists + ========================================================================== */ + +.task-list { + padding: 0; + + li { + list-style-type: none; + } + + .task-list-item-checkbox { + margin-inline-end: 0.5em; + opacity: 1; + } +} + +.task-list .task-list { + margin-inline-start: 1em; +} + +/* + Alignment + ========================================================================== */ + +/* clearfix */ + +.cf { + clear: both; +} + +.wrapper { + margin-inline: auto; + width: 100%; +} + +/* + Images + ========================================================================== */ + +/* image align left */ + +.align-left { + display: block; + margin-inline: auto; + + @include breakpoint(map-get($default-config, "small")) { + float: left; + margin-right: 1em; + } +} + +/* image align right */ + +.align-right { + display: block; + margin-inline: auto; + + @include breakpoint(map-get($default-config, "small")) { + float: right; + margin-left: 1em; + } +} + +/* image align center */ + +.align-center { + display: block; + margin-inline: auto; +} + +/* file page content container */ + +.full { + @include breakpoint(map-get($default-config, "large")) { + margin-inline-end: -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, .fa-square-behance", + $bitbucket-color: ".fa-bitbucket", + $bluesky-color: ".fa-bluesky, .fa-square-bluesky", + $discord-color: ".fa-discord", + $dribbble-color: ".fa-dribbble, .fa-dribbble-square, .fa-square-dribbble", + $facebook-color: ".fa-facebook, .fa-facebook-square, .fa-square-facebook, .fa-facebook-f", + $flickr-color: ".fa-flickr", + $foursquare-color: ".fa-foursquare", + $github-color: ".fa-github, .fa-github-alt, .fa-github-square, .fa-square-github", + $gitlab-color: ".fa-gitlab", + $instagram-color: ".fa-instagram, .fa-square-instagram", + $keybase-color: ".fa-keybase", + $lastfm-color: ".fa-lastfm, .fa-lastfm-square, .fa-square-lastfm", + $linkedin-color: ".fa-linkedin, .fa-linkedin-in", + $mastodon-color: ".fa-mastodon", + $pinterest-color: ".fa-pinterest, .fa-pinterest-p, .fa-pinterest-square, .fa-square-pinterest", + $reddit-color: ".fa-reddit", + $rss-color: ".fa-rss, .fa-rss-square, .fa-square-rss", + $signal-color: ".fa-signal-messenger", + $soundcloud-color: ".fa-soundcloud", + $stackoverflow-color: ".fa-stack-exchange, .fa-stack-overflow", + $telegram-color: ".fa-telegram", + $tumblr-color: ".fa-tumblr, .fa-tumblr-square, .fa-square-tumblr", + $twitter-color: ".fa-twitter, .fa-twitter-square", + $x-color: ".fa-x-twitter, .fa-square-x-twitter", + $vimeo-color: ".fa-vimeo, .fa-vimeo-square, .fa-square-vimeo, .fa-vimeo-v", + $vine-color: ".fa-vine", + $whatsapp-color: ".fa-whatsapp", + $xing-color: ".fa-xing, .fa-xing-square, .fa-square-xing", + $youtube-color: ".fa-youtube", + + // Avoid "Duplicate key #000000 in map" error + $black-color: ".fa-threads, .fa-square-threads, .fa-tiktok", + ) { + #{$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; + inset-inline-start: 0; + width: $navicon-width; + height: $navicon-height; + background: $primary-color; + -webkit-transition: 0.3s; + transition: 0.3s; + } + + &:before { + top: calc(-2 * #{$navicon-height}); + } + + &:after { + bottom: calc(-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; + inset-inline-start: 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: var(--mm-func-mix-000-primary-color-25); + } + + &.close { + .navicon { + background: transparent; + } + } +} + +/* + Sticky, fixed to top content + ========================================================================== */ + +.sticky { + @include breakpoint(map-get($default-config, "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; + inset-inline-start: 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%; + inset-inline-start: 50%; + margin-inline-start: -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: var(--mm-func-mix-fff-gray-25); + text-decoration: none; +} + +.footnotes { + color: var(--mm-func-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; + inset-inline-start: 0; + width: 100%; + height: 100%; + } +} + +// full screen video fixes +:-webkit-full-screen-ancestor { + .masthead, + .page__footer { + position: static; + } +} + +/* + Copy 
 block to clipboard
+   ========================================================================== */
+
+// a