www/adium.im 575:e5bca876d0bb: Sub-navigation and cleanup.
commits at adium.im
commits at adium.im
Sun Feb 19 00:00:30 UTC 2012
details: http://hg.adium.im/www/adium.im/rev/e5bca876d0bb
revision: 575:e5bca876d0bb
branch: rewrite
author: Paul Wilde <me at paulwilde.co.uk>
date: Sun Feb 19 00:00:22 2012 +0000
Sub-navigation and cleanup.
diffs (321 lines):
diff -r 20adc1656691 -r e5bca876d0bb about/index.php
--- a/about/index.php Sat Feb 18 03:24:32 2012 +0000
+++ b/about/index.php Sun Feb 19 00:00:22 2012 +0000
@@ -35,7 +35,7 @@
</nav>
</div>
</div>
- <div class="banner">
+ <div class="heading">
<div class="container">
<h1>About</h1>
</div>
diff -r 20adc1656691 -r e5bca876d0bb assets/styles/global.css
--- a/assets/styles/global.css Sat Feb 18 03:24:32 2012 +0000
+++ b/assets/styles/global.css Sun Feb 19 00:00:22 2012 +0000
@@ -37,35 +37,33 @@
zoom: 1;
}
-.container:before, .container:after,
+.container:before, .container:after,
.clearfix:before, .clearfix:after { content: ''; /* display: table; */ }
-.container:after, .clearfix:after { clear: both; }
-footer .container:after, .clearfix:after { display: table; }
-
-.container:before, .container:after,
-.clearfix:before, .clearfix:after { content: ''; /* display: table; */ }
-.container:after, .clearfix:after { clear: both; }
-footer .container:after, .clearfix:after { display: table; }
+.container:after, .clearfix:after { display: table; clear: both; }
+.banner .container:after { display: none; } /* Do not clearfix .banner */
/********** Font sizes **********/
.content h1 { font-size: 2em; line-height: 1.1em; }
-.banner h1, #menu-logo { font-size: 1.8em; }
+.heading h1, #menu-logo { font-size: 1.8em; }
.content h2, footer h3 { font-size: 1.6em; }
-.content p, .content h3, figcaption, .content ol, .content ul, td, th, pre {
+.content p, .content h3, figcaption,
+.content ol, .content ul, td, th, pre {
font-size: 1.4em;
}
figcaption h4 { font-size: 1.1em; }
-.content p, .content h3, figcaption, td, th, pre {
+.content p, .content h3, figcaption,
+td, th, pre {
line-height: 1.4em;
}
-.content ul ul, .content ol ol, .content ol ul, .content ul ol {
+.content ul ul, .content ol ol,
+.content ol ul, .content ul ol {
font-size: 1em;
}
@@ -110,7 +108,6 @@
nav { color: #999; }
/* Notice: Clearfix */
-nav:after { display: table; clear: both; content: ''; }
nav ul, nav li {
border: 0;
@@ -207,64 +204,88 @@
.xtras a:active span:before, .xtras.active a span:before { background-position: -205px -19px; }
-/********** Banner **********/
+/********** Sub Navigation Container **********/
-.banner {
+.heading {
background: url('../images/noise.png') #444; /* Notice: IE7-8/outdated browser fallback */
background: url('../images/shadow.png') repeat-x, url('../images/noise.png') #444;
border-bottom: 1px solid #555;
}
-.banner h1, .banner h2 {
+.heading h1, .heading h2 {
color: #fff;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
-webkit-font-smoothing: antialiased;
}
-.banner h1 {
+.heading h1 {
+ float: left;
padding: 13px 0 13px 35px;
}
/********** Sub Navigation **********/
-nav.sub {
- height: 38px;
- border-top: 1px solid #bcbcbc;
- border-bottom: 1px solid #bcbcbc;
- background-color: #dadada;
- background: url('../images/shadow.png') repeat-x, linear-gradient(top, #e5e5e5 0%, #d7d7d7 100%);
- background: url('../images/shadow.png') repeat-x, -o-linear-gradient(top, #e5e5e5 0%, #d7d7d7 100%);
- background: url('../images/shadow.png') repeat-x, -moz-linear-gradient(top, #e5e5e5 0%, #d7d7d7 100%);
- background: url('../images/shadow.png') repeat-x, -webkit-linear-gradient(top, #e5e5e5 0%, #d7d7d7 100%);
- background: url('../images/shadow.png') repeat-x, -ms-linear-gradient(top, #e5e5e5 0%, #d7d7d7 100%);
- background: url('../images/shadow.png') repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0, #e5e5e5), color-stop(1, #d7d7d7));
+nav.sub {
+ top: 7px;
+ position: relative;
+ float: right;
}
-nav.sub ul, nav.sub li { border: 0; }
+nav.sub ul { margin: 0 14px; border: 0; }
+nav.sub li { border: 0; margin-left: 2px; }
+nav.sub li:first-child { margin-left: 0; }
-nav.sub ul { margin: 0 15px; }
-
-nav.sub li {
- padding: 11px 12px;
- color: #888;
- text-shadow: 0 1px #f6f6f6;
+nav.sub li a {
+ display: block;
+ padding: 12px 12px 11px;
+ border-radius: 5px 5px 0 0;
+ border: 1px solid rgba(0, 0, 0, .6);
+ border-top-color: rgba(0, 0, 0, .55);
+ border-bottom-color: rgba(0, 0, 0, .35);
+ color: #666;
+ text-shadow: 0 1px #e9e9e9;
+ background: #ccc;
+ background: linear-gradient(top, #fff #ddd 0%, #ccc 80%, #b5b5b5 100%);
+ background: -o-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
+ background: -moz-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
+ background: -webkit-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
+ background: -ms-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(.8, #ccc), color-stop(1, #b5b5b5));
+ -webkit-box-shadow: inset 0 1px #e9e9e9;
+ -moz-box-shadow: inset 0 1px #e9e9e9;
+ box-shadow: inset 0 1px #e9e9e9;
}
-nav.sub .active {
- font-weight: 600;
- -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#bababa)) 1 100%;
- -webkit-border-image: -webkit-linear-gradient(top, #fefefe 0%, #f5f5f5 100%) 1 100%;
- -moz-border-image: -moz-linear-gradient(top, #fefefe 0%, #f5f5f5 100%) 1 100%;
- -ms-border-image: -ms-linear-gradient(top, #fefefe 0%, #f5f5f5 100%) 1 100%;
- -o-border-image: -o-linear-gradient(top, #fefefe 0%, #f5f5f5 100%) 1 100%;
- border-image: linear-gradient(top, #fefefe 0%, #f5f5f5 100%) 1 100%;
- background: 0;
+nav.sub li a:hover {
+ color: #555;
+ text-shadow: 0 1px #f9f9f9;
+ border-bottom-color: rgba(0, 0, 0, .4);
+ background: #ddd;
+ background: linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
+ background: -o-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
+ background: -moz-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
+ background: -webkit-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
+ background: -ms-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(.8, #ddd), color-stop(1, #c5c5c5));
+ -webkit-box-shadow: inset 0 1px #f9f9f9;
+ -moz-box-shadow: inset 0 1px #f9f9f9;
+ box-shadow: inset 0 1px #f9f9f9;
}
-nav.sub a { color: #666; }
-nav.sub a:hover { color: #444; }
-nav.sub a:active { color: #888; }
+nav.sub li a:active { color: #777; }
+
+nav.sub li.active a {
+ padding-bottom: 12px;
+ color: #777;
+ text-shadow: 0 1px #fff;
+ background: #fafafa;
+ border: 1px solid rgba(0, 0, 0, .65);
+ border-bottom-color: #fafafa;
+ -webkit-box-shadow: inset 0 1px #fff;
+ -moz-box-shadow: inset 0 1px #fff;
+ box-shadow: inset 0 1px #fff;
+}
/********** Content **********/
@@ -469,7 +490,7 @@
figcaption {
padding-top: 10px;
color: #777;
- font-weight: 500;
+ font-weight: 400;
-webkit-transition: color 150ms ease-in;
-moz-transition: color 150ms ease-in;
-ms-transition: color 150ms ease-in;
@@ -477,7 +498,7 @@
transition: color 150ms ease-in;
}
-figcaption h4 { color: #444; padding-bottom: 6px; }
+figcaption h4 { color: #444; font-weight: 500; padding-bottom: 6px; }
figure:hover figcaption { color: #444; cursor: pointer; }
figure:hover a:hover { text-decoration: none; } /* Notice: Remove underline from the figcaption on hover */
@@ -691,7 +712,7 @@
.adium { width: 45%; }
/* Content */
- .two { display: block; }
+ hr.two { display: block; }
.two-column.left { width: auto; }
}
diff -r 20adc1656691 -r e5bca876d0bb assets/styles/home.css
--- a/assets/styles/home.css Sat Feb 18 03:24:32 2012 +0000
+++ b/assets/styles/home.css Sun Feb 19 00:00:22 2012 +0000
@@ -51,9 +51,16 @@
z-index: 10;
}
+.banner h1, .banner h2 {
+ color: #fff;
+ font-weight: 600;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+ -webkit-font-smoothing: antialiased;
+}
+
.banner h1 {
padding: 0;
- letter-spacing: -1px;
+ letter-spacing: -1px;
float: left;
}
diff -r 20adc1656691 -r e5bca876d0bb help/documentation/index.php
--- a/help/documentation/index.php Sat Feb 18 03:24:32 2012 +0000
+++ b/help/documentation/index.php Sun Feb 19 00:00:22 2012 +0000
@@ -2,7 +2,7 @@
<html>
<head>
- <title>Adium - Help</title>
+ <title>Adium - Documentation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -30,9 +30,16 @@
</nav>
</div>
</div>
- <div class="banner">
+ <div class="heading">
<div class="container">
<h1>Help</h1>
+ <nav class="sub">
+ <ul>
+ <li><a href="/rewrite/help/">Adium Help</a></li>
+ <li class="active"><a href="/rewrite/help/documentation/">Adium Documentation</a></li>
+ <li><a href="/rewrite/screencasts/">Screencasts</a></li>
+ </ul>
+ </nav>
</div>
</div>
</header>
diff -r 20adc1656691 -r e5bca876d0bb help/index.php
--- a/help/index.php Sat Feb 18 03:24:32 2012 +0000
+++ b/help/index.php Sun Feb 19 00:00:22 2012 +0000
@@ -32,9 +32,16 @@
</nav>
</div>
</div>
- <div class="banner">
+ <div class="heading">
<div class="container">
<h1>Help</h1>
+ <nav class="sub">
+ <ul>
+ <li class="active"><a href="/rewrite/help/">Adium Help</a></li>
+ <li><a href="/rewrite/help/documentation/">Adium Documentation</a></li>
+ <li><a href="/rewrite/screencasts/">Screencasts</a></li>
+ </ul>
+ </nav>
</div>
</div>
</header>
diff -r 20adc1656691 -r e5bca876d0bb screencasts/index.php
--- a/screencasts/index.php Sat Feb 18 03:24:32 2012 +0000
+++ b/screencasts/index.php Sun Feb 19 00:00:22 2012 +0000
@@ -2,7 +2,7 @@
<html>
<head>
- <title>Adium - About</title>
+ <title>Adium - Screencasts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -31,9 +31,16 @@
</nav>
</div>
</div>
- <div class="banner">
+ <div class="heading">
<div class="container">
<h1>Screencasts</h1>
+ <nav class="sub">
+ <ul>
+ <li><a href="/rewrite/help/">Adium Help</a></li>
+ <li><a href="/rewrite/help/documentation/">Adium Documentation</a></li>
+ <li class="active"><a href="/rewrite/screencasts/">Screencasts</a></li>
+ </ul>
+ </nav>
</div>
</div>
</header>
More information about the commits
mailing list