diff --git a/sass/_comments.scss b/sass/_comments.scss index 750deb9..f420d41 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -12,10 +12,6 @@ section#comments { } } - #load-comments { - cursor: pointer; - } - #comments-wrapper { display: flex; flex-direction: column; diff --git a/sass/_containers.scss b/sass/_containers.scss index a242867..639ecda 100644 --- a/sass/_containers.scss +++ b/sass/_containers.scss @@ -12,7 +12,6 @@ button { -webkit-backdrop-filter: var(--blur); - all: unset; display: inline-flex; position: absolute; top: 0.5rem; @@ -22,11 +21,10 @@ transition-property: background-color, transform; cursor: pointer; box-shadow: var(--edge-highlight); + border: none; border-radius: 50%; background-color: var(--fg-muted-1); padding: 0.5rem; - width: 1rem; - height: 1rem; &:hover { background-color: var(--fg-muted-2); @@ -54,7 +52,6 @@ i { $copy-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); -webkit-mask-image: $copy-icon; - display: inline-block; mask-image: $copy-icon; transition: background-color var(--transition); background-color: var(--fg-muted-4); diff --git a/sass/_general.scss b/sass/_general.scss index c304615..e6876e2 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -54,3 +54,24 @@ body { } } } + +:focus-visible { + animation: focus-in var(--transition); + outline: 0.125rem solid var(--primary-color); + outline-offset: 2px; +} + +@supports not selector(:focus-visible) { + :focus { + animation: focus-in var(--transition); + outline: 0.125rem solid var(--primary-color); + outline-offset: 2px; + } +} + +@keyframes focus-in { + from { + outline: 0.5rem solid transparent; + outline-offset: 0.25rem; + } +} diff --git a/sass/_nav.scss b/sass/_nav.scss index 9c24548..933c8a2 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -79,12 +79,16 @@ #main-content { position: absolute; - transform: translateY(-300%); + transform: translateY(-100%); + opacity: 0; z-index: 999; + transition-duration: var(--transition); + transition-property: transform, opacity; background: var(--bg-color), var(--primary-color); &:focus { transform: translateY(0); + opacity: 1; } } diff --git a/templates/partials/comments.html b/templates/partials/comments.html index 2bfab0d..1cfb155 100644 --- a/templates/partials/comments.html +++ b/templates/partials/comments.html @@ -25,7 +25,7 @@

- Load Comments + Load Comments