dannybdev.tngl.sh
Test Profile
1:root {
2 --blue: #2c4c5c;
3 --gray: #b8bfc1;
4 --yellow: #f3e308;
5 --lightBlue: #6c8494;
6 --yellowGreen: #9cac54;
7 --lightGreen: #97cd97;
8 --hackerGreen: #70ffaf;
9 --teal: #a7f0dd;
10 --white: #f4fcfb;
11 --black: #000000;
12
13 /*Margins*/
14 --margin-PC: 3.5rem;
15 --margin-Tablet: 2.5rem;
16 --margin-Phone: 1.5rem;
17 /*Breakpoints*/
18 --BreakL: 1328px;
19 --BreakM: 900px;
20 --BreakS: 672px;
21}
22.Navbar {
23 display: flex;
24 position: sticky;
25 z-index: 10;
26 width: 100%;
27 font-size: 16px;
28 background: var(--blue);
29 padding-top: 0.5rem;
30 padding-bottom: 0.2rem;
31}
32
33.Navbar-Brand {
34 font-size: 2rem;
35 display: flex;
36 z-index: 10;
37 align-self: flex-start;
38 text-decoration: none;
39 position: relative;
40 color: white;
41
42 @media (min-width: 600px) {
43 font-size: 2rem;
44 margin-left: 1rem;
45 }
46
47 @media (min-width: 900px) {
48 font-size: 3rem;
49 }
50 @media (min-width: 1328px) {
51 font-size: 4rem;
52 font-weight: 900;
53 }
54}
55
56.Navbar-List {
57 display: flex;
58 position: absolute;
59 right: 0;
60 top: 50%;
61 list-style: none;
62 gap: 0.75rem;
63 margin-right: 1rem;
64}
65
66.NavBar-List-Item {
67 font-size: 1rem;
68 color: var(--yellow);
69
70 @media (min-width: 900px) {
71 font-size: 1.5rem;
72 }
73}
74
75.Navbar-Brand:visited {
76 color: var(--white);
77}
78
79.NavBar-List-Link {
80 text-decoration: none;
81}
82
83span {
84 color: var(--yellow);
85}