+16 -56

src/global.sass

Reviewed

··· 49 49 section.github div.cards 50 50 .item 51 51 padding: 10px 52 52 - .social-media a, .urls a 53 53 - opacity: 0.8 54 54 - &:hover 55 55 - opacity: 1 56 52 57 53 section 58 54 max-width: 1000px 55 55 + .svg-link 56 56 + cursor: pointer 57 57 + display: block 58 58 + &.hidden svg 59 59 + display: none 60 60 + svg 61 61 + height: 22px 62 62 + width: 22px 63 63 + padding: 12px 64 64 + fill: #3f3f3f 65 65 + opacity: 0.8 66 66 + &:hover 67 67 + opacity: 1 68 68 + * 69 69 + pointer-events: none 59 70 .social-media 60 71 display: grid 61 72 justify-items: center ··· 66 77 width: 1000px 67 78 max-width: 100% 68 79 justify-content: space-around 69 69 - a 70 70 - display: block 71 71 - width: 26px 72 72 - height: 26px 73 73 - padding: 10px 74 74 - background-repeat: no-repeat 75 75 - background-position: center 76 76 - background-size: 22px 77 77 - cursor: pointer 78 78 - a.twitter 79 79 - // background-image: url("static/logos/twitter.png") 80 80 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path></svg>') 81 81 - a.discord 82 82 - // background-image: url("static/logos/discord.png") 83 83 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26.963 0c1.875 0 3.387 1.516 3.476 3.3v28.7l-3.569-3.031-1.96-1.784-2.139-1.864 0.893 2.94h-18.717c-1.869 0-3.387-1.42-3.387-3.301v-21.653c0-1.784 1.52-3.303 3.393-3.303l22.009-0.004zM18.805 7.577h-0.040l-0.269 0.267c2.764 0.8 4.101 2.049 4.101 2.049-1.781-0.891-3.387-1.336-4.992-1.516-1.16-0.18-2.32-0.085-3.3 0h-0.267c-0.627 0-1.96 0.267-3.747 0.98-0.623 0.271-0.98 0.448-0.98 0.448s1.336-1.336 4.28-2.049l-0.18-0.18s-2.229-0.085-4.636 1.693c0 0-2.407 4.192-2.407 9.36 0 0 1.333 2.32 4.991 2.408 0 0 0.533-0.711 1.073-1.336-2.053-0.624-2.853-1.872-2.853-1.872s0.179 0.088 0.447 0.267h0.080c0.040 0 0.059 0.020 0.080 0.040v0.008c0.021 0.021 0.040 0.040 0.080 0.040 0.44 0.181 0.88 0.36 1.24 0.533 0.621 0.269 1.42 0.537 2.4 0.715 1.24 0.18 2.661 0.267 4.28 0 0.8-0.18 1.6-0.356 2.4-0.713 0.52-0.267 1.16-0.533 1.863-0.983 0 0-0.8 1.248-2.94 1.872 0.44 0.621 1.060 1.333 1.060 1.333 3.659-0.080 5.080-2.4 5.16-2.301 0-5.16-2.42-9.36-2.42-9.36-2.18-1.619-4.22-1.68-4.58-1.68l0.075-0.027zM19.029 13.461c0.937 0 1.693 0.8 1.693 1.78 0 0.987-0.76 1.787-1.693 1.787s-1.693-0.8-1.693-1.779c0.003-0.987 0.764-1.784 1.693-1.784zM12.972 13.461c0.933 0 1.688 0.8 1.688 1.78 0 0.987-0.76 1.787-1.693 1.787s-1.693-0.8-1.693-1.779c0-0.987 0.76-1.784 1.693-1.784z"></path></svg>') 84 84 - a.facebook 85 85 - // background-image: url("static/logos/facebook.png") 86 86 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path></svg>') 87 87 - a.youtube 88 88 - // background-image: url("static/logos/youtube.png") 89 89 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.681 9.6c0 0-0.313-2.206-1.275-3.175-1.219-1.275-2.581-1.281-3.206-1.356-4.475-0.325-11.194-0.325-11.194-0.325h-0.012c0 0-6.719 0-11.194 0.325-0.625 0.075-1.987 0.081-3.206 1.356-0.963 0.969-1.269 3.175-1.269 3.175s-0.319 2.588-0.319 5.181v2.425c0 2.587 0.319 5.181 0.319 5.181s0.313 2.206 1.269 3.175c1.219 1.275 2.819 1.231 3.531 1.369 2.563 0.244 10.881 0.319 10.881 0.319s6.725-0.012 11.2-0.331c0.625-0.075 1.988-0.081 3.206-1.356 0.962-0.969 1.275-3.175 1.275-3.175s0.319-2.587 0.319-5.181v-2.425c-0.006-2.588-0.325-5.181-0.325-5.181zM12.694 20.15v-8.994l8.644 4.513-8.644 4.481z"></path></svg>') 90 90 - a.soundcloud 91 91 - // background-image: url("static/logos/soundcloud.png") 92 92 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.874 16.069c-0.565 0-1.105 0.11-1.596 0.308-0.328-3.574-3.447-6.377-7.25-6.377-0.931 0-1.834 0.176-2.635 0.474-0.311 0.116-0.393 0.235-0.393 0.466v12.585c0 0.243 0.195 0.445 0.441 0.469 0.011 0.001 11.36 0.007 11.434 0.007 2.278 0 4.125-1.776 4.125-3.965s-1.848-3.966-4.126-3.966zM12.5 24h1l0.5-7.007-0.5-6.993h-1l-0.5 6.993zM9.5 24h-1l-0.5-5.086 0.5-4.914h1l0.5 5zM4.5 24h1l0.5-4-0.5-4h-1l-0.5 4zM0.5 22h1l0.5-2-0.5-2h-1l-0.5 2z"></path></svg>') 93 93 - a.github 94 94 - // background-image: url("static/logos/github.png") 95 95 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path></svg>') 96 96 - a.instagram 97 97 - // background-image: url("static/logos/instagram.png") 98 98 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path><path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path><path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path></svg>') 99 99 - a.email 100 100 - // background-image: url("static/logos/email.png") 101 101 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18 2c1.105 0 2 0.895 2 2v0 12c0 1.105-0.895 2-2 2v0h-16c-1.105 0-2-0.895-2-2v0-12c0-1.1 0.9-2 2-2h16zM13.63 11.1l6.37 4.9v-2l-5.12-3.9 5.12-4.1v-2l-10 8-10-8v2l5.12 4.1-5.12 3.9v2l6.37-4.9 3.63 2.9 3.63-2.9z"></path></svg>') 102 80 a.has-popup 103 81 position: relative 104 104 - &.hidden .popup 82 82 + &.popup-hidden .popup 105 83 transform: translate(-50%, -10px) scale(0.5) 106 84 pointer-events: none 107 85 opacity: 0 ··· 203 181 display: flex 204 182 justify-content: flex-end 205 183 margin-top: auto 206 206 - a.repo-url, a.repo-website 207 207 - background-repeat: no-repeat 208 208 - background-position: center 209 209 - background-size: 22px 210 210 - padding: 10px 211 211 - cursor: pointer 212 212 - display: block 213 213 - &.hidden 214 214 - display: none 215 215 - .repo-url 216 216 - height: 26px 217 217 - width: 26px 218 218 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path></svg>') 219 219 - .repo-website 220 220 - height: 26px 221 221 - width: 26px 222 222 - background-image: url('data:image/svg+xml;utf8,<svg fill="%233f3f3f" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>') 223 223 - 224 184 .canvas-container 225 185 position: absolute 226 186 top: 0px

