From 231d5b6875f4f053d72e8b3a48e0f166da224700 Mon Sep 17 00:00:00 2001 From: ststimac Date: Tue, 24 Sep 2019 12:33:32 -0700 Subject: [PATCH 1/5] Update home page with new content --- src/webhint-theme/layout/partials/home.ejs | 127 +++++------------- src/webhint-theme/source/core/css/base.css | 4 + src/webhint-theme/source/core/css/footer.css | 1 + src/webhint-theme/source/core/css/home.css | 60 +++------ .../source/core/css/navigation.css | 1 + .../source/images/underwater-flipped.svg | 82 +++++++++++ .../source/images/webhint_firefox.svg | 1 + 7 files changed, 138 insertions(+), 138 deletions(-) create mode 100644 src/webhint-theme/source/images/underwater-flipped.svg create mode 100644 src/webhint-theme/source/images/webhint_firefox.svg diff --git a/src/webhint-theme/layout/partials/home.ejs b/src/webhint-theme/layout/partials/home.ejs index 42343d4a1..6ea7543a6 100644 --- a/src/webhint-theme/layout/partials/home.ejs +++ b/src/webhint-theme/layout/partials/home.ejs @@ -1,64 +1,36 @@
-
-
+
+

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 +38,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 +57,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..f62cb9e94 --- /dev/null +++ b/src/webhint-theme/source/images/webhint_firefox.svg @@ -0,0 +1 @@ +Webhint_Firefox \ No newline at end of file From a2236d72c46772d97f91afc353d1010e3331f1f8 Mon Sep 17 00:00:00 2001 From: ststimac Date: Tue, 24 Sep 2019 12:48:45 -0700 Subject: [PATCH 2/5] Remove empty classes --- src/webhint-theme/layout/partials/home.ejs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/webhint-theme/layout/partials/home.ejs b/src/webhint-theme/layout/partials/home.ejs index 6ea7543a6..c2ba5a9e0 100644 --- a/src/webhint-theme/layout/partials/home.ejs +++ b/src/webhint-theme/layout/partials/home.ejs @@ -17,18 +17,18 @@
- +

Develop

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

- +

Debug

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

- +

Deliver

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

From 1654aec524d85793b466a0953c86a913255cad69 Mon Sep 17 00:00:00 2001 From: ststimac Date: Tue, 24 Sep 2019 12:53:28 -0700 Subject: [PATCH 3/5] Add puzzle illustration --- src/webhint-theme/layout/partials/home.ejs | 3 +-- src/webhint-theme/source/images/webhint_puzzle.svg | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 src/webhint-theme/source/images/webhint_puzzle.svg diff --git a/src/webhint-theme/layout/partials/home.ejs b/src/webhint-theme/layout/partials/home.ejs index c2ba5a9e0..06e01b70c 100644 --- a/src/webhint-theme/layout/partials/home.ejs +++ b/src/webhint-theme/layout/partials/home.ejs @@ -16,8 +16,7 @@

Hints to help you throughout the web development cycle

- - +

Develop

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

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..2a97e6d6d --- /dev/null +++ b/src/webhint-theme/source/images/webhint_puzzle.svg @@ -0,0 +1 @@ +Webhint_puzzle_1 \ No newline at end of file From e4a493435a603080796add1bc96da5b1ede4eccc Mon Sep 17 00:00:00 2001 From: ststimac Date: Tue, 24 Sep 2019 13:26:03 -0700 Subject: [PATCH 4/5] remove background --- .../source/images/webhint_puzzle.svg | 494 +++++++++++++++++- 1 file changed, 493 insertions(+), 1 deletion(-) diff --git a/src/webhint-theme/source/images/webhint_puzzle.svg b/src/webhint-theme/source/images/webhint_puzzle.svg index 2a97e6d6d..996874cd1 100644 --- a/src/webhint-theme/source/images/webhint_puzzle.svg +++ b/src/webhint-theme/source/images/webhint_puzzle.svg @@ -1 +1,493 @@ -Webhint_puzzle_1 \ No newline at end of file + + + + +Webhint_puzzle_1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 290da415fbf0ae3137e7f6c34f9a9911177802ff Mon Sep 17 00:00:00 2001 From: ststimac Date: Tue, 24 Sep 2019 15:03:51 -0700 Subject: [PATCH 5/5] Compress SVGs --- .../source/images/webhint_firefox.svg | 2 +- .../source/images/webhint_puzzle.svg | 494 +----------------- 2 files changed, 2 insertions(+), 494 deletions(-) diff --git a/src/webhint-theme/source/images/webhint_firefox.svg b/src/webhint-theme/source/images/webhint_firefox.svg index f62cb9e94..f449952d1 100644 --- a/src/webhint-theme/source/images/webhint_firefox.svg +++ b/src/webhint-theme/source/images/webhint_firefox.svg @@ -1 +1 @@ -Webhint_Firefox \ No newline at end of file + \ 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 index 996874cd1..23156841c 100644 --- a/src/webhint-theme/source/images/webhint_puzzle.svg +++ b/src/webhint-theme/source/images/webhint_puzzle.svg @@ -1,493 +1 @@ - - - - -Webhint_puzzle_1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file