From 75d2e5476c92c06b4bb321e0137bbe10abdabbd6 Mon Sep 17 00:00:00 2001 From: daudix Date: Sun, 15 Sep 2024 18:14:39 +0300 Subject: [PATCH] Details open animation and custom arrow, make icons use current text color --- sass/_alerts.scss | 5 --- sass/_article-list.scss | 24 +++++++++--- sass/_comments.scss | 4 +- sass/_footer.scss | 7 +--- sass/_icon.scss | 3 +- sass/_nav.scss | 82 ++++++++-------------------------------- sass/_pre-container.scss | 9 ++--- sass/_statements.scss | 3 -- sass/_typography.scss | 37 +++++++++++++++++- sass/_zola-anchor.scss | 10 ++--- 10 files changed, 84 insertions(+), 100 deletions(-) diff --git a/sass/_alerts.scss b/sass/_alerts.scss index d587c7e..2c2ca46 100644 --- a/sass/_alerts.scss +++ b/sass/_alerts.scss @@ -7,7 +7,6 @@ blockquote { .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.59 0 0 3.59 0 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0 2c3.332 0 6 2.668 6 6s-2.668 6-6 6-6-2.668-6-6 2.668-6 6-6m0 1.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25M6.477 7A.5.5 0 0 0 6.5 8H7v3h-.5a.499.499 0 1 0 0 1h3a.499.499 0 1 0 0-1H9V7zm0 0'/%3E%3C/svg%3E"); - background-color: var(--blue-fg); } } } @@ -20,7 +19,6 @@ blockquote { .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.996 0C5.16 0 2.703 2 2.125 4.777c-.527 2.535.688 5.036 2.871 6.325L5 12a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-.898c2.184-1.293 3.402-3.797 2.871-6.332A6.01 6.01 0 0 0 7.996 0m0 2a3.994 3.994 0 0 1 3.918 3.18 3.99 3.99 0 0 1-2.312 4.484 1.01 1.01 0 0 0-.602.914V11H6.996v-.418a1 1 0 0 0-.598-.914 3.994 3.994 0 0 1-2.316-4.484A3.99 3.99 0 0 1 7.996 2m-.998 4a.5.5 0 0 0-.354.852l1 1a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.707.507.507 0 0 0-.707 0l-.649.648-.644-.648A.5.5 0 0 0 6.998 6M6 14v1c0 .555.445 1 1 1h2c.555 0 1-.445 1-1v-1z'/%3E%3C/svg%3E"); - background-color: var(--green-fg); } } } @@ -33,7 +31,6 @@ blockquote { .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 0C1.355 0 0 1.355 0 3v7c0 1.256.893 2.14 2 2.584V15a1 1 0 0 0 1.707.707L6.414 13H13c1.645 0 3-1.355 3-3V3c0-1.645-1.355-3-3-3zm0 2h10c.571 0 1 .429 1 1v7c0 .571-.429 1-1 1H6a1 1 0 0 0-.707.293L4 12.586V12a1 1 0 0 0-1-1c-.571 0-1-.429-1-1V3c0-.571.429-1 1-1m5 1c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1s1-.446 1-1V4c0-.554-.446-1-1-1m0 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); - background-color: var(--purple-fg); } } } @@ -46,7 +43,6 @@ blockquote { .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); - background-color: var(--yellow-fg); } } } @@ -59,7 +55,6 @@ blockquote { .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 5v6a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h6a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 16 11V5a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 11 0zm.414 2h5.172L14 5.414v5.172L10.586 14H5.414L2 10.586V5.414zM8 4c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V5c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); - background-color: var(--red-fg); } } } diff --git a/sass/_article-list.scss b/sass/_article-list.scss index b4bd3a1..c02cb8b 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -30,6 +30,25 @@ h3 { margin: 0; + + a:hover::after { + transform: none; + opacity: 1; + } + + a::after { + display: inline-block; + vertical-align: -0.0625em; + transform: translateX(-0.25rem); + opacity: 0; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m5.707 1.293 6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L9.586 8 4.293 2.707a1 1 0 1 1 1.414-1.414m0 0'/%3E%3C/svg%3E"); + transition: var(--transition); + margin-inline-start: 0.25rem; + background-color: currentColor; + width: 1rem; + height: 1rem; + content: ""; + } } .tags { @@ -261,7 +280,6 @@ .icon { mask-image: var(--icon); - background-color: var(--fg-muted-5); } } @@ -271,7 +289,6 @@ .icon { mask-image: var(--icon); - background-color: var(--purple-fg); } } @@ -281,7 +298,6 @@ .icon { mask-image: var(--icon); - background-color: var(--yellow-fg); } } @@ -291,7 +307,6 @@ .icon { mask-image: var(--icon); - background-color: var(--red-fg); } } @@ -301,7 +316,6 @@ .icon { mask-image: var(--icon); - background-color: var(--brown-fg); } } diff --git a/sass/_comments.scss b/sass/_comments.scss index 59a840d..756157d 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -274,7 +274,7 @@ .icon { vertical-align: -0.125em; - transition: transform var(--transition-longer); + transition: var(--transition-longer); margin-inline-end: 0.25rem; width: 1rem; height: 1rem; @@ -303,7 +303,6 @@ .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E"); - background-color: var(--purple-fg); } } @@ -320,7 +319,6 @@ .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E"); - background-color: var(--yellow-fg); } } } diff --git a/sass/_footer.scss b/sass/_footer.scss index 138c1fb..37caeae 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -84,14 +84,12 @@ transition: var(--transition); border-radius: 999px; padding: 0.5rem; + color: var(--fg-muted-4); &:hover { box-shadow: var(--edge-highlight); background-color: var(--fg-muted-1); - - .icon { - background-color: var(--fg-muted-5); - } + color: var(--fg-muted-5); } &:active { @@ -101,7 +99,6 @@ .icon { mask-image: var(--icon); transition: var(--transition); - background-color: var(--fg-muted-4); width: 1.5rem; height: 1.5rem; } diff --git a/sass/_icon.scss b/sass/_icon.scss index f6cf747..0ccbd84 100644 --- a/sass/_icon.scss +++ b/sass/_icon.scss @@ -1,6 +1,7 @@ -.icon { +i.icon { display: inline-block; mask-size: cover; + background-color: currentColor; font-style: normal; font-variant: normal; line-height: 0; diff --git a/sass/_nav.scss b/sass/_nav.scss index 6eef906..0b084ed 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -72,7 +72,6 @@ border-radius: 999px; background-color: transparent; padding: 0.375rem 0.75rem; - color: var(--fg-muted-4); font-weight: bold; list-style: none; text-align: center; @@ -87,14 +86,6 @@ &:hover { background-color: var(--accent-color); color: var(--contrast-color); - - .icon { - background-color: var(--contrast-color); - } - } - - .icon { - background-color: var(--accent-color); } } @@ -104,10 +95,6 @@ &:hover { color: var(--fg-color); - - .icon { - background-color: var(--fg-color); - } } &.active { @@ -115,14 +102,6 @@ &:hover { color: var(--contrast-color); - - .icon { - background-color: var(--contrast-color); - } - } - - .icon { - background-color: var(--accent-color); } } @@ -131,7 +110,6 @@ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.14 3.14 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363'/%3E%3C/svg%3E"); transition: var(--transition); margin-inline-end: 0.25rem; - background-color: var(--fg-muted-5); width: 1rem; height: 1rem; } @@ -154,14 +132,12 @@ #theme-switcher summary, #theme-switcher button, summary { + color: var(--fg-muted-4); + &:hover { box-shadow: var(--edge-highlight); background-color: var(--fg-muted-1); color: var(--fg-muted-5); - - .icon { - background-color: var(--fg-muted-5); - } } &:active { @@ -170,12 +146,16 @@ } .circle { - padding: 0.375rem 0.625rem; + padding: 0.5rem 0.625rem; + line-height: normal; + + &::before { + display: none; + } .icon { vertical-align: -0.125em; transition: var(--transition); - background-color: var(--fg-muted-4); width: 1rem; height: 1rem; } @@ -204,41 +184,17 @@ background-color: transparent; padding: 0; - &[open] { - .arrow { - transform: scaleY(-100%); - } + &[open] ul { + animation: dropdown-open var(--transition); - ul { - animation: dropdown-open var(--transition); - - @keyframes dropdown-open { - from { - transform: translate(-50%, 0); - opacity: 0; - } + @keyframes dropdown-open { + from { + transform: translate(-50%, 0); + opacity: 0; } } } - summary { - - &::marker, - &::-webkit-details-marker { - display: none; - } - - .arrow { - vertical-align: -0.125em; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m2.293 6.707 5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414L8 9.586 3.707 5.293a1 1 0 1 0-1.414 1.414m0 0'/%3E%3C/svg%3E"); - transition: var(--transition); - margin-inline-end: 0.25rem; - background-color: var(--fg-muted-4); - width: 1rem; - height: 1rem; - } - } - ul { -webkit-backdrop-filter: var(--blur); position: absolute; @@ -303,17 +259,11 @@ .active { background-color: var(--accent-color-alpha); - - .icon { - background-color: var(--accent-color); - } + color: var(--accent-color); &:hover { background-color: var(--accent-color); - - .icon { - background-color: var(--contrast-color); - } + color: var(--contrast-color); } } diff --git a/sass/_pre-container.scss b/sass/_pre-container.scss index e74c59b..98fdcdd 100644 --- a/sass/_pre-container.scss +++ b/sass/_pre-container.scss @@ -26,16 +26,14 @@ border-radius: var(--rounded-corner-small); background-color: transparent; padding: 0.5rem; + color: var(--fg-muted-4); line-height: 0; &:hover { cursor: pointer; box-shadow: var(--edge-highlight); background-color: var(--fg-muted-1); - - i { - background-color: var(--fg-muted-5); - } + color: var(--fg-muted-5); } &:active { @@ -55,7 +53,6 @@ .icon { mask-image: 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"); transition: var(--transition); - background-color: var(--fg-muted-4); width: 1rem; height: 1rem; } @@ -67,10 +64,10 @@ button { box-shadow: var(--edge-highlight); background-color: var(--accent-color-alpha); + color: var(--accent-color); .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); - background-color: var(--accent-color); } } diff --git a/sass/_statements.scss b/sass/_statements.scss index 2e88d66..113cf16 100644 --- a/sass/_statements.scss +++ b/sass/_statements.scss @@ -36,7 +36,6 @@ .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E"); - background-color: var(--purple-fg); } } @@ -46,7 +45,6 @@ .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); - background-color: var(--red-fg); } } @@ -56,7 +54,6 @@ .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); - background-color: var(--yellow-fg); } } } diff --git a/sass/_typography.scss b/sass/_typography.scss index 67bb4b8..9db5542 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -233,13 +233,48 @@ details { background-color: var(--fg-muted-1); padding: 0.875rem 1rem; - summary:hover { + summary { cursor: pointer; + list-style: none; + + &::marker, + &::-webkit-details-marker { + display: none; + } + + &::before { + display: inline-block; + vertical-align: -0.125em; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m2.293 6.707 5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414L8 9.586 3.707 5.293a1 1 0 1 0-1.414 1.414m0 0'/%3E%3C/svg%3E"); + transition: var(--transition); + margin-inline-end: 0.25rem; + background-color: currentColor; + width: 1rem; + height: 1rem; + content: ""; + } } :last-child { margin-block-end: 0; } + + &[open] summary { + &::before { + transform: scaleY(-100%); + } + + &~* { + animation: details-open var(--transition); + + @keyframes details-open { + from { + transform: translateY(-1rem); + opacity: 0; + } + } + } + } } figure { diff --git a/sass/_zola-anchor.scss b/sass/_zola-anchor.scss index b93e166..40fb281 100644 --- a/sass/_zola-anchor.scss +++ b/sass/_zola-anchor.scss @@ -14,9 +14,10 @@ h6 { opacity: 0; transition: var(--transition); margin: 0 0.25em; + color: var(--fg-muted-4); - &:hover .icon { - background-color: var(--accent-color); + &:hover { + color: var(--accent-color); } &:active { @@ -31,12 +32,11 @@ h6 { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E"); mask-size: cover; transition: var(--transition); - background-color: var(--fg-muted-4); width: 1em; height: 1em; } } -:target .zola-anchor .icon { - background-color: var(--accent-color-alpha); +:target .zola-anchor { + color: var(--accent-color-alpha); }