aboutsummaryrefslogtreecommitdiffhomepage
path: root/old/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'old/style.css')
-rw-r--r--old/style.css155
1 files changed, 155 insertions, 0 deletions
diff --git a/old/style.css b/old/style.css
new file mode 100644
index 0000000..b91b3d9
--- /dev/null
+++ b/old/style.css
@@ -0,0 +1,155 @@
1@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap");
2
3@media (prefers-color-scheme: light) {
4 :root {
5 --color-primary: rgb(0 104 119);
6 --color-on-primary: rgb(255 255 255);
7
8 --color-secondary: rgb(74 98 104);
9
10 --color-surface: rgb(245 250 252);
11 --color-surface-container: rgb(233 239 240);
12 --color-on-surface: rgb(23 29 30);
13 }
14}
15
16@media (prefers-color-scheme: dark) {
17 :root {
18 --color-primary: rgb(131 210 228);
19 --color-on-primary: rgb(0 54 62);
20
21 --color-secondary: rgb(178 203 209);
22
23 --color-surface: rgb(14 20 22);
24 --color-surface-container: rgb(27 33 34);
25 --color-on-surface: rgb(222 227 229);
26 }
27}
28
29* {
30 transition-duration: 0.5s;
31 transition-property: background, color;
32 transition-timing-function: ease-in-out;
33}
34
35body {
36 font-family: "Noto Sans", sans-serif;
37 background-color: var(--color-surface);
38 color: var(--color-on-surface);
39 margin: 0 auto;
40 padding: 0 0.5em;
41
42 max-width: 50em;
43}
44
45main {
46 background-color: var(--color-surface-container);
47 border-radius: 2em;
48
49 margin: 1em 0 5em 0;
50 padding: 1.5em;
51}
52
53main > *:first-child {
54 margin-top: 0;
55}
56
57main > *:last-child {
58 margin-bottom: 0;
59}
60
61footer {
62 background-color: var(--color-surface-container);
63 border-radius: 2em 2em 0 0;
64
65 display: flex;
66 flex-wrap: wrap;
67
68 padding: 1.5em;
69}
70
71footer > * {
72 margin-bottom: 1em;
73 margin-right: 1em;
74}
75
76footer > *:last-child {
77 margin-right: 0;
78 margin-bottom: 0;
79}
80
81h1,
82h2 {
83 color: var(--color-primary);
84}
85
86h4 {
87 margin: 0;
88 margin-bottom: 0.5em;
89}
90
91b {
92 color: var(--color-secondary);
93}
94
95ul,
96ol {
97 padding-left: 1.5em;
98}
99
100li {
101 padding-bottom: 1em;
102}
103
104li:last-child {
105 padding-bottom: 0;
106}
107
108a {
109 color: var(--color-primary);
110}
111
112img {
113 width: 100%;
114 max-height: 15em;
115 object-fit: cover;
116 border-radius: 1em;
117}
118
119@keyframes button {
120 0% {
121 transform: scale(1);
122 }
123 50% {
124 transform: scale(1.15);
125 }
126
127 100% {
128 transform: scale(1);
129 }
130}
131
132.button {
133 background-color: var(--color-primary);
134 color: var(--color-on-primary);
135
136 border-radius: 1em;
137 padding: 1em;
138 margin: 1em 2.5em;
139 font-size: medium;
140 animation: button infinite 1s;
141
142 text-decoration: none;
143 text-align: center;
144 display: block;
145}
146
147.sponsors {
148 display: flex;
149 flex-wrap: wrap;
150}
151
152.sponsors > * {
153 flex: 1 1 150px;
154 text-wrap: nowrap;
155}