tynanpurdy.com
[READ-ONLY] Mirror of https://github.com/tynanpurdy/bootstrap. Learning project for custom web and eventual portfolio page
1.colors {
2 --yellow: #D09920;
3 --darkblue: #1E2761;
4 --darkgrey: #131313;
5}
6
7body {
8 font-family: 'Fira Sans';
9 /* color: #fff;
10 background: var(--primary); */
11}
12
13/* text styles */
14p {font-weight: 300;}
15h1 {
16 font-family: "Fira Sans";
17 font-weight: 900;
18 font-style: normal;
19 font-size: 5rem;
20}
21h2 {
22 font-family: "Fira Sans";
23 font-weight: 800;
24}
25h3 {
26 font-family: "Fira Sans";
27 font-weight: bold;
28}
29
30svg {
31 position: absolute;
32 bottom: 0;
33 width: 100%;
34 height: 5vw;
35 /* set height to pixels if you want angle to change with screen width */
36}
37
38.rounded {
39 border-radius: 50px;
40}
41
42.dark {
43 background: var(--primary);
44 background-size: cover;
45 color: #fff;
46}
47
48.magenta {
49 background: var(--secondary);
50 color: #fff;
51}
52
53.blue {
54 background: var(--tertiary);
55 color: #fff;
56}
57
58/* navigation bar */
59.navbar {
60 background: var(--primary);
61}
62.nav-link,
63.navbar-brand {
64 color: #fff;
65 cursor: pointer;
66}
67.navbar-brand:hover {
68 animation-name: nav-link-animation;
69 animation-duration: 300ms;
70 animation-fill-mode: forwards;
71}
72.nav-link {
73 margin-right: 1em !important;
74 font-family: 'Fira Sans';
75}
76.nav-link:hover {
77 animation-name: nav-link-animation;
78 animation-duration: 300ms;
79 animation-fill-mode: forwards;
80}
81@keyframes nav-link-animation{
82 from {color: #fff;}
83 to {color: var(--secondary);}
84}
85.navbar-collapse {
86 justify-content: flex-end;
87}
88
89/*--- page footer ---*/
90.page-footer {
91 background-color: var(--primary);
92 color: #ccc;
93 padding: 60px 0 30px;
94
95}
96.footer-copyright {
97 color: #666;
98 padding: 40px 0;
99}
100
101/* fonts */
102/* Fira Sans */
103@font-face {
104 font-family: "Fira Sans";
105 src: url("fonts/FiraSans/FiraSans-Thin.ttf");
106 font-weight: 100;
107 font-style: normal;
108}
109@font-face {
110 font-family: "Fira Sans";
111 src: url("fonts/FiraSans/FiraSans-ThinItalic.ttf");
112 font-weight: 100;
113 font-style: italic;
114}
115@font-face {
116 font-family: "Fira Sans";
117 src: url("fonts/FiraSans/FiraSans-ExtraLight.ttf");
118 font-weight: 200;
119 font-style: normal;
120}
121@font-face {
122 font-family: "Fira Sans";
123 src: url("fonts/FiraSans/FiraSans-ExtraLightItalic.ttf");
124 font-weight: 200;
125 font-style: italic;
126}
127@font-face {
128 font-family: "Fira Sans";
129 src: url("fonts/FiraSans/FiraSans-Light.ttf");
130 font-weight: 300;
131 font-style: normal;
132}
133@font-face {
134 font-family: "Fira Sans";
135 src: url("fonts/FiraSans/FiraSans-LightItalic.ttf");
136 font-weight: 300;
137 font-style: italic;
138}
139@font-face {
140 font-family: "Fira Sans";
141 src: url("fonts/FiraSans/FiraSans-Regular.ttf");
142 font-weight: normal;
143 font-style: normal
144}
145@font-face {
146 font-family: "Fira Sans";
147 src: url("fonts/FiraSans/FiraSans-Italic.ttf");
148 font-weight: normal;
149 font-style: italic;
150}
151@font-face {
152 font-family: "Fira Sans";
153 src: url("fonts/FiraSans/FiraSans-Medium.ttf");
154 font-weight: 500;
155 font-style: normal;
156}
157@font-face {
158 font-family: "Fira Sans";
159 src: url("fonts/FiraSans/FiraSans-MediumItalic.ttf");
160 font-weight: 500;
161 font-style: italic;
162}
163@font-face {
164 font-family: "Fira Sans";
165 src: url("fonts/FiraSans/FiraSans-SemiBold.ttf");
166 font-weight: 600;
167 font-style: normal;
168}
169@font-face {
170 font-family: "Fira Sans";
171 src: url("fonts/FiraSans/FiraSans-SemiBoldItalic.ttf");
172 font-weight: 600;
173 font-style: italic;
174}
175@font-face {
176 font-family: "Fira Sans";
177 src: url("fonts/FiraSans/FiraSans-Bold.ttf");
178 font-weight: bold;
179}
180@font-face {
181 font-family: "Fira Sans";
182 src: url("fonts/FiraSans/FiraSans-BoldItalic.ttf");
183 font-weight: bold;
184 font-style: italic;
185}
186@font-face {
187 font-family: "Fira Sans";
188 src: url("fonts/FiraSans/FiraSans-ExtraBold.ttf");
189 font-weight: 800;
190 font-style: normal;
191}
192@font-face {
193 font-family: "Fira Sans";
194 src: url("fonts/FiraSans/FiraSans-ExtraBoldItalic.ttf");
195 font-weight: 800;
196 font-style: italic;
197}
198@font-face {
199 font-family: "Fira Sans";
200 src: url("fonts/FiraSans/FiraSans-Black.ttf");
201 font-weight: 900;
202 font-style: normal;
203}
204@font-face {
205 font-family: "Fira Sans";
206 src: url("fonts/FiraSans/FiraSans-BlackItalic.ttf");
207 font-weight: 900;
208 font-style: italic;
209}
210/* Fira Code */
211@font-face {
212 font-family: "Fira Code";
213 src: url("fonts/FiraCode/FiraCode-Light.otf");
214 font-weight: 300;
215 font-style: normal;
216}
217@font-face {
218 font-family: "Fira Code";
219 src: url("fonts/FiraCode/FiraCode-Regular.otf");
220 font-weight: normal;
221 font-style: normal;
222}
223@font-face {
224 font-family: "Fira Code";
225 src: url("fonts/FiraCode/FiraCode-Medium.otf");
226 font-weight: 500;
227 font-style: normal;
228}
229@font-face {
230 font-family: "Fira Code";
231 src: url("fonts/FiraCode/FiraCode-Bold.otf");
232 font-weight: bold;
233 font-style: normal;
234}