this repo has no description
nel.pet
1/* CSS ordering broadly following: https://9elements.com/css-rule-order/ */
2
3:root {
4 --colour-gray: #d7d7d7;
5 --colour-dark-gray: #cccccc;
6
7 --colour-red: #ffaaaa;
8 --colour-orange: #ffc089;
9 --colour-yellow: #ffe18b;
10 --colour-green: #c8df91;
11 --colour-turqoise: #98eccc;
12 --colour-blue: #9dd6ff;
13 --colour-purple: #c9c5ff;
14 --colour-pink: #ffa4d0;
15}
16
17body {
18 align-items: center;
19 flex-direction: column;
20 display: flex;
21
22 font-family: 'Noto Sans', sans-serif;
23}
24
25.page-header {
26 justify-content: center;
27 display: flex;
28 margin: 0.5rem;
29 border-radius: 1em;
30 border: 2px solid var(--colour-gray);
31 width: clamp(320px, 80%, 50rem);
32 background-color: var(--colour-gray);
33}
34
35.nav-item {
36 border-radius: 1em;
37 padding-left: 0.5em;
38 padding-right: 0.5em;
39
40 color: inherit;
41 text-decoration: inherit;
42
43 &:hover {
44 background-color: var(--colour-dark-gray);
45 }
46}
47
48.page-main {
49 align-items: center;
50 flex-direction: column;
51 display: flex;
52
53 width: clamp(280px, 75%, 50rem);
54}
55
56.card {
57 margin: 0.5rem;
58 border-radius: 3px;
59 border: 2px solid var(--card-colour, var(--colour-red));
60
61 & .card-header {
62 margin: 0px;
63 padding: 0.2em;
64
65 background-color: var(--card-colour, var(--colour-red));
66
67 & h3 {
68 margin: 0px;
69 }
70 }
71
72 & .card-body {
73 padding: 0.2em;
74 }
75}