Skip to content

Commit

Permalink
more polishing on homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@theoephraim
theoephraim committed Dec 20, 2024
1 parent b3ccea9 commit fc89e03
Show file tree
Hide file tree
Showing 5 changed files with 263 additions and 86 deletions.
89 changes: 49 additions & 40 deletions packages/docs-site/src/components/CTABlock.astro
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
---
import DIcon from '@/components/DIcon.astro';
import DIcon from "@/components/DIcon.astro";
import TileButton from "@/components/TileButton.vue";
interface Props {
text?: string;
href?: string;
command?: string;
}
const { text, href, command } = Astro.props as Props;
---

<div class="cta-block">
{ href && text &&
<a href={href} class="button">{text}</a>
}
{command &&
<div class="install-command">
<DIcon name="console" />
<div>{command}</div>
<DIcon name={['copy', 'check']} class="install-command__copy" />
</div>
{href && text && <TileButton href={href}>{text}</TileButton>}
{
command && (
<div class="install-command">
<DIcon name="console" />
<div>{command}</div>
<DIcon name={["copy", "check"]} class="install-command__copy" />
</div>
)
}
</div>

Expand All @@ -31,25 +32,26 @@ const { text, href, command } = Astro.props as Props;
justify-content: center;
gap: 1rem;


@media (min-width: 50rem) {
flex-direction: row;
gap: 2rem;
}

}

a.button {

@property --spin {
syntax: '<angle>';
syntax: "<angle>";
initial-value: 35deg;
inherits: false;
}

background: linear-gradient(var(--spin), var(--brand-purple) 0%, var(--brand-red) 100%);
background: linear-gradient(
var(--spin),
var(--brand-purple) 0%,
var(--brand-red) 100%
);
color: var(--brand-white);

font-size: 18px;
height: 48px;
border-radius: 50px;
Expand All @@ -62,11 +64,13 @@ const { text, href, command } = Astro.props as Props;
display: flex;
align-items: center;
justify-content: center;
;
&:hover {
background: linear-gradient(var(--spin), var(--brand-pink) 0%, var(--brand-pink) 100%);
background: linear-gradient(
var(--spin),
var(--brand-pink) 0%,
var(--brand-pink) 100%
);
background: var(--brand-pink);

}
&:hover {
transform: translate3d(-2px, -2px, 0);
Expand All @@ -81,7 +85,6 @@ const { text, href, command } = Astro.props as Props;
box-shadow: none;
}
}


