Skip to content

Commit 39b141e

Browse files
guofooguofoo
committed
fix card bg colors
1 parent e2ae268 commit 39b141e

4 files changed

Lines changed: 532 additions & 402 deletions

File tree

‎src/assets/styles/dockit.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@
1515

1616
/* Hero Background */
1717
.hero-bg {
18-
position: absolute;
18+
position: fixed;
1919
top: 0;
2020
left: 0;
2121
width: 100%;
22-
height: 100vh;
22+
height: 100%;
2323
z-index: -10;
2424
background: no-repeat top center;
2525
background-size: cover;
@@ -35,7 +35,7 @@
3535

3636
/* Section Titles */
3737
.section-title {
38-
font-size: clamp(2.8rem, 5vw, 4.8rem);
38+
font-size: clamp(2.2rem, 4vw, 3.8rem);
3939
line-height: 1;
4040
font-weight: 700;
4141
font-family: var(--aw-font-heading, 'Lato', sans-serif);

‎src/components/dockit/Card.astro‎

Lines changed: 87 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,103 +2,107 @@
22
import { Icon } from 'astro-icon/components';
33
44
interface Props {
5-
icon?: string;
6-
title: string;
7-
iconColor?: string;
8-
size?: 'large' | 'small';
5+
icon?: string;
6+
title: string;
7+
iconColor?: string;
8+
size?: 'large' | 'small';
99
}
1010
1111
const { icon, title, iconColor, size = 'large' } = Astro.props;
1212
---
1313

1414
<article class={`dockit-card group ${size === 'small' ? 'p-6' : 'py-12 px-10'}`}>
15-
{icon && (
16-
<Icon
17-
name={icon}
18-
class="dockit-card-icon"
19-
size={size === 'small' ? '1.4rem' : '2rem'}
20-
style={iconColor ? `color: ${iconColor}` : ''}
21-
/>
22-
)}
23-
<h3 class="dockit-card-title mt-11 mb-4" set:html={title} />
24-
<div class="dockit-card-body"><slot /></div>
25-
{size !== 'small' && (
26-
<div class="mt-15">
27-
<span>
28-
<svg
29-
class="dockit-card-arrow transition-transform duration-300 group-hover:-rotate-45"
30-
width="18"
31-
height="18"
32-
viewBox="0 0 18 18"
33-
fill="none"
34-
xmlns="http://www.w3.org/2000/svg"
35-
>
36-
<path
37-
fill-rule="evenodd"
38-
clip-rule="evenodd"
39-
d="M10.3209 0.715753L17.3509 7.84376C17.7823 8.28117 17.7823 8.99035 17.3509 9.42776L10.3209 16.5558C9.88952 16.9932 9.1901 16.9932 8.7587 16.5558C8.32731 16.1184 8.32731 15.4092 8.7587 14.9718L13.9029 9.75582H1.10465C0.494569 9.75582 0 9.25435 0 8.63576C0 8.01717 0.494569 7.5157 1.10465 7.5157H13.9029L8.7587 2.29975C8.32731 1.86234 8.32731 1.15316 8.7587 0.715753C9.1901 0.278343 9.88952 0.278343 10.3209 0.715753Z"
40-
class="fill-gray-800 dark:fill-gray-200"
41-
/>
42-
</svg>
43-
</span>
44-
</div>
45-
)}
15+
{
16+
icon && (
17+
<Icon
18+
name={icon}
19+
class="dockit-card-icon"
20+
size={size === 'small' ? '1.4rem' : '2rem'}
21+
style={iconColor ? `color: ${iconColor}` : ''}
22+
/>
23+
)
24+
}
25+
<h3 class="dockit-card-title mt-11 mb-4" set:html={title} />
26+
<div class="dockit-card-body"><slot /></div>
27+
{
28+
size !== 'small' && (
29+
<div class="mt-15">
30+
<span>
31+
<svg
32+
class="dockit-card-arrow transition-transform duration-300 group-hover:-rotate-45"
33+
width="18"
34+
height="18"
35+
viewBox="0 0 18 18"
36+
fill="none"
37+
xmlns="http://www.w3.org/2000/svg"
38+
>
39+
<path
40+
fill-rule="evenodd"
41+
clip-rule="evenodd"
42+
d="M10.3209 0.715753L17.3509 7.84376C17.7823 8.28117 17.7823 8.99035 17.3509 9.42776L10.3209 16.5558C9.88952 16.9932 9.1901 16.9932 8.7587 16.5558C8.32731 16.1184 8.32731 15.4092 8.7587 14.9718L13.9029 9.75582H1.10465C0.494569 9.75582 0 9.25435 0 8.63576C0 8.01717 0.494569 7.5157 1.10465 7.5157H13.9029L8.7587 2.29975C8.32731 1.86234 8.32731 1.15316 8.7587 0.715753C9.1901 0.278343 9.88952 0.278343 10.3209 0.715753Z"
43+
class="fill-gray-800 dark:fill-gray-200"
44+
/>
45+
</svg>
46+
</span>
47+
</div>
48+
)
49+
}
4650
</article>
4751

4852
<style>
49-
.dockit-card {
50-
display: flex;
51-
flex-direction: column;
52-
border-radius: 1rem;
53-
position: relative;
54-
transition: all 0.5s ease;
55-
border: 1px solid rgba(255, 255, 255, 0.1);
56-
background: rgba(21, 21, 21, 0.5);
57-
}
53+
.dockit-card {
54+
display: flex;
55+
flex-direction: column;
56+
border-radius: 1rem;
57+
position: relative;
58+
transition: all 0.5s ease;
59+
background: rgba(120, 120, 120, 0.7);
60+
border: 1px solid rgba(255, 255, 255, 0.1);
61+
}
5862

59-
:global(:not(.dark)) .dockit-card {
60-
background: rgba(247, 247, 247, 0.5);
61-
border-color: rgba(0, 0, 0, 0.1);
62-
}
63+
:global(:not(.dark)) .dockit-card {
64+
background: rgba(220, 220, 220, 0.7);
65+
border-color: rgba(253, 253, 253, 0);
66+
}
6367

64-
.dockit-card::before {
65-
content: '';
66-
position: absolute;
67-
inset: 0;
68-
padding: 1px;
69-
background: linear-gradient(35.65deg, #3a1c71 -10.94%, #d76d77 61.04%, #ffca7b 133.01%);
70-
border-radius: inherit;
71-
mask:
72-
linear-gradient(#fff 0 0) content-box,
73-
linear-gradient(#fff 0 0);
74-
mask-composite: xor;
75-
-webkit-mask-composite: xor;
76-
opacity: 0;
77-
transition: opacity 0.5s ease;
78-
}
68+
.dockit-card::before {
69+
content: '';
70+
position: absolute;
71+
inset: 0;
72+
padding: 1px;
73+
background: linear-gradient(35.65deg, #3a1c71 -10.94%, #d76d77 61.04%, #ffca7b 133.01%);
74+
border-radius: inherit;
75+
mask:
76+
linear-gradient(#fff 0 0) content-box,
77+
linear-gradient(#fff 0 0);
78+
mask-composite: xor;
79+
-webkit-mask-composite: xor;
80+
opacity: 0;
81+
transition: opacity 0.5s ease;
82+
}
7983

80-
.dockit-card:hover::before {
81-
opacity: 1;
82-
}
84+
.dockit-card:hover::before {
85+
opacity: 1;
86+
}
8387

84-
.dockit-card-title {
85-
font-size: 1.5rem;
86-
color: var(--sl-color-white, #f6f6f6);
87-
line-height: 1.3;
88-
font-weight: 700;
89-
}
88+
.dockit-card-title {
89+
font-size: 1.5rem;
90+
color: var(--sl-color-white, #f6f6f6);
91+
line-height: 1.3;
92+
font-weight: 700;
93+
}
9094

91-
.dockit-card-body {
92-
margin: 0;
93-
font-size: 1rem;
94-
color: var(--aw-color-text-muted);
95-
}
95+
.dockit-card-body {
96+
margin: 0;
97+
font-size: 1rem;
98+
color: var(--aw-color-text-muted);
99+
}
96100

97-
:global(:not(.dark)) .dockit-card-title {
98-
color: #181818;
99-
}
101+
:global(:not(.dark)) .dockit-card-title {
102+
color: #181818;
103+
}
100104

101-
:global(:not(.dark)) .dockit-card-body {
102-
color: var(--aw-color-text-default);
103-
}
105+
:global(:not(.dark)) .dockit-card-body {
106+
color: var(--aw-color-text-default);
107+
}
104108
</style>

‎src/navigation.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@ export const headerData = {
66
text: 'Features',
77
href: getPermalink('/#features'),
88
},
9+
{
10+
text: 'Technology',
11+
href: getPermalink('/#technology'),
12+
},
13+
{
14+
text: 'Getting Started',
15+
href: getPermalink('/#getting-started'),
16+
},
17+
{
18+
text: 'FAQ',
19+
href: getPermalink('/#faq'),
20+
},
921
{
1022
text: 'Documentation',
1123
href: 'https://github.com/project-robius/robrix#readme',

0 commit comments

Comments
 (0)