Skip to content

Commit 688e694

Browse files
zzq0826zzq0826
committed
tailwind-integration
1 parent fddc3fb commit 688e694

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+451
-549
lines changed

‎src/components/Aside.astro‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,14 @@ const icons = {
3232

3333
<style>
3434
aside {
35-
--aside-bg: var(--color-background-info);
36-
37-
padding: var(--space-4x);
38-
gap: var(--space-4x);
39-
background-color: var(--aside-bg);
40-
border-radius: var(--border-radius-10);
41-
color: var(--color-text-info);
42-
4335
/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
4436
outline: 1px solid transparent;
4537

38+
--aside-bg: var(--color-background-info);
39+
background-color: var(--aside-bg);
40+
4641
display: flex;
42+
@apply p-4 gap-4 rounded-[4px] text-info;
4743
}
4844

4945
.title {
@@ -53,7 +49,7 @@ const icons = {
5349
}
5450

5551
aside p {
56-
color: var(--color-text-info);
52+
@apply text-info;
5753
}
5854

5955
.icon {
@@ -67,16 +63,16 @@ const icons = {
6763

6864
aside :global(a),
6965
aside :global(a > code:not([class*="language"])) {
70-
color: var(--color-text-link);
66+
@apply text-link;
7167
}
7268

7369
aside :global(p),
7470
aside.content :global(ul) {
75-
color: var(--theme-text);
71+
@apply text-text;
7672
}
7773

7874
:global(.theme-dark) aside :global(code:not([class*="language"])) {
79-
color: var(--theme-code-text);
75+
@apply text-code-text;
8076
}
8177

8278
aside :global(pre) {
@@ -102,6 +98,6 @@ const icons = {
10298
}
10399

104100
.asideContent :global(p + p) {
105-
margin-top: var(--space-2x);
101+
@apply mt-2;
106102
}
107103
</style>

‎src/components/Footer/Footer.astro‎

Lines changed: 24 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
// TODO: Replace all footer elements -- INCLUDING SOCIAL MEDIA ICONS!
33
---
44

5-
<footer class="footer">
6-
<div class="footer-grid container">
5+
<footer class="pt-[82px] bg-gray-800 text-base">
6+
<div class="footer-grid grid pb-16 gap-8 container">
77
<nav class="footer-col">
88
<h3 class="h3 footer-heading">Column 1</h3>
99
<ul role="list" class="footer-list">
@@ -110,114 +110,84 @@
110110
</footer>
111111

112112
<style>
113-
.footer {
114-
padding: 82px 0 0;
115-
background-color: var(--gray-800);
116-
font-size: 16px;
117-
}
118-
.footer-grid {
119-
display: grid;
120-
padding-bottom: 64px;
121-
gap: 32px;
122-
}
123113
.footer-heading {
124-
color: var(--white);
125-
font-size: 18px;
114+
@apply text-white text-[18px];
126115
}
127116
.footer-chainlinkreg {
128-
white-space: nowrap;
117+
@apply whitespace-nowrap;
129118
}
130119

131120
.footer-list-item {
132-
display: flex;
133-
margin-bottom: 16px;
134-
align-items: center;
121+
@apply flex mb-4 items-center;
135122
}
136123

137124
.footer-list-item.footer-list-item-hidden {
138-
display: none;
125+
@apply hidden;
139126
}
140127

141128
.footer-list-item-link {
142-
color: #9ea2ab;
129+
@apply text-[#9ea2ab];
143130
}
144131
.footer-list-item-link:hover {
145-
color: white;
132+
@apply text-white;
146133
}
147134

148135
.footer-list-item-social {
149-
display: flex;
150-
margin-bottom: 16px;
136+
@apply flex mb-4;
151137
}
152138

153139
.footer-list-item-social-icon {
154140
margin-right: 8px;
155141
}
156142

157143
.footer-copyright-wrapper {
158-
width: 100%;
159-
background-color: var(--gray-900);
160-
padding: var(--space-8x);
161-
font-size: 14px;
144+
@apply w-full bg-gray-900 p-8 text-sm;
162145
}
163146
.footer-copyright {
164-
display: flex;
165-
flex-direction: column;
166-
gap: var(--space-8x);
147+
@apply flex flex-col gap-8;
167148
}
168149
.footer-registry {
169-
flex-wrap: wrap;
170-
flex-direction: column;
150+
@apply flex-wrap flex-col;
171151
}
172152
.footer-privacyandterms {
173-
justify-content: space-evenly;
174-
gap: var(--space-8x);
153+
@apply place-content-evenly gap-8;
154+
/* justify-content: space-evenly; */
175155
}
176156
.footer-privacyandterms a {
177-
color: var(--white);
157+
@apply text-white;
178158
}
179159

180160
@media (min-width: 50em) {
181161
.footer-grid {
182-
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
162+
@apply grid-cols-6;
183163
}
184164
.footer-copyright {
185-
display: flex;
186-
flex-direction: row;
187-
justify-content: space-between;
165+
@apply flex flex-row justify-between;
188166
}
189167
.footer-registry {
190-
flex-direction: row;
168+
@apply flex-row;
191169
}
192170
.footer-copyright-logo {
193-
margin-right: var(--space-8x);
171+
@apply mr-8;
194172
}
195173
.footer-chainlinkreg {
196-
margin-right: var(--space-4x);
174+
@apply mr-4;
197175
}
198176
}
199177

200178
/** Utilities */
201179
.col {
202-
display: flex;
203-
align-items: center;
180+
@apply flex items-center;
204181
}
205182
.footer-logo-text-hide {
206-
position: absolute;
207-
left: 0;
208-
top: 0;
209-
z-index: -1;
210-
width: 0;
211-
height: 0;
212-
min-width: 0;
213-
opacity: 0;
183+
@apply absolute left-0 top-0 z-[-1] w-0 h-0 min-w-0 opacity-0;
214184
}
215185
.hidden-sm {
216-
display: none;
186+
@apply hidden;
217187
}
218188
@media (min-width: 50em) {
219189
.hidden-sm {
220-
display: block;
190+
@apply block;
221191
}
222192
}
223193
</style>

‎src/components/Footer/NewsletterCTA.css‎

Lines changed: 11 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,50 @@
11
.newsletter-cta {
2-
display: flex;
3-
flex-direction: column;
4-
align-items: center;
5-
padding: var(--space-16x) var(--space-8x);
6-
background-image: url(/images/newsletter_bg.svg);
7-
background-position: center;
8-
background-size: cover;
9-
}
10-
11-
.newsletter-cta .hiddenLabel {
12-
overflow: hidden;
13-
display: none;
14-
width: var(--space-0x);
15-
height: var(--space-0x);
16-
text-indent: 100%;
17-
white-space: nowrap;
2+
@apply flex flex-col items-center py-16 px-8 bg-center bg-cover bg-[url('/images/newsletter_bg.svg')];
183
}
194

205
.newsletter-cta :is(h2) {
21-
margin-bottom: var(--space-12x);
6+
@apply mb-12;
227
}
238

249
.newsletter-cta .w-inline-block {
25-
max-width: 100%;
26-
display: inline-block;
10+
@apply max-w-full inline-block;
2711
}
2812

2913
.form-subscribe {
30-
max-width: 550px;
31-
width: 100%;
14+
@apply max-w-[550px] w-full;
3215
}
3316

3417
.form-subscribe-field-wrapper {
35-
display: flex;
36-
gap: var(--space-2x);
37-
flex-direction: column;
18+
@apply flex gap-2 flex-col;
3819
}
3920

4021
@media (min-width: 50em) {
4122
.form-subscribe-field-wrapper {
42-
flex-direction: row;
43-
44-
gap: var(--space-4x);
23+
@apply flex-row gap-4;
4524
}
4625
}
4726
.newsletter-cta .cta-subscribe-input {
48-
width: 100%;
49-
height: 56px;
50-
max-height: 56px;
51-
padding-right: 24px;
52-
padding-left: 24px;
53-
border-style: solid;
54-
border-width: var(--border-width-secondary);
55-
border-color: var(--gray-300);
56-
border-radius: var(--border-radius-primary);
57-
box-shadow: 0 12px 32px -12px rgb(12 22 44 / 32%);
27+
@apply w-full h-[56px] max-h-[56px] px-6 border-solid border-2 border-gray-300 rounded-primary shadow-[0_12px_32px_-12px_rgba(12,22,44,0.32)];
5828
}
5929
.newsletter-cta .cta-subscribe-input::placeholder {
60-
font-style: italic;
30+
@apply italic;
6131
}
6232

6333
/* #subscribe-button {
6434
width: 100%;
6535
} */
6636
.subscribe-form-success-social {
67-
margin-right: 4px;
68-
margin-left: 4px;
37+
@apply mx-1;
6938
transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
7039
}
7140
.subscribe-success-social {
72-
margin-top: var(--space-2x);
73-
display: flex;
74-
justify-content: center;
41+
@apply mt-2 flex justify-center;
7542
}
7643

7744
.subscribe-form-success-social:hover {
7845
transform: translate(0px, -4px);
7946
}
8047

8148
.newsletter-cta .form-subscribe-checkbox {
82-
display: block;
83-
margin-top: var(--space-4x);
84-
cursor: pointer;
49+
@apply block mt-4 cursor-pointer;
8550
}

‎src/components/Footer/NewsletterCTA.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export type NewsletterCTAProps = {
88
}
99
export const NewsletterCTA = ({ title = "Stay updated on the latest Scroll news" }: NewsletterCTAProps) => {
1010
return (
11-
<section className={"newsletter-cta"}>
11+
<section className="newsletter-cta">
1212
<h2 className="cta-subscribe-h1 heading-600">{title}</h2>
1313
<NewsletterSignupForm />
1414
</section>

‎src/components/Footer/NewsletterSignupForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const NewsletterSignupForm = () => {
5454
onSubmit={onSubmit}
5555
>
5656
<div className="form-subscribe-field-wrapper">
57-
<label htmlFor="Email" className="hiddenLabel ">
57+
<label htmlFor="Email" className="overflow-hidden hidden w-0 h-0 indent-[100%] whitespace-nowrap">
5858
Email Address
5959
</label>
6060
<input

‎src/components/Header/AstroLogo.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ const { size } = Astro.props
55
<svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
66
<style>
77
#flame {
8-
fill: var(--theme-text-accent);
8+
@apply fill-accent;
99
}
1010
#a {
11-
fill: var(--theme-text-accent);
11+
@apply fill-accent;
1212
}
1313
</style>
1414
<title>Logo</title>

‎src/components/Header/Header.astro‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const section = frontmatter?.section ?? ""
2222
<header>
2323
<SkipToContent />
2424
<nav class="nav-wrapper" title="Top Navigation">
25-
<div class="logo flex">
25+
<div class="logo flex items-center">
2626
<a href="/">
2727
<img src="/scroll-docs.svg" style="height:40px; width: 183px" alt={CONFIG.SITE.title ?? "Documentation"} />
2828
</a>
@@ -57,23 +57,22 @@ const section = frontmatter?.section ?? ""
5757
<style>
5858
header {
5959
z-index: 11;
60-
height: var(--theme-navbar-height);
6160
width: 100%;
62-
background-color: var(--white);
6361
display: flex;
6462
align-items: center;
6563
justify-content: center;
6664
overflow: hidden;
6765
position: sticky;
6866
top: 0;
67+
@apply h-navbar bg-white;
6968
}
7069

7170
.nav-link {
72-
color: var(--color-text-primary);
71+
@apply text-primary;
7372
}
7473

7574
.nav-link:hover {
76-
color: var(--color-text-link);
75+
@apply text-link;
7776
}
7877

7978
.logo {
@@ -101,12 +100,12 @@ const section = frontmatter?.section ?? ""
101100

102101
.logo a {
103102
transition: color 100ms ease-out;
104-
color: var(--theme-text);
103+
@apply text-text;
105104
}
106105

107106
.logo a:hover,
108107
.logo a:focus {
109-
color: var(--theme-text-accent);
108+
@apply text-accent;
110109
}
111110

112111
.logo h1 {
@@ -171,7 +170,7 @@ const section = frontmatter?.section ?? ""
171170
justify-content: center;
172171
}
173172
.navbar a[aria-current="true"] {
174-
border-bottom: 2px solid var(--color-text-link);
173+
@apply border-2 border-solid border-link;
175174
}
176175
.github-url {
177176
width: 24px;

0 commit comments

Comments
 (0)