Merge pull request #20 from servo/improve_page

Implement a proper header
servo · Jan 17, 2024 · 99a5dad · 99a5dad
2 parents 3e730a9 + 2b2f964
commit 99a5dad
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/css/style.css b/css/style.css
@@ -36,23 +36,23 @@ h6 {
   text-align: center;
 }
 
-.header-inner {
-  min-width: 320px;
-  max-width: 540px;
-  margin: auto;
+.nav {
+  overflow: hidden;
 }
 
-.header-logo {
+.nav a {
+  float: left;
   text-align: center;
-  margin-top: 0.2em;
-}
-
-.header-main {
-  font-size: 150%;
+  font-weight: bold;
+  padding: 14px 10px;
+  text-decoration: none;
+  font-size: 18px;
 }
 
-.header-tagline {
-  color: #696969;
+.nav-right {
+  float: right;
+  padding-top: 14px;
+  margin: 24px 20px 0 10px
 }
 
 .download-link a {

diff --git a/index.html b/index.html
@@ -9,29 +9,30 @@
 
     <body>
         <div id="container">
-            <header>
-                <div class="header-logo">
-                    <a href="http://servo.org">
-                        <img
-                            width="200"
-                            src="images/servo-color-positive.png" />
-                    </a>
+            <div class="nav">
+                <a href="http://servo.org">
+                    <img
+                        width="200"
+                        src="images/servo-color-positive.png" />
+                </a>
+                <div class="nav-right">
+                    <a href="https://servo.org/contributing" target="_blank">Contribute</a>
+                    <a href="https://github.com/servo/servo/wiki" target="_blank">Wiki</a>
+                    <a href="https://github.com/servo/servo" target="_blank">Github</a>
                 </div>
-                <div class="header-main">
-                    <h3><strong>The embeddable, independent, memory-safe, modular, parallel web rendering engine.</strong></h3>
-                </div>
-            </header>
+            </div>
+            <hr />
             <main class="experiments-container">
                 <section class="experiments-group" id="other-experiments">
-                    <h3 class="heading">Servo Experiments (<a href="https://github.com/servo/servo-experiments" target="_blank">Contribute</a>) </h3>
+                    <h2 class="heading">Servo Experiments</h2>
                     <div class="experiment-previews"></div>
                 </section>
                 <section class="experiments-group" id="technical-tests">
-                    <h3 class="heading">Servo Technical Tests (<a href="https://github.com/servo/servo-experiments" target="_blank">Contribute</a>) </h3>
+                    <h2 class="heading">Servo Technical Tests</h2>
                     <div class="experiment-previews"></div>
                 </section>
                 <section class="experiments-group" id="videos">
-                    <h3 class="heading">Servo Videos (<a href="https://github.com/servo/servo-experiments" target="_blank">Contribute</a>) </h3>
+                    <h2 class="heading">Servo Videos</h2>
                     <div class="experiment-previews"></div>
                 </section>
             </main>