Minor design changes for browserbench.org landing page
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 10 Sep 2017 23:34:16 +0000 (23:34 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 10 Sep 2017 23:34:16 +0000 (23:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=176612

Reviewed by Darin Adler.

* index.html:
* resources/main.css: Shrink the logos and arrange them into a grid.
(main):
(.benchmarks):
(.benchmarks a):
(.benchmark):
(.benchmark:hover):
(.benchmark img):
(#ares-6-logo): Deleted.
(#motionmark-logo): Deleted.
(#speedometer-logo): Deleted.
(#jetstream-logo): Deleted.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@221840 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/browserbench.org/ChangeLog
Websites/browserbench.org/index.html
Websites/browserbench.org/resources/main.css

index 54218ac..6280931 100644 (file)
@@ -1,3 +1,23 @@
+2017-09-10  Jon Davis  <jond@apple.com>
+
+        Minor design changes for browserbench.org landing page
+        https://bugs.webkit.org/show_bug.cgi?id=176612
+
+        Reviewed by Darin Adler.
+
+        * index.html:
+        * resources/main.css: Shrink the logos and arrange them into a grid.
+        (main):
+        (.benchmarks):
+        (.benchmarks a):
+        (.benchmark):
+        (.benchmark:hover):
+        (.benchmark img):
+        (#ares-6-logo): Deleted.
+        (#motionmark-logo): Deleted.
+        (#speedometer-logo): Deleted.
+        (#jetstream-logo): Deleted.
+
 2017-08-23  Ryosuke Niwa  <rniwa@webkit.org>
 
         Build fix. Copy the missing statistics.js for Speedometer 2.0.
index 13bea4f..8709341 100644 (file)
@@ -39,6 +39,8 @@
 
 <hr>
 
+<section class="benchmarks">
+    
 <a class="benchmark" href="ARES-6" tabindex="0">
 <img id="ares-6-logo" srcset="resources/ARES-6-Logo.png 1x, resources/ARES-6-Logo@2x.png 2x" alt="ARES-6">
 <p>ARES-6 is a benchmark designed to test ECMAScript 6 applications.</p>
@@ -60,7 +62,7 @@
     srcset="resources/JetStream-Logo.png 1x, resources/JetStream-Logo@2x.png 2x" alt="JetStream">
 <p>JetStream is a JavaScript benchmark suite focused on the most advanced web applications.</p>
 </a>
-
+</section>
 </main>
 </body>
 </html>
index d243893..20b19da 100644 (file)
@@ -16,12 +16,24 @@ img {
 }
 
 main {
-    width: 800px;
+    max-width: 800px;
     margin: auto;
     text-align: center;
     padding: 10px;
 }
 
+.benchmarks {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.benchmarks a {
+    display: block;
+    flex: 1;
+    width: 370px;
+}
+
 #logo {
     font-family: "Gill Sans", sans-serif;
     margin-top: 60px;
@@ -61,12 +73,12 @@ hr {
 .benchmark {
     display: block;
     text-decoration: none;
-    margin-top: 40px;
+    margin-top: 20px;
     padding: 30px 0 10px 0;
-    border-radius: 20px;
     cursor: pointer;
     outline: none;
     border: 4px solid transparent;
+    transition: background-color 0.3s ease-out, transform 0.25s ease-in;
 }
 
 .benchmark:focus {
@@ -86,29 +98,14 @@ hr {
 
 .benchmark:hover {
     background-color: rgb(200, 0, 0);
+    transform: scale(1.05);
 }
 
 .benchmark:hover * {
     color: white !important;
 }
 
-#ares-6-logo {
-    width: 625px;
-    height: 137px;
-}
-
-#motionmark-logo {
-    width: 625px;
-    height: 154px;
-}
-
-#speedometer-logo {
-    width: 625px;
-    height: 116px;
-}
-
-#jetstream-logo {
-    width: 621px;
-    height: 96px;
-}
-
+.benchmark img {
+    max-width: 300px;
+    height: auto;
+}
\ No newline at end of file