Convert docs to docsy

site/themes/docsy/assets/scss/_alerts.scss

@@ -0,0 +1,20 @@
+// Style alert boxes.
+
+.alert {
+    font-weight: $font-weight-medium;
+    background: $white;
+    color: inherit;
+    border-radius: 0;
+
+    @each $color, $value in $theme-colors {
+        &-#{$color} {
+            & .alert-heading {
+                color: $value;
+            }
+
+            border-style: solid;
+            border-color: $value;
+            border-width: 0 0 0 4px;
+        }
+    }
+}

site/themes/docsy/assets/scss/_blog.scss

@@ -0,0 +1,10 @@
+// Blog related styles.
+
+.td-blog {
+    .td-rss-button {
+        position: absolute;
+        top: 5.5rem;
+        right: 1rem;
+        z-index: 22;
+    }
+}

site/themes/docsy/assets/scss/_boxes.scss

@@ -0,0 +1,127 @@
+// Boxes on the home page and similar.
+.td-box {}
+
+// box-variant creates the main style for a colored section used on the site.
+@mixin box-variant($parent, $color-name, $color-value) {
+    $text-color: color-yiq($color-value);
+    $link-color: mix($blue, $text-color, lightness($color-value));
+    $link-hover-color: rgba($link-color, 0.5) !default;
+
+    #{$parent} {
+        &--#{$color-name} {
+            color: $text-color;
+            background-color: #{$color-value};
+
+            .td-arrow-down {
+                &::before {
+                    left: 50%;
+                    margin-left: -30px;
+                    bottom: -25px;
+                    border: {
+                        style: solid;
+                        width: 25px 30px 0 30px;
+                        color: #{$color-value} transparent transparent transparent;
+                    };
+                    z-index: 3;
+                    position: absolute;
+                    content: "";
+                }
+            }
+        }
+    }
+
+    // Improve contrast for the links in paragraphs.
+    @include link-variant("#{$parent}--#{$color-name} p > a", $link-color, $link-hover-color, false);
+
+    @if $enable-gradients {
+        @include bg-gradient-variant("#{$parent}--1#{$color-name}#{$parent}--gradient", $color-value);
+    }
+}
+
+// Common min-height modifiers used for boxes.
+@mixin td-box-height-modifiers($parent) {
+    #{$parent} {
+        &--height-auto {}
+
+        &--height-min {
+            min-height: 300px;
+        }
+
+        &--height-med {
+            min-height: 400px;
+        }
+
+        &--height-max {
+            min-height: 500px;
+        }
+
+        &--height-full {
+            min-height: 100vh;
+        }
+
+        @include media-breakpoint-up(md) {
+            &--height-min {
+                min-height: 450px;
+            }
+
+            &--height-med {
+                min-height: 500px;
+            }
+
+            &--height-max {
+                min-height: 650px;
+            }
+        }
+    }
+}
+
+@include td-box-height-modifiers(".td-box");
+
+// Styling for section boxes
+.td-box {
+  .row.section {
+       padding-left: 5rem;
+       padding-right: 5rem;
+       flex-direction: column;
+
+       > table {
+        @extend .table-striped;
+
+        @extend .table-responsive;
+
+        @extend .table;
+       }
+   }
+
+  .row {
+       padding-left: 5rem;
+       padding-right: 5rem;
+       flex-direction: row;
+  }
+}
+// Styling for community page link boxes
+
+.td-box.linkbox {
+   padding: 5rem;
+}
+
+// This allows "painting by numbers"
+@for $i from 1 through length($td-box-colors) {
+    $c: nth($td-box-colors, $i);
+    $name: $i - 1;
+
+    @include box-variant(".td-box", $name, $c);
+}
+
+// Same as above with all the theme color names.
+@each $color, $value in $colors {
+    @include box-variant(".td-box", $color, $value);
+}
+
+@each $color, $value in $theme-colors {
+    @include box-variant(".td-box", $color, $value);
+}
+
+@each $color, $value in $grays {
+    @include box-variant(".td-box", $color, $value);
+}

site/themes/docsy/assets/scss/_breadcrumb.scss

@@ -0,0 +1,7 @@
+// Breadcrumb
+
+.breadcrumb {
+	background: none;
+	padding-left: 0;
+	padding-top: 0;
+}

site/themes/docsy/assets/scss/_buttons.scss

