[nyx/master] Section links - tor-commits

5 Aug 2017

commit 6b2bbb561b13ab102b426ffd518fc28522e513f1
Author: Damian Johnson atagar@torproject.org
Date:   Sun Jul 23 15:57:29 2017 -0700
Section links
Patterning ourselves little more after Tor Cloud with regard to our navigation.
    I like how clear it makes the sections, and since we're gonna be a pretty
    minimalist site should be perfect.
Tor Cloud's css seems to have quite a bit that doesn't do anything... I think?
    Going with a minimalist styling for now. Might regret this when it comes time
    to do cross-browser testing...
---
 web/images/banner_logo.png      | Bin 11579 -> 0 bytes
 web/images/banner_span.png      | Bin 191 -> 0 bytes
 web/images/diagonal-stripes.png | Bin 0 -> 152 bytes
 web/images/logo.png             | Bin 0 -> 10859 bytes
 web/index.html                  |  15 ++++++--
 web/styles.css                  |  75 ++++++++++++++++++++++++++++++++++++----
 6 files changed, 82 insertions(+), 8 deletions(-)

diff --git a/web/images/banner_logo.png b/web/images/banner_logo.png
deleted file mode 100644
index 321d055..0000000
Binary files a/web/images/banner_logo.png and /dev/null differ
diff --git a/web/images/banner_span.png b/web/images/banner_span.png
deleted file mode 100644
index 82d2643..0000000
Binary files a/web/images/banner_span.png and /dev/null differ
diff --git a/web/images/diagonal-stripes.png b/web/images/diagonal-stripes.png
new file mode 100644
index 0000000..d057205
Binary files /dev/null and b/web/images/diagonal-stripes.png differ
diff --git a/web/images/logo.png b/web/images/logo.png
new file mode 100644
index 0000000..2591de2
Binary files /dev/null and b/web/images/logo.png differ
diff --git a/web/index.html b/web/index.html
index a2851ca..4143ba1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -8,7 +8,18 @@
     <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
-  <body class="main">
-    <div class="top-banner"><img src="images/banner_logo.png" alt="nyx" /></div>
+  <body>
+    <div class="header">
+      <div class="header-body">
+        <div class="nav">
+          <ul class="tabs nav">
+            <li><a id="t1" href="#what_is_it">What Is It?</a></li>
+            <li><a id="t3" href="#faq">FAQ</a></li>
+            <li><a id="t3" href="#download">Download</a></li>
+          </ul>
+        </div>
+        <span id="logo"></span>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/web/styles.css b/web/styles.css
index a37a80d..67fda84 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1,12 +1,75 @@
-body.main {
-  background-color: black;
+body {
+  background: #202228 url("images/diagonal-stripes.png");
+  line-height: 1.231;
   color: white;
   margin: 0px;
 }
-.top-banner {
-  width: 100%;
-  height: 140px;
-  background: url("images/banner_span.png");
+a {
+  text-decoration: none;
+}
+
+.header {
+  height: 97px;
+  background-color: black;
+  border-bottom: 10px solid #825d27;
+  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
+}
+
+.header-body {
+  margin: 0px auto;
+  text-align: center;
+  font-family: "FreeSans", "Arial", "Helvetica", sans-serif;
+  max-width: 770px;
+}
+
+#logo {
+  float: left;
+  width: 300px;
+  height: 120px;
+  background: url("images/logo.png") no-repeat 0px 20px;
+  margin: 0px;
+}
+
+.nav {
+  float: right;
+  margin: 0px;
+  font-size: 14px;
+}
+
+.nav li {
+  display: inline;
+}
+
+.nav a { 
+  display: inline-block;
+  padding: 6px 15px;
+  background: #825d27;
+  border: 1px solid #47351c;
+  border-top: none;
+  color: #FFFFFF;
+  border-bottom-right-radius: 7px;
+  border-bottom-left-radius: 7px;
+}
+
+.nav a:hover {
+  background: #FFFFFF;
+  border: 1px solid #885CA4;
+  border-top: none;
+  color: #333333;
+}
+
+.nav a.current {
+  background: #FFFFFF;
+  border: 1px solid #4d4d4d;
+  border-top: none;
+  color: #333333;
+  font-weight: bold;
+}
+
+.nav a.active:hover {
+  border: 1px solid #885CA4;
+  border-top: none;
+  color: #666666;
 }

    