-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.scss
101 lines (79 loc) · 3.61 KB
/
theme.scss
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
@import 'theme-colors';
$themes: "dark", "light";
$colors: "red", "orange", "yellow", "green", "blue", "purple";
body {
@each $theme in $themes {
&.#{$theme} {
@each $color in $colors {
&.#{$color} {
color: map-get($color-themes, $theme, $color, ink);
&.grad {
background-color: map-get($color-themes, $theme, $color, background);
background: map-get($color-themes, $theme, $color, background-grad);
}
&.no-grad {
background: map-get($color-themes, $theme, $color, background);
}
h1, h2 {
color: map-get($color-themes, $theme, $color, heading-ink);
}
button, a {
color: map-get($color-themes, $theme, $color, header-button-color);
border-color: map-get($color-themes, $theme, $color, header-button-color);
&:hover {
color: map-get($color-themes, $theme, $color, text-link-hover-ink);
}
&.btn {
background: map-get($color-themes, $theme, $color, header-button-background);
&:hover {
color: map-get($color-themes, $theme, $color, header-button-hover-color);
border-color: map-get($color-themes, $theme, $color, header-button-hover-color);
background: map-get($color-themes, $theme, $color, header-button-hover-background);
}
}
&.theme-button:hover {
color: map-get($color-themes, $theme, $color, theme-button-ink);
background-color: map-get($color-themes, $theme, $color, theme-button-background);
}
&.color-button:hover {
color: map-get($color-themes, $theme, $color, next-button-ink);
background-color: map-get($color-themes, $theme, $color, next-button-background);
border-color: map-get($color-themes, $theme, $color, next-button-ink);
}
}
.social a {
background-color: map-get($color-themes, $theme, $color, header-button-color);
color: map-get($color-themes, $theme, $color, background);
&:hover {
background-color: map-get($color-themes, $theme, $color, background);
border-color: map-get($color-themes, $theme, $color, header-button-color);
color: map-get($color-themes, $theme, $color, header-button-color);
}
}
#projects .project {
color: map-get($color-themes, $theme, $color, project-ink);
border-color: map-get($color-themes, $theme, $color, project-border-color);
background-color: map-get($color-themes, $theme, $color, project-background-color);
hr {
border-color: map-get($color-themes, $theme, $color, project-hr-color);
}
.btn-container .btn {
color: map-get($color-themes, $theme, $color, project-button-color);
border-color: map-get($color-themes, $theme, $color, project-button-border-color);
background-color: map-get($color-themes, $theme, $color, project-button-background-color);;
&:hover {
background-color: map-get($color-themes, $theme, $color, project-button-background-hover-color);
}
}
&:hover {
background: map-get($color-themes, $theme, $color, project-background-hover-color);
.icon {
color: map-get($color-themes, $theme, $color, project-icon-hover-ink);
}
}
}
}
}
}
}
}