Graphical changes, essentially colors

front/src/css/about.css

@@ -6,5 +6,8 @@
   margin: 2em;
 }
 .about a {
-  color: #FFF;
+  color: #fff;
+}
+.sponsor {
+  color: #ffa319;
 }

front/src/css/dashboard.css

@@ -114,14 +114,14 @@
   color: inherit;
 }
 .summary .notations .criteria .table > a:hover > div {
-  background: #EBD8E2;
+  background: #d8ebe0;
   cursor: pointer;
 }
 .summary .notations .criteria .table > a:hover > div.info {
   background: #FFF;
 }
 .summary .notations .criteria .table > a:hover > div.info svg {
-  fill: #EBD8E2;
+  fill: #d8ebe0;
 }
 .summary .notations .criteria .grade {
   width: 10%;

front/src/css/index.css

@@ -20,7 +20,7 @@
   background: #e74c3c;
 }
 .launchBtn.disabled {
-  background: #deaca6;
+  background: #f1bd70;
 }
 .launchBtn.disabled:focus {
   color: #ddd;
@@ -90,6 +90,8 @@
   border-radius: 1em;
   border: 2px solid #ffa319;
   white-space: normal;
+  word-break: break-all;
+  word-break: break-word;
   z-index: 2;
 }
 .settingsTooltip:hover div {
@@ -154,7 +156,7 @@
   width: 50%;
   margin: 6em auto 0;
   font-size: 0.9em;
-  color: #413;
+  color: #8abfaf;
 }
 .features > div {
   width: 33.3%;
@@ -169,7 +171,6 @@ input.url {
   height: 2em;
   border: 0 solid;
   border-radius: 0.5em;
-  box-shadow: 0.1em 0.2em 0 0 #5e2846;
   outline: none;
 }
 input[type=submit]:hover {

front/src/css/main.css

@@ -4,7 +4,7 @@ html {
 body {
   margin: 0 auto;
   max-width: 1280px;
-  background: #9c4274;
+  background: #212240;
   color: #fff;
   font-size: 16px;
   text-align: center;
@@ -20,11 +20,8 @@ button {
 input[type=submit] {
   cursor: pointer;
 }
-h1 span {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  color: #ffa319;
+h1 {
+  font-weight: 200;
 }
 .resultsMenu {
   margin-top: 2em;
@@ -35,7 +32,7 @@ h1 span {
   width: 8em;
   height: 7em;
   color: #fff;
-  border: 3px solid #fff;
+  border: 2px solid #fff;
   border-radius: 0.5em;
   cursor: pointer;
   text-decoration: none;
@@ -45,12 +42,8 @@ h1 span {
 }
 .resultsMenu .menuItem.back,
 .resultsMenu .menuItem.restart {
-  color: #413;
-  border-color: #413;
-}
-.resultsMenu .menuItem.back svg,
-.resultsMenu .menuItem.restart svg {
-  fill: #413;
+  color: #fff;
+  border-color: #fff;
 }
 .resultsMenu .menuItem div {
   padding-top: 0.5em;
@@ -259,7 +252,7 @@ a.linkButton {
 }
 .footer {
   padding: 3em;
-  color: #413;
+  color: #fff;
 }
 .footer a {
   color: inherit;
@@ -273,3 +266,6 @@ a.linkButton {
 .footer .sponsor {
   font-size: 0.9em;
 }
+.homeSponsor {
+  color: #ffa319;
+}

front/src/css/rule.css

@@ -80,7 +80,7 @@
   word-break: break-all;
 }
 .rule .offendersTable > div > div:hover {
-  background: #EBD8E2;
+  background: #d8ebe0;
 }
 .rule .notFound {
   font-size: 1em;

front/src/js/app.js

@@ -41,7 +41,7 @@ yltApp.run(['$rootScope', '$location', function($rootScope, $location) {
 
     // GitHub star button (asynchronously loaded iframe)
     window.addEventListener('load', function() {
-        window.document.getElementById('ghbtn').src = 'https://ghbtns.com/github-btn.html?user=gmetais&repo=YellowLabTools&type=star&count=true&size=large';
+        window.document.getElementById('ghbtn').src = 'https://ghbtns.com/github-btn.html?user=YellowLabTools&repo=YellowLabTools&type=star&count=true&size=large';
     });
 }]);
 

front/src/less/about.less

@@ -8,5 +8,9 @@
 }
 
 .about a {
-    color: #FFF;
+    color: #fff;
+}
+
+.sponsor {
+    color: #ffa319;
 }

front/src/less/dashboard.less

@@ -113,12 +113,12 @@
         color: inherit;
     }
     > a:hover > div {
-        background: #EBD8E2;
+        background: #d8ebe0;
         cursor: pointer;
         &.info {
             background: #FFF;
             svg {
-                fill: #EBD8E2;
+                fill: #d8ebe0;
             }
         }
     }

front/src/less/index.less

@@ -22,7 +22,7 @@
         background: #e74c3c;
     }
     &.disabled {
-        background: #deaca6;
+        background: #f1bd70;
         &:focus {
             color: #ddd;
         }
@@ -101,6 +101,8 @@
         border-radius: 1em;
         border: 2px solid #ffa319;
         white-space: normal;
+        word-break: break-all;
+        word-break: break-word;
         z-index: 2;
     }
 
@@ -178,7 +180,7 @@
     width: 50%;
     margin: 6em auto 0;
     font-size: 0.9em;
-    color: #413;
+    color: #8abfaf;
 
     > div {
         width: 33.3%;
@@ -194,7 +196,6 @@ input[type=submit], input.url {
     height: 2em;
     border: 0 solid;
     border-radius: 0.5em;
-    box-shadow: 0.1em 0.2em 0 0 #5e2846;
     outline: none;
 }
 input[type=submit]:hover {

front/src/less/main.less

@@ -5,7 +5,7 @@ html {
 body {
     margin: 0 auto;
     max-width: 1280px;
-    background: #9c4274;
+    background: #212240;
     color: #fff;
     font-size: 16px;
     text-align: center;
@@ -19,11 +19,8 @@ input[type=submit] {
     cursor: pointer;
 }
 
-h1 span {
-    display: inline-block;
-    height: 1em;
-    width: 1em;
-    color: #ffa319;
+h1 {
+    font-weight: 200;
 }
 
 .resultsMenu {
@@ -35,7 +32,7 @@ h1 span {
     width: 8em;
     height: 7em;
     color: #fff;
-    border: 3px solid #fff;
+    border: 2px solid #fff;
     border-radius: 0.5em;
     cursor: pointer;
     text-decoration: none;
@@ -45,12 +42,8 @@ h1 span {
     }
 
     &.back, &.restart {
-        color: #413;
-        border-color: #413;
-
-        svg {
-            fill: #413;
-        }
+        color: #fff;
+        border-color: #fff;
     }
 }
 .resultsMenu .menuItem div {
@@ -280,7 +273,7 @@ a.linkButton {
 
 .footer {
     padding: 3em;
-    color: #413;
+    color: #fff;
     a {
         color: inherit;
     }
@@ -293,4 +286,8 @@ a.linkButton {
     .sponsor {
         font-size: 0.9em;
     }
+}
+
+.homeSponsor {
+    color: #ffa319;
 }

front/src/less/rule.less

@@ -85,7 +85,7 @@
             word-wrap: break-word;
             word-break: break-all;
             &:hover {
-                background: #EBD8E2;
+                background: #d8ebe0;
             }
         }
     }

front/src/main.html

@@ -18,11 +18,8 @@
     <!-- endbuild -->
 
     <link rel="preconnect" href="https://www.google-analytics.com">
-    <link rel="dns-prefetch" href="https://www.google-analytics.com">
     <link rel="preconnect" href="https://ghbtns.com">
-    <link rel="dns-prefetch" href="https://ghbtns.com">
     <link rel="preconnect" href="https://api.github.com">
-    <link rel="dns-prefetch" href="https://api.github.com">
 
 </head>
 
@@ -32,7 +29,7 @@
     <div class="footer">
         <span class="version">@@version</span>
         <br><a href="<%= baseUrl %>about">More about Yellow Lab Tools</a><br>
-        <div class="github"><iframe id="ghbtn" frameborder="0" scrolling="0" width="145px" height="30px"></iframe></div>
+        <div class="github"><iframe id="ghbtn" frameborder="0" scrolling="0" width="160px" height="30px"></iframe></div>
     </div>
 
     <!-- build:js js/all.js -->

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="http://www.gaelmetais.com" 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><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>By the way, <b>it's free</b> because we are geeks, not businessmen. All we want is <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">a <span>&#9733;</span> on GitHub</a>. It will boost our motivation to add more awesome features!!!</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>
 
     <%if (sponsoring.about) { %>
         <div class="sponsor"><%- sponsoring.about %></div>