+20 -10

src/index.pug

Reviewed

··· 21 21 body 22 22 img.logo(alt="" src="static/kh-logo.png") 23 23 .social-media 24 24 - a.twitter(target="_blank" rel="noopener noreferrer" title="Twitter" href="https://twitter.com/SpectralKH") 25 25 - a.discord.has-popup.hidden(title="Discord") 24 24 + a.svg-link.twitter(target="_blank" rel="noopener noreferrer" title="Twitter" href="https://twitter.com/SpectralKH") 25 25 + include static/svg logos/twitter.svg 26 26 + a.svg-link.discord.has-popup.popup-hidden(title="Discord") 27 27 + include static/svg logos/discord.svg 26 28 p.popup Kasper#6425 27 27 - a.youtube(target="_blank" rel="noopener noreferrer" title="YouTube" href="https://youtube.com/SpectralKH") 28 28 - a.instagram(target="_blank" rel="noopener noreferrer" title="Instagram" href="https://www.instagram.com/spckh/") 29 29 - a.github(target="_blank" rel="noopener noreferrer" title="GitHub" href="https://github.com/SpectralKH") 30 30 - a.facebook(target="_blank" rel="noopener noreferrer" title="Facebook" href="https://www.facebook.com/SpectralKH") 31 31 - a.email.has-popup.hidden(title="Email") 29 29 + a.svg-link.youtube(target="_blank" rel="noopener noreferrer" title="YouTube" href="https://youtube.com/SpectralKH") 30 30 + include static/svg logos/youtube.svg 31 31 + a.svg-link.instagram(target="_blank" rel="noopener noreferrer" title="Instagram" href="https://www.instagram.com/spckh/") 32 32 + include static/svg logos/instagram.svg 33 33 + a.svg-link.github(target="_blank" rel="noopener noreferrer" title="GitHub" href="https://github.com/SpectralKH") 34 34 + include static/svg logos/github.svg 35 35 + a.svg-link.facebook(target="_blank" rel="noopener noreferrer" title="Facebook" href="https://www.facebook.com/SpectralKH") 36 36 + include static/svg logos/facebook.svg 37 37 + a.svg-link.email.has-popup.popup-hidden(title="Email") 38 38 + include static/icons/envelope.svg 32 39 p.popup kasperkh.kh@gmail.com 33 33 - a.soundcloud(target="_blank" rel="noopener noreferrer" title="SoundCloud" href="https://soundcloud.com/SpectralKH") 40 40 + a.svg-link.soundcloud(target="_blank" rel="noopener noreferrer" title="SoundCloud" href="https://soundcloud.com/SpectralKH") 41 41 + include static/svg logos/soundcloud.svg 34 42 section.video.hidden 35 43 .header 36 44 p.title Video ··· 65 73 p.title 66 74 p.description 67 75 .urls 68 68 - a.repo-website.hidden(title="Website" target="_blank" rel="noopener noreferrer") 69 69 - a.repo-url.hidden(title="Repository" target="_blank" rel="noopener noreferrer") 76 76 + a.svg-link.repo-website.hidden(title="Website" target="_blank" rel="noopener noreferrer") 77 77 + include static/icons/link.svg 78 78 + a.svg-link.repo-url.hidden(title="Repository" target="_blank" rel="noopener noreferrer") 79 79 + include static/svg logos/github.svg 70 80 //- script 71 81 //- include global.js 72 82 script(src="js/global.js")

