Skip to content

Commit 58f7bd5

Browse files
theoephraimtheoephraim
committed
more polishing on homepage
1 parent b3ccea9 commit 58f7bd5

File tree

5 files changed

+254
-77
lines changed

5 files changed

+254
-77
lines changed

‎packages/docs-site/src/components/CTABlock.astro

+49-40
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
---
2-
import DIcon from '@/components/DIcon.astro';
2+
import DIcon from "@/components/DIcon.astro";
3+
import TileButton from "@/components/TileButton.vue";
4+
35
interface Props {
46
text?: string;
57
href?: string;
68
command?: string;
79
}
810
911
const { text, href, command } = Astro.props as Props;
10-
1112
---
1213

1314
<div class="cta-block">
14-
{ href && text &&
15-
<a href={href} class="button">{text}</a>
16-
}
17-
{command &&
18-
<div class="install-command">
19-
<DIcon name="console" />
20-
<div>{command}</div>
21-
<DIcon name={['copy', 'check']} class="install-command__copy" />
22-
</div>
15+
{href && text && <TileButton href={href}>{text}</TileButton>}
16+
{
17+
command && (
18+
<div class="install-command">
19+
<DIcon name="console" />
20+
<div>{command}</div>
21+
<DIcon name={["copy", "check"]} class="install-command__copy" />
22+
</div>
23+
)
2324
}
2425
</div>
2526

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

34-
3535
@media (min-width: 50rem) {
3636
flex-direction: row;
3737
gap: 2rem;
3838
}
39-
4039
}
4140

4241
a.button {
43-
4442
@property --spin {
45-
syntax: '<angle>';
43+
syntax: "<angle>";
4644
initial-value: 35deg;
4745
inherits: false;
4846
}
4947

50-
background: linear-gradient(var(--spin), var(--brand-purple) 0%, var(--brand-red) 100%);
48+
background: linear-gradient(
49+
var(--spin),
50+
var(--brand-purple) 0%,
51+
var(--brand-red) 100%
52+
);
5153
color: var(--brand-white);
52-
54+
5355
font-size: 18px;
5456
height: 48px;
5557
border-radius: 50px;
@@ -62,11 +64,13 @@ const { text, href, command } = Astro.props as Props;
6264
display: flex;
6365
align-items: center;
6466
justify-content: center;
65-
;
6667
&:hover {
67-
background: linear-gradient(var(--spin), var(--brand-pink) 0%, var(--brand-pink) 100%);
68+
background: linear-gradient(
69+
var(--spin),
70+
var(--brand-pink) 0%,
71+
var(--brand-pink) 100%
72+
);
6873
background: var(--brand-pink);
69-
7074
}
7175
&:hover {
7276
transform: translate3d(-2px, -2px, 0);
@@ -81,7 +85,6 @@ const { text, href, command } = Astro.props as Props;
8185
box-shadow: none;
8286
}
8387
}
84-
8588

