Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update home page with new content #836

Merged
merged 5 commits into from
Sep 25, 2019
Merged

Update home page with new content #836

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
231d5b6
Update home page with new content
ststimac Sep 24, 2019
a2236d7
Remove empty classes
ststimac Sep 24, 2019
1654aec
Add puzzle illustration
ststimac Sep 24, 2019
e4a4934
remove background
ststimac Sep 24, 2019
290da41
Compress SVGs
ststimac Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 31 additions & 95 deletions src/webhint-theme/layout/partials/home.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,47 @@
<div class="bg-wrap-home">
<main>
<section class="container home-container--section">
<div class="layout layout--halves vertical-align">
<div class="module">
<div class="layout layout--basic--offset--alt vertical-align">
<div class="module module--primary">
<h1>Use webhint to improve your website</h1>
<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>
<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>
</div>
<div class="module module-center">
<div class="home--hero">
<div class="home--hero__images">
<a href="#scanner-input" class="home--hero__images-wrap" data-ga-category="homepage" data-ga-action="scanner">
<img src="/images/home-scan-results.svg" alt="" role="presentation">
<p class="cta home--hero__cta">Try the online scanner</p>
</a>
</div>
<div class="home--hero__images">
<a href="#cli-howto" class="home--hero__images-wrap" data-ga-category="homepage" data-ga-action="cli">
<img src="/images/home-cli.svg" alt="" role="presentation">
<p class="cta home--hero__cta">Get started with the CLI</p>
</a>
</div>
</div>
<div class="module module--secondary">
<img class="hero-image "src="/images/underwater-flipped.svg" alt="" role="none presentation" />
</div>
</div>
</section>
<div class="bg-wrap--white">
<section class="container home-container--section home-container__features">
<h2 class="subheading subheading--home">Why use webhint?</h2>
<h2 class="subheading subheading--home">Hints to help you throughout the web development cycle</h2>
<div class="layout layout--thirds">
<div class="module feature">
<img class="feature__highlight" src="/images/nellie-customizable.svg" alt="" role="presentation" />
<p class="subtitle subtitle--home uppercase-text">Fully customizable</p>
<p class="feature__highlight">
Every site is different. webhint adapts its feedback when you give it more information:
<a href="/docs/user-guide/configuring-webhint/ignoring-domains/">ignore 3rd-party code</a>,
<a href="/docs/user-guide/configuring-webhint/browser-context/">prioritize <em>your</em> users' browsers</a>, and <a href="/docs/user-guide/">control the
results</a> with minimal setup.
</p>
<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>
<img src="/images/webhint_puzzle.svg" alt="" role="presentation" />
<h3 class="subtitle subtitle--home">Develop</h3>
<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>
</div>
<div class="module feature">
<img class="feature__highlight" src="/images/developer-nellie.svg" alt="" role="presentation" />
<p class="subtitle subtitle--home uppercase-text">Create your own hints</p>
<p class="feature__highlight">
With the help of our <a href="/docs/contributor-guide/">contributor guide</a>, you can
<a href="/docs/contributor-guide/how-to/hint/">create new hints</a> to suit <em>your</em> needs. You can
help webhint help even more people like you by contributing your hints back!
</p>
<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>
<img src="/images/webhint_firefox.svg" alt="" role="presentation" />
<h3 class="subtitle subtitle--home">Debug</h3>
<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>

