-
Notifications
You must be signed in to change notification settings - Fork 1
/
styles.scss
179 lines (162 loc) · 4.34 KB
/
styles.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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
/*-- scss:rules --*/
/* Color Variables */
$ubc-blue: #136ecf;
$white: #FFFFFF;
$light-blue: #97D4E9;
$medium-blue: #6EC4E8;
$dark-blue: #062f5b;
$exercise-dark-green: #005f56;
$exercise-light-green: #88d4ab;
$exercise-dark-gray: #2f4f4f;
$exercise-light-gray: #dcdcdc;
$blue-light: #d0e7ff;
$blue-medium: #7fbfff;
$blue-dark: #136ecf;
$blue-darker: #0b4b91;
$blue-lightest: #eaf4ff;
$blue-medium-light: #a9d1ff;
$blue-dark-light: #4d97e0;
$grey-medium: #999999;
// Example callout (e.g., activity)
.activity {
margin: 0.5em 0;
border: 1px solid #0055b7; // UBC blue border
border-radius: 5px;
background-color: #e3f2fd; // Light blue background
padding: 0 10px 10px 10px; // Add padding on left to align text with header
// Header styling
h2 {
margin: 0;
padding: 5px 10px;
color: #ffffff; // White text color for header
background-color: #0055b7; // Blue background
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 1em;
font-weight: bold;
}
// Content styling with additional spacing and left padding
p {
margin-top: 15px; // Adjust spacing between the header and content
padding-left: 10px; // Align text with header padding
color: #003366; // Dark blue text color
font-size: 0.9em;
}
}
// Exercise callout
.exercise {
margin: 0.5em 0;
border: 1px solid #d4d4d4; // Light gray border
border-radius: 5px;
background-color: #f7f7f7; // Light gray background
padding: 0 10px 10px 10px; // Add padding on left to align text with header
// Header styling
h2 {
margin: 0;
padding: 5px 10px;
color: #ffffff; // White text color for header
background-color: #91c788; // Light green background
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 1em;
font-weight: bold;
}
// Content styling with additional padding to align with the header
p {
margin-top: 15px; // Spacing between header and content
padding-left: 10px; // Align content with header
color: #1c5f2e; // Dark green text color
font-size: 0.9em;
}
}
// Note callout (Light Green)
.note {
margin: 0.5em 0;
border: 1px solid #5a8cd8; // Blue border to match the image
border-radius: 5px;
background-color: #dfe6ee; // Light blue background
padding: 0 10px 10px 10px;
// Header styling
h2 {
margin: 0;
padding-left: 40px;
padding-top: 5px;
color: #060000;
background-color: #ebf4fc; // Blue background for header
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 1em;
font-weight: bold;
background-size: 20px;
background-repeat: no-repeat;
background-position: 10px center;
background-image: url("lectures/img/note.png");
}
// Content styling
p {
margin-top: 15px;
padding-left: 10px;
color: #4a6a8a; // Darker blue text
font-size: 0.9em;
}
}
.warning {
margin: 0.5em 0;
border: 1px solid #e67e22; // Orange border to match the image
border-radius: 5px;
background-color: #f3eae4; // Light orange background
padding: 0 10px 10px 10px;
// Header styling
h2 {
margin: 0;
padding-left: 40px;
padding-top: 5px;
color: #070000;
background-color: #f7ceb3; // Orange background for header
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 1em;
font-weight: bold;
background-size: 20px;
background-repeat: no-repeat;
background-position: 10px center;
background-image: url("lectures/img/warning.png");
}
// Content styling
p {
margin-top: 15px;
padding-left: 10px;
color: #a8431e; // Darker orange text
font-size: 0.9em;
}
}
.tip {
margin: 0.5em 0;
border: 1px solid #8ccc74; // Green border
border-radius: 5px;
background-color: #a3d592; // Light green background
padding: 0 10px 10px 10px;
// Header styling
h2 {
margin: 0;
padding-left: 40px;
padding-top: 5px;
color: #040000;
background-color: #eff9eb; // Dark green background for header
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 1em;
font-weight: bold;
background-size: 20px;
background-repeat: no-repeat;
background-position: 10px center;
background-image: url("lectures/img/tip.png");
}
// Content styling
p {
margin-top: 15px;
padding-left: 10px;
color: #1d431d; // Darkest green text
font-size: 0.9em;
}
}