summaryrefslogtreecommitdiff
path: root/src/scss/index.scss
blob: 55cd9381acc21dc4be50eb4fe409abad0d40c07b (plain) (blame)
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
@charset "utf-8";

// Import Google Fonts
//@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap');

// Palette
//$pine-green: #01646d;
//$midnight-green: #114b5f;
//$eton-blue: #88d498;
//$pastel-gray: #c6dabf;
//$isabelline: #f7f4ea;
$darkteal: rgb(0, 100, 108);
$green: rgb(88, 169, 143);
$darkerteal: rgb(29, 133, 137);
$gray: rgb(157, 210, 211);
$teal: rgb(58, 165, 166);
$cyan: rgb(156, 210, 210);
$darkgray: rgb(127, 177, 181);
$darkgreen: rgb(59, 136, 114);
$yellow: rgb(186, 214, 187);

// Update Bulma's global variables
$primary: $teal;
// $link: $midnight-green;
// $info: $cyan
$success: $green;
// $warning: $yellow
// $danger: $red
// $dark: $grey-darker
// $text: $grey-dark
$family-sans-serif: "PT Sans", sans-serif;
// $hr-background-color: $primary;
$title-color: white;
//$subtitle-color: white;
// $body-background-color: $isabelline;

// Import only what you need from Bulma
@import "../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../node_modules/bulma/sass/base/_all.sass";
@import "../../node_modules/bulma/sass/elements/_all.sass";
@import "../../node_modules/bulma/sass/form/_all.sass";
@import "../../node_modules/bulma/sass/components/_all.sass";
@import "../../node_modules/bulma/sass/layout/_all.sass";
@import "../../node_modules/bulma/sass/grid/_all.sass";

// Palette
.darkteal {
	background-color: $darkteal;
	color: white;
}
.green {
	background-color: $green;
	color: white;
}
.darkerteal {
	background-color: $darkerteal;
	color: white;
}
.gray {
	background-color: $gray;
	color: white;
}
.teal {
	background-color: $teal;
	color: white;
}
.cyan {
	background-color: $cyan;
	color: white;
}
.darkgray {
	background-color: $darkgray;
	color: white;
}
.darkgreen {
	background-color: $darkgreen;
	color: white;
}
.yellow {
	background-color: $yellow;
	color: white;
}

.blurb {
	background-color: white;
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.banner {
	border-radius: 5px !important;
	clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.quiet {
	background-color: white;
}

.fawnseh {
	font-family: 'Architects Daughter', cursive;
}

body {
	background-image: url("/bg.png");
}