1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
// Color system
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$yellow: #ffe000;
$black: #1d2d35;
$beige: #fbf7f0;
$red: #e55235;
$purple: #5d2f86;
$brown: #aa9c84;
$blue-300: #8ed6fb;
$pink-500: #d32e9d;
$primary: $purple;
/** Bootstrap navbar fix (https://git.io/fADqW) */
$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-responsive-font-sizes: true;
// Body
//
// Settings for the `<body>` element.
$body-bg: $white;
$body-color: $black;
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1240px
);
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 16;
$grid-gutter-width: 48px;
$grid-row-columns: 6;
// Components
//
// Define common padding and border radius sizes and more.
$border-color: $gray-200;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: "Jost", -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-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
// stylelint-enable value-keyword-case
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-xl: $font-size-base * 1.375;
$font-size-lg: $font-size-base * 1.25;
$font-size-md: $font-size-base * 1.125;
$font-size-sm: $font-size-base * 0.875;
$line-height-base: 1.5;
$headings-font-family: null;
$headings-font-weight: 500;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem;
// Navbar
$navbar-padding-y: $spacer / 2;
$navbar-padding-x: 0;
$navbar-nav-link-padding-x: 0.5rem;
$navbar-light-color: $black;
$navbar-light-hover-color: $primary;
$navbar-light-active-color: $primary;
// Cards
$card-border-color: $gray-200;
// Alerts
//
// Define alert colors, border radius, and padding.
$alert-padding-y: 1rem;
$alert-padding-x: 1.5rem;
$alert-margin-bottom: 0;
$alert-border-radius: 0;
$alert-link-font-weight: $headings-font-weight;
$alert-border-width: 0;
$alert-bg-level: 0;
$alert-border-level: 0;
$alert-color-level: 0;
|
