| // =========== Settings |
| |
| // Most of the variables are based on some kind of percentages to maintain stability. |
| // So $variable-10 is small or light and $variable-100 is big or dark. |
| |
| |
| // Set your own font |
| $font-family-body: "Source Sans Pro", sans-serif; |
| $font-family-heading: "Source Sans Pro"; |
| |
| // The base font-size, all other elements will adjust to this value |
| $font-size-base: 15px; |
| |
| $font-size-10: 0.75rem; |
| $font-size-20: 0.875rem; |
| $font-size-30: 1rem; |
| $font-size-40: 1.125rem; |
| $font-size-50: 1.313rem; |
| $font-size-60: 1.5rem; |
| $font-size-70: 1.625rem; |
| $font-size-80: 1.75rem; |
| $font-size-100: 2rem; |
| |
| // The grid columns will be used in the grid mixin, 48 is standard |
| $grid-columns: 48; |
| |
| |
| // Adjust the website's maximum width. |
| $max-width: 80rem; |
| |
| |
| // Use the spacing variable on margins and paddings |
| $spacing: 1rem; |
| |
| |
| // Adjust the border-radius |
| $border-radius-10: 0.125rem; |
| $border-radius-20: 0.313rem; |
| |
| |
| // Media queries |
| // Adjust them to you needs or add more |
| $breakpoint-property: min-width; |
| $breakpoint-10: 590px; |
| $breakpoint-20: 769px; |
| $breakpoint-30: 960px; |
| $breakpoint-40: 1152px; |
| |
| // Z-index plan |
| $z-index-10: 10; |
| $z-index-20: 20; |
| $z-index-30: 30; |
| |
| |
| // Colors |
| // Add your own color variables |
| |
| // Color brand |
| $color-brand-40: darken(#FF9925, 25%); |
| $color-brand-50: #FF9925; // Default |
| $color-brand-60: lighten(#FF9925, 10%); |
| |
| // Color success |
| $color-success-50: #39b924; // Default |
| $color-success-60: #249c11; |
| |
| // Color alert |
| $color-alert-50: #f3490d; // Default |
| $color-alert-60: #d33e09; |
| |
| // Color neutral |
| $color-neutral-10: #eef2f0; |
| $color-neutral-30: #ccd6d2; |
| $color-neutral-50: #8d9994; |
| $color-neutral-70: #3f4542; |
| $color-neutral-90: #232725; |
| |
| // Color basics |
| $black: #000; |
| $white: #fff; |