home to your local SPACEGIRL 💫
arimelody.space
merge main into dev
+355
-315
+27
-36
public/script/config.js
+27
-36
public/script/config.js
···
1
-
function toggle_config_setting(config, name) {
2
-
if (config[name]) {
3
-
delete config[name];
4
-
update_config(config);
5
-
return true;
6
-
}
7
-
config[name] = true;
8
-
update_config(config);
9
-
return true;
10
-
}
1
+
const DEFAULT_CONFIG = {
2
+
crt: false
3
+
};
4
+
const config = (() => {
5
+
let saved = localStorage.getItem("config");
6
+
if (saved) {
7
+
const config = JSON.parse(saved);
8
+
setCRT(config.crt || DEFAULT_CONFIG.crt);
9
+
return config;
10
+
}
11
11
12
-
function set_config_setting(config, name, value) {
13
-
config[name] = value;
14
-
update_config(config);
15
-
return true;
16
-
}
12
+
localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG));
13
+
return DEFAULT_CONFIG;
14
+
})();
17
15
18
-
function clear_config_setting(config, name) {
19
-
if (!config[name]) return false;
20
-
delete config[name];
21
-
update_config(config);
22
-
return true;
16
+
function saveConfig() {
17
+
localStorage.setItem("config", JSON.stringify(config));
23
18
}
24
19
25
-
function update_config(config) {
26
-
localStorage.setItem("config", JSON.stringify(config));
27
-
}
20
+
document.getElementById("toggle-crt").addEventListener("click", () => {
21
+
config.crt = !config.crt;
22
+
setCRT(config.crt);
23
+
saveConfig();
24
+
});
28
25
29
-
const config = JSON.parse(localStorage.getItem("config")) || {};
30
-
if (config) {
31
-
if (config.disable_crt) {
32
-
document.querySelector('div#overlay').setAttribute("hidden", true);
33
-
document.body.style.textShadow = "none";
34
-
document.getElementById('toggle-crt').classList.add("disabled");
35
-
}
26
+
function setCRT(/** @type boolean */ enabled) {
27
+
if (enabled) {
28
+
document.body.classList.add("crt");
29
+
} else {
30
+
document.body.classList.remove("crt");
31
+
}
32
+
document.getElementById('toggle-crt').className = enabled ? "" : "disabled";
36
33
}
37
-
38
-
document.getElementById("toggle-crt").addEventListener("click", () => {
39
-
toggle_config_setting(config, "disable_crt");
40
-
document.querySelector('div#overlay').toggleAttribute("hidden");
41
-
document.getElementById('toggle-crt').className = config.disable_crt ? "disabled" : "";
42
-
});
+16
public/script/index.js
+16
public/script/index.js
···
1
+
const hexPrimary = document.getElementById("hex-primary");
2
+
const hexSecondary = document.getElementById("hex-secondary");
3
+
const hexTertiary = document.getElementById("hex-tertiary");
4
+
5
+
function updateHexColours() {
6
+
const style = getComputedStyle(document.body);
7
+
hexPrimary.textContent = style.getPropertyValue('--primary');
8
+
hexSecondary.textContent = style.getPropertyValue('--secondary');
9
+
hexTertiary.textContent = style.getPropertyValue('--tertiary');
10
+
}
11
+
12
+
updateHexColours();
13
+
14
+
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
15
+
updateHexColours();
16
+
});
+22
-7
public/style/colours.css
+22
-7
public/style/colours.css
···
1
1
:root {
2
-
--primary: #b7fd49;
3
-
--secondary: #f8e05b;
4
-
--tertiary: #f788fe;
5
-
--links: #5eb2ff;
2
+
--background: #080808;
3
+
--on-background: #f0f0f0;
4
+
5
+
--primary: #b7fd49;
6
+
--secondary: #f8e05b;
7
+
--tertiary: #f788fe;
8
+
--links: #5eb2ff;
9
+
}
10
+
11
+
@media (prefers-color-scheme: light) {
12
+
:root {
13
+
--background: #ffffff;
14
+
--on-background: #101010;
15
+
16
+
--primary: #6d9e23;
17
+
--secondary: #a5911e;
18
+
--tertiary: #a92cb1;
19
+
--links: #3ba1ff;
20
+
}
6
21
}
7
22
8
23
.col-primary {
9
-
color: var(--primary);
24
+
color: var(--primary);
10
25
}
11
26
12
27
.col-secondary {
13
-
color: var(--secondary);
28
+
color: var(--secondary);
14
29
}
15
30
16
31
.col-tertiary {
17
-
color: var(--tertiary);
32
+
color: var(--tertiary);
18
33
}
19
34
+122
-120
public/style/header.css
+122
-120
public/style/header.css
···
1
1
header {
2
-
position: fixed;
3
-
top: 0;
4
-
left: 0;
5
-
width: 100vw;
6
-
border-bottom: 1px solid #888;
7
-
background-color: #080808;
8
-
z-index: 1;
2
+
position: fixed;
3
+
top: 0;
4
+
left: 0;
5
+
width: 100vw;
6
+
border-bottom: 1px solid #8888;
7
+
background-color: var(--background);
8
+
z-index: 1;
9
+
10
+
transition: color .2s, background-color .2s;
9
11
}
10
12
11
13
nav {
12
-
width: min(calc(100% - 4rem), 720px);
13
-
height: 3em;
14
-
margin: auto;
15
-
padding: 0 1em;
16
-
display: flex;
17
-
flex-direction: row;
18
-
gap: .8em;
19
-
align-items: center;
14
+
width: min(calc(100% - 4rem), 720px);
15
+
height: 3em;
16
+
margin: auto;
17
+
padding: 0 1em;
18
+
display: flex;
19
+
flex-direction: row;
20
+
gap: .8em;
21
+
align-items: center;
20
22
}
21
23
22
24
#header-home {
23
-
flex-grow: 1;
24
-
display: flex;
25
-
gap: .5em;
26
-
cursor: pointer;
25
+
flex-grow: 1;
26
+
display: flex;
27
+
gap: .5em;
28
+
cursor: pointer;
27
29
}
28
30
29
31
img#header-icon {
30
-
width: 2em;
31
-
height: 2em;
32
-
margin: .5em;
33
-
display: block;
32
+
width: 2em;
33
+
height: 2em;
34
+
margin: .5em;
35
+
display: block;
34
36
}
35
37
36
38
#header-text {
37
-
width: 11em;
38
-
display: flex;
39
-
flex-direction: column;
40
-
justify-content: center;
41
-
flex-grow: 1;
39
+
width: 11em;
40
+
display: flex;
41
+
flex-direction: column;
42
+
justify-content: center;
43
+
flex-grow: 1;
42
44
}
43
45
44
46
#header-text h1 {
45
-
margin: 0;
46
-
font-size: 1em;
47
+
margin: 0;
48
+
font-size: 1em;
47
49
}
48
50
49
51
#header-text h2 {
50
-
height: 1.2em;
51
-
line-height: 1.2em;
52
-
margin: 0;
53
-
font-size: .7em;
54
-
color: #bbb;
52
+
height: 1.2em;
53
+
line-height: 1.2em;
54
+
margin: 0;
55
+
font-size: .7em;
56
+
color: #bbb;
55
57
}
56
58
57
59
#header-links-toggle {
58
-
width: 3em;
59
-
height: 3em;
60
-
display: none;
61
-
justify-content: center;
62
-
align-items: center;
63
-
transition: background-color .2s;
60
+
width: 3em;
61
+
height: 3em;
62
+
display: none;
63
+
justify-content: center;
64
+
align-items: center;
65
+
transition: background-color .2s;
64
66
}
65
67
66
68
#header-links-toggle:hover {
67
-
background-color: #fff2;
69
+
background-color: #fff2;
68
70
}
69
71
70
72
header ul#header-links {
71
-
margin: 0;
72
-
padding: 0;
73
-
display: flex;
74
-
flex-direction: row;
75
-
gap: .5em;
76
-
align-items: center;
73
+
margin: 0;
74
+
padding: 0;
75
+
display: flex;
76
+
flex-direction: row;
77
+
gap: .5em;
78
+
align-items: center;
77
79
}
78
80
79
81
header ul li {
80
-
list-style: none;
82
+
list-style: none;
81
83
}
82
84
83
85
header ul li a,
84
86
header ul li span {
85
-
padding: .4em .5em;
86
-
border: 1px solid var(--links);
87
-
color: var(--links);
88
-
border-radius: 2px;
89
-
background-color: transparent;
90
-
transition-property: color, border-color, background-color;
91
-
transition-duration: .2s;
92
-
animation-delay: 0s;
93
-
animation: list-item-fadein .2s forwards;
94
-
opacity: 0;
95
-
text-decoration: none;
87
+
padding: .4em .5em;
88
+
border: 1px solid var(--links);
89
+
color: var(--links);
90
+
border-radius: 2px;
91
+
background-color: transparent;
92
+
transition-property: color, border-color, background-color;
93
+
transition-duration: .2s;
94
+
animation-delay: 0s;
95
+
animation: list-item-fadein .2s forwards;
96
+
opacity: 0;
97
+
text-decoration: none;
96
98
}
97
99
98
100
header ul li span {
99
-
color: #aaa;
100
-
border-color: #aaa;
101
-
cursor: default;
102
-
text-decoration: none;
101
+
color: #aaa;
102
+
border-color: #aaa;
103
+
cursor: default;
104
+
text-decoration: none;
103
105
}
104
106
105
107
header ul li a:hover {
106
-
color: #eee;
107
-
border-color: #eee;
108
-
background-color: var(--links) !important;
109
-
text-decoration: none;
108
+
color: #eee;
109
+
border-color: #eee;
110
+
background-color: var(--links) !important;
111
+
text-decoration: none;
110
112
}
111
113
112
114
113
115
#toggle-crt a {
114
-
color: var(--primary);
115
-
border-color: var(--primary);
116
-
opacity: 1;
116
+
color: var(--primary);
117
+
border-color: var(--primary);
118
+
opacity: 1;
117
119
}
118
120
119
121
#toggle-crt a:hover {
120
-
color: #111;
121
-
background-color: var(--primary) !important;
122
+
color: #111;
123
+
background-color: var(--primary) !important;
122
124
}
123
125
124
126
#toggle-crt.disabled a {
125
-
opacity: .5 !important;
127
+
opacity: .5 !important;
126
128
}
127
129
128
130
@media screen and (max-width: 780px) {
129
-
header {
130
-
font-size: 14px;
131
-
}
131
+
header {
132
+
font-size: 14px;
133
+
}
132
134
133
-
nav {
134
-
width: calc(100vw - 2rem);
135
-
margin: 0;
136
-
}
135
+
nav {
136
+
width: calc(100vw - 2rem);
137
+
margin: 0;
138
+
}
137
139
138
-
div#header-text {
139
-
flex-grow: 1;
140
-
}
140
+
div#header-text {
141
+
flex-grow: 1;
142
+
}
141
143
142
-
a#header-links-toggle {
143
-
display: flex;
144
-
}
144
+
a#header-links-toggle {
145
+
display: flex;
146
+
}
145
147
146
-
header ul#header-links {
147
-
position: fixed;
148
-
left: 0;
149
-
top: 2.7rem;
150
-
width: calc(100vw - 2rem);
151
-
padding: 1rem;
152
-
flex-direction: column;
153
-
gap: 1rem;
154
-
border-bottom: 1px solid #888;
155
-
background: #080808;
156
-
display: none;
157
-
}
148
+
header ul#header-links {
149
+
position: fixed;
150
+
left: 0;
151
+
top: 2.7rem;
152
+
width: calc(100vw - 2rem);
153
+
padding: 1rem;
154
+
flex-direction: column;
155
+
gap: 1rem;
156
+
border-bottom: 1px solid #888;
157
+
background: #080808;
158
+
display: none;
159
+
}
158
160
159
-
header ul#header-links.open {
160
-
display: flex;
161
-
}
161
+
header ul#header-links.open {
162
+
display: flex;
163
+
}
162
164
163
-
ul#header-links li {
164
-
width: 100%;
165
-
}
165
+
ul#header-links li {
166
+
width: 100%;
167
+
}
166
168
167
-
ul#header-links li a,
168
-
ul#header-links li span {
169
-
margin: 0;
170
-
display: block;
171
-
font-size: 1em;
172
-
text-align: center;
173
-
}
169
+
ul#header-links li a,
170
+
ul#header-links li span {
171
+
margin: 0;
172
+
display: block;
173
+
font-size: 1em;
174
+
text-align: center;
175
+
}
174
176
}
175
177
176
178
@keyframes list-item-fadein {
177
-
from {
178
-
opacity: 1;
179
-
background: #fff8;
180
-
}
179
+
from {
180
+
opacity: 1;
181
+
background: #fff8;
182
+
}
181
183
182
-
to {
183
-
opacity: 1;
184
-
background: transparent;
185
-
}
184
+
to {
185
+
opacity: 1;
186
+
background: transparent;
187
+
}
186
188
}
187
189
+61
-61
public/style/index.css
+61
-61
public/style/index.css
···
1
1
main {
2
-
width: min(calc(100% - 4rem), 720px);
3
-
min-height: calc(100vh - 10.3rem);
4
-
margin: 0 auto 2rem auto;
5
-
padding-top: 4rem;
2
+
width: min(calc(100% - 4rem), 720px);
3
+
min-height: calc(100vh - 10.3rem);
4
+
margin: 0 auto 2rem auto;
5
+
padding-top: 4rem;
6
6
}
7
7
8
8
main h1 {
9
-
line-height: 3rem;
10
-
color: var(--primary);
9
+
line-height: 3rem;
10
+
color: var(--primary);
11
11
}
12
12
13
13
main h2 {
14
-
color: var(--secondary);
14
+
color: var(--secondary);
15
15
}
16
16
17
17
main h3 {
18
-
color: var(--tertiary);
18
+
color: var(--tertiary);
19
19
}
20
20
21
21
div#me_irl {
22
-
width: fit-content;
23
-
height: fit-content;
24
-
border: 2px solid white;
22
+
width: fit-content;
23
+
height: fit-content;
24
+
border: 2px solid white;
25
25
}
26
26
27
27
div#me_irl img {
28
-
display: block;
28
+
display: block;
29
29
}
30
30
31
31
div#me_irl::before {
32
-
content: "";
33
-
position: absolute;
34
-
width: 104px;
35
-
height: 104px;
36
-
transform: translate(2px, 2px);
37
-
background-image: linear-gradient(to top right,
38
-
var(--primary),
39
-
var(--secondary));
40
-
z-index: -1;
32
+
content: "";
33
+
position: absolute;
34
+
width: 104px;
35
+
height: 104px;
36
+
transform: translate(2px, 2px);
37
+
background-image: linear-gradient(to top right,
38
+
var(--primary),
39
+
var(--secondary));
40
+
z-index: -1;
41
41
}
42
42
43
43
h1,
···
49
49
p,
50
50
small,
51
51
blockquote {
52
-
transition: background-color 0.1s;
52
+
transition: background-color 0.1s;
53
53
}
54
54
55
55
h1 a,
···
58
58
h4 a,
59
59
h5 a,
60
60
h6 a {
61
-
color: inherit;
61
+
color: inherit;
62
62
}
63
63
64
64
h1 a:hover,
···
67
67
h4 a:hover,
68
68
h5 a:hover,
69
69
h6 a:hover {
70
-
text-decoration: none;
70
+
text-decoration: none;
71
71
}
72
72
73
73
main h1:hover,
···
79
79
main p:hover,
80
80
main small:hover,
81
81
main blockquote:hover {
82
-
background-color: #fff1;
82
+
background-color: #fff1;
83
83
}
84
84
85
85
blockquote {
86
-
margin: 1rem 0;
87
-
padding: 0 2.5rem;
86
+
margin: 1rem 0;
87
+
padding: 0 2.5rem;
88
88
}
89
89
90
90
hr {
91
-
text-align: center;
92
-
line-height: 0px;
93
-
border-width: 1px 0 0 0;
94
-
border-color: #888f;
95
-
margin: 1.5em 0;
96
-
overflow: visible;
91
+
text-align: center;
92
+
line-height: 0px;
93
+
border-width: 1px 0 0 0;
94
+
border-color: #888f;
95
+
margin: 1.5em 0;
96
+
overflow: visible;
97
97
}
98
98
99
99
ul.links {
100
-
display: flex;
101
-
gap: 1em .5em;
102
-
flex-wrap: wrap;
100
+
display: flex;
101
+
gap: 1em .5em;
102
+
flex-wrap: wrap;
103
103
}
104
104
105
105
ul.links li {
106
-
list-style: none;
106
+
list-style: none;
107
107
}
108
108
109
109
ul.links li a {
110
-
padding: .4em .5em;
111
-
border: 1px solid var(--links);
112
-
color: var(--links);
113
-
border-radius: 2px;
114
-
background-color: transparent;
115
-
transition-property: color, border-color, background-color;
116
-
transition-duration: .2s;
117
-
animation-delay: 0s;
118
-
animation: list-item-fadein .2s forwards;
119
-
opacity: 0;
110
+
padding: .4em .5em;
111
+
border: 1px solid var(--links);
112
+
color: var(--links);
113
+
border-radius: 2px;
114
+
background-color: transparent;
115
+
transition-property: color, border-color, background-color;
116
+
transition-duration: .2s;
117
+
animation-delay: 0s;
118
+
animation: list-item-fadein .2s forwards;
119
+
opacity: 0;
120
120
}
121
121
122
122
ul.links li a:hover {
123
-
color: #eee;
124
-
border-color: #eee;
125
-
background-color: var(--links) !important;
126
-
text-decoration: none;
127
-
box-shadow: 0 0 1em var(--links);
123
+
color: #eee;
124
+
border-color: #eee;
125
+
background-color: var(--links) !important;
126
+
text-decoration: none;
127
+
box-shadow: 0 0 1em var(--links);
128
128
}
129
129
130
130
div#web-buttons {
131
-
margin: 2rem 0;
131
+
margin: 2rem 0;
132
132
}
133
133
134
134
#web-buttons a {
135
-
text-decoration: none;
135
+
text-decoration: none;
136
136
}
137
137
138
138
#web-buttons img {
139
-
image-rendering: auto;
140
-
image-rendering: crisp-edges;
141
-
image-rendering: pixelated;
139
+
image-rendering: auto;
140
+
image-rendering: crisp-edges;
141
+
image-rendering: pixelated;
142
142
}
143
143
144
144
#web-buttons img:hover {
145
-
margin: -1px;
146
-
border: 1px solid #eee;
147
-
transform: translate(-2px, -2px);
148
-
box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
145
+
margin: -1px;
146
+
border: 1px solid #eee;
147
+
transform: translate(-2px, -2px);
148
+
box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
149
149
}
150
150
+31
-4
public/style/main.css
+31
-4
public/style/main.css
···
14
14
body {
15
15
margin: 0;
16
16
padding: 0;
17
-
background: #080808;
18
-
color: #eee;
17
+
background: var(--background);
18
+
color: var(--on-background);
19
19
font-family: "Monaspace Argon", monospace;
20
20
font-size: 18px;
21
-
text-shadow: 0 0 3em;
22
21
scroll-behavior: smooth;
22
+
23
+
transition: color .2s, background-color .2s;
23
24
}
24
25
25
-
main {
26
+
body.crt #overlay {
27
+
display: block;
26
28
}
27
29
28
30
a {
···
118
120
left: 0;
119
121
width: 100vw;
120
122
height: 100vh;
123
+
display: none;
121
124
background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
122
125
background-size: 100vw .2em;
123
126
background-repeat: repeat;
···
136
139
}
137
140
}
138
141
142
+
143
+
@media (prefers-color-scheme: light) {
144
+
a.link-button:hover {
145
+
box-shadow: none;
146
+
}
147
+
148
+
@keyframes list-item-fadein {
149
+
from {
150
+
opacity: 1;
151
+
background: var(--links);
152
+
}
153
+
154
+
to {
155
+
opacity: 1;
156
+
background: transparent;
157
+
}
158
+
}
159
+
}
160
+
161
+
@media (prefers-color-scheme: dark) {
162
+
body.crt {
163
+
text-shadow: 0 0 3em;
164
+
}
165
+
}
+5
-1
public/style/music-gateway.css
+5
-1
public/style/music-gateway.css
···
17
17
font-family: "Monaspace Argon", monospace;
18
18
}
19
19
20
+
header {
21
+
background-color: #111;
22
+
}
23
+
20
24
#background {
21
25
position: fixed;
22
26
top: 0;
···
258
262
259
263
#title,
260
264
#artist {
261
-
text-shadow: 0 .05em 2px #0004
265
+
text-shadow: 0 .05em 2px #0004;
262
266
}
263
267
264
268
#type {
+66
-83
public/style/music.css
+66
-83
public/style/music.css
···
1
1
main {
2
-
width: min(calc(100% - 4rem), 720px);
3
-
min-height: calc(100vh - 10.3rem);
4
-
margin: 0 auto 2rem auto;
5
-
padding-top: 4rem;
2
+
width: min(calc(100% - 4rem), 720px);
3
+
min-height: calc(100vh - 10.3rem);
4
+
margin: 0 auto 2rem auto;
5
+
padding-top: 4rem;
6
6
}
7
7
8
8
main nav {
9
-
margin: -1rem .5rem 1rem .5rem;
9
+
margin: -1rem .5rem 1rem .5rem;
10
10
}
11
11
12
12
div.music {
13
-
margin-bottom: 1rem;
14
-
padding: 1.5rem;
15
-
display: flex;
16
-
flex-direction: row;
17
-
gap: 1.5em;
18
-
border: 1px solid #222;
19
-
border-radius: 4px;
20
-
background-color: #ffffff08;
21
-
transition: background-color .1s;
22
-
text-decoration: none;
23
-
cursor: pointer;
13
+
margin-bottom: 1rem;
14
+
padding: 1.5rem;
15
+
display: flex;
16
+
flex-direction: row;
17
+
gap: 1.5em;
18
+
border: 1px solid #8882;
19
+
border-radius: 4px;
20
+
background-color: #ffffff08;
21
+
transition: background-color .1s;
22
+
text-decoration: none;
23
+
cursor: pointer;
24
24
}
25
25
26
26
div.music:hover {
27
-
background-color: #fff1;
27
+
background-color: #fff1;
28
28
}
29
29
30
30
div.music a {
31
-
text-decoration: none;
31
+
text-decoration: none;
32
32
}
33
33
34
34
.music h1:hover,
35
35
.music h2:hover,
36
36
.music h3:hover {
37
-
background: initial;
37
+
background: initial;
38
38
}
39
39
40
40
.music-artwork img {
41
-
border: 1px solid #888;
41
+
border: 1px solid #8888;
42
42
}
43
43
44
44
.music-title {
45
-
margin: 0;
46
-
color: #eee;
47
-
font-size: 1.6em;
48
-
line-height: 1.6em;
45
+
margin: 0;
46
+
color: var(--on-background);
47
+
font-size: 1.6em;
48
+
line-height: 1.6em;
49
+
}
50
+
.music-title a {
51
+
color: inherit;
52
+
transition: color .2s;
49
53
}
50
54
51
55
.music-year {
52
-
color: #888;
56
+
color: #888;
53
57
}
54
58
55
59
.music-artist {
56
-
margin: -.5rem 0 0 0;
57
-
font-size: 1em;
58
-
color: #aaa;
60
+
margin: -.5rem 0 0 0;
61
+
font-size: 1em;
62
+
color: #aaa;
59
63
}
60
64
61
65
h3[class^=music-type] {
62
-
margin: 0 0 1rem 0;
63
-
font-size: .8em;
64
-
color: #eee;
66
+
margin: 0 0 1rem 0;
67
+
font-size: .8em;
68
+
color: #eee;
69
+
transition: color .2s;
65
70
}
66
71
67
72
h3.music-type-single {
68
-
color: var(--tertiary);
73
+
color: var(--tertiary);
69
74
}
70
75
71
76
h3.music-type-compilation {
72
-
color: var(--secondary);
77
+
color: var(--secondary);
73
78
}
74
79
75
80
h3.music-type-album {
76
-
color: var(--primary);
81
+
color: var(--primary);
77
82
}
78
83
79
84
h3.music-type-upcoming {
80
-
color: #f47070;
85
+
color: #f47070;
81
86
}
82
87
83
88
.music-links {
84
-
width: fit-content;
85
-
margin: .5em 0;
86
-
padding: 0;
87
-
display: flex;
88
-
gap: .5rem;
89
-
flex-wrap: wrap;
90
-
line-height: 1.7em;
91
-
justify-content: center;
89
+
width: fit-content;
90
+
margin: .5em 0;
91
+
padding: 0;
92
+
display: flex;
93
+
gap: .5rem;
94
+
flex-wrap: wrap;
95
+
line-height: 1.7em;
96
+
justify-content: center;
92
97
}
93
98
94
99
.music-links li {
95
-
list-style: none;
96
-
}
97
-
98
-
/*
99
-
.music-links li a {
100
-
padding: .2em .5em;
101
-
border: 1px solid #65b4fd;
102
-
color: #65b4fd;
103
-
border-radius: 2px;
104
-
background-color: transparent;
105
-
transition-property: color, border-color, background-color;
106
-
transition-duration: .2s;
107
-
animation: list-item-fadein .2s forwards;
108
-
animation-delay: 0s;
109
-
opacity: 0;
110
-
}
111
-
112
-
.music-links li a:hover {
113
-
color: #eee;
114
-
border-color: #eee;
115
-
background-color: var(--links) !important;
116
-
text-decoration: none;
100
+
list-style: none;
117
101
}
118
-
*/
119
102
120
103
h2.question {
121
-
margin: 1rem 0;
122
-
padding: 1rem 1.5rem;
123
-
border-radius: 4px;
124
-
cursor: pointer;
104
+
margin: 1rem 0;
105
+
padding: 1rem 1.5rem;
106
+
border-radius: 4px;
107
+
cursor: pointer;
125
108
}
126
109
127
110
div.answer {
128
-
margin: -1rem 0 1rem 0;
129
-
padding: .5em 1.5em;
130
-
border-radius: 4px;
111
+
margin: -1rem 0 1rem 0;
112
+
padding: .5em 1.5em;
113
+
border-radius: 4px;
131
114
}
132
115
133
116
@media screen and (max-width: 740px) {
134
-
div.music {
135
-
flex-direction: column;
136
-
}
117
+
div.music {
118
+
flex-direction: column;
119
+
}
137
120
138
-
.music-artwork,
139
-
.music-details {
140
-
text-align: center;
141
-
align-items: center;
142
-
display: flex;
143
-
flex-direction: column;
144
-
}
121
+
.music-artwork,
122
+
.music-details {
123
+
text-align: center;
124
+
align-items: center;
125
+
display: flex;
126
+
flex-direction: column;
127
+
}
145
128
}
146
129
+5
-3
views/index.html
+5
-3
views/index.html
···
16
16
17
17
<link rel="me" href="https://ice.arimelody.me/@ari">
18
18
<link rel="me" href="https://wetdry.world/@ari">
19
+
20
+
<script type="module" src="/script/index.js" defer> </script>
19
21
{{end}}
20
22
21
23
{{define "content"}}
···
66
68
<strong>my colours 🌈</strong>
67
69
</p>
68
70
<ul>
69
-
<li>primary: <span class="col-primary">#b7fd49</span></li>
70
-
<li>secondary: <span class="col-secondary">#f8e05b</span></li>
71
-
<li>tertiary: <span class="col-tertiary">#f788fe</span></li>
71
+
<li>primary: <span class="col-primary" id="hex-primary">#b7fd49</span></li>
72
+
<li>secondary: <span class="col-secondary" id="hex-secondary">#f8e05b</span></li>
73
+
<li>tertiary: <span class="col-tertiary" id="hex-tertiary">#f788fe</span></li>
72
74
</ul>
73
75
74
76
<p>