diff --git a/_includes/extensions/click-to-top.html b/_includes/extensions/click-to-top.html new file mode 100644 index 0000000..fadd325 --- /dev/null +++ b/_includes/extensions/click-to-top.html @@ -0,0 +1,18 @@ +
+ +
+ diff --git a/_layouts/default.html b/_layouts/default.html index b9ad657..f8e8e6b 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -13,6 +13,8 @@ {%- include extensions/theme-toggle.html -%} + {%- include extensions/click-to-top.html -%} +
{{ content }} diff --git a/_sass/misc/click-to-top.scss b/_sass/misc/click-to-top.scss new file mode 100644 index 0000000..00f543c --- /dev/null +++ b/_sass/misc/click-to-top.scss @@ -0,0 +1,46 @@ +.click-to-top { + transition: 0.3s; + display: flex; + align-items: center; + justify-content: center; + position: fixed; + width: 64px; + height: 64px; + border-radius: 32px; + right: 60px; + bottom: 48px; + background: white; + cursor: pointer; + opacity: 0; + transform: translateY(10px); + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); + font-size: 24px; + user-select: none; + + @include media-query(1024px) { + width: 48px; + height: 48px; + border-radius: 24px; + right: 35px; + font-size: 20px; + } + + @include media-query($on-palm) { + width: 36px; + height: 36px; + border-radius: 18px; + right: 20px; + font-size: 16px; + } +} + +.click-to-top.show { + opacity: 1; + transform: translateY(0); +} + +html[data-theme="dark"] { + .click-to-top { + background: #34323D; + } +} diff --git a/_sass/yat.scss b/_sass/yat.scss index 5d1a631..eda2d97 100644 --- a/_sass/yat.scss +++ b/_sass/yat.scss @@ -65,5 +65,6 @@ $on-laptop: 800px !default; "misc/article-menu", "misc/common-list", "misc/google-translate", - "misc/gitment" + "misc/gitment", + "misc/click-to-top" ;