+5 -5

src/js/global.js

Reviewed

··· 201 201 function hideAllPopups () { 202 202 var iconsWithPopups = document.querySelectorAll('a.has-popup') 203 203 for (var i = 0; i < iconsWithPopups.length; i++) { 204 204 - iconsWithPopups[i].classList.add('hidden') 204 204 + iconsWithPopups[i].classList.add('popup-hidden') 205 205 } 206 206 } 207 207 208 208 if (e.target.classList.contains('has-popup')) { 209 209 var icon = e.target 210 210 - } else if (e.target.classList.contains('popup')) { 210 210 + } else if (e.target.parentNode.classList.contains('has-popup')) { 211 211 var icon = e.target.parentNode 212 212 } else { 213 213 hideAllPopups() 214 214 return 215 215 } 216 216 217 217 - if (icon.classList.contains('hidden')) { // if popup is hidden 217 217 + if (icon.classList.contains('popup-hidden')) { // if popup is hidden 218 218 hideAllPopups() 219 219 220 220 // select ··· 225 225 selection.removeAllRanges() 226 226 selection.addRange(range) 227 227 228 228 - icon.classList.remove('hidden') 228 228 + icon.classList.remove('popup-hidden') 229 229 230 230 } else if (!e.target.classList.contains('popup')) { // if popup wasn't clicked 231 231 232 232 - icon.classList.add('hidden') 232 232 + icon.classList.add('popup-hidden') 233 233 234 234 } 235 235

+1

src/static/icons/link.svg

Reviewed

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>

src/static/svg logos/envelope.svg src/static/icons/envelope.svg

Reviewed