Skip to content

Commit 1203865

Browse files
RobbieTheWagnerRobbieTheWagner
committed
Fix some styles
1 parent c461fa8 commit 1203865

File tree

6 files changed

+119
-128
lines changed

6 files changed

+119
-128
lines changed

‎landing/src/components/Footer.astro‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,57 @@
11
---
2+
import { Image } from 'astro:assets';
3+
4+
import GitHubLogo from '../images/github.svg?raw';
5+
import LinkedInLogo from '../images/linkedin.svg?raw';
6+
import TwitterLogo from '../images/twitter.svg?raw';
27
import ShepherdWink from '../images/shepherd-head-wink.svg';
38
---
49

5-
<footer class='flex justify-center mt-auto w-full'>
6-
<img
7-
class='footer-logo absolute w-48'
8-
src={ShepherdWink.src}
9-
alt='Shepherd Winking'
10-
role='presentation'
10+
<footer class="flex justify-center mt-auto w-full">
11+
<Image
12+
class="footer-logo absolute w-48"
13+
src={ShepherdWink}
14+
alt="An adorable, retro looking sheep that is winking and smiling."
15+
role="presentation"
1116
/>
1217

1318
<div
14-
class='bg-grey border-4 border-navy flex flex-wrap items-center justify-center md:justify-between max-w-8xl p-8 pt-20 w-full md:pt-8'
19+
class="bg-grey border-4 border-navy flex flex-wrap items-center justify-center md:justify-between max-w-8xl p-8 pt-20 w-full md:pt-8"
1520
>
1621
<div
17-
class='flex items-center justify-center w-full md:justify-between md:w-auto'
22+
class="flex items-center justify-center w-full md:justify-between md:w-auto"
1823
>
1924
<img
20-
class='inline mr-2 w-8'
21-
src='/img/ship-shape-logo.svg'
22-
alt='Ship Shape Logo'
25+
class="inline mr-2 w-8"
26+
src="/img/ship-shape-logo.svg"
27+
alt="Ship Shape Logo"
2328
/>
2429

25-
<span class='font-heading text-xl uppercase'>
30+
<span class="font-heading text-xl uppercase">
2631
Library by
27-
<a class='underline hover:text-navy-light' href='https://shipshape.io'
28-
>Ship Shape</a
29-
>
32+
<a class="underline hover:text-navy-light" href="https://shipshape.io">
33+
Ship Shape
34+
</a>
3035
</span>
3136
</div>
3237

33-
<div class='flex items-center'>
34-
<a href='https://github.com/shipshapecode/shepherd'>
35-
<img
36-
class='footer-icon mr-4 w-6'
37-
src='/img/github.svg'
38-
alt='GitHub Logo'
39-
/>
38+
<div class="flex items-center">
39+
<a
40+
class="footer-icon mr-4 w-6"
41+
href="https://github.com/shipshapecode/shepherd"
42+
>
43+
<Fragment set:html={GitHubLogo} />
4044
</a>
4145

42-
<a href='https://twitter.com/whiskeywebfm'>
43-
<img
44-
class='footer-icon mr-4 w-6'
45-
src='/img/twitter.svg'
46-
alt='Twitter Logo'
47-
/>
46+
<a class="footer-icon mr-4 w-6" href="https://twitter.com/whiskeywebfm">
47+
<Fragment set:html={TwitterLogo} />
4848
</a>
4949

50-
<a href='https://www.linkedin.com/company/ship-shape/'>
51-
<img
52-
class='footer-icon mr-4 w-6'
53-
src='/img/linkedin.svg'
54-
alt='LinkedIn Logo'
55-
/>
50+
<a
51+
class="footer-icon mr-4 w-6"
52+
href="https://www.linkedin.com/company/ship-shape/"
53+
>
54+
<Fragment set:html={LinkedInLogo} />
5655
</a>
5756
</div>
5857
</div>

‎landing/src/components/Header.astro‎

Lines changed: 59 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,167 +6,153 @@ import ShepherdHeader from '../images/shepherd-header.svg';
66
const { isHome } = Astro.props;
77
---
88

