Skip to content

Commit 28fe803

Browse files
gregagrega
committed
chore(docs): add custom styles
1 parent 89d608d commit 28fe803

3 files changed

Lines changed: 713 additions & 0 deletions

File tree

‎packages/docs/src/components/styles.module.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/*
2+
Styles for the Codelab landing page components.
3+
*/
4+
5+
:root {
6+
--codelab-card-background-color : #FFFFFF;
7+
--codelab-card-title : #3C4043;
8+
}
9+
10+
[data-theme='dark'] {
11+
--codelab-card-background-color : #1c1e21;
12+
--codelab-card-title : #FFFFFF;
13+
}
14+
15+
.codelabGrid {
16+
display: grid;
17+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
18+
gap: 1.5rem;
19+
margin-top: 2rem;
20+
}
21+
22+
.codelabCard {
23+
display: flex;
24+
flex-direction: column;
25+
background-color: var(--codelab-card-background-color);
26+
border: 1px solid var(--ifm-color-emphasis-300);
27+
border-radius: 3px;
28+
border-bottom: 2px solid #9AA0A6;
29+
text-decoration: none;
30+
color: #3C4043;
31+
/* transition: all 0.2s ease-in-out; */
32+
overflow: hidden;
33+
padding: 1.5rem;
34+
min-height: 180px;
35+
}
36+
37+
.cardHeader {
38+
display: flex;
39+
flex-direction: column;
40+
gap: 0.5rem;
41+
}
42+
43+
.cardTitle {
44+
font-size: 1.25rem;
45+
font-weight: 500;
46+
margin: 0;
47+
color: var(--codelab-card-title);
48+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
49+
line-height: 1.4;
50+
}
51+
52+
.cardIcon {
53+
display: flex;
54+
align-items: center;
55+
color: #4285F4;
56+
font-size: 1.5rem;
57+
}
58+
59+
.cardContent {
60+
padding: 1.5rem;
61+
flex-grow: 1; /* Ensures content area fills available space */
62+
}
63+
64+
.cardDescription {
65+
margin: 0;
66+
font-size: 1rem;
67+
color: var(--ifm-color-emphasis-600);
68+
}
69+
70+
.cardFooter {
71+
display: flex;
72+
justify-content: space-between;
73+
align-items: center;
74+
margin-top: auto;
75+
padding-top: 1rem;
76+
gap: 20px;
77+
}
78+
79+
/*.cardButton {
80+
background-color: #4285F4;
81+
color: #FFFFFF;
82+
font-weight: 500;
83+
padding: 0.5rem 1.25rem;
84+
border-radius: 4px;
85+
font-size: 0.9375rem;
86+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
87+
border: none;
88+
cursor: pointer;
89+
transition: background-color 0.2s ease-in-out;
90+
}*/
91+
92+
.cardButton {
93+
border: 1px solid #4285f4;
94+
background-color: #4285f4;
95+
color: #fff;
96+
text-align: center;
97+
border-radius: 4px;
98+
padding: .5rem 1.25rem;
99+
font-weight: 500;
100+
text-decoration: none;
101+
transition: background-color .2s cubic-bezier(.55, .085, .68, .53), border-color .2s cubic-bezier(.55, .055, .675, .19), color .2s cubic-bezier(.55, .085, .68, .53), transform .3s;
102+
}
103+
104+
.cardButton:hover {
105+
border-color: #1a73e8;
106+
background-color: #1a73e8;
107+
transform: scale(1.05);
108+
}
109+
110+
.eyebrow {
111+
padding: .25rem .5rem;
112+
background-color: #E8EAED;
113+
border-radius: 4px;
114+
font-size: .75rem;
115+
font-weight: 500;
116+
text-transform: uppercase;
117+
}
118+
119+
h2{
120+
font-size: 24px;
121+
}
122+
123+
h3{
124+
font-size: 20px;
125+
}

0 commit comments

Comments
 (0)