Skip to content

Commit aa79c69

Browse files
ststimacmolant
ststimac
authored and
molant
committed
New: Update home page with new content
Fix #765 Close #836
1 parent fc399d4 commit aa79c69

File tree

8 files changed

+138
-138
lines changed

8 files changed

+138
-138
lines changed

‎src/webhint-theme/layout/partials/home.ejs

+31-95
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,47 @@
11
<div class="bg-wrap-home">
22
<main>
33
<section class="container home-container--section">
4-
<div class="layout layout--halves vertical-align">
5-
<div class="module">
4+
<div class="layout layout--basic--offset--alt vertical-align">
5+
<div class="module module--primary">
66
<h1>Use webhint to improve your website</h1>
7-
<p class="container--section__welcome subtitle">webhint is a linting tool that will help you with your site's accessibility, speed, security and more, by checking your code for best practices and common errors. Use the online scanner or the CLI to start checking your site for errors.</p>
7+
<p class="container--section__welcome subtitle">webhint is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.</p>
88
</div>
9-
<div class="module module-center">
10-
<div class="home--hero">
11-
<div class="home--hero__images">
12-
<a href="#scanner-input" class="home--hero__images-wrap" data-ga-category="homepage" data-ga-action="scanner">
13-
<img src="/images/home-scan-results.svg" alt="" role="presentation">
14-
<p class="cta home--hero__cta">Try the online scanner</p>
15-
</a>
16-
</div>
17-
<div class="home--hero__images">
18-
<a href="#cli-howto" class="home--hero__images-wrap" data-ga-category="homepage" data-ga-action="cli">
19-
<img src="/images/home-cli.svg" alt="" role="presentation">
20-
<p class="cta home--hero__cta">Get started with the CLI</p>
21-
</a>
22-
</div>
23-
</div>
9+
<div class="module module--secondary">
10+
<img class="hero-image "src="/images/underwater-flipped.svg" alt="" role="none presentation" />
2411
</div>
2512
</div>
2613
</section>
2714
<div class="bg-wrap--white">
2815
<section class="container home-container--section home-container__features">
29-
<h2 class="subheading subheading--home">Why use webhint?</h2>
16+
<h2 class="subheading subheading--home">Hints to help you throughout the web development cycle</h2>
3017
<div class="layout layout--thirds">
3118
<div class="module feature">
32-
<img class="feature__highlight" src="/images/nellie-customizable.svg" alt="" role="presentation" />
33-
<p class="subtitle subtitle--home uppercase-text">Fully customizable</p>
34-
<p class="feature__highlight">
35-
Every site is different. webhint adapts its feedback when you give it more information:
36-
<a href="/docs/user-guide/configuring-webhint/ignoring-domains/">ignore 3rd-party code</a>,
37-
<a href="/docs/user-guide/configuring-webhint/browser-context/">prioritize <em>your</em> users' browsers</a>, and <a href="/docs/user-guide/">control the
38-
results</a> with minimal setup.
39-
</p>
40-
<a class="cta feature__cta" href="/docs/user-guide/hints/" data-ga-category="docs" data-ga-action="user guide" data-ga-label="why">User guide</a>
19+
<img src="/images/webhint_puzzle.svg" alt="" role="presentation" />
20+
<h3 class="subtitle subtitle--home">Develop</h3>
21+
<p class="feature__highlight">Use the <a href="https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint">VS Code extension</a> to get real-time feedback in your IDE when writing code</p>
4122
</div>
4223
<div class="module feature">
43-
<img class="feature__highlight" src="/images/developer-nellie.svg" alt="" role="presentation" />
44-
<p class="subtitle subtitle--home uppercase-text">Create your own hints</p>
45-
<p class="feature__highlight">
46-
With the help of our <a href="/docs/contributor-guide/">contributor guide</a>, you can
47-
<a href="/docs/contributor-guide/how-to/hint/">create new hints</a> to suit <em>your</em> needs. You can
48-
help webhint help even more people like you by contributing your hints back!
49-
</p>
50-
<a class="cta feature__cta" href="/docs/user-guide/hints/" data-ga-category="docs" data-ga-action="hints" data-ga-label="why">Hint documentation</a>
24+
<img src="/images/webhint_firefox.svg" alt="" role="presentation" />
25+
<h3 class="subtitle subtitle--home">Debug</h3>
26+
<p class="feature__highlight">The <a href="https://webhint.io/docs/user-guide/extensions/extension-browser/">browser extension</a> lets you scan a site from within your browser's DevTools.</p>
27+
5128
</div>
5229
<div class="module feature">
53-
<img class="feature__highlight" src="/images/nellie-octocat.svg" alt="" role="presentation" />
54-
<p class="subtitle subtitle--home uppercase-text">Community driven</p>
55-
<p class="feature__highlight">
56-
webhint welcomes anyone who wants to make the web a better place.
57-
Testing, <a href="https://github.com/webhintio/webhint.io/issues">filing issues and feature requests</a>,
58-
<a href="/docs/contributor-guide/getting-started/pull-requests/">contributing code</a>, and improving the documentation
59-
are just the start!
60-
</p>
61-
<a class="cta feature__cta" href="https://github.com/webhintio">webhint GitHub</a>
30+
<img src="/images/developer-nellie.svg" alt="" role="presentation" />
31+
<h3 class="subtitle subtitle--home">Deliver</h3>
32+
<p class="feature__highlight">Use the <a href="https://webhint.io/docs/user-guide/">webhint CLI</a> in your CI/CD pipeline to analyze your site before it goes into production.</p>
6233
</div>
6334
</div>
6435
</section>
6536
</div>
6637
<section class="container home-container--section" id="scanner-input">
6738
<div class="layout layout--basic--offset--alt">
6839
<div class="module module--primary">
69-
<h1 class="headline">Use the online scanner</h1>
70-
<p class="container--section__welcome">Not sure what you want to configure the CLI to check? Use the online scanner for a pre-configured set of rule checks to cover the basics.</p>
40+
<h1 class="headline">Try it</h1>
41+
<p class="container--section__welcome">Use the online scanner for a pre-configured set of rule checks to see what the tools is capable of and how your website is doing.</p>
7142
<div class="home-container--input">
7243
<form action="/scanner/" method="POST">
73-
<label for="home-scan" class="visually-hidden">Enter your URL here</label>
44+
<label for="home-scan" class="visually-hidden">Type your URL here</label>
7445
<div class="input-fix">
7546
<input id="home-scan" type="url" name="url" placeholder="Type your URL here">
7647
<button type="submit" class="button--red" type="submit" data-ga-category="scanner" data-ga-action="start" data-ga-label="homepage">Run Scan</button>
@@ -85,62 +56,27 @@
8556
</section>
8657
<div class="bg-wrap--grey">
8758
<section class="container home-container--section home-container__install" id="cli-howto">
88-
<h2 class="subheading subheading--home">Run webhint from your CLI</h2>
59+
<h2 class="subheading subheading--home">Make it your own</h2>
8960
<div class="layout layout--halves">
9061
<div class="module">
91-
<img src="images/hint.gif" alt="webhint cli">
62+
<img class="hero-image" src="/images/nellie-octocat.svg" alt="" role="presentation" />
9263
</div>
9364
<div class="module">
94-
<p class="install__code">If you want to disable specific hints, further configure others, ignore domains, or more, run webhint from your CLI.</p>
95-
<p class="install__code">To do a quick scan just run:</p>
96-
<div class="code-wrap">
97-
<p>><code>npx hint https://example.com</code></p>
98-
</div>
99-
<a class="docs-button" href="/docs/user-guide/" data-ga-category="docs" data-ga-action="user guide" data-ga-label="cli">Get Started</a>
100-
<p class="install__code">The <a href="https://npmjs.com/package/hint"><code>hint</code></a> package has been donated by
101-
<a href="https://twitter.com/nzgb">Nicolás Bevacqua</a>. While you are reading this, make sure to visit
102-
<a href="https://ponyfoo.com/?utm_source=webhint.io">his site</a>!
103-
</p>
104-
</div>
105-
</div>
106-
</section>
107-
</div>
108-
<div class="container home-container--section home-container__documentation">
109-
<div class="layout layout--thirds">
110-
<div class="module">
111-
<div class="home--docs">
112-
<img src="images/user-guide-icon.svg" class="home--docs-icons" alt="" role="none">
113-
<div class="home--docs-text">
114-
<a href="/docs/user-guide/" data-ga-category="docs" data-ga-action="user guide" data-ga-label="bottom">
115-
<p class="subtitle">User Guide</p>
116-
<p>Get started with configuring the CLI tool on your machine</p>
117-
</a>
65+
<div class="feature__container">
66+
<h3 class="subtitle subtitle--home">Customize</h3>
67+
<p class="feature__highlight">Every site is different. webhint adapts its feedback when you give it more information: <a href="https://webhint.io/docs/user-guide/configuring-webhint/ignoring-domains/">ignore 3rd-party code</a>, <a href="https://webhint.io/docs/user-guide/configuring-webhint/browser-context/">prioritize your users' browsers</a>, and control the results with minimal setup.</p>
11868
</div>
119-
</div>
120-
</div>
121-
<div class="module">
122-
<div class="home--docs">
123-
<img src="images/dev-guide-icon.svg" class="home--docs-icons" alt="" role="none">
124-
<div class="home--docs-text">
125-
<a href="/docs/contributor-guide/" data-ga-category="docs" data-ga-action="contributor guide" data-ga-label="bottom">
126-
<p class="subtitle">Contributor Guide</p>
127-
<p>Find out how to make webhint your tool and use it to it's full potential</p>
128-
</a>
69+
<div class="feature__container">
70+
<h3 class="subtitle subtitle--home">Create</h3>
71+
<p class="feature__highlight">With the help of our <a href="https://webhint.io/docs/contributor-guide/">contributor guide</a>, you can <a href="https://webhint.io/docs/contributor-guide/how-to/hint/">create new hints</a> to suit your needs.</p>
12972
</div>
130-
</div>
131-
</div>
132-
<div class="module">
133-
<div class="home--docs">
134-
<img src="images/rules-icon.svg" class="home--docs-icons" alt="" role="none">
135-
<div class="home--docs-text">
136-
<a href="/docs/user-guide/hints/" data-ga-category="docs" data-ga-action="hints" data-ga-label="bottom">
137-
<p class="subtitle">Hints</p>
138-
<p>Check out the list of hints that webhint currently checks</p>
139-
</a>
73+
<div class="feature__container">
74+
<h3 class="subtitle subtitle--home">Contribute</h3>
75+
<p class="feature__highlight">webhint welcomes anyone who wants to make the web a better place. <a href="https://github.com/webhintio/hint">Join us on GitHub</a> to file issues and feature requests, contribute code, and improve the documentation!</p>
14076
</div>
14177
</div>
14278
</div>
143-
</div>
79+
</section>
14480
</div>
14581
</main>
14682
</div>

