tangled.org
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
input.css
input.css
This file has not been changed.
+1
-1
appview/pages/templates/timeline/home.html
+1
-1
appview/pages/templates/timeline/home.html
···
300
{{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium" }}
301
{{ $iconContainerStyle := "relative shrink-0 w-24 h-24 md:w-48 md:h-48" }}
302
{{ $iconCircleStyle := "rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-700" }}
303
-
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}
304
305
<div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
306
<div class="{{ $cardStyle }} md:mr-32">
···
300
{{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium" }}
301
{{ $iconContainerStyle := "relative shrink-0 w-24 h-24 md:w-48 md:h-48" }}
302
{{ $iconCircleStyle := "rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-700" }}
303
+
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 px-3 pt-[0.65rem] pb-[0.85rem] active:pt-[0.85rem] active:pb-[0.65rem] text-base btn" }}
304
305
<div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
306
<div class="{{ $cardStyle }} md:mr-32">
History
2 rounds
3 comments
juliet.tngl.sh
submitted
#1
2 commits
expand
collapse
appview: animate button label when pressed down
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
appview: fix the landing page buttons animation
no conflicts, ready to merge
expand 3 comments
we override the padding of the top level button in several locations, so a change like this could break buttons across the site i think.
wouldn't using translate solve this correctly? this demo i have uses only translate: https://neumorphic-button.surge.sh, and it correctly moves the text as well.
using translate to move the child elements won't work on the buttons where the text label is not inside a node, which are most of them, it also causes a visual bug with icons on safari due to some SVG subpixel issues
fwiw i do think the buttons need a bigger redesign for this change to work well across the site, neumorphism works well with on light theme, but on the dark theme it's hardly noticeable and the text labels moving when pressed might be jarring
juliet.tngl.sh
submitted
#0
1 commit
expand
collapse
appview: animate button label when pressed down
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
This is to fix the buttons on the landing page, they are styled somewhat differently and this overrides the global class