@@ -0,0 +1,15 @@
+// Buttons
+
+@if $enable-rounded {
+    .btn {
+        border-radius: 1rem;
+
+        &-lg {
+            border-radius: 2rem;
+        }
+
+        &-sm {
+            border-radius: 1rem;
+        }
+    }
+}

site/themes/docsy/assets/scss/_code.scss

@@ -0,0 +1,54 @@
+// Code formatting.
+
+.td-content {
+	// Highlighted code.
+    .highlight {
+        @extend .card;
+        
+        margin: 2rem 0;
+        padding: 1rem;
+        background-color: $gray-100;
+
+        pre, div {
+            background-color: inherit !important;
+        }
+
+        pre {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    // Inline code
+    p code, li > code, table code {
+        color: inherit;
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        word-break: normal;
+        background-color: rgba($black, 0.05);
+        border-radius: $border-radius;
+
+        br {
+            display: none;
+        }
+    }
+
+
+    // Code blocks
+    pre {
+        word-wrap: normal;
+        background-color: $gray-100;
+        padding: $spacer;
+     
+
+        > code {
+            padding: 0;
+            margin: 0;
+            font-size: 100%;
+            word-break: normal;
+            white-space: pre;
+            border: 0;
+        }
+    }
+}

site/themes/docsy/assets/scss/_colors.scss

@@ -0,0 +1,41 @@
+// Add some local palette classes so you can do -bg-warning -text-warning etc. Even -bg-1 if you want to paint by numbers.
+@mixin palette-variant($color-name, $color-value) {
+    $text-color: color-yiq($color-value);
+    $link-color: mix($blue, $text-color, lightness($color-value));
+   
+    $link-hover-color: rgba($link-color, .5) !default;
+
+    .-bg-#{$color-name} {
+        color: $text-color;
+        background-color: $color-value;
+    }
+
+    // Make links in paragraphs stand out more.
+    @include link-variant(".-bg-#{$color-name} p > a", $link-color, $link-hover-color, false);
+   
+
+    .-text-#{$color-name} {
+        color: $color-value;
+    }
+}
+
+@each $color, $value in $colors {
+    @include palette-variant($color, $value);
+}
+
+@each $color, $value in $theme-colors {
+    @include palette-variant($color, $value);
+}
+
+@each $color, $value in $grays {
+    @include palette-variant($color, $value);
+}
+
+// This allows "painting by numbers", i.e. picking colors by a shortcode Ordianal.
+@for $i from 1 through length($td-box-colors) {
+    $value: nth($td-box-colors, $i);
+    $name: $i - 1;
+    $text-color: color-yiq($value);
+
+    @include palette-variant($name, $value);
+}

site/themes/docsy/assets/scss/_content.scss

@@ -0,0 +1,82 @@
+//
+// Style Markdown content
+//
+
+.td-content {
+    order: 1;
+
+    p, li, td {
+        font-weight: $font-weight-body-text;
+    }
+
+    > h1 {
+        font-weight: $font-weight-bold;
+        margin-bottom: 1rem;
+    }
+
+    > h2 {
+        margin-bottom: 1rem;
+    }
+
+    > h2:not(:first-child) {
+        margin-top: 3rem;
+    }
+
+    > h2 + h3 {
+         margin-top: 1rem;
+    }
+
+    > h3, > h4, > h5, > h6 {
+        margin-bottom: 1rem;
+        margin-top: 2rem;
+    }
+
+    img {
+        @extend .img-fluid;
+    }
+
+    > table {
+        @extend .table-striped;
+
+        @extend .table-responsive;
+
+        @extend .table;
+    }
+
+    > blockquote {
+        padding: 0 0 0 1rem;
+        margin-bottom: $spacer;
+        color: $gray-600;
+        border-left: 6px solid $secondary;
+    }
+
+    > ul li, > ol li {
+        margin-bottom: .25rem;
+    }
+
+    strong {
+        font-weight: $font-weight-bold;
+    }
+
+    > pre, > .highlight, > .lead, > h1, > h2, > ul, > ol, > p, > blockquote, > dl dd, .footnotes, > .alert {
+        @extend .td-max-width-on-larger-screens;
+    }
+
+    .alert:not(:first-child) {
+        margin-top: 2 * $spacer;
+        margin-bottom: 2 * $spacer;
+    }
+
+    .lead {
+        margin-bottom: 1.5rem;
+    }
+}
+
+.td-title {
+    margin-top: 1rem;
+    margin-bottom: .5rem;
+
+    @include media-breakpoint-up(sm) {
+        font-size: 3rem;
+    }
+}

