Skip to content

Commit

Permalink
refactor: scope css styles and remove unused selectors
Browse files Browse the repository at this point in the history
  • Loading branch information
@buhodev
buhodev committed Oct 31, 2022
1 parent 7942e9d commit 0dbe3d6
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 106 deletions.
41 changes: 2 additions & 39 deletions src/components/buhodev/CardGlare.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- borrowed from <https://github.com/simeydotme/pokemon-cards-css> -->

<div class="card__glare pointer-events-none" />
<div id="buhodev" class="card__glare pointer-events-none" />

<style>
.card__glare {
#buhodev.card__glare {
transform: translateZ(1px);
z-index: 4;
background: radial-gradient(
Expand All @@ -15,41 +15,4 @@
mix-blend-mode: overlay;
opacity: var(--o);
}
.card__glare.holo:not(.v):not(.vmax):not(.vstar) {
opacity: calc(var(--o) * 0.8);
filter: brightness(0.8) contrast(1.5);
}
.card__glare.v,
.card__glare.vfull,
.card__glare.vmax,
.card__glare.vstar {
filter: brightness(0.9) contrast(1.75);
background: radial-gradient(
farthest-corner circle at var(--mx) var(--my),
rgb(255, 255, 255) 0%,
rgba(133, 137, 141, 0.33) 45%,
rgba(100, 100, 100, 0.65) 120%
);
opacity: calc(var(--o) * 0.66);
}
.card__glare.vmax {
background: radial-gradient(
farthest-corner circle at var(--mx) var(--my),
rgba(255, 255, 255, 0.75) 0%,
rgba(99, 99, 99, 0.35) 45%,
rgba(0, 0, 0, 1) 120%
);
}
/* :global(.card) .card__glare {
background: radial-gradient(
farthest-corner circle at var(--mx) var(--my),
rgba(255, 255, 255, 0.8) 10%,
rgba(255, 255, 255, 0.65) 20%,
rgba(0, 0, 0, 1) 90%
);
} */
</style>
6 changes: 3 additions & 3 deletions src/components/buhodev/CardShine.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- borrowed from <https://github.com/simeydotme/pokemon-cards-css> -->

<div class="card__shine pointer-events-none" />
<div id="buhodev" class="card__shine pointer-events-none" />

<style>
.card__shine {
#buhodev.card__shine {
display: grid;
overflow: hidden;
transform: translateZ(1px);
Expand All @@ -16,7 +16,7 @@
opacity: var(--o);
}
.card__shine:after {
#buhodev.card__shine:after {
grid-area: 1/1;
}
</style>
61 changes: 35 additions & 26 deletions src/components/buhodev/HoloCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,9 +279,18 @@

<svelte:window on:scroll={reposition} />

<div class="card" class:active class:interacting class:loading style={styles} bind:this={thisCard}>
<div class="card__translater">
<div
id="buhodev"
class="card"
class:active
class:interacting
class:loading
style={styles}
bind:this={thisCard}
>
<div id="buhodev" class="card__translater">
<div
id="buhodev"
class="card__rotator"
bind:this={rotator}
on:pointerup={activate}
Expand All @@ -290,8 +299,8 @@
on:blur={deactivate}
tabindex="0"
>
<img class="card__back pointer-events-none" src={cardBack} alt="" />
<div class="card__front">
<img id="buhodev" class="card__back pointer-events-none" src={cardBack} alt="" />
<div id="buhodev" class="card__front">
<img src={img} alt="" loading="lazy" class="pointer-events-none" />
<div class="absolute inset-0 flex flex-col items-center">
<p
Expand Down Expand Up @@ -328,38 +337,38 @@
--hyp: 0;
}
.card {
#buhodev.card {
--radius: 4.55% / 3.5%;
z-index: calc(var(--s) * 100);
transform: translate3d(0, 0, 0.1px);
will-change: transform, visibility;
transform-style: preserve-3d;
}
.card.interacting {
#buhodev.card.interacting {
z-index: calc(var(--s) * 120);
}
.card.active .card__translater,
.card.active .card__rotator {
#buhodev.card.active .card__translater,
#buhodev.card.active .card__rotator {
touch-action: none;
}
.card__translater,
.card__rotator {
#buhodev.card__translater,
#buhodev.card__rotator {
display: grid;
perspective: 600px;
transform-origin: center;
will-change: transform;
}
.card__translater {
#buhodev.card__translater {
width: auto;
position: relative;
transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
}
.card__rotator {
#buhodev.card__rotator {
--glow: #69d1e9;
transform: rotateY(var(--rx)) rotateX(var(--ry));
transform-style: preserve-3d;
Expand All @@ -369,19 +378,19 @@
transition: box-shadow 0.4s ease, outline 0.2s ease;
}
.card.active .card__rotator {
#buhodev.card.active .card__rotator {
box-shadow: 0 0 10px 0px var(--glow), 0 0 10px 0px var(--glow), 0 0 30px 0px var(--glow);
}
.card__rotator:focus {
#buhodev.card__rotator:focus {
box-shadow: 0 0 10px 0px var(--glow), 0 0 10px 0px var(--glow), 0 0 30px 0px var(--glow);
}
.card.active .card__rotator:focus {
#buhodev.card.active .card__rotator:focus {
box-shadow: 0px 10px 30px 3px black;
}
.card__rotator :global(*) {
#buhodev.card__rotator :global(*) {
width: 100%;
display: grid;
grid-area: 1/1;
Expand All @@ -390,30 +399,30 @@
transform-style: preserve-3d;
}
.card__back {
#buhodev.card__back {
transform: rotateY(180deg);
backface-visibility: visible;
}
.card__front,
.card__front * {
#buhodev.card__front,
#buhodev.card__front * {
backface-visibility: hidden;
}
.card__front {
#buhodev.card__front {
opacity: 1;
transition: opacity 0.2s ease-out;
}
.loading .card__front {
#buhodev.loading .card__front {
opacity: 0;
}
.loading .card__back {
#buhodev.loading .card__back {
transform: rotateY(0deg);
}
:global(.card__shine) {
:global(#buhodev.card__shine) {
--grain: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=');
--space: 5%;
--angle: 133deg;
Expand All @@ -425,8 +434,8 @@
--vio: #c929f1;
}
:global(.card .card__shine),
:global(.card .card__shine::after) {
:global(#buhodev.card .card__shine),
:global(#buhodev.card .card__shine::after) {
--space: 5%;
--angle: 133deg;
--imgsize: 50%;
Expand Down Expand Up @@ -463,7 +472,7 @@
filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2) saturate(1.5);
}
:global(.card .card__shine::after) {
:global(#buhodev.card .card__shine::after) {
content: '';
background-size: var(--imgsize), 200% 400%, 195%, 200%;
background-position: center, 0% var(--posy), calc(var(--posx) * -1) calc(var(--posy) * -1),
Expand Down
13 changes: 7 additions & 6 deletions src/components/buhodev/Landing.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
class="max-w-5xl absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center mx-auto text-white"
>
{#if ready}
<h1 transition:fly={{ y: -50, duration: 700 }} class="block text-6xl text-center font-bold">
<h1 id='buhodev' transition:fly={{ y: -50, duration: 700 }} class="block text-6xl text-center font-bold">
Unlock the power of world-class password generation
</h1>

Expand All @@ -59,6 +59,7 @@
on:click={() => (ready = false)}
transition:fly={{ y: -50, duration: 500, delay: 700 }}
href="/entry/buhodev/app"
id='buhodev'
class="primary-button relative mt-8 inline-flex h-12 cursor-pointer touch-manipulation select-none items-center justify-center self-center whitespace-nowrap rounded-lg border-0 bg-blue-600 bg-gradient-to-tr from-blue-700 to-sky-400 py-2 px-12 text-center text-lg leading-none text-white hover:-translate-y-[1px] active:translate-y-[1px]"
>Get started</a
>
Expand All @@ -71,29 +72,29 @@
</div>

<style>
h1 {
h1#buhodev {
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75);
font-family: Coanda, sans-serif;
}
.primary-button {
#buhodev.primary-button {
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
rgba(58, 65, 111, 0.5) 0 -3px 0 inset;
transition: box-shadow 0.05s, transform 0.05s;
will-change: box-shadow, transform;
}
.primary-button:focus {
#buhodev.primary-button:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px,
rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}
.primary-button:hover {
#buhodev.primary-button:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
#3c4fe0 0 -3px 0 inset;
}
.primary-button:active {
#buhodev.primary-button:active {
box-shadow: #3c4fe0 0 3px 7px inset;
}
</style>
Loading

0 comments on commit 0dbe3d6

Please sign in to comment.