mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-05-02 14:52:46 +02:00
284cfebe31
- Use a modern system font stack as used by Bootstrap 4. - Replace light font weights with normal font weights, as these are easier to read. - Remove the use of the Proxima Nova font as it's not installed on all systems. Loading it as a web font would slow down page loading, so it's probably not a good idea if it's only used rarely.
171 lines
4.8 KiB
Plaintext
171 lines
4.8 KiB
Plaintext
---
|
|
---
|
|
// SITE VARIABLES
|
|
// --------------
|
|
|
|
// Blues
|
|
@blue-darker: #003366;
|
|
@blue-dark: #005f9b; // Pantone 3015 C
|
|
@blue: #009add; // Pantone 2925 C
|
|
@blue-light: #b8dcf2;
|
|
@blue-lighter: #f0f9ff;
|
|
|
|
// Greens
|
|
@green-darker: #41683b;
|
|
@green-dark: #678943;
|
|
@green: #95bf52;
|
|
@green-light: #ddefbd;
|
|
@green-lighter: #f3f9e8;
|
|
|
|
// Reds
|
|
@red-darker: #702222;
|
|
@red-dark: #ba4a4a;
|
|
@red: #dd7373;
|
|
@red-light: #f2adb1;
|
|
@red-lighter: #fff0f0;
|
|
|
|
// Yellows
|
|
@yellow-darker: #6f4215;
|
|
@yellow-dark: #db8400;
|
|
@yellow: #f9e27d;
|
|
@yellow-light: #fff5bd;
|
|
@yellow-lighter: #fffcee;
|
|
|
|
// Oranges
|
|
@orange-darker: #8c3900;
|
|
@orange-dark: #cc5d11;
|
|
@orange: #f4914e;
|
|
@orange-light: #ffd0a6;
|
|
@orange-lighter: #fff4e6;
|
|
|
|
// Purples
|
|
@purple-darker: #4a226d;
|
|
@purple-dark: #7457ad;
|
|
@purple: #9780d6;
|
|
@purple-light: #c3b8f4;
|
|
@purple-lighter: #fbf5ff;
|
|
|
|
@fa-green: #1616e5;
|
|
@fa-green-dark: darken(@fa-green, 10%);
|
|
|
|
@jumbotron-border: mix(@fa-green, @fa-green-dark, 75%);
|
|
|
|
|
|
// BOOTSTRAP OVERRIDES
|
|
// -------------------
|
|
|
|
// Brand colors
|
|
@brand-success: @fa-green;
|
|
|
|
|
|
// Links
|
|
@link-color: lighten(@fa-green, 5%);
|
|
@link-hover-color: darken(@fa-green, 5%);
|
|
|
|
|
|
// Typography
|
|
@font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
@font-family-serif: museo-slab, Georgia, "Times New Roman", Times, serif;
|
|
@headings-font-family: @font-family-serif;
|
|
|
|
|
|
// Components
|
|
@component-active-bg: @fa-green;
|
|
|
|
|
|
// Labels
|
|
@label-brand-bg: @fa-green;
|
|
@label-dark-bg: @gray-dark;
|
|
|
|
// Navbar
|
|
@navbar-height: 40px;
|
|
@navbar-inverse-brand-color: #fff;
|
|
|
|
// Reset inverted navbar basics
|
|
@navbar-inverse-color: mix(@fa-green, #fff, 50%);
|
|
@navbar-inverse-bg: @fa-green;
|
|
@navbar-inverse-border: @jumbotron-border;
|
|
|
|
// Inverted navbar links
|
|
@navbar-inverse-link-color: mix(@fa-green, #fff, 35%);
|
|
@navbar-inverse-link-hover-color: #fff;
|
|
@navbar-inverse-link-active-bg: @navbar-inverse-border;
|
|
|
|
// Inverted navbar toggle
|
|
@navbar-inverse-toggle-hover-bg: @jumbotron-color;
|
|
@navbar-inverse-toggle-border-color: mix(@jumbotron-color, @fa-green, 75%);
|
|
|
|
|
|
// Jumbotron
|
|
@jumbotron-color: #fff;
|
|
@jumbotron-bg: @fa-green;
|
|
|
|
|
|
// Form states and alerts
|
|
@state-success-text: @fa-green;
|
|
@state-success-bg: mix(@fa-green, #fff, 6%);
|
|
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
|
|
|
@state-info-text: mix(@blue-dark, @blue, 50%);
|
|
@state-info-bg: @blue-lighter;
|
|
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
|
|
|
@state-danger-text: @brand-danger;
|
|
@state-danger-bg: mix(@state-danger-text,#fff,10%);
|
|
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
|
|
|
|
|
|
// Carousel
|
|
@carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25);
|
|
|
|
@carousel-control-color: @fa-green-dark;
|
|
@carousel-control-font-size: 30px;
|
|
|
|
|
|
// Code
|
|
@pre-border-color: #eee;
|
|
|
|
|
|
// Sections
|
|
@section-emphasized-bg: #fff;
|
|
|
|
//== Type
|
|
//** Text muted color
|
|
@text-muted: mix(@gray-light,@gray-lighter,50%);
|
|
|
|
|
|
@alert-well-bg: @panel-default-heading-bg;
|
|
@alert-well-text: @text-color;
|
|
@alert-well-border: @panel-default-border;
|
|
|
|
@alert-default-bg: transparent;
|
|
@alert-default-text: @text-color;
|
|
@alert-default-border: mix(#fff,@panel-default-border,40%);
|
|
|
|
|
|
|
|
|
|
//@panel-default-text: @gray-dark;
|
|
//@panel-default-border: @panel-default-heading-bg;
|
|
//@panel-default-heading-bg: #f5f5f5;
|
|
|
|
@panel-primary-text: #fff;
|
|
@panel-primary-border: mix(#fff,@brand-primary,50%);
|
|
@panel-primary-heading-bg: @brand-primary;
|
|
|
|
@panel-success-text: #fff;
|
|
@panel-success-border: mix(#fff,@brand-success,50%);
|
|
@panel-success-heading-bg: @brand-success;
|
|
|
|
@panel-info-text: #fff;
|
|
@panel-info-border: mix(#fff,@brand-info,50%);
|
|
@panel-info-heading-bg: @brand-info;
|
|
|
|
@panel-warning-text: #fff;
|
|
@panel-warning-border: mix(#fff,@brand-warning,50%);
|
|
@panel-warning-heading-bg: @brand-warning;
|
|
|
|
@panel-danger-text: #fff;
|
|
@panel-danger-border: mix(#fff,@brand-danger,50%);
|
|
@panel-danger-heading-bg: @brand-danger;
|