site/themes/docsy/assets/scss/_main-container.scss

@@ -0,0 +1,34 @@
+// The outer page container i.e. common styles for any page.
+.td-outer {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+// The outer page container for the default base template.
+.td-default {
+    main {
+        section:first-of-type {
+            @include media-breakpoint-up(md) {
+                padding-top: 8rem;
+            }
+        }
+
+        section {
+            @extend .td-block-padding;
+        }
+    }
+}
+
+.td-main {
+    flex-grow: 1;
+
+    main {
+        @include media-breakpoint-up(md) {
+            padding-top: 5.5rem;
+        }
+
+
+        padding-bottom: 2rem;
+    }
+}

site/themes/docsy/assets/scss/_nav.scss

@@ -0,0 +1,98 @@
+//
+// Main navbar
+//
+
+.td-navbar-cover {
+    background: $primary;
+
+    @include media-breakpoint-up(md) {
+        background: transparent !important;
+
+        .nav-link {
+            text-shadow: 1px 1px 2px $dark;
+        }
+
+    }
+
+    &.navbar-bg-onscroll .nav-link {
+        text-shadow: none;
+    }
+}
+
+.navbar-bg-onscroll {
+    background: $primary !important;
+    opacity: inherit;
+}
+
+.td-navbar {
+    background: $primary;
+    min-height: 4rem;
+    margin: 0;
+    z-index: 32;
+
+    @include media-breakpoint-up(md) {
+        position: fixed;
+        top: 0;
+        width: 100%;
+    }
+
+
+    .navbar-brand {
+        text-transform: none;
+        text-align: middle;
+
+        .nav-link {
+            display: inline-block;
+            margin-right: -30px;
+        }
+
+        svg {
+            display: inline-block;
+            margin: 0 10px;
+            height: 30px;
+        }
+    }
+
+    .nav-link {
+        text-transform: none;
+        font-weight: $font-weight-bold;
+    }
+
+    .td-search-input {
+        border: none;
+
+        @include placeholder {
+            color: $navbar-dark-color;
+        }
+    }
+
+    .dropdown {
+        min-width: 100px;
+    }
+
+    @include media-breakpoint-down(md) {
+        padding-right: .5rem;
+        padding-left: .75rem;
+
+        .td-navbar-nav-scroll {
+            max-width: 100%;
+            height: 2.5rem;
+            margin-top: .25rem;
+            overflow: hidden;
+            font-size: .875rem;
+
+            .nav-link {
+                padding-right: .25rem;
+                padding-left: 0;
+            }
+
+            .navbar-nav {
+                padding-bottom: 2rem;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+
+            }
+        }
+    }
+}

site/themes/docsy/assets/scss/_pageinfo.scss

@@ -0,0 +1,18 @@
+.pageinfo {
+    font-weight: $font-weight-medium;
+    background: $gray-100;
+    color: inherit;
+    border-radius: 0;
+    margin: 2rem;
+    padding: 1.5rem;
+    padding-bottom: 0.5rem;
+
+    @each $color, $value in $theme-colors {
+        &-#{$color} {
+
+            border-style: solid;
+            border-color: $value;
+        }
+    }
+   
+}

site/themes/docsy/assets/scss/_search.scss

@@ -0,0 +1,16 @@
+// Search
+
+.td-search-input {
+    background: transparent;
+
+    &.form-control:focus {
+        border-color: lighten($primary, 60%);
+        box-shadow: 0 0 0 2px lighten($primary, 30%);
+    }
+
+    @if $enable-rounded {
+        border-radius: 1rem;
+    }
+
+    font-family: "Font Awesome 5 Free", $font-family-base;
+}

site/themes/docsy/assets/scss/_sidebar-toc.scss

@@ -0,0 +1,57 @@
+//
+// Right side toc
+//
+.td-toc {
+    border-left: 1px solid $border-color;
+
+    @supports (position: sticky) {
+        position: sticky;
+        top: 4rem;
+        height: calc(100vh - 10rem);
+        overflow-y: auto;
+    }
+
+    order: 2;
+    padding-top: 0.75rem;
+    padding-bottom: 1.5rem;
+    vertical-align: top;
+
+    a {
+        display: block;
+        font-weight: $font-weight-light;
+        padding-bottom: .25rem;
+    }
+
+    li {
+        list-style: none;
+        display: block;
+    }
+
+    li li {
+        margin-left: 0.5rem;
+    }
+
+    .td-page-meta {
+        a {
+            font-weight: $font-weight-medium;
+        }
+    }
+
+    #TableOfContents {
+        // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
+        > ul > li > ul > li > a {}
+
+        a {
+            color: $gray-600;
+
+            &:hover {
+                color: $blue;
+                text-decoration: none;
+            }
+        }
+    }
+
+    ul {
+        padding-left: 0;
+    }
+}

