diff --git a/src/webhint-theme/layout/partials/home.ejs b/src/webhint-theme/layout/partials/home.ejs index 42343d4a1..06e01b70c 100644 --- a/src/webhint-theme/layout/partials/home.ejs +++ b/src/webhint-theme/layout/partials/home.ejs @@ -1,64 +1,35 @@
-
-
+
+

Use webhint to improve your website

-

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.

+

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.

-
-
-
- - -

Try the online scanner

- -
-
- - -

Get started with the CLI

- -
-
+
+
-

Why use webhint?

+

Hints to help you throughout the web development cycle

- -

Fully customizable

-

- Every site is different. webhint adapts its feedback when you give it more information: - ignore 3rd-party code, - prioritize your users' browsers, and control the - results with minimal setup. -

- User guide + +

Develop

+

Use the VS Code extension to get real-time feedback in your IDE when writing code

- -

Create your own hints

-

- With the help of our contributor guide, you can - create new hints to suit your needs. You can - help webhint help even more people like you by contributing your hints back! -

- Hint documentation + +

Debug

+

The browser extension lets you scan a site from within your browser's DevTools.

+
- -

Community driven

-

- webhint welcomes anyone who wants to make the web a better place. - Testing, filing issues and feature requests, - contributing code, and improving the documentation - are just the start! -

- webhint GitHub + +

Deliver

+

Use the webhint CLI in your CI/CD pipeline to analyze your site before it goes into production.

@@ -66,11 +37,11 @@
-

Use the online scanner

-

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.

+

Try it

+

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.

- +
@@ -85,62 +56,27 @@
-

Run webhint from your CLI

+

Make it your own

- webhint cli +
-

If you want to disable specific hints, further configure others, ignore domains, or more, run webhint from your CLI.

-

To do a quick scan just run:

-
-

>npx hint https://example.com

-
- Get Started -

The hint package has been donated by - Nicolás Bevacqua. While you are reading this, make sure to visit - his site! -

-
-
-
-
-
-
-
-
- -
- -

User Guide

-

Get started with configuring the CLI tool on your machine

- +
+

Customize

+

Every site is different. webhint adapts its feedback when you give it more information: ignore 3rd-party code, prioritize your users' browsers, and control the results with minimal setup.

-
-
-
-
- -
- -

Contributor Guide

-

Find out how to make webhint your tool and use it to it's full potential

- +
+

Create

+

With the help of our contributor guide, you can create new hints to suit your needs.

-
-
-
-
- -
- -

Hints

-

Check out the list of hints that webhint currently checks

- +
+

Contribute

+

webhint welcomes anyone who wants to make the web a better place. Join us on GitHub to file issues and feature requests, contribute code, and improve the documentation!

-
+
diff --git a/src/webhint-theme/source/core/css/base.css b/src/webhint-theme/source/core/css/base.css index e6facb85e..6b3c4c5fa 100644 --- a/src/webhint-theme/source/core/css/base.css +++ b/src/webhint-theme/source/core/css/base.css @@ -13,6 +13,10 @@ a { text-decoration: none; } +p > a { + text-decoration: underline; +} + a:hover { text-decoration: underline; } diff --git a/src/webhint-theme/source/core/css/footer.css b/src/webhint-theme/source/core/css/footer.css index d75da2e09..d5fc0ebf2 100644 --- a/src/webhint-theme/source/core/css/footer.css +++ b/src/webhint-theme/source/core/css/footer.css @@ -14,6 +14,7 @@ footer { .footer a { color: #4700a3; + text-decoration: none; } .footer-nav { diff --git a/src/webhint-theme/source/core/css/home.css b/src/webhint-theme/source/core/css/home.css index 70583598e..e211fc833 100644 --- a/src/webhint-theme/source/core/css/home.css +++ b/src/webhint-theme/source/core/css/home.css @@ -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 { @@ -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%; @@ -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) { @@ -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; } diff --git a/src/webhint-theme/source/core/css/navigation.css b/src/webhint-theme/source/core/css/navigation.css index ae901e5b3..3779fc0fa 100644 --- a/src/webhint-theme/source/core/css/navigation.css +++ b/src/webhint-theme/source/core/css/navigation.css @@ -117,6 +117,7 @@ .openjsf-header { color: #fff; + font-size: 1.4rem; } .openjsf-header a, .openjsf-header a:visited { diff --git a/src/webhint-theme/source/images/underwater-flipped.svg b/src/webhint-theme/source/images/underwater-flipped.svg new file mode 100644 index 000000000..1bae97d99 --- /dev/null +++ b/src/webhint-theme/source/images/underwater-flipped.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/webhint-theme/source/images/webhint_firefox.svg b/src/webhint-theme/source/images/webhint_firefox.svg new file mode 100644 index 000000000..f449952d1 --- /dev/null +++ b/src/webhint-theme/source/images/webhint_firefox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/webhint-theme/source/images/webhint_puzzle.svg b/src/webhint-theme/source/images/webhint_puzzle.svg new file mode 100644 index 000000000..23156841c --- /dev/null +++ b/src/webhint-theme/source/images/webhint_puzzle.svg @@ -0,0 +1 @@ + \ No newline at end of file