Ver código fonte

Various wordings changed on home and about pages

Gaël Métais 4 anos atrás
pai
commit
4e692d608c

+ 11 - 4
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 {

+ 11 - 3
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;
     }
 }
 

+ 2 - 2
front/src/main.html

@@ -1,12 +1,12 @@
 <html>
 <head>
 	<meta charset="utf-8">
-    <title>Yellow Lab Tools</title>
+    <title>Yellow Lab Tools - Page Speed audit</title>
     <base href="<%= baseUrl %>">
     <link rel="icon" type="image/png" href="img/favicon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta property="og:image" content="img/logo-large.png" />
-    <meta name="description" content="Free online web performance tool. Audit your webpage for performance and front-end quality issues. And it's open-source!" />
+    <meta name="description" content="Yellow Lab Tools is a free online web performance analyzer. It audits a webpage for performance and front-end quality issues. And it's open-source!" />
 
     <!-- build:css css/styles.css-->
     <link rel="stylesheet" type="text/css" href="css/main.css">

+ 2 - 2
front/src/views/about.html

@@ -1,9 +1,9 @@
 <div class="about">
     <p><b>Yellow Lab Tools</b> is an open source project by <a href="https://letstalkaboutwebperf.com/en/" target="_blank">Gaël Métais</a>. It allows you to test a webpage (via an URL) and detects <b>performance</b> and <b>front-end code quality</b> issues.</p>
 
-    <p>This is done by loading the webpage via PhantomJS and collecting various metrics and statistics with the help of <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>. These metrics are categorized and transformed into scores. It also gives in-depth details so that developers can correct the detected issues.</p>
+    <p>It is based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>, 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.</p>
 
-    <p>By the way, <b>it's free</b> because I'm a geek, not a businessman. In return, you can add <a href="https://github.com/YellowLabTools/YellowLabTools" target="_blank" class="star">a <span>&#9733;</span> on GitHub</a>. It will boost my motivation to add more awesome features!!!</p>
+    <p>By the way, <b>it's entirely free</b>. In return, you can add <a href="https://github.com/YellowLabTools/YellowLabTools" target="_blank">a <span>&#9733;</span> on GitHub</a> or <a href="https://ko-fi.com/gaelmetais" target="_blank">buy me a coffee</a>. It will boost my motivation to add more awesome features!</p>
 
     <%if (sponsoring.about) { %>
         <div class="sponsor"><%- sponsoring.about %></div>

+ 6 - 6
front/src/views/index.html

@@ -97,18 +97,18 @@
 
 <div class="features">
     <div>
-        <h3>Front-end quality</h3>
-        <p>Audits quality problems in the HTML, CSS and JS</p>
+        <h3>Page speed audit</h3>
+        <p>Checks if performance good practices are respected</p>
     </div>
 
     <div>
-        <h3>WebPerf</h3>
-        <p>Checks if performance good practices are applied</p>
+        <h3>Front-end analyzis</h3>
+        <p>Detects problems on HTML, CSS, JS, images, fonts and more</p>
     </div>
 
     <div>
-        <h3>JS Profiling</h3>
-        <p>Untangles the JavaScript spaghetti code</p>
+        <h3>In-depth details</h3>
+        <p>Provides precise information to fix the detected performance issues</p>
     </div>
 </div>