site/themes/docsy/assets/scss/_sidebar-tree.scss

@@ -0,0 +1,132 @@
+//
+// Left side navigation
+//
+.td-sidebar-nav {
+    padding-right: 0.5rem;
+    margin-right: -15px;
+    margin-left: -15px;
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            max-height: calc(100vh - 10rem);
+            overflow-y: auto;
+        }
+    }
+
+
+    @include media-breakpoint-up(md) {
+        display: block !important;
+    }
+
+
+    &__section {
+        li {
+            list-style: none;
+        }
+
+        ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        @include media-breakpoint-up(md) {
+            & > ul {
+                padding-left: .5rem;
+            }
+        }
+
+
+        padding-left: 0;
+    }
+
+    &__section-title {
+        display: block;
+        font-weight: $font-weight-medium;
+
+        .active {
+            font-weight: $font-weight-bold;
+        }
+
+        a {
+            color: $gray-900;
+        }
+    }
+
+    .td-sidebar-link {
+        display: block;
+        padding-bottom: 0.375rem;
+
+        &__page {
+            color: $gray-700;
+            font-weight: $font-weight-light;
+        }
+    }
+
+    a {
+        &:hover {
+            color: $blue;
+            text-decoration: none;
+        }
+
+        &.active {
+            font-weight: $font-weight-bold;
+        }
+    }
+
+    .dropdown {
+        a {
+            color: $gray-700;
+        }
+
+        .nav-link {
+             padding: 0 0 1rem;
+        }
+    }
+}
+
+.td-sidebar {
+    @include media-breakpoint-up(md) {
+        padding-top: 4rem;
+        background-color: $td-sidebar-bg-color;
+        padding-right: 1rem;
+        border-right: 1px solid $td-sidebar-border-color;
+    }
+
+
+    padding-bottom: 1rem;
+
+    &__toggle {
+        line-height: 1;
+        color: $gray-900;
+        margin: 1rem;
+    }
+
+    &__search {
+        padding: 1rem 15px;
+        margin-right: -15px;
+        margin-left: -15px;
+    }
+
+    &__inner {
+        order: 0;
+
+        @include media-breakpoint-up(md) {
+            @supports (position: sticky) {
+                position: sticky;
+                top: 4rem;
+                z-index: 10;
+                height: calc(100vh - 6rem);
+            }
+        }
+
+
+        @include media-breakpoint-up(xl) {
+            flex: 0 1 320px;
+        }
+
+
+        .td-search-box {
+            width: 100%;
+        }
+    }
+}

site/themes/docsy/assets/scss/_styles_project.scss

@@ -0,0 +1,7 @@
+/*
+
+Nothing defined here. The Hugo project that uses this theme can override Bootstrap by adding a file to:
+
+assets/scss/_styles_project.scss
+
+*/

site/themes/docsy/assets/scss/_variables.scss

