diff --git a/front/src/css/index.css b/front/src/css/index.css index 54ad711..41a42e2 100644 --- a/front/src/css/index.css +++ b/front/src/css/index.css @@ -158,10 +158,17 @@ font-size: 0.9em; color: #8abfaf; } -.features > div { - width: 33.3%; - display: table-cell; - padding: 0 1.5em; +@media (min-width: 640px) { + .features > div { + width: 33.3%; + display: table-cell; + padding: 0 1.5em; + } +} +.features h3 { + font-size: 1.5em; + font-weight: normal; + color: #fff; } input[type=submit], input.url { diff --git a/front/src/less/index.less b/front/src/less/index.less index e212fcd..8b39e11 100644 --- a/front/src/less/index.less +++ b/front/src/less/index.less @@ -183,9 +183,17 @@ color: #8abfaf; > div { - width: 33.3%; - display: table-cell; - padding: 0 1.5em; + @media (min-width: 640px) { + width: 33.3%; + display: table-cell; + padding: 0 1.5em; + } + } + + h3 { + font-size: 1.5em; + font-weight: normal; + color: #fff; } } diff --git a/front/src/main.html b/front/src/main.html index 5959394..1f689d7 100644 --- a/front/src/main.html +++ b/front/src/main.html @@ -1,12 +1,12 @@
-Yellow Lab Tools is an open source project by Gaël Métais. It allows you to test a webpage (via an URL) and detects performance and front-end code quality issues.
-This is done by loading the webpage via PhantomJS and collecting various metrics and statistics with the help of Phantomas. These metrics are categorized and transformed into scores. It also gives in-depth details so that developers can correct the detected issues.
+It is based on Phantomas, a tool that instruments Chrome Headless to collect dozens of metrics. These metrics are then categorized and transformed into scores. It also provides in-depth details so that developers can fix the detected issues.
-By the way, it's free because I'm a geek, not a businessman. In return, you can add a ★ on GitHub. It will boost my motivation to add more awesome features!!!
+By the way, it's entirely free. In return, you can add a ★ on GitHub or buy me a coffee. It will boost my motivation to add more awesome features!
<%if (sponsoring.about) { %>Audits quality problems in the HTML, CSS and JS
+Checks if performance good practices are respected
Checks if performance good practices are applied
+Detects problems on HTML, CSS, JS, images, fonts and more
Untangles the JavaScript spaghetti code
+Provides precise information to fix the detected performance issues