My personal website

chore: fmt

Signed-off-by: Sefa Eyeoglu <contact@scrumplex.net>

+290 -268
+6 -4
src/icons/icons.css
··· 1 1 @font-face { 2 2 font-family: "icons"; 3 - src: url("./icons.eot?2ebd8d88980e5d50337b1ca604eed179#iefix") format("embedded-opentype"), 4 - url("./icons.woff2?2ebd8d88980e5d50337b1ca604eed179") format("woff2"), 5 - url("./icons.woff?2ebd8d88980e5d50337b1ca604eed179") format("woff"); 3 + src: url("./icons.eot?2ebd8d88980e5d50337b1ca604eed179#iefix") 4 + format("embedded-opentype"), 5 + url("./icons.woff2?2ebd8d88980e5d50337b1ca604eed179") format("woff2"), 6 + url("./icons.woff?2ebd8d88980e5d50337b1ca604eed179") format("woff"); 6 7 } 7 8 8 - i[class^="icon-"]:before, i[class*=" icon-"]:before { 9 + i[class^="icon-"]:before, 10 + i[class*=" icon-"]:before { 9 11 font-family: icons !important; 10 12 font-style: normal; 11 13 font-weight: normal !important;
+82 -100
src/icons/icons.html
··· 1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 - <head> 4 - <meta charset="UTF-8"> 5 - <title>icons</title> 3 + <head> 4 + <meta charset="UTF-8" /> 5 + <title>icons</title> 6 6 7 - <style> 8 - body { 9 - font-family: sans-serif; 10 - margin: 0; 11 - padding: 10px 20px; 12 - text-align: center; 13 - } 14 - .preview { 15 - width: 100px; 16 - display: inline-block; 17 - margin: 10px; 18 - } 19 - .preview .inner { 20 - display: inline-block; 21 - width: 100%; 22 - text-align: center; 23 - background: #f5f5f5; 24 - -webkit-border-radius: 3px 3px 0 0; 25 - -moz-border-radius: 3px 3px 0 0; 26 - border-radius: 3px 3px 0 0; 27 - } 28 - .preview .inner { 29 - line-height: 85px; 30 - font-size: 40px; 31 - color: #333; 32 - } 33 - .label { 34 - display: inline-block; 35 - width: 100%; 36 - box-sizing: border-box; 37 - padding: 5px; 38 - font-size: 10px; 39 - font-family: Monaco, monospace; 40 - color: #666; 41 - white-space: nowrap; 42 - overflow: hidden; 43 - text-overflow: ellipsis; 44 - background: #ddd; 45 - -webkit-border-radius: 0 0 3px 3px; 46 - -moz-border-radius: 0 0 3px 3px; 47 - border-radius: 0 0 3px 3px; 48 - color: #666; 49 - } 50 - </style> 51 - 52 - <link rel="stylesheet" type="text/css" href="icons.css" /> 53 - </head> 54 - <body> 55 - 56 - <h1>icons</h1> 7 + <style> 8 + body { 9 + font-family: sans-serif; 10 + margin: 0; 11 + padding: 10px 20px; 12 + text-align: center; 13 + } 14 + .preview { 15 + width: 100px; 16 + display: inline-block; 17 + margin: 10px; 18 + } 19 + .preview .inner { 20 + display: inline-block; 21 + width: 100%; 22 + text-align: center; 23 + background: #f5f5f5; 24 + -webkit-border-radius: 3px 3px 0 0; 25 + -moz-border-radius: 3px 3px 0 0; 26 + border-radius: 3px 3px 0 0; 27 + } 28 + .preview .inner { 29 + line-height: 85px; 30 + font-size: 40px; 31 + color: #333; 32 + } 33 + .label { 34 + display: inline-block; 35 + width: 100%; 36 + box-sizing: border-box; 37 + padding: 5px; 38 + font-size: 10px; 39 + font-family: Monaco, monospace; 40 + color: #666; 41 + white-space: nowrap; 42 + overflow: hidden; 43 + text-overflow: ellipsis; 44 + background: #ddd; 45 + -webkit-border-radius: 0 0 3px 3px; 46 + -moz-border-radius: 0 0 3px 3px; 47 + border-radius: 0 0 3px 3px; 48 + color: #666; 49 + } 50 + </style> 57 51 52 + <link rel="stylesheet" type="text/css" href="icons.css" /> 53 + </head> 54 + <body> 55 + <h1>icons</h1> 58 56 59 57 <div class="preview"> 60 58 <span class="inner"> 61 59 <i class="icon icon-00-baseline"></i> 62 60 </span> 63 - <br> 64 - <span class='label'>00-baseline</span> 61 + <br /> 62 + <span class="label">00-baseline</span> 65 63 </div> 66 - 67 64 68 65 <div class="preview"> 69 66 <span class="inner"> 70 67 <i class="icon icon-archlinux"></i> 71 68 </span> 72 - <br> 73 - <span class='label'>archlinux</span> 69 + <br /> 70 + <span class="label">archlinux</span> 74 71 </div> 75 - 76 72 77 73 <div class="preview"> 78 74 <span class="inner"> 79 75 <i class="icon icon-codeberg"></i> 80 76 </span> 81 - <br> 82 - <span class='label'>codeberg</span> 77 + <br /> 78 + <span class="label">codeberg</span> 83 79 </div> 84 - 85 80 86 81 <div class="preview"> 87 82 <span class="inner"> 88 83 <i class="icon icon-github"></i> 89 84 </span> 90 - <br> 91 - <span class='label'>github</span> 85 + <br /> 86 + <span class="label">github</span> 92 87 </div> 93 - 94 88 95 89 <div class="preview"> 96 90 <span class="inner"> 97 91 <i class="icon icon-gitlab"></i> 98 92 </span> 99 - <br> 100 - <span class='label'>gitlab</span> 93 + <br /> 94 + <span class="label">gitlab</span> 101 95 </div> 102 - 103 96 104 97 <div class="preview"> 105 98 <span class="inner"> 106 99 <i class="icon icon-ko-fi"></i> 107 100 </span> 108 - <br> 109 - <span class='label'>ko-fi</span> 101 + <br /> 102 + <span class="label">ko-fi</span> 110 103 </div> 111 - 112 104 113 105 <div class="preview"> 114 106 <span class="inner"> 115 107 <i class="icon icon-liberapay"></i> 116 108 </span> 117 - <br> 118 - <span class='label'>liberapay</span> 109 + <br /> 110 + <span class="label">liberapay</span> 119 111 </div> 120 - 121 112 122 113 <div class="preview"> 123 114 <span class="inner"> 124 115 <i class="icon icon-mail"></i> 125 116 </span> 126 - <br> 127 - <span class='label'>mail</span> 117 + <br /> 118 + <span class="label">mail</span> 128 119 </div> 129 120 130 - 131 121 <div class="preview"> 132 122 <span class="inner"> 133 123 <i class="icon icon-matrix"></i> 134 124 </span> 135 - <br> 136 - <span class='label'>matrix</span> 125 + <br /> 126 + <span class="label">matrix</span> 137 127 </div> 138 - 139 128 140 129 <div class="preview"> 141 130 <span class="inner"> 142 131 <i class="icon icon-new_tab"></i> 143 132 </span> 144 - <br> 145 - <span class='label'>new_tab</span> 133 + <br /> 134 + <span class="label">new_tab</span> 146 135 </div> 147 - 148 136 149 137 <div class="preview"> 150 138 <span class="inner"> 151 139 <i class="icon icon-paypal"></i> 152 140 </span> 153 - <br> 154 - <span class='label'>paypal</span> 141 + <br /> 142 + <span class="label">paypal</span> 155 143 </div> 156 - 157 144 158 145 <div class="preview"> 159 146 <span class="inner"> 160 147 <i class="icon icon-phone"></i> 161 148 </span> 162 - <br> 163 - <span class='label'>phone</span> 149 + <br /> 150 + <span class="label">phone</span> 164 151 </div> 165 - 166 152 167 153 <div class="preview"> 168 154 <span class="inner"> 169 155 <i class="icon icon-teamspeak"></i> 170 156 </span> 171 - <br> 172 - <span class='label'>teamspeak</span> 157 + <br /> 158 + <span class="label">teamspeak</span> 173 159 </div> 174 - 175 160 176 161 <div class="preview"> 177 162 <span class="inner"> 178 163 <i class="icon icon-telegram"></i> 179 164 </span> 180 - <br> 181 - <span class='label'>telegram</span> 165 + <br /> 166 + <span class="label">telegram</span> 182 167 </div> 183 - 184 168 185 169 <div class="preview"> 186 170 <span class="inner"> 187 171 <i class="icon icon-wire"></i> 188 172 </span> 189 - <br> 190 - <span class='label'>wire</span> 173 + <br /> 174 + <span class="label">wire</span> 191 175 </div> 192 - 193 - 194 - </body> 176 + </body> 195 177 </html>
+1 -1
src/icons/icons.json
··· 14 14 "teamspeak": 61709, 15 15 "telegram": 61710, 16 16 "wire": 61711 17 - } 17 + }
+60 -60
src/icons/icons.ts
··· 1 1 export type IconsId = 2 - | "00-baseline" 3 - | "archlinux" 4 - | "codeberg" 5 - | "github" 6 - | "gitlab" 7 - | "ko-fi" 8 - | "liberapay" 9 - | "mail" 10 - | "matrix" 11 - | "new_tab" 12 - | "paypal" 13 - | "phone" 14 - | "teamspeak" 15 - | "telegram" 16 - | "wire"; 2 + | "00-baseline" 3 + | "archlinux" 4 + | "codeberg" 5 + | "github" 6 + | "gitlab" 7 + | "ko-fi" 8 + | "liberapay" 9 + | "mail" 10 + | "matrix" 11 + | "new_tab" 12 + | "paypal" 13 + | "phone" 14 + | "teamspeak" 15 + | "telegram" 16 + | "wire"; 17 17 18 18 export type IconsKey = 19 - | "i00Baseline" 20 - | "Archlinux" 21 - | "Codeberg" 22 - | "Github" 23 - | "Gitlab" 24 - | "KoFi" 25 - | "Liberapay" 26 - | "Mail" 27 - | "Matrix" 28 - | "NewTab" 29 - | "Paypal" 30 - | "Phone" 31 - | "Teamspeak" 32 - | "Telegram" 33 - | "Wire"; 19 + | "i00Baseline" 20 + | "Archlinux" 21 + | "Codeberg" 22 + | "Github" 23 + | "Gitlab" 24 + | "KoFi" 25 + | "Liberapay" 26 + | "Mail" 27 + | "Matrix" 28 + | "NewTab" 29 + | "Paypal" 30 + | "Phone" 31 + | "Teamspeak" 32 + | "Telegram" 33 + | "Wire"; 34 34 35 35 export enum Icons { 36 - i00Baseline = "00-baseline", 37 - Archlinux = "archlinux", 38 - Codeberg = "codeberg", 39 - Github = "github", 40 - Gitlab = "gitlab", 41 - KoFi = "ko-fi", 42 - Liberapay = "liberapay", 43 - Mail = "mail", 44 - Matrix = "matrix", 45 - NewTab = "new_tab", 46 - Paypal = "paypal", 47 - Phone = "phone", 48 - Teamspeak = "teamspeak", 49 - Telegram = "telegram", 50 - Wire = "wire", 36 + i00Baseline = "00-baseline", 37 + Archlinux = "archlinux", 38 + Codeberg = "codeberg", 39 + Github = "github", 40 + Gitlab = "gitlab", 41 + KoFi = "ko-fi", 42 + Liberapay = "liberapay", 43 + Mail = "mail", 44 + Matrix = "matrix", 45 + NewTab = "new_tab", 46 + Paypal = "paypal", 47 + Phone = "phone", 48 + Teamspeak = "teamspeak", 49 + Telegram = "telegram", 50 + Wire = "wire", 51 51 } 52 52 53 53 export const ICONS_CODEPOINTS: { [key in Icons]: string } = { 54 - [Icons.i00Baseline]: "61697", 55 - [Icons.Archlinux]: "61698", 56 - [Icons.Codeberg]: "61699", 57 - [Icons.Github]: "61700", 58 - [Icons.Gitlab]: "61701", 59 - [Icons.KoFi]: "61702", 60 - [Icons.Liberapay]: "61703", 61 - [Icons.Mail]: "61704", 62 - [Icons.Matrix]: "61705", 63 - [Icons.NewTab]: "61706", 64 - [Icons.Paypal]: "61707", 65 - [Icons.Phone]: "61708", 66 - [Icons.Teamspeak]: "61709", 67 - [Icons.Telegram]: "61710", 68 - [Icons.Wire]: "61711", 54 + [Icons.i00Baseline]: "61697", 55 + [Icons.Archlinux]: "61698", 56 + [Icons.Codeberg]: "61699", 57 + [Icons.Github]: "61700", 58 + [Icons.Gitlab]: "61701", 59 + [Icons.KoFi]: "61702", 60 + [Icons.Liberapay]: "61703", 61 + [Icons.Mail]: "61704", 62 + [Icons.Matrix]: "61705", 63 + [Icons.NewTab]: "61706", 64 + [Icons.Paypal]: "61707", 65 + [Icons.Phone]: "61708", 66 + [Icons.Teamspeak]: "61709", 67 + [Icons.Telegram]: "61710", 68 + [Icons.Wire]: "61711", 69 69 };
+3 -5
src/js/_utils.js
··· 1 1 export default function ready() { 2 - return new Promise(resolve => { 3 - if (document.readyState !== "loading") 4 - resolve(); 5 - else 6 - document.addEventListener("DOMContentLoaded", resolve); 2 + return new Promise((resolve) => { 3 + if (document.readyState !== "loading") resolve(); 4 + else document.addEventListener("DOMContentLoaded", resolve); 7 5 }); 8 6 }
+14 -18
src/js/application.js
··· 20 20 21 21 const mainElem = document.getElementById("main"); 22 22 23 - 24 23 document.querySelectorAll(".scrumplex-logo").forEach((elem) => { 25 24 elem.addEventListener("dblclick", () => { 26 25 const randomRotation = Math.floor(Math.random() * 360); ··· 45 44 46 45 if (location.hash.startsWith("#")) { 47 46 const result = applyScrollSpecial(location.hash); 48 - if (result) 49 - return; 47 + if (result) return; 50 48 } 51 49 applyScrollConditionally(); 52 50 } 53 51 54 52 function applyScrollConditionally() { 55 - if (mainElem.getBoundingClientRect().top <= 0 || // offset to top window border 56 - mainElem.getBoundingClientRect().height >= window.innerHeight) 53 + if ( 54 + mainElem.getBoundingClientRect().top <= 0 || // offset to top window border 55 + mainElem.getBoundingClientRect().height >= window.innerHeight 56 + ) 57 57 applyScroll(); 58 58 } 59 59 60 60 function applyScrollSpecial(targetSelector) { 61 - if (!targetSelector) 62 - return false; 61 + if (!targetSelector) return false; 63 62 const targetElem = document.querySelector(targetSelector); 64 - if (!targetElem) 65 - return false; 63 + if (!targetElem) return false; 66 64 const offset = applyScroll(targetElem); 67 - window.scrollTo({top: offset, behavior: "smooth"}); 68 - history.pushState({hash: targetSelector}, "", targetSelector); 65 + window.scrollTo({ top: offset, behavior: "smooth" }); 66 + history.pushState({ hash: targetSelector }, "", targetSelector); 69 67 return true; 70 68 } 71 69 ··· 86 84 // bit offset. 87 85 88 86 let offset = getElementScrollOffset(scrollTarget); 89 - if (document.body.classList.contains("scrolled")) 90 - return offset; 87 + if (document.body.classList.contains("scrolled")) return offset; 91 88 92 89 const hiddenElems = document.querySelectorAll(".sheet[hidden]"), 93 90 posMain = getElementScrollOffset(mainElem); // offset to top rel. to document ··· 97 94 98 95 mainElem.classList.add("sheet-splashed"); 99 96 mainElem.classList.remove("sheet-splash"); 100 - if (scrollTarget) // recalculate, as it probably changed because of body.scrolled 97 + if (scrollTarget) 98 + // recalculate, as it probably changed because of body.scrolled 101 99 offset = getElementScrollOffset(scrollTarget); 102 100 103 101 hiddenElems.forEach((elem) => { ··· 117 115 setInterval(() => { 118 116 spinnerElement.innerText = spinningChars[currentIndex]; 119 117 currentIndex++; 120 - if (currentIndex >= spinningChars.length) 121 - currentIndex = 0; 118 + if (currentIndex >= spinningChars.length) currentIndex = 0; 122 119 }, 1000 / fps); 123 120 124 121 spinnerElement.removeAttribute("hidden"); 125 122 } 126 123 127 124 function getElementScrollOffset(elem) { 128 - if (elem) 129 - return window.pageYOffset + elem.getBoundingClientRect().top; 125 + if (elem) return window.pageYOffset + elem.getBoundingClientRect().top; 130 126 return -1; 131 127 } 132 128
+8 -5
src/js/particles.js
··· 28 28 import config from "./tsParticles-config.json"; 29 29 import ready from "./_utils"; 30 30 31 - const {matches} = matchMedia("(min-width: 768px)"); 31 + const { matches } = matchMedia("(min-width: 768px)"); 32 32 33 33 async function loadParticles() { 34 34 await loadAngleUpdater(tsParticles); ··· 37 37 await loadColorUpdater(tsParticles); 38 38 await loadOpacityUpdater(tsParticles); 39 39 await loadSizeUpdater(tsParticles); 40 - tsParticles.load("particles-js", config).then().catch((e) => { 41 - console.error("tsparticles failed to load :("); 42 - console.error(e); 43 - }); 40 + tsParticles 41 + .load("particles-js", config) 42 + .then() 43 + .catch((e) => { 44 + console.error("tsparticles failed to load :("); 45 + console.error(e); 46 + }); 44 47 } 45 48 46 49 if (matches) {
+15 -12
src/js/stream.js
··· 30 30 let refreshTimeout; 31 31 let player; 32 32 33 - 34 33 function isWebSocketURL(string) { 35 34 let url; 36 35 try { 37 36 url = new URL(string); 38 37 } catch { 39 - return false; 38 + return false; 40 39 } 41 40 42 41 return url.protocol === "ws:" || url.protocol === "wss:"; 43 42 } 44 - 45 43 46 44 function playStream(streamId) { 47 45 const webrtcUrl = new URL(streamId, "wss://live.scrumplex.net"); 48 46 webrtcUrl.protocol = "wss"; 49 47 50 - const hlsUrl = new URL(streamId + "/llhls.m3u8", "https://live.scrumplex.net"); 48 + const hlsUrl = new URL( 49 + streamId + "/llhls.m3u8", 50 + "https://live.scrumplex.net" 51 + ); 51 52 hlsUrl.protocol = "https"; 52 53 53 - const thumbUrl = new URL(streamId + "/thumb.png", "https://live.scrumplex.net"); 54 + const thumbUrl = new URL( 55 + streamId + "/thumb.png", 56 + "https://live.scrumplex.net" 57 + ); 54 58 thumbUrl.protocol = "https"; 55 59 56 60 location.replace(`#${base64url.encode(streamId)}`); ··· 61 65 { 62 66 label: "Low Latency WebRTC", 63 67 type: "webrtc", 64 - file: webrtcUrl 68 + file: webrtcUrl, 65 69 }, 66 70 { 67 - label: "\"Low Latency\" HLS", 71 + label: '"Low Latency" HLS', 68 72 type: "hls", 69 - file: hlsUrl 70 - } 71 - ] 73 + file: hlsUrl, 74 + }, 75 + ], 72 76 }; 73 77 74 78 if (!player) { ··· 93 97 OvenPlayer.debug(true); 94 98 const hash = document.location.hash.substring(1); 95 99 const decoded = base64url.decode(hash); 96 - if (isWebSocketURL(decoded)) 97 - streamUrlElem.value = decoded; 100 + if (isWebSocketURL(decoded)) streamUrlElem.value = decoded; 98 101 playStream(decoded); 99 102 });
+2 -2
src/js/tsParticles-config.json
··· 4 4 "duration": 0, 5 5 "fpsLimit": 60, 6 6 "fullScreen": { 7 - "enable": false, 8 - "zIndex": 0 7 + "enable": false, 8 + "zIndex": 0 9 9 }, 10 10 "particles": { 11 11 "color": {
+14 -8
src/scss/_base.scss
··· 19 19 width: 100%; 20 20 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 21 21 22 - animation: panel-fade-in 600ms cubic-bezier(.23, 1, .32, 1); 22 + animation: panel-fade-in 600ms cubic-bezier(0.23, 1, 0.32, 1); 23 23 24 24 @media (prefers-color-scheme: dark) { 25 25 background-color: $colorBaseDark; ··· 27 27 } 28 28 29 29 .sheet:target { 30 - animation: panel-fade-in 600ms cubic-bezier(.23, 1, .32, 1), panel-highlight 2s linear 600ms; 30 + animation: panel-fade-in 600ms cubic-bezier(0.23, 1, 0.32, 1), 31 + panel-highlight 2s linear 600ms; 31 32 } 32 33 33 - .sheet.sheet-splash, .sheet.sheet-splashed { 34 + .sheet.sheet-splash, 35 + .sheet.sheet-splashed { 34 36 animation-name: panel-splash-fade-in; 35 37 } 36 38 ··· 52 54 left: 100%; 53 55 width: $longShadowLength; 54 56 height: 100%; 55 - content: ''; 57 + content: ""; 56 58 background: linear-gradient(to right, #481111, transparent) no-repeat; 57 59 transform: skewY(45deg); 58 60 transform-origin: 0 0; 59 - animation: panel-before-fade-in 900ms cubic-bezier(.23, 1, .32, 1); 61 + animation: panel-before-fade-in 900ms cubic-bezier(0.23, 1, 0.32, 1); 60 62 } 61 63 62 64 .sheet:after { ··· 65 67 left: 0; 66 68 width: 100%; 67 69 height: $longShadowLength; 68 - content: ''; 70 + content: ""; 69 71 background: linear-gradient(180deg, #481111, transparent) no-repeat; 70 72 transform: skewX(45deg); 71 73 transform-origin: 0 0; 72 - animation: panel-after-fade-in 900ms cubic-bezier(.23, 1, .32, 1); 74 + animation: panel-after-fade-in 900ms cubic-bezier(0.23, 1, 0.32, 1); 73 75 } 74 76 } 75 77 ··· 95 97 bottom: 0; 96 98 height: 20%; 97 99 width: 100%; 98 - background: linear-gradient(to bottom, transparentize($colorBrand, 1.0) 0%, $colorBrand 100%); 100 + background: linear-gradient( 101 + to bottom, 102 + transparentize($colorBrand, 1) 0%, 103 + $colorBrand 100% 104 + ); 99 105 }
+4 -2
src/scss/_buttons.scss
··· 14 14 font-size: 1rem; 15 15 font-weight: 400; 16 16 text-align: center; 17 - transition: background .3s cubic-bezier(.215, .61, .355, 1), box-shadow .3s cubic-bezier(.215, .61, .355, 1); 17 + transition: background 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), 18 + box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); 18 19 19 20 @include alt-font; 20 21 } 21 22 22 23 @each $name, $color in $btnColors { 23 - .btn.btn-#{$name}, .btn.btn-#{$name}:focus { 24 + .btn.btn-#{$name}, 25 + .btn.btn-#{$name}:focus { 24 26 color: $color; 25 27 } 26 28
+13 -11
src/scss/_grid.scss
··· 1 - @use 'sass:math'; 1 + @use "sass:math"; 2 2 @import "variables"; 3 3 4 4 @mixin col($percent) { ··· 14 14 margin-left: auto; 15 15 16 16 @media (min-width: map_get($responsiveThresholds, tiny)) { 17 - max-width: 540px 17 + max-width: 540px; 18 18 } 19 19 @media (min-width: map_get($responsiveThresholds, smol)) { 20 - max-width: 720px 20 + max-width: 720px; 21 21 } 22 22 @media (min-width: map_get($responsiveThresholds, med)) { 23 - max-width: 960px 23 + max-width: 960px; 24 24 } 25 25 @media (min-width: map_get($responsiveThresholds, big)) { 26 - max-width: 1300px 26 + max-width: 1300px; 27 27 } 28 28 } 29 29 ··· 31 31 display: flex; 32 32 flex-wrap: wrap; 33 33 } 34 - 35 34 36 35 // Create col-[x] 37 36 @for $i from 1 through $gridColumns { ··· 41 40 @include col($percent); 42 41 } 43 42 44 - @if $percent != 100% { // add padding between columns, but only if it's not a full-width column 43 + @if $percent != 100% { 44 + // add padding between columns, but only if it's not a full-width column 45 45 .col-#{$i}:not(:last-child) { 46 46 padding-right: 16px; 47 47 } 48 48 } 49 49 } 50 50 51 - .col { // alias for full-width col 52 - @extend .col-#{$gridColumns} 51 + .col { 52 + // alias for full-width col 53 + @extend .col-#{$gridColumns}; 53 54 } 54 55 55 56 // Create col-[y]-[x] ··· 57 58 @for $i from 1 through $gridColumns { 58 59 $percent: math.div(100%, $gridColumns) * $i; 59 60 .col-#{$key}-#{$i} { 60 - @extend .col 61 + @extend .col; 61 62 } 62 63 63 64 @media (min-width: map_get($responsiveThresholds, $key)) { ··· 65 66 @include col($percent); 66 67 } 67 68 68 - @if $percent != 100% { // add padding between columns, but only if it's not a full-width column 69 + @if $percent != 100% { 70 + // add padding between columns, but only if it's not a full-width column 69 71 .col-#{$key}-#{$i}:not(:last-child) { 70 72 padding-right: 16px; 71 73 }
+12 -6
src/scss/_misc.scss
··· 6 6 bottom: 0; 7 7 left: 0; 8 8 right: 0; 9 - animation: scroll-indicator-fade-in 600ms cubic-bezier(0.19, 1, 0.22, 1), float 2s ease-in-out infinite alternate 600ms; 9 + animation: scroll-indicator-fade-in 600ms cubic-bezier(0.19, 1, 0.22, 1), 10 + float 2s ease-in-out infinite alternate 600ms; 10 11 user-select: none; 11 12 cursor: default; 12 13 } ··· 29 30 } 30 31 } 31 32 32 - .link:hover, .link:focus { 33 + .link:hover, 34 + .link:focus { 33 35 text-decoration: none; 34 36 } 35 37 36 38 @each $selector, $color in $brandColors { 37 - .link-#{$selector}:hover, .link-#{$selector}:focus { 39 + .link-#{$selector}:hover, 40 + .link-#{$selector}:focus { 38 41 color: $color; 39 42 } 40 43 } ··· 96 99 margin: 8px 4px; 97 100 border-top-left-radius: 8px; 98 101 99 - transition: background .3s cubic-bezier(.215, .61, .355, 1), border-color .3s cubic-bezier(.215, .61, .355, 1); 102 + transition: background 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), 103 + border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); 100 104 101 105 @media (prefers-color-scheme: dark) { 102 106 color: $colorTextPrimaryDark; ··· 104 108 } 105 109 } 106 110 107 - input:hover, input:focus { 111 + input:hover, 112 + input:focus { 108 113 background-color: transparentize($colorTextPrimary, 0.95); 109 114 110 115 @media (prefers-color-scheme: dark) { ··· 132 137 .theater { 133 138 background-color: $colorBaseDark; 134 139 135 - .sheet::after, .sheet::before { 140 + .sheet::after, 141 + .sheet::before { 136 142 display: none; 137 143 } 138 144
+13 -5
src/scss/_normalize.scss
··· 4 4 box-sizing: border-box; 5 5 } 6 6 7 - *, *::before, *::after { 7 + *, 8 + *::before, 9 + *::after { 8 10 box-sizing: inherit; 9 11 } 10 12 ··· 16 18 text-decoration: none; 17 19 } 18 20 19 - a:active, a:hover { 21 + a:active, 22 + a:hover { 20 23 outline: 0; 21 24 text-decoration: underline; 22 25 } 23 26 24 - b, strong { 27 + b, 28 + strong { 25 29 font-weight: bold; 26 30 } 27 31 28 - sub, sup { 32 + sub, 33 + sup { 29 34 font-size: 75%; 30 35 line-height: 0; 31 36 position: relative; ··· 58 63 overflow: auto; 59 64 } 60 65 61 - code, kbd, pre, samp { 66 + code, 67 + kbd, 68 + pre, 69 + samp { 62 70 font-family: monospace, monospace; 63 71 font-size: 1em; 64 72 }
+1 -1
src/scss/_scrollbar.scss
··· 35 35 html { 36 36 scrollbar-color: $colorScrollbarThumb $colorScrollbarTrack; 37 37 scrollbar-width: thin; 38 - } 38 + }
+17 -11
src/scss/_typography.scss
··· 4 4 @import "variables"; 5 5 6 6 @include FiraSans.fontFace( 7 - $weight: 400, 8 - $display: swap, 9 - $fontDir: "~node_modules/@fontsource/fira-sans/files" // TODO: make this cleaner 7 + $weight: 400, 8 + $display: swap, 9 + $fontDir: "~node_modules/@fontsource/fira-sans/files" 10 + // TODO: make this cleaner 10 11 ); 11 12 12 13 @include JosefinSans.fontFace( 13 - $weight: 400, 14 - $display: swap, 15 - $fontDir: "~node_modules/@fontsource/josefin-sans/files" // TODO: ditto 14 + $weight: 400, 15 + $display: swap, 16 + $fontDir: "~node_modules/@fontsource/josefin-sans/files" // TODO: ditto 16 17 ); 17 18 18 19 body { ··· 40 41 text-align: right; 41 42 } 42 43 43 - h1, h2, h3, h4, h5, h6 { 44 + h1, 45 + h2, 46 + h3, 47 + h4, 48 + h5, 49 + h6 { 44 50 margin-top: 0; 45 - margin-bottom: .5rem; 51 + margin-bottom: 0.5rem; 46 52 font-weight: 500; 47 53 line-height: 1.2; 48 54 @include alt-font; ··· 53 59 } 54 60 55 61 h2 { 56 - font-size: 2.0rem; 62 + font-size: 2rem; 57 63 } 58 64 59 65 h3 { ··· 61 67 } 62 68 63 69 h4 { 64 - font-size: 1.5rem 70 + font-size: 1.5rem; 65 71 } 66 72 67 73 h5 { 68 - font-size: 1.25rem 74 + font-size: 1.25rem; 69 75 } 70 76 71 77 h6 {
+22 -14
src/scss/_variables.scss
··· 6 6 $colorMuted: #6c757d; 7 7 8 8 $colorPrimary: $colorBrand; 9 - $colorAccent: #00BCD4; 9 + $colorAccent: #00bcd4; 10 10 11 11 $colorScrollbarTrack: darken($colorPrimary, 10%); 12 12 $colorScrollbarThumb: $colorBase; 13 13 14 - $btnColors: "default" $colorTextPrimary, "primary" $colorPrimary, "accent" $colorAccent; 14 + $btnColors: "default" $colorTextPrimary, "primary" $colorPrimary, 15 + "accent" $colorAccent; 15 16 $brandColors: ( 16 - "archlinux" #1793d1, 17 - "bitcoin" #ff9900, 18 - "codeberg" #2185d0, 19 - "github" #555, // looks better than real brand color #24292e 20 - "gitlab" #fc6d26, 21 - "ko-fi" #29ABE0, 22 - "liberapay" #f6c915, 23 - "linkedin" #0077b5, 24 - "paypal" #003087, 25 - "xing" #026466, 17 + "archlinux" #1793d1, 18 + "bitcoin" #ff9900, 19 + "codeberg" #2185d0, 20 + "github" #555, 21 + // looks better than real brand color #24292e 22 + "gitlab" #fc6d26, 23 + "ko-fi" #29abe0, 24 + "liberapay" #f6c915, 25 + "linkedin" #0077b5, 26 + "paypal" #003087, 27 + "xing" #026466 26 28 ); 27 29 28 30 $colorBaseDark: #1a1a1a; ··· 31 33 $longShadowLength: 200px; 32 34 33 35 $gridColumns: 12; 34 - $responsiveThresholds: (tiny: 576px, smol: 768px, med: 992px, big: 1300px); 36 + $responsiveThresholds: ( 37 + tiny: 576px, 38 + smol: 768px, 39 + med: 992px, 40 + big: 1300px, 41 + ); 35 42 36 43 @mixin main-font { 37 44 font-family: "Fira Sans", "Helvetica Neue", "Arial", sans-serif; 38 45 } 39 46 40 47 @mixin alt-font { 41 - font-family: "Josefin Sans", "Fira Sans", "Helvetica Neue", "Arial", sans-serif; 48 + font-family: "Josefin Sans", "Fira Sans", "Helvetica Neue", "Arial", 49 + sans-serif; 42 50 }
+3 -3
src/scss/noscript.scss
··· 46 46 display: block !important; 47 47 opacity: 1; 48 48 animation: none; 49 - top: initial !important;; 50 - position: relative !important;; 51 - transform: none !important;; 49 + top: initial !important; 50 + position: relative !important; 51 + transform: none !important; 52 52 } 53 53 54 54 img[data-src] {