@@ -0,0 +1,131 @@
+/*
+
+Bootstrap variables overrides for theme.
+See https://github.com/twbs/bootstrap/pull/23260
+*/
+
+@fa-font-path :        "../webfonts";
+
+// Bootstrap flags. For more, see https://getbootstrap.com/docs/4.0/getting-started/theming/
+$enable-gradients: true;
+$enable-rounded: true;
+$enable-shadows: true;
+
+// Theme flags.
+
+$td-enable-google-fonts: true !default;
+
+// Theme colors
+
+$primary: #30638E !default;
+$primary-light: lighten($primary, 75%) !default;
+$secondary: #FFA630 !default;
+$success: #3772FF !default;
+$info: #C0E0DE !default;
+$warning: #ED6A5A !default;
+$danger: #ED6A5A !default;
+$white: #fff !default;
+$light: #D3F3EE !default;
+
+$dark: #403F4C !default;
+$blue: #72A1E5 !default;
+$orange: #BA5A31 !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ccc !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black: #000 !default;
+
+$code-color: darken($secondary, 20%) !default;
+
+// UI element colors
+
+$border-color: $gray-300 !default;
+$td-sidebar-bg-color: rgba($primary, 0.03) !default;
+$td-sidebar-border-color: $border-color !default;
+
+// Background colors for the sections on home page etc. It is a paint by number system, starting at 0, where the number is taken from the shortcode's ordinal
+// if not provided by the user.
+// These colors are all part of the theme palette, but the mix is fairly random to create variation. This can be overridden by the project if needed.
+$td-box-colors: $dark, $primary, $secondary, $info, $primary-light, $gray-600, $success, $warning, $dark, $danger, $primary, $secondary, $primary-light, $info !default;
+
+$link-color: darken($blue, 15%) !default;
+$link-decoration: none !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: none !default;
+
+// Fonts
+
+$google_font_name: "Open Sans" !default;
+$google_font_family: "Open+Sans:300,300i,400,400i,700,700i" !default;
+$web-font-path: "https://fonts.googleapis.com/css?family=#{$google_font_family}";
+
+$td-fonts-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+@if $td-enable-google-fonts {
+    $td-fonts-serif: prepend($td-fonts-serif, "#{$google_font_name}");
+}
+
+$font-family-sans-serif: $td-fonts-serif !default;
+
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+$font-size-base: 1rem !default;
+
+// Font weights
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-bold: 700 !default;
+
+$font-weight-body-text: $font-weight-normal !default;
+$headings-font-weight: $font-weight-medium !default;
+
+// Heading sizes
+
+$h1-font-size: $font-size-base * 2.25 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.5 !default;
+$h4-font-size: $font-size-base * 1.35 !default;
+$h5-font-size: $font-size-base * 1.15 !default;
+$h6-font-size: $font-size-base !default;
+
+// Display styles
+
+$display1-weight: $font-weight-bold !default;
+$display2-weight: $font-weight-bold !default;
+$display3-weight: $font-weight-bold !default;
+$display4-weight: $font-weight-bold !default;
+$display1-size: 3rem !default;
+$display2-size: 2.5rem !default;
+$display3-size: 2rem !default;
+$display4-size: 1.75rem !default;
+
+// Space
+
+$spacer: 1rem;
+$td-block-space-top-base: 4 * $spacer;
+$td-block-space-bottom-base: 4 * $spacer;
+
+// Pagination
+
+$pagination-color: $gray-600 !default;
+$pagination-border-color: rgba($black, 0.1) !default;
+$pagination-active-border-color: darken($primary, 5%) !default;
+$pagination-disabled-color: $gray-300 !default;
+
+// Navbar
+
+$navbar-dark-color: rgba($white, 0.75) !default;
+$navbar-dark-hover-color: rgba($white, 0.5) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light".
+$yiq-contrasted-threshold: 200 !default;

site/themes/docsy/assets/scss/_variables_project.scss

@@ -0,0 +1,7 @@
+/*
+
+Nothing defined here. The Hugo project that uses this theme can override theme variables by adding a file to:
+
+assets/scss/_variables_project.scss
+
+*/

site/themes/docsy/assets/scss/blocks/_blocks.scss

@@ -0,0 +1,7 @@
+@import "cover";
+
+.td-bg-arrow {
+    &-wrapper {
+        position: relative;
+    }
+}

site/themes/docsy/assets/scss/blocks/_cover.scss

@@ -0,0 +1,19 @@
+// A cover block is a full size cover with a fixed background for smaller screens.
+
+@include td-box-height-modifiers(".td-cover-block");
+
+.td-cover-logo {
+    margin-right: 0.5em;
+}
+
+.td-cover-block {
+    position: relative;
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    background: {
+        repeat: no-repeat;
+        position: 50% 0;
+        size: cover;
+    };
+
+}

site/themes/docsy/assets/scss/main.scss

@@ -0,0 +1,60 @@
+@import "support/functions";
+@import "variables_project";
+@import "variables";
+@import "support/mixins";
+
+@import "../vendor/bootstrap/scss/bootstrap";
+
+@import "../vendor/Font-Awesome/scss/fontawesome.scss";
+@import "../vendor/Font-Awesome/scss/solid.scss";
+@import "../vendor/Font-Awesome/scss/brands.scss";
+
+@import "support/utilities";
+@import "colors";
+@import "boxes";
+@import "blog";
+@import "code";
+@import "nav";
+@import "sidebar-tree";
+@import "sidebar-toc";
+@import "buttons";
+@import "breadcrumb";
+@import "alerts";
+@import "content";
+@import "search";
+@import "main-container";
+@import "blocks/blocks";
+@import "section-index";
+@import "pageinfo";
+
+@if $td-enable-google-fonts {
+    @import url($web-font-path);
+}
+
+footer {
+    min-height: 150px;
+
+    @include media-breakpoint-down(md) {
+         min-height: 200px;
+    }
+}
+
+// Adjust anchors vs the fixed menu.
+@include media-breakpoint-up(md) {
+    .td-offset-anchor:target {
+        display: block;
+        position: relative;
+        top: -4rem;
+        visibility: hidden;
+    }
+
+    h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before {
+        display: block;
+        content: " ";
+        margin-top: -5rem;
+        height: 5rem;
+        visibility: hidden;
+    }
+}
+
+@import "styles_project";

