diff options
Reworked go to top button as an image
5 files changed, 57 insertions, 5 deletions
| -rw-r--r-- | src/_footer.html | 4 | ||||
| -rw-r--r-- | src/about.md | 2 | ||||
| -rw-r--r-- | src/img/chevrons-up-tabler.svg | 53 | ||||
| -rw-r--r-- | src/scripts/image-show.js | 2 | ||||
| -rw-r--r-- | src/styles.css | 1 |
diff --git a/src/_footer.html b/src/_footer.html index d27b5b5..2c4228c 100644 --- a/src/_footer.html +++ b/src/_footer.html @@ -1,8 +1,6 @@ </article> - <div id="scrollBtn" class="btnBackToTop link-tab" style="display: none" onclick="window.scrollTo(0, 0)"> - ^ - </div> + <img id="scrollBtn" class="btnBackToTop link-tab" style="display: none" onclick="window.scrollTo(0, 0)" src="/img/chevrons-up-tabler.svg" alt="^"> <nav class="footer"> <a href="mailto:syndamia@protonmail.com" target="_blank" class="link-tab" title="Have a comment or suggestion? Mail me!">Have a comment or suggestion? Mail me!</a> diff --git a/src/about.md b/src/about.md index b6c5222..6757bbf 100644 --- a/src/about.md +++ b/src/about.md @@ -45,7 +45,7 @@ I have 3 years of learning experience with *C#*, but I have also worked with *HT --- --- -> [tabler-icons](https://github.com/tabler/tabler-icons) for link icon (that I modified) +> [tabler-icons](https://github.com/tabler/tabler-icons) for link and chevron up icons (that I modified) <div></div> diff --git a/src/img/chevrons-up-tabler.svg b/src/img/chevrons-up-tabler.svg new file mode 100644 index 0000000..7126fbb --- /dev/null +++ b/src/img/chevrons-up-tabler.svg @@ -0,0 +1,53 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + class="icon icon-tabler icon-tabler-chevrons-up" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="chevrons-up-tabler.svg" + inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs12" /> + <sodipodi:namedview + id="namedview10" + pagecolor="#505050" + bordercolor="#eeeeee" + borderopacity="1" + inkscape:pageshadow="0" + inkscape:pageopacity="0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="37.125" + inkscape:cx="12" + inkscape:cy="12.013468" + inkscape:window-width="1920" + inkscape:window-height="1053" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <polyline + points="7 11 12 6 17 11" + id="polyline4" + style="stroke:#ffeede" /> + <polyline + points="7 17 12 12 17 17" + id="polyline6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js index b1ca7cf..961242e 100644 --- a/src/scripts/image-show.js +++ b/src/scripts/image-show.js @@ -18,7 +18,7 @@ function clickToView() { const images = document.getElementsByTagName('img'); for (const image of images) { - if (image.alt !== '🔗') { + if (image.alt !== '🔗' && image.id !== 'scrollBtn') { image.onclick = clickToView; } } diff --git a/src/styles.css b/src/styles.css index b391ba2..ff120e8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -388,6 +388,7 @@ code span { z-index: 1; border: 1px solid; transition-duration: 0.5s; + padding: 0.3em; } .btnBackToTop:hover { |