</div>
<div class="module feature">
<img class="feature__highlight" src="/images/nellie-octocat.svg" alt="" role="presentation" />
<p class="subtitle subtitle--home uppercase-text">Community driven</p>
<p class="feature__highlight">
webhint welcomes anyone who wants to make the web a better place.
Testing, <a href="https://github.com/webhintio/webhint.io/issues">filing issues and feature requests</a>,
<a href="/docs/contributor-guide/getting-started/pull-requests/">contributing code</a>, and improving the documentation
are just the start!
</p>
<a class="cta feature__cta" href="https://github.com/webhintio">webhint GitHub</a>
<img src="/images/developer-nellie.svg" alt="" role="presentation" />
<h3 class="subtitle subtitle--home">Deliver</h3>
<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>
</div>
</div>
</section>
</div>
<section class="container home-container--section" id="scanner-input">
<div class="layout layout--basic--offset--alt">
<div class="module module--primary">
<h1 class="headline">Use the online scanner</h1>
<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>
<h1 class="headline">Try it</h1>
<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>
<div class="home-container--input">
<form action="/scanner/" method="POST">
<label for="home-scan" class="visually-hidden">Enter your URL here</label>
<label for="home-scan" class="visually-hidden">Type your URL here</label>
<div class="input-fix">
<input id="home-scan" type="url" name="url" placeholder="Type your URL here">
<button type="submit" class="button--red" type="submit" data-ga-category="scanner" data-ga-action="start" data-ga-label="homepage">Run Scan</button>
Expand All @@ -85,62 +56,27 @@
</section>
<div class="bg-wrap--grey">
<section class="container home-container--section home-container__install" id="cli-howto">
<h2 class="subheading subheading--home">Run webhint from your CLI</h2>
<h2 class="subheading subheading--home">Make it your own</h2>
<div class="layout layout--halves">
<div class="module">
<img src="images/hint.gif" alt="webhint cli">
<img class="hero-image" src="/images/nellie-octocat.svg" alt="" role="presentation" />
</div>
<div class="module">
<p class="install__code">If you want to disable specific hints, further configure others, ignore domains, or more, run webhint from your CLI.</p>
<p class="install__code">To do a quick scan just run:</p>
<div class="code-wrap">
<p>><code>npx hint https://example.com</code></p>
</div>
<a class="docs-button" href="/docs/user-guide/" data-ga-category="docs" data-ga-action="user guide" data-ga-label="cli">Get Started</a>
<p class="install__code">The <a href="https://npmjs.com/package/hint"><code>hint</code></a> package has been donated by
<a href="https://twitter.com/nzgb">Nicolás Bevacqua</a>. While you are reading this, make sure to visit
<a href="https://ponyfoo.com/?utm_source=webhint.io">his site</a>!
</p>
</div>
</div>
</section>
</div>
<div class="container home-container--section home-container__documentation">
<div class="layout layout--thirds">
<div class="module">
<div class="home--docs">
<img src="images/user-guide-icon.svg" class="home--docs-icons" alt="" role="none">
<div class="home--docs-text">
<a href="/docs/user-guide/" data-ga-category="docs" data-ga-action="user guide" data-ga-label="bottom">
<p class="subtitle">User Guide</p>
<p>Get started with configuring the CLI tool on your machine</p>
</a>
<div class="feature__container">
<h3 class="subtitle subtitle--home">Customize</h3>
<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>
</div>
</div>
</div>
<div class="module">
<div class="home--docs">
<img src="images/dev-guide-icon.svg" class="home--docs-icons" alt="" role="none">
<div class="home--docs-text">
<a href="/docs/contributor-guide/" data-ga-category="docs" data-ga-action="contributor guide" data-ga-label="bottom">
<p class="subtitle">Contributor Guide</p>
<p>Find out how to make webhint your tool and use it to it's full potential</p>
</a>
<div class="feature__container">
<h3 class="subtitle subtitle--home">Create</h3>
<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>
</div>
</div>
</div>
<div class="module">
<div class="home--docs">
<img src="images/rules-icon.svg" class="home--docs-icons" alt="" role="none">
<div class="home--docs-text">
<a href="/docs/user-guide/hints/" data-ga-category="docs" data-ga-action="hints" data-ga-label="bottom">
<p class="subtitle">Hints</p>
<p>Check out the list of hints that webhint currently checks</p>
</a>
<div class="feature__container">
<h3 class="subtitle subtitle--home">Contribute</h3>
<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>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
4 changes: 4 additions & 0 deletions src/webhint-theme/source/core/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ a {
text-decoration: none;
}

p > a {
text-decoration: underline;
}

a:hover {
text-decoration: underline;
}
Expand Down
1 change: 1 addition & 0 deletions src/webhint-theme/source/core/css/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ footer {

.footer a {
color: #4700a3;
text-decoration: none;
}

.footer-nav {
Expand Down
60 changes: 17 additions & 43 deletions src/webhint-theme/source/core/css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,50 +27,14 @@ main {
padding-bottom: 4.8rem;
}

.home--hero {
display: flex;
justify-content: space-evenly;
align-items: flex-end;
flex-wrap: wrap;
}

.home--hero__images {
max-width: 27rem;
margin-top: 1.2rem;
text-align: center;
.container--section__welcome {
max-width: 70rem;
}

a.home--hero__images-wrap {
.hero-image {
display: block;
padding: 1.5rem;
}

a.home--hero__images-wrap:hover {
filter: drop-shadow(0 .5rem .5rem hsla(0, 0%, 0%, .3));
}

a.home--hero__images-wrap:focus {
color: #fff;
}

.home--hero__cta {
display: inline-block;
font-size: 1.3rem;
font-weight: 500;

max-width: 100%;
margin-top: .6rem;
padding: .6rem 1rem;
border-radius: .3rem;

color: #fff;
background-color: #d43e2b;

letter-spacing: .1rem;
text-transform: uppercase;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 38rem;
margin: 0 auto;
}

.module.feature {
Expand Down Expand Up @@ -114,6 +78,15 @@ a.home--hero__images-wrap:focus {
color: #fff;
}

.home-container__features .feature__highlight {
text-align: center;
}


.feature__container {
margin-bottom: 2.4rem;
}

/* stylelint-disable */
.home-container__features img {
max-width: 75%;
Expand Down Expand Up @@ -166,13 +139,14 @@ a.home--hero__images-wrap:focus {
.subheading--home {
letter-spacing: .06rem;
text-transform: none;
max-width: 64rem;
font-weight: 300;
}

.subtitle--home {
position: relative;
font-weight: 500;
letter-spacing: .05rem;
text-transform: uppercase;
}

@media (min-width: 33.75em) {
Expand Down Expand Up @@ -236,6 +210,6 @@ a .openjsf-icon-svg {
.module--primary h1 {
display: block;
color: #fff;
font-size: 4.6rem;
font-size: 5.2rem;
letter-spacing: .03rem;
}
1 change: 1 addition & 0 deletions src/webhint-theme/source/core/css/navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@

.openjsf-header {
color: #fff;
font-size: 1.4rem;
}

.openjsf-header a, .openjsf-header a:visited {
Expand Down
Loading