Commit 650bd05e authored by Carl Schwan's avatar Carl Schwan 🚴🏻

Add docsy config

parent 33a6f747
Pipeline #26759 canceled with stage
// 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;
}
}
}
\ No newline at end of file
// Blog related styles.
.td-blog {
.td-rss-button {
position: absolute;
top: 5.5rem;
right: 1rem;
z-index: 22;
}
}
\ No newline at end of file
// 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);
}
// Breadcrumb
.breadcrumb {
background: none;
padding-left: 0;
padding-top: 0;
}
\ No newline at end of file
// Buttons
@if $enable-rounded {
.btn {
border-radius: 1rem;
&-lg {
border-radius: 2rem;
}
&-sm {
border-radius: 1rem;
}
}
}
// 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;
padding: $spacer;
> code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
border: 0;
}
}
}
// 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);
}
\ No newline at end of file
//
// 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;
}
}
\ No newline at end of file
// 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;
}
}
//
// 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;
}
}
}
}
\ No newline at end of file
.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;
}
}
}
// 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;
}
.popover.offline-search-result {
// Override bootstrap default style (max-width: $popover-max-width;)
max-width: 90%;
.card {
margin-bottom: $spacer * .5;
.card-header {
font-weight: bold;
}
}
}
//
// 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;
}
}
\ No newline at end of file
//
// 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;