diff options
Diffstat (limited to 'themes/docsy/assets/scss')
24 files changed, 1108 insertions, 0 deletions
diff --git a/themes/docsy/assets/scss/_alerts.scss b/themes/docsy/assets/scss/_alerts.scss new file mode 100644 index 0000000..5ce5cc2 --- /dev/null +++ b/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; + } + } +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_blog.scss b/themes/docsy/assets/scss/_blog.scss new file mode 100644 index 0000000..b26aec7 --- /dev/null +++ b/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; + } +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_boxes.scss b/themes/docsy/assets/scss/_boxes.scss new file mode 100644 index 0000000..7fa99fc --- /dev/null +++ b/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); +} diff --git a/themes/docsy/assets/scss/_breadcrumb.scss b/themes/docsy/assets/scss/_breadcrumb.scss new file mode 100644 index 0000000..e7237a3 --- /dev/null +++ b/themes/docsy/assets/scss/_breadcrumb.scss @@ -0,0 +1,7 @@ +// Breadcrumb + +.breadcrumb { + background: none; + padding-left: 0; + padding-top: 0; +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_buttons.scss b/themes/docsy/assets/scss/_buttons.scss new file mode 100644 index 0000000..4ec1321 --- /dev/null +++ b/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; + } + } +} diff --git a/themes/docsy/assets/scss/_code.scss b/themes/docsy/assets/scss/_code.scss new file mode 100644 index 0000000..fa29743 --- /dev/null +++ b/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; + } + } +} diff --git a/themes/docsy/assets/scss/_colors.scss b/themes/docsy/assets/scss/_colors.scss new file mode 100644 index 0000000..3f34aa8 --- /dev/null +++ b/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); +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_content.scss b/themes/docsy/assets/scss/_content.scss new file mode 100644 index 0000000..3e72e00 --- /dev/null +++ b/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; + } +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_main-container.scss b/themes/docsy/assets/scss/_main-container.scss new file mode 100644 index 0000000..2dc54ea --- /dev/null +++ b/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; + } +} diff --git a/themes/docsy/assets/scss/_nav.scss b/themes/docsy/assets/scss/_nav.scss new file mode 100644 index 0000000..6113f80 --- /dev/null +++ b/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; + + } + } + } +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_pageinfo.scss b/themes/docsy/assets/scss/_pageinfo.scss new file mode 100644 index 0000000..1144db9 --- /dev/null +++ b/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; + } + } + +} diff --git a/themes/docsy/assets/scss/_search.scss b/themes/docsy/assets/scss/_search.scss new file mode 100644 index 0000000..ef257d4 --- /dev/null +++ b/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; +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_sidebar-toc.scss b/themes/docsy/assets/scss/_sidebar-toc.scss new file mode 100644 index 0000000..96e7abb --- /dev/null +++ b/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; + } +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_sidebar-tree.scss b/themes/docsy/assets/scss/_sidebar-tree.scss new file mode 100644 index 0000000..3eef1c4 --- /dev/null +++ b/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%; + } + } +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/_styles_project.scss b/themes/docsy/assets/scss/_styles_project.scss new file mode 100644 index 0000000..ab68a88 --- /dev/null +++ b/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 + +*/ diff --git a/themes/docsy/assets/scss/_variables.scss b/themes/docsy/assets/scss/_variables.scss new file mode 100644 index 0000000..e133638 --- /dev/null +++ b/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; + +$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; diff --git a/themes/docsy/assets/scss/_variables_project.scss b/themes/docsy/assets/scss/_variables_project.scss new file mode 100644 index 0000000..387082d --- /dev/null +++ b/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 + +*/ diff --git a/themes/docsy/assets/scss/blocks/_blocks.scss b/themes/docsy/assets/scss/blocks/_blocks.scss new file mode 100644 index 0000000..1e37467 --- /dev/null +++ b/themes/docsy/assets/scss/blocks/_blocks.scss @@ -0,0 +1,7 @@ +@import "cover"; + +.td-bg-arrow { + &-wrapper { + position: relative; + } +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/blocks/_cover.scss b/themes/docsy/assets/scss/blocks/_cover.scss new file mode 100644 index 0000000..f1f0422 --- /dev/null +++ b/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; + }; + +} diff --git a/themes/docsy/assets/scss/main.scss b/themes/docsy/assets/scss/main.scss new file mode 100644 index 0000000..7d4995b --- /dev/null +++ b/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";
\ No newline at end of file diff --git a/themes/docsy/assets/scss/section-index.scss b/themes/docsy/assets/scss/section-index.scss new file mode 100644 index 0000000..e00b004 --- /dev/null +++ b/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; + } +} diff --git a/themes/docsy/assets/scss/support/_functions.scss b/themes/docsy/assets/scss/support/_functions.scss new file mode 100644 index 0000000..2b641f0 --- /dev/null +++ b/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) + ); +}
\ No newline at end of file diff --git a/themes/docsy/assets/scss/support/_mixins.scss b/themes/docsy/assets/scss/support/_mixins.scss new file mode 100644 index 0000000..24e2cd1 --- /dev/null +++ b/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; + } +} diff --git a/themes/docsy/assets/scss/support/_utilities.scss b/themes/docsy/assets/scss/support/_utilities.scss new file mode 100644 index 0000000..ce9bc2e --- /dev/null +++ b/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%; + } + +}
\ No newline at end of file |