From 21d06a9145debc763ed3f3ce8fa07af3b2d3f408 Mon Sep 17 00:00:00 2001 From: planetabhi Date: Mon, 2 Dec 2024 03:16:06 +0530 Subject: [PATCH] polishing --- src/components/Card.css | 1 + src/components/CategoryNavItem.css | 2 +- src/layouts/Layout.astro | 49 ++++++++++++++++++++++++++++-- 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/src/components/Card.css b/src/components/Card.css index de6f190..835e4d0 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -32,6 +32,7 @@ p { .link-card:is(:hover, :focus-within) { transition: box-shadow 0.2s ease-out; background-position: 0; + background: var(--background); box-shadow: 0px 0px 0px 2px var(--link), 0px 1px 1px -0.5px var(--shadow-color), diff --git a/src/components/CategoryNavItem.css b/src/components/CategoryNavItem.css index 1829519..a6c4e9b 100644 --- a/src/components/CategoryNavItem.css +++ b/src/components/CategoryNavItem.css @@ -4,7 +4,7 @@ border: none; outline: none; background: none; - cursor: pointer; + cursor: var(--cursor-pointer); border-bottom: 2px solid transparent; font-family: var(--body-copy); font-weight: 400; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 4a57efb..820ebbf 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -11,7 +11,7 @@ const { site, title, tagline } = Astro.props; --- - + @@ -121,6 +121,15 @@ const { site, title, tagline } = Astro.props; :root { --accent: var(--link); --body-copy: "Inter", var(--system-ui); + --cursor-default:url( + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26' fill='none' viewBox='0 0 24 26'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.69 2.69a2.357 2.357 0 0 1 2.495-.54L21.47 8.632a2.357 2.357 0 0 1-.255 4.494l-7.271 1.818-1.818 7.27a2.357 2.357 0 0 1-4.494.256L1.15 5.185a2.357 2.357 0 0 1 .54-2.495Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.633 3.622A.786.786 0 0 0 2.62 4.633L9.103 21.92a.786.786 0 0 0 1.498-.086l2.047-8.185 8.185-2.046a.785.785 0 0 0 .086-1.498L3.633 3.622Z' fill='%23010101'/%3E%3C/svg%3E" + ),auto; + --cursor-pointer:url( + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none' viewBox='0 0 28 29'%3E%3Cpath fill='%23fff' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M20.65 22.3v-6.24c0-.38-.31-.68-.7-.68-.37 0-.68.3-.68.68v6.23c0 .38.3.68.69.68.38 0 .69-.3.69-.68ZM17.2 22.3l-.04-6.25a.67.67 0 1 0-1.34.01l.04 6.24a.67.67 0 1 0 1.34 0ZM12.37 16.07l.04 6.22c0 .38.3.68.67.68.37 0 .67-.3.67-.68l-.04-6.23c0-.38-.3-.68-.67-.68-.37 0-.67.31-.67.69Z'/%3E%3C/svg%3E" + ),auto; + --cursor-text:url( + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='25' fill='none' viewBox='0 0 13 25'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.75' d='M8 18.48v-4.23h1.27v-3H8V5.8c.2-.44.5-.82.87-1.14.23-.16.52-.32.83-.44a5.4 5.4 0 0 1 1.17-.05l.87.05.05-.87.08-1.27.06-.87-.88-.06c-.7-.04-1.4 0-2.1.14l-.05.01-.06.02c-.7.25-1.29.56-1.82.95L7 2.28l-.03.02c-.16.13-.31.28-.46.42a6.93 6.93 0 0 0-.39-.38l-.03-.03-.03-.02a5.86 5.86 0 0 0-1.85-.97l-.04-.01-.04-.01a8.1 8.1 0 0 0-2.19-.16l-.87.06.06.87.08 1.27.06.88.87-.06c.43-.03.85 0 1.27.08.23.08.5.21.74.4.33.3.63.72.84 1.19v5.42H3.72v3h1.27v4.2c-.21.47-.51.89-.88 1.24-.2.14-.46.28-.75.37-.36.07-.8.1-1.22.06l-.87-.05-.06.87-.08 1.27-.06.88.87.05c.71.05 1.42 0 2.12-.14h.04l.04-.02a5.83 5.83 0 0 0 1.88-.95l.03-.02.03-.03.44-.43c.14.14.28.27.44.4l.02.02.02.01c.55.42 1.14.73 1.76.95l.05.02.06.01c.77.17 1.47.22 2.17.18l.88-.05-.05-.87-.07-1.27-.05-.87-.87.04c-.42.03-.83 0-1.24-.08-.24-.1-.52-.25-.8-.45A3.4 3.4 0 0 1 8 18.48Z'/%3E%3C/svg%3E" + ),auto; } html { font-family: var(--body-copy); @@ -131,6 +140,13 @@ const { site, title, tagline } = Astro.props; padding: 0; width: 100%; overflow-x: hidden; + cursor: var(--cursor-default); + } + p, h1, h2, h3, h4, h5, h6, li, pre, code, strong, dl, dt { + cursor: var(--cursor-text); + } + a, a *, button { + cursor: var(--cursor-pointer); } main, .container { @@ -169,7 +185,7 @@ const { site, title, tagline } = Astro.props; outline: none; text-decoration: none; color: inherit; - cursor: pointer; + cursor: var(--cursor-pointer); color: var(--text-secondary); background-color: var(--background); border-radius: var(--spacing-03); @@ -207,13 +223,14 @@ const { site, title, tagline } = Astro.props; border: none; padding: var(--spacing-00); color: var(--icon-secondary); - cursor: pointer; + cursor: var(--cursor-pointer); touch-action: manipulation; -webkit-tap-highlight-color: transparent; display: flex; justify-content: center; align-items: center; border-radius: var(--spacing-02); + cursor: var(--cursor-pointer); @nest [data-theme="dark"] & { --icon-fill: var(--icon-secondary); @@ -271,6 +288,32 @@ const { site, title, tagline } = Astro.props; transform: scale(1.2); } } + + @media (hover: hover) and (pointer: fine) { + body { + cursor:var(--cursor-default); + } + p, + h1, + h2, + h3, + h4, + h5, + h6 { + cursor:var(--cursor-text); + } + a, + a *, + button:not(.tooltip-btn), + button:not(.tooltip-btn) *, + select, + input[type=checkbox] { + cursor:var(--cursor-pointer); + } + button[aria-disabled='true'] { + pointer-events:none; + } +}