9-
<header class='flex justify-center mt-4 w-full'>
10-
<div class='absolute ml-2 top-0'>
11-
<Fragment class='shepherd-logo absolute ml-2' set:html={ShepherdHead} />
9+
<header class="flex justify-center mt-4 w-full">
10+
<div class="absolute ml-2 top-0">
11+
<Fragment class="shepherd-logo absolute ml-2" set:html={ShepherdHead} />
1212
</div>
1313

1414
<div
15-
class='bg-grey-light flex flex-col font-heading justify-center items-center w-full'
15+
class="bg-grey-light flex flex-col font-heading justify-center items-center w-full"
1616
>
1717
<nav
18-
class='flex flex-wrap justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0'
18+
class="flex flex-wrap justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0"
1919
>
20-
<div class='flex lg:p-12'>
20+
<div class="flex lg:p-12">
2121
<a
22-
class='pr-6 uppercase hover:text-navy-light lg:pr-10'
23-
href='https://github.com/shipshapecode/shepherd'
22+
class="pr-6 uppercase hover:text-navy-light lg:pr-10"
23+
href="https://github.com/shipshapecode/shepherd"
2424
>
2525
GitHub
2626
</a>
2727
<a
28-
class='pr-6 uppercase lg:pr-10 hover:text-navy-light'
29-
href='https://docs.shepherdjs.dev'
28+
class="pr-6 uppercase lg:pr-10 hover:text-navy-light"
29+
href="https://docs.shepherdjs.dev"
3030
>
3131
Docs
3232
</a>
33-
<a class='pr-6 uppercase hover:text-navy-light lg:pr-0' href='/'>
33+
<button
34+
class="pr-6 uppercase cursor-pointer hover:text-navy-light lg:pr-0"
35+
id="showTour"
36+
type="button"
37+
>
3438
Demo
35-
</a>
39+
</button>
3640
</div>
3741

38-
<div class='flex lg:p-12'>
42+
<div class="flex lg:p-12">
3943
<a
40-
class='pr-6 uppercase hover:text-navy-light lg:pr-10'
41-
href='/pricing'
44+
class="pr-6 uppercase hover:text-navy-light lg:pr-10"
45+
href="/pricing"
4246
>
4347
Pricing
4448
</a>
4549
<a
46-
class='pr-6 uppercase hover:text-navy-light lg:pr-10'
47-
href='https://discord.gg/EGcDW5NSud'
50+
class="pr-6 uppercase hover:text-navy-light lg:pr-10"
51+
href="https://discord.gg/EGcDW5NSud"
4852
>
4953
Discord
5054
</a>
5155
<!-- <a class='pr-6 uppercase hover:text-navy-light lg:pr-10' href='/blog'>
5256
Blog
5357
</a> -->
5458
<a
55-
class='uppercase hover:text-navy-light'
56-
href='mailto:[email protected]'
59+
class="uppercase hover:text-navy-light"
60+
href="mailto:[email protected]"
5761
>
5862
Contact
5963
</a>
6064
</div>
6165
</nav>
6266

6367
<img
64-
class='hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto'
68+
class="hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
6569
src={ShepherdHeader.src}
6670
alt={SITE_TITLE}
6771
/>
6872

69-
<h2 class='font-body p-2 text-xl'>
73+
<h2 class="font-body p-2 text-xl">
7074
Guide your users through a tour of your app
7175
</h2>
7276

