added the code and links to top corner - closes w3c#28

shikhar-scs · May 13, 2014 · c237df9 · c237df9
1 parent 53181f2
commit c237df9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/css/metrics-graphics.css b/css/metrics-graphics.css
@@ -1,3 +1,36 @@
+body {
+    background-color: #fff;
+    color: #000;
+    font-family: 'Open Sans', sans-serif, Arial;
+}
+
+div#download-links {
+    position:absolute;
+    top:0;
+    left:0;
+    margin-bottom:35px;
+    padding:10px;
+    padding-left:15px;
+    padding-right:15px;
+    font-size:15px;
+    color:white;
+    font-weight:300;
+    border-bottom-right-radius:5px;
+    background-color:rgba(0,100,0,.5);
+}
+
+div#download-links:hover {
+  background-color:rgba(0,100,0,.6);
+}
+
+div#download-links a {
+  color:white;
+}
+
+div#download-links a:hover {
+  text-decoration:underline;
+}
+
 a,
 a:active,
 a:visited {
@@ -25,12 +58,6 @@ a.active {
     fill: #db4437;
 }
 
-body {
-    background-color: #fff;
-    color: #000;
-    font-family: 'Open Sans', sans-serif, Arial;
-}
-
 circle {
     fill: #0000ff;
     opacity: 0.85;

diff --git a/index.html b/index.html
@@ -18,13 +18,15 @@
     <script src='js/d3.min.js'></script>
     <script src='js/bootstrap.min.js'></script>
     <script src='js/metrics-graphics.js'></script>
-
     <script src='js/main.js'></script>
 </head>
 
 <body>
     <div id='container'>
         <div id='content-body'>
+            <div id='download-links'>
+                <a href='https://github.com/mozilla/metrics-graphics' target='_blank'>Code</a> | <a href='https://github.com/mozilla/metrics-graphics/issues'  target='_blank'>Issues</a>
+            </div>
             <div id='head'>
                 <h1>Metrics Graphics</h1>
             </div>
@@ -36,6 +38,7 @@ <h1>Metrics Graphics</h1>
                 may use that file for other graph-based projects. The main file, 
                 metrics_graphics.js, requires d3, jquery, and underscore at the 
                 moment. Below are a few examples. The data here is not real.</p>
+
                 <p class="text-center">
                     <a href="#" id="light-css" class="pill active">Light style</a> &nbsp; 
                     <a href="#" id="dark-css" class="pill">Dark style</a>