home to your local SPACEGIRL 💫 arimelody.space
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

merge main into dev

+355 -315
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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>