site/themes/docsy/assets/scss/section-index.scss

@@ -0,0 +1,18 @@
+.section-index {
+
+    .entry {
+        padding: .75rem;
+    }
+
+    h5 {
+        margin-bottom: 0;
+
+        a {
+            font-weight: 700;
+        }
+    }
+
+    p {
+        margin-top: 0;
+    }
+}

site/themes/docsy/assets/scss/support/_functions.scss

@@ -0,0 +1,21 @@
+// Common functions.
+
+@function prepend($list, $value) {
+  @return join($value, $list);
+}
+
+
+
+// See https://www.sitepoint.com/using-sass-build-color-palettes/
+@function color-diff($a, $b) {
+  $sat: saturation($a) - saturation($b);
+  $lig: lightness($a) - lightness($b);
+  $fn-sat: if($sat > 0, 'desaturate', 'saturate');
+  $fn-lig: if($lig > 0, 'darken', 'lighten');
+
+  @return (
+    adjust-hue: -(hue($a) - hue($b)),
+    #{$fn-sat}: abs($sat),
+    #{$fn-lig}: abs($lig)
+  );
+}

site/themes/docsy/assets/scss/support/_mixins.scss

@@ -0,0 +1,45 @@
+// Some simple mixins.
+
+@mixin bg-gradient-variant($parent, $color) {
+    #{$parent} {
+        background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+    }
+}
+
+@mixin link-variant($parent, $color, $hover-color, $underline: false) {
+    #{$parent} {
+        color: $color;
+
+        @if $underline {
+            text-decoration: underline;
+        }
+    }
+}
+
+@mixin optional-at-root($sel) {
+    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+        @content;
+    }
+}
+
+// placeholder allows styling of the placeholder used in search input etc.
+@mixin placeholder {
+    @include optional-at-root("::-webkit-input-placeholder") {
+        @content;
+    }
+
+
+    @include optional-at-root(":-moz-placeholder") {
+        @content;
+    }
+
+
+    @include optional-at-root("::-moz-placeholder") {
+        @content;
+    }
+
+
+    @include optional-at-root(":-ms-input-placeholder") {
+        @content;
+    }
+}

site/themes/docsy/assets/scss/support/_utilities.scss

@@ -0,0 +1,82 @@
+// Mixins
+
+@mixin optional-at-root($sel) {
+    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+        @content;
+    }
+}
+
+@mixin placeholder {
+    @include optional-at-root("::-webkit-input-placeholder") {
+        @content;
+    }
+
+
+    @include optional-at-root(":-moz-placeholder") {
+        @content;
+    }
+
+
+    @include optional-at-root("::-moz-placeholder") {
+        @content;
+    }
+
+
+    @include optional-at-root(":-ms-input-placeholder") {
+        @content;
+    }
+}
+
+// Common util classes.
+
+.td-border-top {
+    border: none;
+    border-top: 1px solid #eee;
+}
+
+.td-border-none {
+    border: none;
+}
+
+.td-block-padding {
+    padding-top: $td-block-space-top-base ;
+    padding-bottom: $td-block-space-bottom-base;
+
+    @include media-breakpoint-up(md) {
+        padding-top: $td-block-space-top-base * 1.25;
+        padding-bottom: $td-block-space-bottom-base * 1.25;
+    }
+}
+
+.td-overlay {
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    &--dark::after {
+        background-color: rgba($dark, 0.3);
+    }
+
+    &--light::after {
+        background-color: rgba($light, 0.3);
+    }
+
+    &__inner {
+        position: relative;
+        z-index: 1;
+    }
+}
+
+.td-max-width-on-larger-screens {
+    @include media-breakpoint-up(lg) {
+        max-width: 80%;
+    }
+
+}