Adjust scroll-to-top button
This commit is contained in:
Helen Chong
parent
8214ecd304
commit
51ba388c5f
|
|
@ -1,17 +1,17 @@
|
||||||
<button class="top-btn hidden">
|
<button class="top-btn hidden">
|
||||||
<img src="/assets/images/elements/top.svg" alt="Scroll to top">
|
<img src="/assets/images/elements/chevron-up-solid.svg" alt="Scroll to top">
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.top-btn {
|
.top-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 20px;
|
bottom: 10px;
|
||||||
right: 20px;
|
right: 10px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--clr-top-btn);
|
background-color: var(--clr-top-btn);
|
||||||
border-radius: 50em;
|
border-radius: 50em;
|
||||||
padding: 0.5em;
|
padding: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-btn:focus {
|
.top-btn:focus {
|
||||||
|
|
@ -20,7 +20,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-btn img {
|
.top-btn img {
|
||||||
width: 2rem;
|
width: 1.5rem;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
|
||||||
|
<path d="M594.729,455.711c22.442,22.441,22.442,58.729,0,80.932c-22.441,22.202-58.729,22.44-80.932,0L306.096,328.942
|
||||||
|
L98.397,536.643c-22.441,22.44-58.729,22.44-80.931,0c-22.203-22.441-22.442-58.729,0-80.932l247.808-248.285
|
||||||
|
c22.441-22.441,58.729-22.441,80.932,0L594.729,455.711z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 759 B |
|
|
@ -1,55 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
version="1.1"
|
|
||||||
x="0px"
|
|
||||||
y="0px"
|
|
||||||
viewBox="0 0 511.189 511.189"
|
|
||||||
id="svg4"
|
|
||||||
sodipodi:docname="top.svg"
|
|
||||||
inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
|
|
||||||
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="defs4" />
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview4"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#000000"
|
|
||||||
borderopacity="0.25"
|
|
||||||
inkscape:showpageshadow="2"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:deskcolor="#d1d1d1"
|
|
||||||
inkscape:zoom="1.5199858"
|
|
||||||
inkscape:cx="255.5945"
|
|
||||||
inkscape:cy="255.5945"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="991"
|
|
||||||
inkscape:window-x="-9"
|
|
||||||
inkscape:window-y="-9"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="svg4" />
|
|
||||||
<g
|
|
||||||
transform="matrix(1.25 0 0 -1.25 0 45)"
|
|
||||||
style="fill:#000000"
|
|
||||||
id="g4">
|
|
||||||
<path
|
|
||||||
d="M291.886-90.348L213.015,25.876c-6.838,10.069-17.727,9.865-24.201-0.421L116.11-89.927 c-6.474-10.286-2.048-18.705,9.842-18.705h21.311v-40.118c0-12.561,10.194-22.756,22.756-22.756h68.267 c12.584,0,22.756,10.194,22.756,22.756v40.118h21.606C294.548-108.632,298.735-100.417,291.886-90.348"
|
|
||||||
id="path1"
|
|
||||||
style="fill:#000000" />
|
|
||||||
<path
|
|
||||||
d="M40.892-234.902H15.713C4.619-234.902,0-226.801,0-218.962c0,8.078,5.78,15.929,15.713,15.929 h84.981c9.944,0,15.724-7.851,15.724-15.929c0-7.839-4.619-15.94-15.724-15.94H75.526V-350.83 c0-11.56-7.384-18.022-17.317-18.022s-17.317,6.463-17.317,18.022L40.892-234.902z"
|
|
||||||
id="path2"
|
|
||||||
style="fill:#000000" />
|
|
||||||
<path
|
|
||||||
d="M240.447-285.249c0,27.944-14.552,53.134-43.418,53.134c-28.877,0-43.429-25.19-43.429-53.134 c0-28.171,14.097-53.111,43.429-53.111S240.447-313.42,240.447-285.249 M117.578-285.249c0,48.037,32.324,85.003,79.451,85.003 c46.41,0,79.44-38.127,79.44-85.003c0-47.798-32.097-85.003-79.44-85.003C150.141-370.252,117.578-333.047,117.578-285.249"
|
|
||||||
id="path3"
|
|
||||||
style="fill:#000000" />
|
|
||||||
<path
|
|
||||||
d="M325.586-282.473h23.563c14.541,0,23.768,10.627,23.768,24.474 c0,13.87-9.227,24.496-23.768,24.496h-23.563V-282.473z M290.93-221.044c0,10.866,6.474,18,18.034,18h40.858 c33.963,0,59.13-22.153,59.13-55.182c0-33.712-26.089-54.738-57.731-54.738h-25.634v-37.877c0-11.548-7.384-18.022-17.306-18.022 c-9.956,0-17.351,6.474-17.351,18.022V-221.044z"
|
|
||||||
id="path4"
|
|
||||||
style="fill:#000000" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in New Issue