From ae0d5264a3ab37d5b18f3ae3aa1140cc1f29c7aa Mon Sep 17 00:00:00 2001 From: Nerban <85192213+Nerban@users.noreply.github.com> Date: Wed, 13 Dec 2023 23:14:02 +0100 Subject: [PATCH] started adding 3d effect to cardhover --- src/_data/packs.json | 2 +- src/_includes/3dEffect.njk | 47 +++++++++++++++++ src/_includes/custom.njk | 23 +++++++++ src/_includes/slides/test.njk | 22 ++++++++ src/index.html | 5 +- src/style/style.css | 97 ++++++++++++++++++++++++++++++++--- 6 files changed, 187 insertions(+), 9 deletions(-) create mode 100644 src/_includes/3dEffect.njk create mode 100644 src/_includes/slides/test.njk diff --git a/src/_data/packs.json b/src/_data/packs.json index e33dfb9..e3969c4 100644 --- a/src/_data/packs.json +++ b/src/_data/packs.json @@ -300,7 +300,7 @@ }, { "head": "Showcase Card", - "card": {"foil": false, "id":"9cd2b567-0cf7-4441-b3ce-e31141dd91c8"} + "card": {"foil": false, "id":"bf223d6d-c356-44f8-b332-90b0e4cb4c9c"} }, { "head": "Random Foil Card", diff --git a/src/_includes/3dEffect.njk b/src/_includes/3dEffect.njk new file mode 100644 index 0000000..73030ce --- /dev/null +++ b/src/_includes/3dEffect.njk @@ -0,0 +1,47 @@ + \ No newline at end of file diff --git a/src/_includes/custom.njk b/src/_includes/custom.njk index e43633f..657fe7f 100644 --- a/src/_includes/custom.njk +++ b/src/_includes/custom.njk @@ -199,4 +199,27 @@ .fragment.blur.visible { filter: none; } + + * { + box-sizing: border-box; +} + + + +.card { + position: relative; + + transition-duration: 300ms; + transition-timing-function: ease-out; + transform: rotate3d(0); +} + +.card:hover { + transition-duration: 150ms; + +} + +.card .glow { + background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f); +} \ No newline at end of file diff --git a/src/_includes/slides/test.njk b/src/_includes/slides/test.njk new file mode 100644 index 0000000..a01c393 --- /dev/null +++ b/src/_includes/slides/test.njk @@ -0,0 +1,22 @@ +{% set custom_id = "test12345"%} +
+ +

Artwork

+
+ ??? + + + +
+ +
+
+
+ +
+ +
\ No newline at end of file diff --git a/src/index.html b/src/index.html index e16726f..a73793a 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,7 @@
+ {% include "slides/start.njk" %} {% for key,pack in packs%} @@ -20,9 +21,9 @@
- - + + {%include "3dEffect.njk"%} diff --git a/src/style/style.css b/src/style/style.css index 76f4bc7..d9fe101 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -572,10 +572,23 @@ video { z-index: 10; } +.m-96 { + margin: 24rem; +} + .m-auto { margin: auto; } +.m-10 { + margin: 2.5rem; +} + +.-mx-5 { + margin-left: -1.25rem; + margin-right: -1.25rem; +} + .mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; @@ -591,10 +604,28 @@ video { margin-bottom: 1.25rem; } +.my-24 { + margin-top: 6rem; + margin-bottom: 6rem; +} + +.my-10 { + margin-top: 2.5rem; + margin-bottom: 2.5rem; +} + .mb-5 { margin-bottom: 1.25rem; } +.mb-40 { + margin-bottom: 10rem; +} + +.mb-80 { + margin-bottom: 20rem; +} + .block { display: block; } @@ -607,14 +638,38 @@ video { display: none; } +.aspect-auto { + aspect-ratio: auto; +} + .aspect-square { aspect-ratio: 1 / 1; } +.aspect-video { + aspect-ratio: 16 / 9; +} + +.aspect-\[4\/3\] { + aspect-ratio: 4/3; +} + +.aspect-\[88\/63\] { + aspect-ratio: 88/63; +} + +.aspect-\[63\/88\] { + aspect-ratio: 63/88; +} + .h-full { height: 100%; } +.h-11 { + height: 2.75rem; +} + .w-1\/2 { width: 50%; } @@ -631,14 +686,14 @@ video { width: 100%; } -.rotate-0 { - --tw-rotate: 0deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.w-min { + width: -moz-min-content; + width: min-content; } -.rotate-90 { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.w-max { + width: -moz-max-content; + width: max-content; } .-scale-x-100 { @@ -678,10 +733,18 @@ video { place-items: center; } +.content-stretch { + align-content: stretch; +} + .gap-5 { gap: 1.25rem; } +.overflow-clip { + overflow: clip; +} + .rounded-3xl { border-radius: 1.5rem; } @@ -737,6 +800,18 @@ video { --tw-bg-opacity: 0.75; } +.bg-\[url\(\.\.\/images\/theme\.jpg\)\] { + background-image: url(../images/theme.jpg); +} + +.bg-\[url\(\.\.\/images\/art\/art1\.png\)\] { + background-image: url(../images/art/art1.png); +} + +.bg-\[url\(\.\.\/images\/art\/art2\.png\)\] { + background-image: url(../images/art/art2.png); +} + .bg-cover { background-size: cover; } @@ -850,6 +925,11 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.drop-shadow { + --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -956,6 +1036,11 @@ video { outline-style: solid; } +.hover\:drop-shadow-xl:hover { + --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .group:hover .group-hover\:drop-shadow-lg { --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);