7377
{
7478
isHome && (
75-
<div class='column justify-center w-full'>
76-
<div class='mx-auto max-w-2xl text-center'>
77-
<div class='mt-10 flex items-center justify-center gap-x-6'>
78-
<div class='bg-navy inline-block mb-4 w-56'>
79-
<button
80-
id="showTour"
81-
type='button'
82-
class='button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full'
83-
>
84-
Show Demo Tour
85-
</button>
86-
</div>
87-
<a href="#hero-including" class='mb-4 text-md font-semibold leading-6 text-gray-900'>
88-
Learn more <span aria-hidden='true'>→</span>
89-
</a>
90-
</div>
91-
</div>
92-
</div>
93-
<div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
94-
<div class='m-4 relative w-full lg:w-1/3'>
95-
<div class='border-4 border-navy w-full'>
79+
<div class="flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap">
80+
<div class="m-4 relative w-full lg:w-1/3">
81+
<div class="border-4 border-navy w-full">
9682
<img
97-
class='absolute a11y-icon z-20'
98-
src='/img/accessibility.svg'
99-
alt=''
100-
role='presentation'
83+
class="absolute a11y-icon z-20"
84+
src="/img/accessibility.svg"
85+
alt=""
86+
role="presentation"
10187
/>
10288

103-
<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
89+
<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
10490

105-
<div class='bg-white h-72 p-6 relative z-10'>
106-
<h3 class='p-2 text-2xl text-center uppercase w-full'>
91+
<div class="bg-white h-72 p-6 relative z-10">
92+
<h3 class="p-2 text-2xl text-center uppercase w-full">
10793
Accessibility
10894
</h3>
10995

110-
<p class='font-body p-2 text-xl'>
96+
<p class="font-body p-2 text-xl">
11197
Shepherd has full keyboard navigation support, focus trapping,
11298
and a11y compliance via aria attributes.
11399
</p>
114100
</div>
115101

116-
<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
102+
<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
117103
</div>
118104
</div>
119105

120-
<div class='m-4 relative w-full lg:w-1/3'>
121-
<div class='border-4 border-navy w-full'>
106+
<div class="m-4 relative w-full lg:w-1/3">
107+
<div class="border-4 border-navy w-full">
122108
<img
123-
class='absolute customizable-icon z-20'
124-
src='/img/customizable.svg'
125-
alt=''
126-
role='presentation'
109+
class="absolute customizable-icon z-20"
110+
src="/img/customizable.svg"
111+
alt=""
112+
role="presentation"
127113
/>
128114

129-
<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
115+
<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
130116

131-
<div class='bg-white h-72 p-6 relative z-10'>
132-
<h3 class='p-2 text-2xl text-center uppercase w-full'>
117+
<div class="bg-white h-72 p-6 relative z-10">
118+
<h3 class="p-2 text-2xl text-center uppercase w-full">
133119
Highly Customizable
134120
</h3>
135121

136-
<p class='font-body p-2 text-xl'>
122+
<p class="font-body p-2 text-xl">
137123
Shepherd's styles are kept minimal, allowing you to easily
138124
customize the look and feel, but still give you enough to drop
139125
in and be ready to go quickly.
140126
</p>
141127
</div>
142128

143-
<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
129+
<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
144130
</div>
145131
</div>
146132

147-
<div class='m-4 relative w-full lg:w-1/3'>
148-
<div class='border-4 border-navy w-full'>
133+
<div class="m-4 relative w-full lg:w-1/3">
134+
<div class="border-4 border-navy w-full">
149135
<img
150-
class='absolute framework-icon z-20'
151-
src='/img/framework.svg'
152-
alt=''
153-
role='presentation'
136+
class="absolute framework-icon z-20"
137+
src="/img/framework.svg"
138+
alt=""
139+
role="presentation"
154140
/>
155141

156-
<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
142+
<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
157143

158-
<div class='bg-white h-72 p-6 relative z-10'>
159-
<h3 class='p-2 text-2xl text-center uppercase w-full'>
144+
<div class="bg-white h-72 p-6 relative z-10">
145+
<h3 class="p-2 text-2xl text-center uppercase w-full">
160146
Framework Ready
161147
</h3>
162148

163-
<p class='font-body p-2 text-xl'>
149+
<p class="font-body p-2 text-xl">
164150
Shepherd is ready to drop into your application using React,
165151
Ember, Angular, Vue.js, ES Modules, or plain Javascript!
166152
</p>
167153
</div>
168154

169-
<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
155+
<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
170156
</div>
171157
</div>
172158
</div>

landing/public/img/github.svg renamed to landing/src/images/github.svg

File renamed without changes.

landing/public/img/linkedin.svg renamed to landing/src/images/linkedin.svg

File renamed without changes.

landing/public/img/twitter.svg renamed to landing/src/images/twitter.svg

File renamed without changes.

0 commit comments

Comments
 (0)