Permalink
Browse files

fixed navigation links

  • Loading branch information...
1 parent eb8876b commit dfcbb79a3c6ae5a355d22e03467374bf17b7fadf @pilks pilks committed May 23, 2012
@@ -5,16 +5,14 @@ html, body {
body {
margin: 0px;
padding: 0px;
- /*font-family: "Georgia", serif;*/
- /*font-family: "Monaco", monospace;*/
font-family: "Helvetica", sans-serif;
- background: #F4F4F4 url(../resources/body.gif);
+ background: rgb(237, 237, 237);
}
a {
color: rgba(3, 34, 172, 1.0);
text-decoration: none;
- cursor: auto;
+ cursor: pointer;
}
a:hover {
@@ -28,12 +26,9 @@ h1 {
}
h3 {
- /*line-height: 30px;*/
display: inline;
font-size: 15px;
margin: 0;
- /*word-wrap: normal;*/
- /*text-overflow: ellipsis;*/
padding: 6px 6px;
}
@@ -68,24 +63,39 @@ aside#homeButton img {
.right {
text-align: right;
float: right;
- color: #999;
}
.right a {
- color: white;
+ color: #999;
+ padding: 1px 5px;
+ border-right: 1px solid #333;
+}
+
+.right a:last-child {
+ border-right: 0;
+ padding-right: 0px;
+}
+
+a.selectedFeature {
+ color: #fff;
+ text-decoration: none;
}
div#topContainer {
width: 100%;
position: fixed;
z-index: 9;
- box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.57);
color: white;
background-color: rgba(88, 88, 88, 0.94);
+ -webkit-transition:all 0.45s ease;
+ -moz-transition:all 0.45s ease;
+ -o-transition:all 0.45s ease;
+ -ms-transition:all 0.45s ease;
+ transition:all 0.45s ease;
}
-div.scrollingContainer {
-
+.shadowed {
+ box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.57);
}
div#topContainer p, div#topContainer ul {
@@ -113,7 +123,7 @@ div#topBarContent {
padding: 0px 40px;
max-width: 1200px;
min-width: 900px;
-
+ color: #fff;
position: relative;
}
@@ -132,20 +142,9 @@ div#bottomBar {
padding: 0px 40px;
max-width: 1200px;
min-width: 900px;
-
- /*clear: both;*/
-
- /*background-color: rgba(0, 0, 0, 0.65);
- */
- /*background: -webkit-linear-gradient(top, rgba(2, 2, 2, 0.85), rgba(2, 2, 2, 0.80) 92%);
- background: -moz-linear-gradient(top, rgba(2, 2, 2, 0.85), rgba(2, 2, 2, 0.80) 92%);
- background: -o-linear-gradient(top, rgba(2, 2, 2, 0.85), rgba(2, 2, 2, 0.80) 92%);
- background: -ms-linear-gradient(top, rgba(2, 2, 2, 0.85), rgba(2, 2, 2, 0.80) 92%);
- background: linear-gradient(top, rgba(2, 2, 2, 0.85), rgba(2, 2, 2, 0.80) 92%); */
-
-/* background: -webkit-linear-gradient(top, rgba(12, 12, 12, 0.95), rgba(12, 12, 12, 0.87) 92%);
- background: linear-gradient(top, rgba(12, 12, 12, 0.95), rgba(12, 12, 12, 0.87) 92%);*/
width: 100%;
+ color: white;
+ text-shadow: 0px -1px 1px #000;
-webkit-transition:all 0.25s ease;
-moz-transition:all 0.25s ease;
@@ -157,19 +156,9 @@ div#bottomBar {
.clearBG {
background-color: rgba(0, 0, 0, 0.0);
- /*text-shadow: 0px 1px 1px #fff;*/
color: black;
}
-.darkBG {
- color: white;
- /*box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.57);*/
- /*background-color: -webkit-linear-gradient(top, rgba(88, 88, 88, 0.97), rgba(88, 88, 88, 0.93) 98%);*/
- /*background-color: rgba(88, 88, 88, 0.97);*/
-
- text-shadow: 0px -1px 1px #000;
-}
-
div.holder {
display: table;
}
@@ -182,21 +171,11 @@ li {
/**********************************/
div#bodyWrapper {
- padding: 0px 40px 35px 40px;
- /*margin: auto;*/
+ padding: 140px 40px 35px 40px;
position: relative;
text-shadow: 0px 1px 1px #fff;
}
-header {
- max-width: 1200px;
- min-width: 900px;
- margin: 47px auto;
- margin-top: 0px;
- padding-top: 45px;
- padding-bottom: 45px;
-}
-
aside#hotspotsLinkContainer {
margin: 0;
padding: 0;
@@ -5,9 +5,27 @@
<title>Covershot: Hot Spots</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/covershot.css">
+ <style type="text/css">
+ div#bodyWrapper {
+ padding-top: 60px;
+ }
+ </style>
<script src="scripts/jquery-1.7.1.min.js"></script>
+ <script>
+ window.onscroll = function () {
+ document.querySelectorAll('#topContainer')[0].className = (window.scrollY !== 0) ? 'shadowed' : '';
+ };
+ </script>
</head>
<body>
+ <div id="topContainer">
+ <div id="topBar">
+ <div id="topBarContent">
+ <p class="left">Covershot</p>
+ <p class="right"><a href="index.html">Coverage</a><a href="hotspots.html" class="selectedFeature">Hotspots</a></p>
+ </div>
+ </div>
+ </div>
<div id="bodyWrapper">
<section id="bod">
<section id="mainContent">
View
@@ -7,17 +7,21 @@
<link rel="stylesheet" href="css/covershot.css">
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.tablesort.js"></script>
- <script src="scripts/simplemeter.js"></script>
+ <script>
+ window.onscroll = function () {
+ document.querySelectorAll('#topContainer')[0].className = (window.scrollY !== 0) ? 'shadowed' : '';
+ };
+ </script>
</head>
<body>
<div id="topContainer">
<div id="topBar">
<div id="topBarContent">
<p class="left">Covershot</p>
- <p class="right"><a href="index.html">Coverage</a> | <a href="hotspots.html">Hotspots</a></p>
+ <p class="right"><a href="index.html" class="selectedFeature">Coverage</a><a href="hotspots.html">Hotspots</a></p>
</div>
</div>
- <div id="bottomBar" class="darkBG">
+ <div id="bottomBar">
<div class="holder">
<ul class="summary">
<li>
@@ -48,9 +52,6 @@
</div>
</div>
<div id="bodyWrapper">
- <header>
-
- </header>
<section id="bod">
<section id="mainContent">
<table id="files">
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
View
@@ -12,16 +12,21 @@
<script type="text/javascript" src="<%= pathToScripts %>/shBrushJScript.js"></script>
<link href="<%= pathToCSS %>/shCore.css" rel="stylesheet" type="text/css" />
<link href="<%= pathToCSS %>/shThemeDefault.css" rel="stylesheet" type="text/css" />
+ <script>
+ window.onscroll = function () {
+ document.querySelectorAll('#topContainer')[0].className = (window.scrollY !== 0) ? 'shadowed' : '';
+ };
+ </script>
</head>
<body>
<div id="topContainer">
<div id="topBar">
<div id="topBarContent">
<p class="left"><a href="<%= pathToRoot %>/index.html">Covershot</a></p>
- <p class="right">Coverage | <a href="hotspots.html">Hotspots</a></p>
+ <!-- <p class="right"><a href="">Coverage</a> <a href="hotspots.html">Hotspots</a></p> -->
</div>
</div>
- <div id="bottomBar" class="darkBG">
+ <div id="bottomBar">
<div class="holder">
<ul class="summary">
<li>
@@ -48,9 +53,6 @@
</div>
</div>
<div id="bodyWrapper">
- <header>
-
- </header>
<section id="bod">
<section id="mainContent">
<script type="syntaxhighlighter" class="brush: js; class-name: 'rounded'"><![CDATA[

0 comments on commit dfcbb79

Please sign in to comment.