shared-ng/styles.scss at master · ASWWU-Web/shared-ng · GitHub

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
// ASWWU site colors
$color-aswwu-primary: rgb(152, 208, 135);
$color-aswwu-secondary: rgb(192, 220, 117);
$color-aswwu-success: rgb(225, 225, 109);
$color-aswwu-danger: rgb(255, 82, 29);
$color-aswwu-warning: rgb(249, 141, 53);
$color-aswwu-info: rgb(255, 196, 63);
$color-aswwu-light: rgb(241, 242, 242);
$color-aswwu-dark: rgb(0, 0, 0);

// Department colors
$color-outdoors: rgb(174, 209, 54);
$color-tread-shed: rgb(219, 225, 37);
$color-atlas: rgb(241, 225, 10);
$color-mountain-ash: rgb(252, 197, 23);
$color-photo: rgb(242, 164, 52);
$color-video: rgb(233, 50, 37);
$color-collegian: rgb(189, 86, 160);
$color-web: rgb(133, 82, 161);
$color-marketing: rgb(95, 68, 155);
$color-global-service: rgb(74, 91, 168);
$color-spiritual: rgb(94, 150, 208);
$color-social: rgb(99, 198, 187);
$color-senate: rgb(132, 201, 139);
$color-executive: rgb(121, 193, 76);
// fonts
@font-face {
  font-family: BrandonGrotesqueBold;
  font-weight: bold;
  src: url("./fonts/brandon-grotesque-bold.otf") format("opentype");
}
@font-face {
  font-family: HelveticaNeueRoman;
  src: url("./fonts/helvetica-neue-roman.otf") format("opentype");
}
$font1: "BrandonGrotesqueBold", sans-serif;
$font2: "HelveticaNeueRoman", sans-serif;

// CSS transformation
:root {
  /* ASWWU Fonts */
  --font-1: #{$font1}; /* Headers and big text */
  --font-2: #{$font2}; /* Generic Text */
  --font-test: "Brush Script MT", cursive; /* an eye-sore font to make sure it's working */
  // ASWWU colors
  --color-aswwu-primary: #{$color-aswwu-primary};
  --color-aswwu-secondary: #{$color-aswwu-secondary};
  --color-aswwu-success: #{$color-aswwu-success};
  --color-aswwu-danger: #{$color-aswwu-danger};
  --color-aswwu-warning: #{$color-aswwu-warning};
  --color-aswwu-info: #{$color-aswwu-info};
  --color-aswwu-light: #{$color-aswwu-light};
  --color-aswwu-dark: #{$color-aswwu-dark};
  /* Departmental Colors */
  --color-outdoors: #{$color-outdoors};
  --color-tread-shed: #{$color-tread-shed};
  --color-atlas: #{$color-atlas};
  --color-mountain-ash: #{$color-mountain-ash};
  --color-photo: #{$color-photo};
  --color-video: #{$color-video};
  --color-collegian: #{$color-collegian};
  --color-web: #{$color-web};
  --color-marketing: #{$color-marketing};
  --color-global-service: #{$color-global-service};
  --color-spiritual: #{$color-spiritual};
  --color-social: #{$color-social};
  --color-senate: #{$color-senate};
  --color-executive: #{$color-executive};
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: #{$font1};
}

* {
  font-family: #{$font2};
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
}

.filter-invert {
  filter: invert(1);
}