Update landing page buttons (#571)

Use the same button style for home, about, instructions and details page.

Author: camillobruni

about.html

@@ -92,7 +92,7 @@ <h1 class="section-header">About Speedometer</h1>
                             </li>
                         </ul>
                     </div>
-                    <div class="buttons section-footer">
+                    <div class="buttons section-footer fixed-footer">
                         <div class="button-row">
                             <a class="button" href="./" title="Show main section.">Home</a>
                             <a class="button" href="instructions.html" title="Show test instructions.">Test Instructions</a>

index.html

@@ -15,22 +15,26 @@
                     <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" />
                     <div class="version next">next</div>
                 </a>
-                <div class="content">
-                    <p>Speedometer is a browser benchmark that measures the responsiveness of Web applications. It uses demo web applications to simulate user actions such as adding to-do items.</p>
-                    <p id="screen-size-warning">
-                        <strong>
-                            Your browser window is too small. For most accurate results, please make the view port size at least <span id="min-screen-width">850px</span> by <span id="min-screen-height">650px</span>.<br />
-                            It's currently <span id="screen-size"></span>.
-                        </strong>
-                    </p>
-                </div>
-                <div class="buttons">
-                    <div class="button-row">
-                        <button class="start-tests-button">Start Test</button>
+                <div class="section-grid">
+                    <div class="section-content content">
+                        <p class="top-row">Speedometer is a browser benchmark that measures the responsiveness of Web applications. It uses demo web applications to simulate user actions such as adding to-do items.</p>
+                        <p id="screen-size-warning">
+                            <strong>
+                                Your browser window is too small. For most accurate results, please make the view port size at least <span id="min-screen-width">850px</span> by <span id="min-screen-height">650px</span>.<br />
+                                It's currently <span id="screen-size"></span>.
+                            </strong>
+                        </p>
                     </div>
-                    <div class="button-row">
-                        <a href="about.html">About Speedometer</a>
-                        <a href="instructions.html">Test Instructions</a>
+                    <div class="buttons">
+                        <div class="button-row">
+                            <button class="start-tests-button primary-button">Start Test</button>
+                        </div>
+                    </div>
+                    <div class="buttons section-footer fixed-footer">
+                        <div class="button-row">
+                            <a class="button" href="about.html">About Speedometer</a>
+                            <a class="button" href="instructions.html">Test Instructions</a>
+                        </div>
                     </div>
                 </div>
             </section>
@@ -68,7 +72,7 @@ <h1>Score</h1>
                 </div>
                 <div class="buttons">
                     <div class="button-row">
-                        <a class="button" href="#details" id="show-details" title="Show detailed results data.">Details</a>
+                        <a class="button primary-button" href="#details" id="show-details" title="Show detailed results data.">Details</a>
                     </div>
                 </div>
             </section>

instructions.html

@@ -29,7 +29,7 @@ <h1 class="section-header">Speedometer General Instructions</h1>
                             <li>Some devices might need time to cool down between consecutive runs.</li>
                         </ul>
                     </div>
-                    <div class="buttons section-footer">
+                    <div class="buttons section-footer fixed-footer">
                         <div class="button-row">
                             <a class="button" href="./" title="Show main section.">Home</a>
                             <a class="button" href="about.html" title="Show about section.">About</a>

resources/main.css

@@ -194,25 +194,36 @@ button,
 .buttons button,
 .buttons .button {
     appearance: none;
+    border: 2px solid var(--foreground);
+    border-radius: 8px;
+    min-width: 160px;
+    padding: 6px 15px;
+    margin: 0 10px;
+    font-size: 16px;
+    color: var(--foreground);
+    background-color: transparent;
+    cursor: pointer;
+    user-select: none;
+}
+
+.primary-button {
     border: 3px solid var(--foreground);
     border-radius: 10px;
     min-width: 200px;
     padding: 5px 0px;
     margin: 0 20px;
     font-size: 25px;
-    color: var(--foreground);
-    background-color: transparent;
-    cursor: pointer;
-    user-select: none;
 }
 
-.buttons button:active {
+.buttons button:active,
+.buttons .button:active {
     background-color: var(--foreground);
     color: var(--background);
     border-color: var(--foreground) !important;
 }
 
-.buttons button:focus {
+.buttons button:focus,
+.buttons .button:focus {
     outline: none;
     border-color: var(--highlight);
 }
@@ -417,6 +428,40 @@ section#home .content {
     text-align: center;
 }
 
+.fixed-footer {
+    position: absolute;
+    bottom: var(--padding-width);
+    left: var(--padding-width);
+    width: var(--viewport-width);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: var(--background);
+    z-index: 10;
+}
+
+.fixed-footer .button-row {
+    align-items: center;
+    width: 100%;
+    margin: 0;
+}
+
+section#about .section-content,
+section#instructions .section-content {
+    padding-bottom: 70px;
+}
+
+section#home .buttons:not(.section-footer) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+}
+
 button.show-about {
     margin-top: 100px;
     font-size: 16px;
@@ -534,12 +579,13 @@ section#details .results-table {
     width: 50%;
 }
 
-section#details .export-buttons {
+.export-buttons {
     justify-content: center;
     margin-bottom: 0;
 }
-section#details .export-buttons button,
-section#details .export-buttons .button {
+
+.export-buttons button,
+.export-buttons .button {
     padding: 5px 10px;
     min-width: auto;
     font-size: 14px;