8689
.install-command {
8790
display: flex;
@@ -93,8 +96,8 @@ const { text, href, command } = Astro.props as Props;
9396
font-weight: bold;
9497
background: black;
9598
position: relative;
96-
html[data-theme='light'] & {
97-
background: rgba(0,0,0,.2);
99+
html[data-theme="light"] & {
100+
background: rgba(0, 0, 0, 0.2);
98101
background: var(--brand-cyan--t2);
99102
color: black;
100103
}
@@ -105,9 +108,12 @@ const { text, href, command } = Astro.props as Props;
105108
--border-gradient-color-1: var(--brand-green);
106109
--border-gradient-color-2: var(--brand-cyan);
107110
border: 2px solid var(--border-gradient-color-1);
108-
border-image-source: linear-gradient(90deg, var(--border-gradient-color-1), var(--border-gradient-color-2));
111+
border-image-source: linear-gradient(
112+
90deg,
113+
var(--border-gradient-color-1),
114+
var(--border-gradient-color-2)
115+
);
109116
border-image-slice: 1;
110-
111117

112118
:global(.d-icon) {
113119
height: 44px;
@@ -119,7 +125,7 @@ const { text, href, command } = Astro.props as Props;
119125
width: 36px;
120126
padding: 8px;
121127
}
122-
128+
123129
// copy icon
124130
&:last-child {
125131
position: absolute;
@@ -134,23 +140,26 @@ const { text, href, command } = Astro.props as Props;
134140
}
135141
.install-command__copy.--success {
136142
color: var(--brand-green) !important;
137-
:global(svg:nth-child(1)) { display: none; }
138-
:global(svg:nth-child(2)) { display: block; }
143+
:global(svg:nth-child(1)) {
144+
display: none;
145+
}
146+
:global(svg:nth-child(2)) {
147+
display: block;
148+
}
139149
}
140-
141-
142150
}
143151
</style>
144152

145153
<script>
146-
document.querySelector('.install-command__copy')?.addEventListener('click', async (e) => {
147-
await navigator.clipboard.writeText('npx dmno init');
148-
if (e.target instanceof Element) {
149-
e.target.classList.add('--success');
150-
setTimeout(() => {
151-
(e.target as Element).classList.remove('--success');
152-
}, 2000);
153-
}
154-
});
154+
document
155+
.querySelector(".install-command__copy")
156+
?.addEventListener("click", async (e) => {
157+
await navigator.clipboard.writeText("npx dmno init");
158+
if (e.target instanceof Element) {
159+
e.target.classList.add("--success");
160+
setTimeout(() => {
161+
(e.target as Element).classList.remove("--success");
162+
}, 2000);
163+
}
164+
});
155165
</script>
156-

‎packages/docs-site/src/components/TileButton.vue

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<template lang="pug">
2+
a.tile-button(
3+
:class="computedClasses"
4+
:href="href"
5+
@mouseenter="$emit('hover:start')"
6+
@mouseleave="$emit('hover:end')"
7+
@click="(e) => emit('click', e)"
8+
)
9+
.tile-button__shadow
10+
.tile-button__back
11+
.tile-button__front
12+
//- .tile-button__icon
13+
//- Icon(:icon="info.icon" class="icon" :style="{ color: info.color }")
14+
.tile-button__label
15+
slot {{ label }}
16+
17+
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { ref, computed, type PropType } from 'vue';
22+
23+
const props = defineProps<{
24+
label?: string;
25+
href?: string;
26+
}>();
27+
28+
const emit = defineEmits(['click']);
29+
30+
const computedClasses = computed(() => ({}));
31+
32+
</script>
33+
34+
<style scoped>
35+
36+
@property --tile-thickness {
37+
syntax: "<length>";
38+
inherits: true;
39+
initial-value: 0px;
40+
}
41+
42+
.tile-button {
43+
--tile-radius: 6px;
44+
--tile-edge-color: #222;
45+
46+
cursor: pointer;
47+
text-decoration: none;
48+
border-radius: var(--tile-radius);
49+
position: relative;
50+
font-weight: bold;
51+
52+
transition: --tile-thickness .2s cubic-bezier(.3, .7, .4, 1);;
53+
54+
transform: translate(var(--tile-thickness), var(--tile-thickness));
55+
will-change: transform;
56+
57+
outline-offset: 4px;
58+
59+
:focus:not(:focus-visible) {
60+
outline: none;
61+
}
62+
63+
/* slower slide back in */
64+
transition: --tile-thickness .6s cubic-bezier(.3, .7, .4, 1);
65+
66+
&:hover, &:focus {
67+
--tile-thickness: 4px;
68+
/* slide out more quickly */
69+
transition: --tile-thickness .25s cubic-bezier(.3, .7, .4, 1.5);
70+
}
71+
&:active {
72+
--tile-thickness: 2px !important;
73+
transition: --tile-thickness 34ms;
74+
}
75+
}
76+
77+
.tile-button__front {
78+
background: var(--brand-purple);
79+
border-radius: inherit;
80+
color: white;
81+
padding: 2px 16px;
82+
height: 100%;
83+
position: relative;
84+
z-index: 3;
85+
display: grid;
86+
align-items: center;
87+
justify-content: center;
88+
border: 1px solid var(--tile-edge-color);
89+
90+
/* background: linear-gradient(
91+
var(--spin),
92+
var(--brand-purple) 0%,
93+
var(--brand-red) 100%
94+
); */
95+
96+
}
97+
.tile-button__back {
98+
border-radius: inherit;
99+
background: #888;
100+
position: absolute;
101+
will-change: transform;
102+
transform: translate(calc(-1 * var(--tile-thickness)), calc(-1 * var(--tile-thickness)));
103+
width: 100%;
104+
height: 100%;
105+
bottom: 0;
106+
z-index: 2;
107+
border: 1px solid var(--tile-edge-color);
108+
109+
/* 3d top face */
110+
&:before {
111+
content: '';
112+
/* right: calc(-.2 * var(--tile-radius)); */
113+
114+
left: calc(var(--tile-thickness) + var(--tile-radius) / 2);
115+
right: calc(-.25 * var(--tile-thickness));
116+
height: calc(var(--tile-thickness));
117+
118+
119+
border-top-right-radius: 2px;
120+
/* background: var(--tile-shadow-color); */
121+
position: absolute;
122+
transform: skewX(45deg);
123+
/* box-shadow: inset 0px -4px 4px rgba(0,0,0,.3); */
124+
background: #AAA;
125+
/* border-top: 1px solid var(--tile-edge-color); */
126+
border-right: 1px solid var(--tile-edge-color);
127+
}
128+
/* 3d left face */
129+
&:after {
130+
content: '';
131+
top: calc(var(--tile-thickness) + var(--tile-radius) / 2);
132+
bottom: calc(-.25 * var(--tile-thickness));
133+
width: calc(var(--tile-thickness));
134+
border-bottom-left-radius: 2px;
135+
background: var(--tile-shadow-color);
136+
background: #555;
137+
position: absolute;
138+
transform: skewY(45deg);
139+
/* border-left: 1px solid var(--tile-edge-color); */
140+
border-bottom: 1px solid var(--tile-edge-color);
141+
/* box-shadow: inset -4px 0px 4px rgba(0,0,0,.3); */
142+
}
143+
}
144+
.tile-button__shadow {
145+
height: calc(1.1 * var(--tile-thickness));
146+
position: absolute;
147+
bottom: 1px;
148+
left: calc(var(--tile-radius)/4);
149+
right: calc(var(--tile-thickness)/2);
150+
box-shadow: calc(-2.5 * var(--tile-thickness)) calc(1 * var(--tile-thickness)) var(--tile-thickness) rgba(0,0,0,.3);
151+
transform: skewX(45deg);
152+
z-index: 1;
153+
}
154+
</style>

0 commit comments

Comments
 (0)