‎src/webhint-theme/source/core/css/base.css

+4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ a {
1313
text-decoration: none;
1414
}
1515

16+
p > a {
17+
text-decoration: underline;
18+
}
19+
1620
a:hover {
1721
text-decoration: underline;
1822
}

‎src/webhint-theme/source/core/css/footer.css

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ footer {
1414

1515
.footer a {
1616
color: #4700a3;
17+
text-decoration: none;
1718
}
1819

1920
.footer-nav {

‎src/webhint-theme/source/core/css/home.css

+17-43
Original file line numberDiff line numberDiff line change
@@ -27,50 +27,14 @@ main {
2727
padding-bottom: 4.8rem;
2828
}
2929

30-
.home--hero {
31-
display: flex;
32-
justify-content: space-evenly;
33-
align-items: flex-end;
34-
flex-wrap: wrap;
35-
}
36-
37-
.home--hero__images {
38-
max-width: 27rem;
39-
margin-top: 1.2rem;
40-
text-align: center;
30+
.container--section__welcome {
31+
max-width: 70rem;
4132
}
4233

43-
a.home--hero__images-wrap {
34+
.hero-image {
4435
display: block;
45-
padding: 1.5rem;
46-
}
47-
48-
a.home--hero__images-wrap:hover {
49-
filter: drop-shadow(0 .5rem .5rem hsla(0, 0%, 0%, .3));
50-
}
51-
52-
a.home--hero__images-wrap:focus {
53-
color: #fff;
54-
}
55-
56-
.home--hero__cta {
57-
display: inline-block;
58-
font-size: 1.3rem;
59-
font-weight: 500;
60-
61-
max-width: 100%;
62-
margin-top: .6rem;
63-
padding: .6rem 1rem;
64-
border-radius: .3rem;
65-
66-
color: #fff;
67-
background-color: #d43e2b;
68-
69-
letter-spacing: .1rem;
70-
text-transform: uppercase;
71-
overflow: hidden;
72-
white-space: nowrap;
73-
text-overflow: ellipsis;
36+
max-width: 38rem;
37+
margin: 0 auto;
7438
}
7539

7640
.module.feature {
@@ -114,6 +78,15 @@ a.home--hero__images-wrap:focus {
11478
color: #fff;
11579
}
11680

81+
.home-container__features .feature__highlight {
82+
text-align: center;
83+
}
84+
85+
86+
.feature__container {
87+
margin-bottom: 2.4rem;
88+
}
89+
11790
/* stylelint-disable */
11891
.home-container__features img {
11992
max-width: 75%;
@@ -166,13 +139,14 @@ a.home--hero__images-wrap:focus {
166139
.subheading--home {
167140
letter-spacing: .06rem;
168141
text-transform: none;
142+
max-width: 64rem;
143+
font-weight: 300;
169144
}
170145

171146
.subtitle--home {
172147
position: relative;
173148
font-weight: 500;
174149
letter-spacing: .05rem;
175-
text-transform: uppercase;
176150
}
177151

178152
@media (min-width: 33.75em) {
@@ -236,6 +210,6 @@ a .openjsf-icon-svg {
236210
.module--primary h1 {
237211
display: block;
238212
color: #fff;
239-
font-size: 4.6rem;
213+
font-size: 5.2rem;
240214
letter-spacing: .03rem;
241215
}

‎src/webhint-theme/source/core/css/navigation.css

+1
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117

118118
.openjsf-header {
119119
color: #fff;
120+
font-size: 1.4rem;
120121
}
121122

122123
.openjsf-header a, .openjsf-header a:visited {

0 commit comments

Comments
 (0)