forked from thomaspark/bootswatch
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ported components from Bootstrap v3 and custom website components exc…
…ept posts/news
- Loading branch information
Showing
30 changed files
with
12,209 additions
and
7,906 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,263 @@ | ||
| // Prodrivers 5.3.2 | ||
| // Bootswatch | ||
|
|
||
| @use "sass:map"; | ||
| @use "sass:math"; | ||
|
|
||
| // == Upstream theme | ||
|
|
||
| @import "../cosmo/variables.scss"; | ||
| @import "../cosmo/_variables.scss"; | ||
|
|
||
| // == Bootstrap imports used afterwards | ||
|
|
||
| // scss-docs-start grid-breakpoints | ||
| $grid-breakpoints: ( | ||
| xs: 0, | ||
| sm: 576px, | ||
| md: 768px, | ||
| lg: 992px, | ||
| xl: 1200px, | ||
| xxl: 1400px | ||
| ) !default; | ||
| // scss-docs-end grid-breakpoints | ||
|
|
||
| // scss-docs-start container-max-widths | ||
| $container-max-widths: ( | ||
| sm: 540px, | ||
| md: 720px, | ||
| lg: 960px, | ||
| xl: 1140px, | ||
| xxl: 1320px | ||
| ) !default; | ||
| // scss-docs-end container-max-widths | ||
|
|
||
| // scss-docs-start font-variables | ||
| // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins | ||
| // $font-size-base affects the font size of the body text | ||
| $font-size-root: null !default; | ||
| $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` | ||
| $font-size-sm: $font-size-base * .875 !default; | ||
| $font-size-lg: $font-size-base * 1.25 !default; | ||
|
|
||
| $font-weight-lighter: lighter !default; | ||
| $font-weight-light: 300 !default; | ||
| $font-weight-normal: 400 !default; | ||
| $font-weight-medium: 500 !default; | ||
| $font-weight-semibold: 600 !default; | ||
| $font-weight-bold: 700 !default; | ||
| $font-weight-bolder: bolder !default; | ||
|
|
||
| $font-weight-base: $font-weight-normal !default; | ||
|
|
||
| $line-height-base: 1.5 !default; | ||
| $line-height-sm: 1.25 !default; | ||
| $line-height-lg: 2 !default; | ||
|
|
||
| $h1-font-size: $font-size-base * 2.5 !default; | ||
| $h2-font-size: $font-size-base * 2 !default; | ||
| $h3-font-size: $font-size-base * 1.75 !default; | ||
| $h4-font-size: $font-size-base * 1.5 !default; | ||
| $h5-font-size: $font-size-base * 1.25 !default; | ||
| $h6-font-size: $font-size-base !default; | ||
| // scss-docs-end font-variables | ||
| // scss-docs-end font-variables | ||
|
|
||
| // scss-docs-start spacer-variables-maps | ||
| $spacer: 1rem !default; | ||
| $spacers: ( | ||
| 0: 0, | ||
| 1: $spacer * .25, | ||
| 2: $spacer * .5, | ||
| 3: $spacer, | ||
| 4: $spacer * 1.5, | ||
| 5: $spacer * 3, | ||
| ) !default; | ||
| // scss-docs-end spacer-variables-maps | ||
|
|
||
| $grid-gutter-width: 1.5rem !default; | ||
|
|
||
| $body-color: $gray-900 !default; | ||
| $body-color-dark: $gray-300 !default; | ||
| $body-bg: $white !default; | ||
|
|
||
| // == Start of theme | ||
|
|
||
| $theme: "prodrivers"; | ||
| $prefix: "pdrv-"; | ||
|
|
||
| // == Colors | ||
|
|
||
| // Monet colors based on Prodrivers' main color #00175a | ||
| $primary: #4a5a9d; | ||
| $secondary: #5b5d6f; | ||
|
|
||
| // == Fonts | ||
|
|
||
| // stylelint-disable-next-line value-keyword-case | ||
| $font-family-sans-serif: "Open Sans", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| $font-family-monospace: Menlo, Monaco, "Fira Code", "Source Code Pro", Consolas, "Courier New", monospace; | ||
| $headings-font-family: "Red Hat Display", "Open Sans", "Source Sans Pro", "Segoe UI", Calibri, Candara, Arial, sans-serif; | ||
| $headings-font-weight: 500; | ||
|
|
||
| // == Site - Navbar | ||
|
|
||
| $navbar-height: $font-size-base * 5.33; | ||
| $navbar-breakpoint: map.get($grid-breakpoints, md); | ||
| $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8); | ||
| $navbar-dark-hover-color: rgba($white, .75); | ||
|
|
||
| // == Site - Footer | ||
|
|
||
| $footer-color: $gray-500; | ||
| $footer-bg: $gray-700; | ||
| $footer-font-size: $font-size-base; //14px | ||
| $footer-padding-x: 0; | ||
| $footer-padding-y: $footer-font-size * 1.6; //20px | ||
|
|
||
| $footer-links-margin-bottom: 2em; | ||
| $footer-links-margin-top-sm: 2em; | ||
| $footer-links-color: $white; | ||
| $footer-links-color-hover: $gray-800; | ||
| $footer-links-bg-hover: $body-bg; | ||
|
|
||
| $footer-breakpoint: map.get($grid-breakpoints, md); | ||
|
|
||
| $footer-socialicon-size: $font-size-base * 2; //32px | ||
| $footer-socialicon-line-height: $footer-socialicon-size; //32px | ||
| $footer-socialicon-font-size: $footer-socialicon-size * 1.6; //20px | ||
| $footer-socialicon-color: $white; | ||
| $footer-socialicon-bg: $gray-600; | ||
| $footer-socialicon-opacity: 0.8; | ||
| $footer-socialicon-opacity-hover: 1; | ||
| $footer-socialicon-border-radius: 50%; | ||
| $footer-socialicon-link-margin-x: math.div($footer-socialicon-size, 8); //4px | ||
| $footer-socialicon-link-margin-y: math.div($footer-socialicon-size, 8); //4px | ||
| $footer-socialicon-inner-margin-x: $footer-socialicon-size * 5.33; //6px | ||
| $footer-socialicon-inner-margin-y: $footer-socialicon-size * 5.33; //6px | ||
|
|
||
| // == Page - Header | ||
|
|
||
| $page-header-light-color: $gray-700; | ||
| $page-header-light-bg: $gray-200; //#EEEFF5; | ||
| $page-header-dark-color: $white; | ||
| $page-header-dark-bg: $gray-700; | ||
|
|
||
| $page-header-image-light-color: $gray-200; //#E5E5E5; | ||
| $page-header-image-light-bg: $gray-700; // #555 | ||
| $page-header-image-light-shadow: $gray-700; | ||
| $page-header-image-dark-color: $gray-200; //#E5E5E5; | ||
| $page-header-image-dark-bg: $gray-900; | ||
| $page-header-image-dark-shadow: $gray-900; | ||
|
|
||
| // == Page - Header Bar | ||
|
|
||
| $page-header-bar-padding-y: 1rem; | ||
|
|
||
| $page-header-bar-font-size: $h3-font-size; | ||
| $page-header-bar-line-height: 1.5; | ||
|
|
||
| $page-header-bar-border-light-color: $gray-200; | ||
| $page-header-bar-border-dark-color: $gray-700; | ||
| $page-header-bar-border-left-light-color: $body-color; | ||
| $page-header-bar-border-left-dark-color: $body-color-dark; | ||
|
|
||
| // == Content - Decorations | ||
| $decoration-diamond-size: 0.3em; | ||
|
|
||
| $decoration-diamond-margin-x: auto; | ||
| $decoration-diamond-margin-top: 0.5em; | ||
| $decoration-diamond-margin-bottom: 0.65em; | ||
|
|
||
| $decoration-diamond-light-color: $body-color; | ||
| $decoration-diamond-dark-color: $body-color-dark; | ||
|
|
||
| // == Content - Hero | ||
|
|
||
| // Image variant | ||
| $hero-light-color: inherit; | ||
| $hero-light-bg: $gray-200; | ||
| $hero-dark-color: $white; | ||
| $hero-dark-bg: $gray-900; | ||
|
|
||
| $hero-margin-x: map.get($spacers, 0); | ||
| $hero-margin-y: map.get($spacers, 0); | ||
| $hero-padding-x: map.get($spacers, 0); | ||
| $hero-padding-y: map.get($spacers, 4); //30px; | ||
| $hero-margin-x-sm: map.get($spacers, 0); | ||
| $hero-margin-y-sm: map.get($spacers, 0); | ||
| $hero-padding-x-sm: map.get($spacers, 0); | ||
| $hero-padding-y-sm: map.get($spacers, 3); //25px; | ||
| $hero-padding-x-lg: map.get($spacers, 0); | ||
| $hero-padding-y-lg: 20vh; | ||
|
|
||
| $hero-breakpoint: map.get($grid-breakpoints, md); //512px | ||
|
|
||
| $hero-shadow-size: 5px; | ||
| $hero-shadow-light-color: $gray-200; | ||
| $hero-shadow-dark-color: $gray-900; | ||
|
|
||
| $hero-heading-font-size: $h1-font-size; | ||
| $hero-heading-font-size-sm: ceil(($font-size-base * 4.5));; | ||
| $hero-heading-color: inherit; | ||
|
|
||
| $hero-paragraph-padding: map.get($spacers, 4); //30px; | ||
| $hero-paragraph-margin: math.div($hero-paragraph-padding, 2); | ||
| $hero-paragraph-font-size: $h4-font-size; //ceil(($font-size-base * 1.5)); | ||
| $hero-paragraph-font-weight: $font-weight-light; //200; | ||
|
|
||
| $hero-separator-light-color: darken($hero-light-bg, 10%); | ||
| $hero-separator-dark-color: brighten($hero-dark-bg, 10%); | ||
|
|
||
| $hero-title-font-weight: $font-weight-medium; | ||
|
|
||
| $hero-subtitle-light-bg: rgba(0, 0, 0, 0.2); | ||
| $hero-subtitle-lighter-bg: rgba(255, 255, 255, 0.5); | ||
| $hero-subtitle-dark-bg: rgba(0, 0, 0, 0.2); | ||
| $hero-subtitle-darker-bg: rgba(0, 0, 0, 0.7); | ||
| $hero-subtitle-width: map.get($container-max-widths, md); //600px; | ||
| $hero-subtitle-margin-x: auto; | ||
| $hero-subtitle-margin-y: map.get($spacers, 3); //25px; | ||
| $hero-subtitle-padding-x: map.get($spacers, 2); //15px; | ||
| $hero-subtitle-padding-y: map.get($spacers, 1); //10px; | ||
|
|
||
| $hero-subtitle-shadow-size: 2px; | ||
| $hero-subtitle-shadow-light-color: $hero-shadow-light-color; | ||
| $hero-subtitle-shadow-dark-color: $hero-shadow-dark-color; | ||
|
|
||
| $hero-logo-max-width: map.get($container-max-widths, md); //512px; | ||
| $hero-logo-margin-x: auto; | ||
| $hero-logo-margin-y: auto; | ||
| $hero-logo-padding-x: map.get($spacers, 3); //1em; | ||
| $hero-logo-padding-y: map.get($spacers, 0); | ||
|
|
||
| $hero-btn-margin-y: map.get($spacers, 2); | ||
| $hero-btn-margin-x: map.get($spacers, 2); | ||
|
|
||
| $hero-container-border-radius: 0; | ||
| $hero-container-padding-x: math.div($grid-gutter-width, 2); | ||
| $hero-container-padding-x-sm: map.get($spacers, 5); //(@jumbotron-padding * 2); | ||
| $hero-container-padding-y-sm: map.get($spacers, 4); //(@jumbotron-padding * 1.6); | ||
|
|
||
| // Icons variant | ||
| $hero-icons-light-color: $hero-light-color; | ||
| $hero-icons-light-bg: $hero-light-bg; | ||
| $hero-icons-dark-color: $hero-dark-color; | ||
| $hero-icons-dark-bg: $hero-dark-bg; | ||
|
|
||
| $hero-icons-padding-x: map.get($spacers, 0); | ||
| $hero-icons-padding-y: map.get($spacers, 4); //40px; | ||
|
|
||
| $hero-icons-icon-margin: map.get($spacers, 1); //15px | ||
| $hero-icons-icon-size: $font-size-base * 4; // 60px; | ||
|
|
||
| // Simple variant | ||
| $hero-simple-light-color: $hero-light-color; | ||
| $hero-simple-light-bg: $hero-light-bg; | ||
| $hero-simple-dark-color: $hero-dark-color; | ||
| $hero-simple-dark-bg: $hero-dark-bg; | ||
|
|
||
| $hero-simple-padding-x: map.get($spacers, 0); | ||
| $hero-simple-padding-y: map.get($spacers, 5); //50px; | ||
|
|
||
| $hero-simple-paragraph-margin-x: map.get($spacers, 2); //0.5em | ||
| $hero-simple-paragraph-font-size: $font-size-lg; //17.5px; |
Oops, something went wrong.