.install-command {
display: flex;
Expand All @@ -93,8 +96,8 @@ const { text, href, command } = Astro.props as Props;
font-weight: bold;
background: black;
position: relative;
html[data-theme='light'] & {
background: rgba(0,0,0,.2);
html[data-theme="light"] & {
background: rgba(0, 0, 0, 0.2);
background: var(--brand-cyan--t2);
color: black;
}
Expand All @@ -105,9 +108,12 @@ const { text, href, command } = Astro.props as Props;
--border-gradient-color-1: var(--brand-green);
--border-gradient-color-2: var(--brand-cyan);
border: 2px solid var(--border-gradient-color-1);
border-image-source: linear-gradient(90deg, var(--border-gradient-color-1), var(--border-gradient-color-2));
border-image-source: linear-gradient(
90deg,
var(--border-gradient-color-1),
var(--border-gradient-color-2)
);
border-image-slice: 1;


:global(.d-icon) {
height: 44px;
Expand All @@ -119,7 +125,7 @@ const { text, href, command } = Astro.props as Props;
width: 36px;
padding: 8px;
}

// copy icon
&:last-child {
position: absolute;
Expand All @@ -134,23 +140,26 @@ const { text, href, command } = Astro.props as Props;
}
.install-command__copy.--success {
color: var(--brand-green) !important;
:global(svg:nth-child(1)) { display: none; }
:global(svg:nth-child(2)) { display: block; }
:global(svg:nth-child(1)) {
display: none;
}
:global(svg:nth-child(2)) {
display: block;
}
}


}
</style>

<script>
document.querySelector('.install-command__copy')?.addEventListener('click', async (e) => {
await navigator.clipboard.writeText('npx dmno init');
if (e.target instanceof Element) {
e.target.classList.add('--success');
setTimeout(() => {
(e.target as Element).classList.remove('--success');
}, 2000);
}
});
document
.querySelector(".install-command__copy")
?.addEventListener("click", async (e) => {
await navigator.clipboard.writeText("npx dmno init");
if (e.target instanceof Element) {
e.target.classList.add("--success");
setTimeout(() => {
(e.target as Element).classList.remove("--success");
}, 2000);
}
});
</script>

154 changes: 154 additions & 0 deletions packages/docs-site/src/components/TileButton.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<template lang="pug">
a.tile-button(
:class="computedClasses"
:href="href"
@mouseenter="$emit('hover:start')"
@mouseleave="$emit('hover:end')"
@click="(e) => emit('click', e)"
)
.tile-button__shadow
.tile-button__back
.tile-button__front
//- .tile-button__icon
//- Icon(:icon="info.icon" class="icon" :style="{ color: info.color }")
.tile-button__label
slot {{ label }}


</template>

<script setup lang="ts">
import { ref, computed, type PropType } from 'vue';
const props = defineProps<{
label?: string;
href?: string;
}>();
const emit = defineEmits(['click']);
const computedClasses = computed(() => ({}));
</script>

<style scoped>
@property --tile-thickness {
syntax: "<length>";
inherits: true;
initial-value: 0px;
}
.tile-button {
--tile-radius: 6px;
--tile-edge-color: #222;
cursor: pointer;
text-decoration: none;
border-radius: var(--tile-radius);
position: relative;
font-weight: bold;
transition: --tile-thickness .2s cubic-bezier(.3, .7, .4, 1);;
transform: translate(var(--tile-thickness), var(--tile-thickness));
will-change: transform;
outline-offset: 4px;
:focus:not(:focus-visible) {
outline: none;
}
/* slower slide back in */
transition: --tile-thickness .6s cubic-bezier(.3, .7, .4, 1);
&:hover, &:focus {
--tile-thickness: 4px;
/* slide out more quickly */
transition: --tile-thickness .25s cubic-bezier(.3, .7, .4, 1.5);
}
&:active {
--tile-thickness: 2px !important;
transition: --tile-thickness 34ms;
}
}
.tile-button__front {
background: var(--brand-purple);
border-radius: inherit;
color: white;
padding: 2px 16px;
height: 100%;
position: relative;
z-index: 3;
display: grid;
align-items: center;
justify-content: center;
border: 1px solid var(--tile-edge-color);
/* background: linear-gradient(
var(--spin),
var(--brand-purple) 0%,
var(--brand-red) 100%
); */
}
.tile-button__back {
border-radius: inherit;
background: #888;
position: absolute;
will-change: transform;
transform: translate(calc(-1 * var(--tile-thickness)), calc(-1 * var(--tile-thickness)));
width: 100%;
height: 100%;
bottom: 0;
z-index: 2;
border: 1px solid var(--tile-edge-color);
/* 3d top face */
&:before {
content: '';
/* right: calc(-.2 * var(--tile-radius)); */
left: calc(var(--tile-thickness) + var(--tile-radius) / 2);
right: calc(-.25 * var(--tile-thickness));
height: calc(var(--tile-thickness));
border-top-right-radius: 2px;
/* background: var(--tile-shadow-color); */
position: absolute;
transform: skewX(45deg);
/* box-shadow: inset 0px -4px 4px rgba(0,0,0,.3); */
background: #AAA;
/* border-top: 1px solid var(--tile-edge-color); */
border-right: 1px solid var(--tile-edge-color);
}
/* 3d left face */
&:after {
content: '';
top: calc(var(--tile-thickness) + var(--tile-radius) / 2);
bottom: calc(-.25 * var(--tile-thickness));
width: calc(var(--tile-thickness));
border-bottom-left-radius: 2px;
background: var(--tile-shadow-color);
background: #555;
position: absolute;
transform: skewY(45deg);
/* border-left: 1px solid var(--tile-edge-color); */
border-bottom: 1px solid var(--tile-edge-color);
/* box-shadow: inset -4px 0px 4px rgba(0,0,0,.3); */
}
}
.tile-button__shadow {
height: calc(1.1 * var(--tile-thickness));
position: absolute;
bottom: 1px;
left: calc(var(--tile-radius)/4);
right: calc(var(--tile-thickness)/2);
box-shadow: calc(-2.5 * var(--tile-thickness)) calc(1 * var(--tile-thickness)) var(--tile-thickness) rgba(0,0,0,.3);
transform: skewX(45deg);
z-index: 1;
}
</style>
Loading

0 comments on commit fc89e03

Please sign in to comment.