initial mozilla.com header and footer.

This commit is contained in:
Fred Wenzel 2011-04-25 16:53:48 -07:00
Родитель 3eb5009fb4
Коммит 71bae1a6ce
16 изменённых файлов: 1668 добавлений и 3 удалений

Просмотреть файл

@ -0,0 +1,509 @@
/* {{{ Text and Links */
body {
font-family: georgia, serif;
font-size: 13px;
line-height: 1.231;
color: #6d7581;
}
a:link,
a:visited {
text-decoration: none;
color: #447bc4;
}
a:hover,
a:active {
text-decoration: underline;
color: #447bc4;
}
a.external:link,
a.external:visited {
padding-right: 8px;
}
a.external:hover,
a.external:active {
padding-right: 8px;
background: transparent url(/media/img/tignish/content/external-link.png) center right no-repeat;
}
h1 a.external:link,
h2 a.external:link,
h3 a.external:link,
h4 a.external:link,
h5 a.external:link,
h6 a.external:link,
h1 a.external:visited,
h2 a.external:visited,
h3 a.external:visited,
h4 a.external:visited,
h5 a.external:visited,
h6 a.external:visited {
padding-right: 16px;
}
h1 a.external:hover,
h2 a.external:hover,
h3 a.external:hover,
h4 a.external:hover,
h5 a.external:hover,
h6 a.external:hover,
h1 a.external:active,
h2 a.external:active,
h3 a.external:active,
h4 a.external:active,
h5 a.external:active,
h6 a.external:active {
padding-right: 16px;
background: transparent url(/media/img/tignish/content/external-link-large.png) center right no-repeat;
}
a.email:link,
a.email:visited {
padding-right: 16px;
}
a.email:hover,
a.email:hover {
padding-right: 16px;
background: transparent url(/media/img/tignish/content/email-link.png) center right no-repeat;
}
p { margin: 0 0 1em 0; }
img { border: 0; }
p,
dd,
#content li,
#main-content li {
line-height: 1.5;
}
#footer a.external:hover,
#footer a.external:hover {
background-image: url(/media/img/tignish/content/external-link-footer.png);
}
strong { font-weight: bold; }
em { font-style: italic; }
abbr,
acronym {
border-bottom :1px dotted #000;
cursor: help;
}
p,
fieldset,
table,
pre {
margin-bottom: 1em;
}
/* }}} */
/* {{{ Headings */
h1, h2, h3, h4, h5, h6 {
font-family: georgia, serif;
font-weight: normal;
font-style: italic;
color: #484848;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
font-family: MetaBlack, "Trebuchet MS", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-style: normal;
font-size: 130%;
display: block;
letter-spacing: -0.02em;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
h1, h2, h3 {
margin: 1em 0 0.5em 0;
}
/* }}} */
/* {{{ Lists */
ul {
margin: 1em 0 1em 0;
padding: 0;
}
blockquote {
margin: 1em;
}
ol,
dl {
margin: 1em;
}
ol,
dl {
margin-left: 0;
padding-left: 1.5em;
}
ol li,
ul li ol li {
list-style: decimal outside;
background: none;
}
dl dd {
margin-left:1em;
}
/* }}} */
/* {{{ Table */
td, th { border: 0; }
table.data-table {
border-top: 1px solid #eee;
}
table.data-table td,
table.data-table th {
padding: 0.5em 0.5em;
border-bottom: 1px solid #eee;
}
/* }}} */
/* {{{ Download Button */
ul.home-download,
ul.home-download li {
margin: 0;
padding: 0;
list-style-type: none;
background: none;
}
ul.home-download {
margin-left: 0;
position: relative;
width: 300px;
overflow: hidden;
}
a.download-link,
a.download-link:link,
a.download-link:visited {
display: block;
margin: 0 0 10px 50px;
height: 95px;
-moz-box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color: #fff;
overflow: visible;
background: #84C63C; /* old browsers */
background: -moz-linear-gradient(top, #84C63C 0%, #489615 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84C63C), color-stop(100%,#489615)); /* webkit */
background: linear-gradient(top, #84C63C 0%, #489615 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84C63C', endColorstr='#489615',GradientType=0 ); /* ie */
-moz-transition: box-shadow 0.2s ease-in-out;
-webit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
.beta-download a.download-link,
.beta-download a.download-link:link,
.beta-download a.download-link:visited {
background: #F9CB89; /* old browsers */
background: -moz-linear-gradient(top, #F9CB89 0%, #f79200 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9CB89), color-stop(100%,#f79200)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9CB89', endColorstr='#f79200',GradientType=0 ); /* ie */
}
a.download-link:hover,
a.download-link:active {
-moz-box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
-moz-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
a.download-link span.download-content {
position: relative;
margin-left: -50px;
display: block;
background: url(/media/img/home/download-logo.png) 0 0 no-repeat;
height: 95px;
font-family: georgia, "Bitstream Charter", serif;
font-style: italic;
font-weight: normal;
font-size: 18px;
line-height: 18px;
padding: 10px 10px 0 112px;
}
a.download-link span.download-title {
display: block;
font-style: normal;
font-size: 28px;
line-height: 28px;
letter-spacing: -0.02em;
}
a.download-link:hover,
a.download-link:active {
background-position: -300px 0;
text-decoration: none;
cursor: pointer;
}
* html ul.home-download li a.download-link { overflow: hidden; }
ul.home-download li a.download-link span.download-info {
display: block;
margin-top: 3px;
color: #346012;
font-size: 12px;
font-style: normal;
line-height: 12px;
}
ul.beta-download li a.download-link span.download-info {
color: #fff;
}
ul.home-download li a.download-link #download-arrow,
ul.home-download li a.download-link .download-arrow {
position: absolute;
top: 15px;
right: 15px;
}
ul.home-download li a.download-link span.download-info em {
display: block;
font-style: normal;
}
.download-noscript { margin-left: 35px; width: 400px; }
.download-noscript h3 { font-size: 120%; margin-bottom: 0; }
.download-noscript h3 span { display: block; font-size: 75%; color: #898378; }
.download-noscript ul { margin-top: 0.5em; }
.download-other {
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
width: 310px;
text-align: center;
color: #ccc;
margin: 0;
}
#download .download-noscript h3 span a,
#download .download-noscript h3 span a:link,
#download .download-noscript h3 span a:visited,
.download-other a,
.download-other a:link,
.download-other a:visited {
white-space: nowrap;
color: #999;
}
.home-download abbr,
.download-noscript abbr { border-bottom: 0; }
/* }}} */
/* {{{ Sidebar Download Buttons */
#download.top-right {
position: absolute;
right: 10px;
top: 85px;
z-index: 9;
}
#download.top-right ul.home-download {
width: auto;
}
* html #download.top-right ul.home-download {
width: 330px;
}
#download a.download-link {
height: 45px;
margin-bottom: 3px;
}
#download a.download-link span.download-content {
margin-left: -25px;
padding-left: 55px;
font-size: 14px;
background-image: url(/media/img/download-logo-sub.png);
height: 40px;
line-height: auto;
padding-top: 8px;
}
#download a.download-link span.download-title {
font-size: 22px;
display: inline-block;
padding-right: 20px;
padding-bottom: 3px;
margin-right: 5px;
vertical-align: middle;
background: url(/media/img/firefox/download-arrow.png) 100% 50% no-repeat;
}
#download .download-other {
width: auto;
margin: 0;
text-align: left;
margin-left: 80px;
}
#download .download-noscript {
width: 275px;
background: url(/media/img/download-logo-sub.png) 0 0 no-repeat;
padding-left: 55px;
margin-left: 25px;
}
#download .download-noscript h3 {
margin: 0;
}
#download .download-noscript h3 span {
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
font-weight: normal;
text-transform: none;
}
#download .download-noscript ul {
list-style-type: none;
margin: 0;
}
#download .download-noscript ul li {
display: inline;
margin-right: 10px;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
}
/* }}} */
/* {{{ Mobile Download Links */
#download.mobile {
width: 275px;
}
#download.mobile .dl,
#download.mobile .dl:link,
#download.mobile .dl:visited {
font-size: 17px;
display: block;
margin-bottom: 5px;
-moz-box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color: #fff;
overflow: visible;
background: #84C63C; /* old browsers */
background: -moz-linear-gradient(top, #84C63C 0%, #489615 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84C63C), color-stop(100%,#489615)); /* webkit */
background: linear-gradient(top, #84C63C 0%, #489615 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84C63C', endColorstr='#489615',GradientType=0 ); /* ie */
-moz-transition: box-shadow 0.2s ease-in-out;
-webit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
#download.mobile .dl span {
display: block;
background: url(/media/img/firefox/download-arrow.png) 10px 14px no-repeat;
padding: 8px 8px 8px 30px;
}
#download.mobile .dl:hover,
#download.mobile .dl:active {
-moz-box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
-webkit-box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
-moz-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
#download.mobile h3 {
line-height: 0.9;
margin: 0 0 20px;
zoom: 1;
}
#download.mobile h3 span {
color: #447bc4;
}
#download.mobile .notes {
font-size: 11px;
font-family: "Trebuchet MS", sans-serif;
zoom: 1;
}
/* }}} */
/* {{{ OS detection */
li.os_linux,
li.os_windows,
li.os_osx { display: none; }
ul.os_linux li.os_linux { display: block; }
ul.os_windows li.os_windows { display: block; }
ul.os_osx li.os_osx { display: block; }
/* }}} */
/* {{{ Main Features */
#main-feature {
margin: 0 20px;
}
#main-feature h2 {
font-size: 40px;
padding: 10px 0;
margin: 0;
line-height: 1.2em;
}
#main-feature h2 span {
font-size: 65px;
}
#main-feature p {
color: #484848;
font-size: 20px;
line-height: 1.4em;
}
/* }}} */

Просмотреть файл

@ -0,0 +1,711 @@
/* {{{ Page Frame */
body {
text-align: center;
margin: 0;
padding: 0;
font-family: verdana;
min-width: 990px;
}
#nav-access { display: none; }
#doc {
width: 980px;
margin: auto;
text-align: left;
position: relative;
z-index: 1;
}
[dir="rtl"] #doc {
text-align: right;
}
#doc:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper {
min-width: 980px;
}
.hide { display: none; }
/* }}} */
/* {{{ Header */
body {
background: #fff url(/media/img/template/page-background.png) 50% 0 repeat-x;
border-top: 2px solid #686868;
}
#header {
text-align: center;
height: 57px;
margin: 0 10px;
}
#header h1 {
margin: 0;
float: left;
}
#header h1 a,
#header h1 a:link,
#header h1 a:visited {
display: block;
height: 61px;
width: 160px;
background: url(/media/img/covehead/template/title.png) 0 0 no-repeat;
text-indent: -500px;
font-size: 1px;
overflow: hidden;
-moz-transition: background 0.2s ease-in-out;
}
#footer h3 a:hover,
#footer h3 a:active {
background: -moz-radial-gradient(center 45deg, ellipse closest-side, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%),
url(/media/img/template/header-logos.png) 15px 0 no-repeat;
-moz-transition: background 0.2s ease-in-out;
}
/* }}} */
/* {{{ Header Menu */
/* Top Level Menu Items */
#nav-main {
display: inline-block;
*display: inline;
_height: 47px;
zoom: 1;
text-align: left;
font-family: "Trebuchet MS", sans-serif;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
}
#nav-main li {
list-style: none;
}
#nav-main ul {
float: left;
z-index: 99;
left: auto;
margin: 0;
padding: 0;
}
#nav-main li {
float: left;
background: none;
margin: 0 0 0 -1px;
padding: 0;
position: relative;
z-index: 100;
}
#nav-main ul li a,
#nav-main ul li a:link,
#nav-main ul li a:visited,
#nav-main ul li span {
padding: 15px 30px 10px 10px;
height: 18px;
display: block;
float: left;
border-width: 0 1px;
border-style: solid;
border-color: #98b2c9;
z-index: 100;
position: relative;
color: #484848;
text-decoration: none;
}
#nav-main ul li.current.last a {
border-color: #98b2c9;
}
#nav-main ul li a:hover,
#nav-main ul li:hover a,
#nav-main ul li.hover a,
#nav-main ul li.hover a:link,
#nav-main ul li.hover a:visited {
box-shadow:
rgba(152,178,201,0.2) 0 0px 0px,
inset rgba(255,255,255,0.8) 0 -6px 20px 10px;
-moz-transition: 0.2s linear;
-moz-transition-property: background, box-shadow, border-right;
background: rgb(251,253,255);
background: rgba(255,255,255,0);
outline: 0;
padding-bottom: 15px;
}
#nav-main ul li.last a,
#nav-main ul li.last span {
border-right-color: transparent;
}
#nav-main ul li.last a:hover,
#nav-main ul li.last a:focus,
#nav-main ul li.last a:active,
.js #nav-main ul li.last a:focus,
#nav-main ul li.hover a {
border-right-color: #98b2c9;
}
/* Second-level Menu Items */
#nav-main li:hover ul,
.js #nav-main li.hover ul {
margin-top: 47px;
left: 0;
opacity: 1;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}
#nav-main ul ul,
#nav-main ul ul li {
height: auto;
border: 0;
float: none;
}
#nav-main ul ul {
position: absolute;
left: -999em;
opacity: 0;
z-index: 99;
border: 1px solid #98b2c9;
width: 190px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
background: #fbfdff;
background: rgba(255,255,255,0.9);
box-shadow:
rgba(152,178,201,0.2) 0 2px 0px,
inset rgba(152,178,201,0.3) 0 -2px 0;
}
#nav-main ul ul li {
box-shadow:
inset rgba(152,178,201,0.2) 0 -1px 0 0;
margin-left: 0;
}
#nav-main ul ul li a,
#nav-main ul ul li a:link,
#nav-main ul ul li a:visited,
#nav-main ul ul li span {
overflow: hidden;
padding: 8px 10px;
margin: 0;
height: auto;
float: none;
display: block;
font-size: 10px;
border: 0;
background: none;
box-shadow: none;
position: relative;
-moz-transition: background 0.1s ease-in;
-webkit-transition: background 0.1s ease-in;
}
#nav-main ul ul li a:hover,
#nav-main ul ul li a:focus,
#nav-main ul ul li a:active,
.js #nav-main ul ul li a:focus,
#nav-main ul li.current ul li a:hover,
#nav-main ul li.current ul li a:focus,
#nav-main ul li.current ul li a:active,
.js #nav-main ul li.current ul li a:focus {
background: rgb(227,235,244);
background: rgba(152,178,201,0.2);
box-shadow:
inset rgba(152,178,201,0.3) 0 2px 0px,
0 0 3px 2px rgba(152,178,201,.2) inset;
-moz-transition: background 0.1s ease-out;
-webkit-transition: background 0.1s ease-out;
}
#nav-main ul li:hover ul li a,
#nav-main ul li.hover ul li a:link,
#nav-main ul li.hover ul li a:visited {
padding-bottom: 8px;
}
/* Currently active menu items */
#nav-main ul li.current span,
#nav-main ul li.current a,
#nav-main ul li.current a:link,
#nav-main ul li.current a:visited {
border-bottom-width: 1px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background: #fbfdff;
background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.8) 100%);
box-shadow:
rgba(152,178,201,0.2) 0 0px 0px,
inset rgba(152,178,201,0.3) 0 -2px 0,
inset rgba(255,255,255,0.8) 0 -6px 6px 4px;
padding-right: 30px;
padding-bottom: 15px;
}
#nav-main ul li.current:hover a,
#nav-main ul li.current.hover a,
#nav-main ul li.current a:hover,
#nav-main ul li.current a:focus,
#nav-main ul li.current a:active,
.js #nav-main ul li.current a:focus {
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border-bottom: 0;
}
#nav-main ul li.current ul span,
#nav-main ul li.current ul a,
#nav-main ul li.current ul a:link,
#nav-main ul li.current ul a:visited {
background: none;
height: auto;
-moz-box-shadow: none;
box-shadow: none;
padding: 8px 10px;
}
#header a.mozilla {
position: relative;
float: right;
display: block;
height: 49px;
width: 118px;
background: url(/media/img/covehead/template/title.png) 100% 0 no-repeat;
text-indent: -200px;
overflow: hidden;
}
/* }}} */
/* {{{ Sub-Footer */
#sub-footer {
background: #3d6db5 url(/media/img/template/footer-background.png) top center repeat-x;
color: #476fbe;
clear: both;
}
#sub-footer #sub-footer-contents {
margin: auto;
width: 980px;
text-align: left;
overflow: auto;
}
#sub-footer h3 {
margin: 115px 0 10px 0;
float: left;
background: url(/media/img/template/footer-social.png) 50% 0 no-repeat;
height: 100px;
width: 126px;
padding: 15px 0 0 25px;
font-family: georgia, serif;
font-weight: normal;
font-style: italic;
color: #33559b;
font-size: 22px;
line-height: 22px;
}
#sub-footer h3 span {
font-family: MetaBlack, "Trebuchet MS", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-style: normal;
font-size: 22px;
color: #fff;
}
#sub-footer ul {
margin: 100px 0 0 0;
left: auto;
float: left;
}
#sub-footer ul li {
float: left;
padding: 0;
margin: 0 15px 0 0;
background: none;
}
#sub-footer ul li a,
#sub-footer ul li a:link,
#sub-footer ul li a:visited {
display: block;
background: url(/media/img/template/footer-social.png) 50% 0 no-repeat;
width: 110px;
padding: 60px 0 0 0;
font-family: georgia, serif;
font-weight: normal;
font-size: 18px;
line-height: 18px;
font-style: italic;
text-align: center;
color: #fff;
-moz-transition: text-shadow 0.2s ease-out;
-webkit-transition: text-shadow 0.2s ease-out;
}
#sub-footer a:hover,
#sub-footer a:active {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5), 0 0 5px rgba(51,85,155,1), 0 0 20px rgba(255,255,255,0.6);
-moz-transition: text-shadow 0.1s ease-out;
-webkit-transition: text-shadow 0.1s ease-out;
}
#sub-footer ul li#footer-twitter a { background-position: 50% -115px; }
#sub-footer ul li#footer-facebook a { background-position: 50% -215px; }
#sub-footer ul li#footer-connect a { background-position: 50% -315px; }
#sub-footer #sub-footer-newsletter {
float: right;
width: 275px;
background: url(/media/img/template/footer-social.png) 30% -412px no-repeat;
margin: 0 32px 0 0;
padding: 135px 0 0 0;
line-height: 24px;
text-align: left;
}
#sub-footer #sub-footer-newsletter span.intro {
display: block;
font-family: georgia, serif;
font-weight: normal;
font-size: 18px;
line-height: 18px;
font-style: italic;
color: #fff;
}
#sub-footer #sub-footer-newsletter a,
#sub-footer #sub-footer-newsletter a:link,
#sub-footer #sub-footer-newsletter a:visited {
font-family: MetaBlack, "Trebuchet MS", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-style: normal;
font-size: 22px;
color: #83b3f2;
-moz-transition: text-shadow 0.2s ease-in;
-webkit-transition: text-shadow 0.2s ease-in;
}
#sub-footer #sub-footer-newsletter a:hover,
#sub-footer #sub-footer-newsletter a:active {
text-shadow: 1px 1px 1px rgba(0,0,0,0.3), 0 0 5px rgba(51,85,155,1), 0 0 20px rgba(255,255,255,0.4);
}
/* }}} */
/* {{{ Footer */
#footer {
background: #33559b url(/media/img/template/footer-background.png) -200px center repeat-x;
text-align: center;
color: #476fbe;
clear: both;
padding: 5px 0;
}
#footer a:link,
#footer a:visited {
color: #669be1;
text-decoration: none;
-moz-transition: color 0.1s ease-in;
-webkit-transition: color 0.1s ease-in;
}
#footer a:hover,
#footer a:active {
color: #fff;
text-decoration: underline;
-moz-transition: color 0.1s ease-out;
-webkit-transition: color 0.1s ease-out;
}
#footer-contents {
width: 980px;
text-align: left;
margin: auto;
}
#footer-contents[dir=rtl] {
text-align: right;
}
#footer h3 a,
#footer h3 a:link,
#footer h3 a:visited {
display: block;
height: 40px;
width: 100px;
background: url(/media/img/covehead/template/footer-title.png) 0 0 no-repeat;
text-indent: -200px;
font-size: 1px;
overflow: hidden;
}
#footer-logo {
float: left;
display: inline;
margin: 15px 50px 0 10px;
}
#footer-logo a,
#footer-logo a:link,
#footer-logo a:visited {
font-size: 28px;
padding: 0;
}
#footer-menu,
#footer-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
left: auto;
}
#footer-menu li {
margin: 15px 10px 0 0;
padding: 0;
list-style-type: none;
float: left;
display: inline;
display: inline;
font-weight: bold;
background: none;
position: relative;
width: 115px;
}
#footer-menu li a,
#footer-menu li a:link,
#footer-menu li a:visited,
#footer #lang_form label {
color: #fff;
font-family: MetaBlack, Trechuchet MS, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
}
#footer li li a:link,
#footer li li a:visited {
color: #669be1;
font-family: georgia, serif;
font-weight: normal;
font-size: 13px;
text-transform: none;
}
#footer li li a:hover,
#footer li li a:active {
color: #fff;
}
#footer-menu ul li ul {
margin: 4px 0 15px 0;
}
#footer-menu li.last {
margin-right: 0;
}
#footer-menu ul ul li {
float: none;
padding: 0 0 0.3em 0;
margin: 0;
font-weight: normal;
display: block;
width: auto;
}
#footer #footer-right {
float: right;
width: 175px;
}
#footer #lang_form {
margin: 0 0 15px 22px;
}
#footer #lang_form label {
margin: 10px 0 4px 0;
display: block;
}
#footer #lang_form select {
width: 140px;
font-family: sans-serif;
}
#footer #lang_form div { display: inline; }
#footer #copyright {
clear: both;
}
#footer #copyright p {
margin-bottom: 0.5em;
font-size: 85%;
}
#footer #copyright a:hover,
#footer #copyright a:active {
text-decoration: underline;
}
#footer #footer-links {
font-size: 85%;
}
/* }}} */
/* {{{ Portal Page Footer */
.portal-page #footer {
background: #fff url(/media/img/template/footer-background-minimal.png) 0 0 repeat-x;
text-align: center;
color: #999;
clear: both;
padding: 100px 0 20px 0;
}
.portal-page #footer a:hover,
.portal-page #footer a:active {
color: #447BC4;
}
/* }}} */
/* {{{ Side Menu */
#side-menu {
position: absolute;
top: 75px;
right: 35px;
left: auto;
list-style-type: none;
margin: 0;
padding: 0;
width: 170px;
font-family: verdana;
font-size: 80%;
line-height: 1;
}
#side-menu li {
list-style-type: none;
margin: 0;
padding: 7px 3px 5px 5px;
background: url(/media/img/tignish/template/side-menu-divider.png) top center no-repeat;
}
#side-menu li.first { background: none; }
#side-menu li ul {
margin: 5px 0 0 0;
left: auto;
}
#side-menu li ul li { padding-left: 8px }
#side-menu span {
color: #fff;
font-weight: bold;
}
#side-menu h3 span { font-weight: normal; }
#side-menu h3 {
margin: 0;
color: #fff;
}
#side-menu a:link,
#side-menu a:visited {
color: #1e4262;
}
#side-menu a:hover,
#side-menu a:active {
color: #1e4262;
}
/* }}} */
/* {{{ Breadcrumbs */
#breadcrumbs {
margin: 15px 10px 20px 25px;
color: #303030;
}
#breadcrumbs b {
font-weight: bold;
font-size: 120%;
}
#breadcrumbs a.home {
background: url(/media/img/template/breadcrumb-home.png) 0 0 no-repeat;
display: inline;
float: left;
margin: 5px 5px 0 0;
height: 13px;
width: 15px;
overflow: hidden;
line-height: 50px;
}
/* }}} */
/* {{{ Columns */
#main-content {
margin: 0 20px;
zoom: 1;
}
#content {
margin: 0 20px;
}
/* Larger text for handheld devices */
@media handheld {
#main-content, #main-feature { font-size: 130%; }
}
/* }}} */

Двоичные данные
media/img/covehead/template/footer-title.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.6 KiB

Двоичные данные
media/img/covehead/template/title.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 14 KiB

Двоичные данные
media/img/favicon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 938 B

Двоичные данные
media/img/template/email-link.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 157 B

Двоичные данные
media/img/template/footer-background.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 6.2 KiB

Двоичные данные
media/img/template/footer-social.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.6 KiB

Двоичные данные
media/img/template/page-background.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.5 KiB

84
media/js/nav-main.js Normal file
Просмотреть файл

@ -0,0 +1,84 @@
$(document).ready(function() {
if ($('#nav-main').length === 0) {
return;
}
var main_menuitems = $('#nav-main [tabindex="0"]');
var prev_li, new_li, focused_item;
$('#nav-main [role="menubar"] > li').bind('mouseover focusin', function(event) {
new_li = $(this);
if (!prev_li || prev_li.attr('id') !== new_li.attr('id')) {
// Open the menu
new_li.addClass('hover').find('[role="menu"]').attr('aria-expanded', 'true');
if (prev_li) {
// Close the last selected menu
prev_li.dequeue();
}
} else {
prev_li.clearQueue();
}
}).bind('mouseout focusout', function(event) {
prev_li = $(this);
prev_li.delay(100).queue(function() {
if (prev_li) {
prev_li.clearQueue();
// Close the menu
prev_li.removeClass('hover').find('[role="menu"]').attr('aria-expanded', 'false');
prev_li = null;
if (focused_item) {
focused_item.get(0).blur();
}
}
});
}).each(function(menu_idx) {
var menu = $(this).find('[role="menu"]');
var menuitems = $(this).find('a');
menuitems.mouseover(function(event) {
this.focus(); // Sometimes $(this).focus() doesn"t work
}).focus(function() {
focused_item = $(this);
}).each(function(item_idx) {
// Enable keyboard navigation
$(this).keydown(function(event) {
var target;
switch (event.keyCode) {
case 33: // Page Up
case 36: // Home
target = menuitems.first();
break;
case 34: // Page Down
case 35: // End
target = menuitems.last();
break;
case 38: // Up
target = (item_idx > 0) ? menuitems.eq(item_idx - 1)
: menuitems.last();
break;
case 40: // Down
target = (item_idx < menuitems.length - 1) ? menuitems.eq(item_idx + 1)
: menuitems.first();
break;
case 37: // Left
target = (menu_idx > 0) ? main_menuitems.eq(menu_idx - 1)
: main_menuitems.last();
break;
case 39: // Right
target = (menu_idx < main_menuitems.length - 1) ? main_menuitems.eq(menu_idx + 1)
: main_menuitems.first();
break;
}
if (target) {
target.get(0).focus(); // Sometimes target.focus() doesn't work
return false;
}
return true;
});
});
});
// With JavaScript enabled, we can provide a full navigation with #nav-main.
// Now "hide" the duplicated #footer-menu from AT.
$('#footer-menu').attr('role', 'presentation');
});

107
media/js/util.js Normal file
Просмотреть файл

@ -0,0 +1,107 @@
// Borrowed from addons.mozilla.org - thanks :)
var PLATFORM_OTHER = 0;
var PLATFORM_WINDOWS = 1;
var PLATFORM_LINUX = 2;
var PLATFORM_MACOSX = 3;
var PLATFORM_MAC = 4;
// Default to windows
var gPlatform = PLATFORM_WINDOWS;
if (navigator.platform.indexOf("Win32") != -1 || navigator.platform.indexOf("Win64") != -1)
gPlatform = PLATFORM_WINDOWS;
else if (navigator.platform.indexOf("Linux") != -1)
gPlatform = PLATFORM_LINUX;
else if (navigator.userAgent.indexOf("Mac OS X") != -1)
gPlatform = PLATFORM_MACOSX;
else if (navigator.userAgent.indexOf("MSIE 5.2") != -1)
gPlatform = PLATFORM_MACOSX;
else if (navigator.platform.indexOf("Mac") != -1)
gPlatform = PLATFORM_MAC;
else
gPlatform = PLATFORM_OTHER;
var gPlatformVista = navigator.userAgent.indexOf('Windows NT 6.0') !=-1
// This function is used on the firstrun pages to show the correct image next to the
// "click this close button" text
function loadFirstRunInstallImage() {
// The only thing we care about is if it's a mac, we're going to switch the
// class, otherwise, stick with defaults.
if (gPlatform == PLATFORM_MAC || gPlatform == PLATFORM_MACOSX) {
document.getElementById('tab-close').setAttribute('class','mac');
}
}
// Will change the class for the given element. This is currently used on
// /index.html and /firefox/index.html
function rotateBackgroundForDiv(div_id) {
// We're leaving a blank in here, since that is another (default) image
var class_options = new Array( "variation1", "variation2", "variation3" );
if (Math.random) {
var choice = Math.floor(Math.random() * (class_options.length));
// Just in case javascript gets carried away...
choice = ( (choice < class_options.length) && choice >= 0) ? choice : 0;
if (document.getElementById(div_id)) {
document.getElementById(div_id).setAttribute('class',class_options[choice]);
}
}
}
function createCookie(name,value,days, domain) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
} else {
var expires = "";
}
if(domain) {
domain = "; "+domain;
} else {
domain = '';
}
document.cookie = name+"="+value+expires+"; path=/"+domain;
}
function getArgs() {
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
args[argname] = unescape(value);
}
return args;
}
function in_array(search, array) {
var found = false;
for(value in array) {
if(array[value] == search) {
found = true;
}
}
return found;
}
function vary_body_class(options) {
var choice = Math.floor(Math.random() * (options.length));
document.body.className += ' '+options[choice];
}

Просмотреть файл

@ -138,12 +138,16 @@ def JINJA_CONFIG():
MINIFY_BUNDLES = {
'css': {
'common': (
'css/covehead/template.css',
'css/covehead/content.css',
'css/careers.css',
),
},
'js': {
'common': (
'js/libs/jquery-1.4.4.min.js',
'js/util.js',
'js/nav-main.js',
),
}
}

Просмотреть файл

@ -4,16 +4,50 @@
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>{% block page_title %}mozilla.org{% endblock %}</title>
<style>
{# TODO put this into CSS file. #}
{# MetaWebPro font family licensed from fontshop.com. WOFF-FTW! #}
@font-face {
font-family: 'MetaBlack';
src: url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.eot');
src: local('☺'), url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.woff') format('woff');
font-weight: bold;
}
</style>
{% block site_css %}
{{ css('common') }}
{% endblock %}
<link rel="shortcut icon" type="image/png" href="{{ MEDIA_URL }}img/favicon.png"/>
</head>
<body>
{% block content %}{% endblock %}
<body id="{% block body_id %}{% endblock %}" class="html-{{ DIR }}">
<div id="wrapper">
<div id="doc">
<div id="nav-access">
<a href="#nav-main">{{ _('skip to navigation') }}</a>
<a href="#lang_form">{{ _('switch language') }}</a>
</div>
{% block site_header %}
{% include "includes/header.html" %}
{% endblock %}
{% block content %}{% endblock %}
</div>{# /#doc #}
</div>{# /#wrapper #}
{% block site_footer %}
{% include "includes/footer.html" %}
{% endblock %}
{% block site_js %}
{{ js('common') }}
{% endblock %}
{% block js %}{% endblock %}
{# {% include "includes/webtrends.html" %} #}
</body>
</html>

Просмотреть файл

@ -0,0 +1,120 @@
<div id="sub-footer">
<div id="sub-footer-contents">
<h3>{{ _('Lets be <span>friends!</span>') }}</h3>
<ul>
<li id="footer-twitter"><a href="http://twitter.com/firefox">{{ _('Twitter') }}</a></li>
<li id="footer-facebook"><a href="http://Facebook.com/Firefox">{{ _('Facebook') }}</a></li>
<li id="footer-connect"><a href="/en-US/firefox/connect/">{{ _('More Ways to Connect') }}</a></li>
</ul>
<p id="sub-footer-newsletter">
<span class="intro">{{ _('Want us to keep in touch?') }}</span>
<a href="/en-US/newsletter/">{{ _('Get Monthly News <span>»</span>') }}</a>
</p>
</div>
</div>
<div id="footer">
<div id="footer-contents" role="contentinfo">
<div id="footer-right">
{% block lang_switcher %}
{% include 'includes/lang_switcher.html' %}
{% endblock %}
</div>
<h3 id="footer-logo"><a href="/en-US/firefox/" title="{{ _('Back to home page') }}">{{ _('Firefox') }}</a></h3>
{# START footer menu #}
<div id="footer-menu" role="navigation">
<ul>
<li>
<a href="/en-US/firefox/features/">Desktop</a>
<ul>
<li><a href="/en-US/firefox/features/">Features</a></li>
<li><a href="/en-US/firefox/security/">Security</a></li>
<li><a href="/en-US/firefox/performance/">Performance</a></li>
<li><a href="/en-US/firefox/customize/">Customization</a></li>
<li><a href="/en-US/firefox/technology/">Technology</a></li>
<li><a href="/en-US/firefox/video/">Videos</a></li>
<li><a href="/en-US/firefox/central/">Tour</a></li>
</ul>
</li>
<li>
<a href="/en-US/mobile/">Mobile</a>
<ul>
<li><a href="/en-US/mobile/">Mobile Overview</a></li>
<li><a href="/en-US/mobile/download/">Download</a></li>
<li><a href="/en-US/mobile/features/">Features</a></li>
<li><a href="https://addons.mozilla.org/en-US/mobile/?browse=featured">Customize</a></li>
<li><a href="/en-US/mobile/sync/">Sync</a></li>
<li><a href="https://developer.mozilla.org/en-US/mobile">Develop</a></li>
<li><a href="/en-US/mobile/getinvolved/">Get Involved</a></li>
<li><a href="/en-US/mobile/faq/">FAQ</a></li>
<li><a href="https://blog.mozilla.com/mobile/">Blog</a></li>
</ul>
</li>
<li>
<a href="https://addons.mozilla.org/">Add-ons</a>
<ul>
<li><a href="https://addons.mozilla.org/firefox/">Firefox Add-ons</a></li>
<li><a href="https://addons.mozilla.org/firefox/featured/">Featured Add-ons</a></li>
<li><a href="https://addons.mozilla.org/firefox/extensions/">Extensions</a></li>
<li><a href="https://addons.mozilla.org/firefox/themes/">Themes</a></li>
<li><a href="http://www.getpersonas.com/">Personas</a></li>
<li><a href="https://addons.mozilla.org/firefox/search-tools/">Search Tools</a></li>
<li><a href="https://addons.mozilla.org/firefox/language-tools/">Language Support</a></li>
<li><a href="https://addons.mozilla.org/firefox/collections/">Collections</a></li>
<li><a href="https://addons.mozilla.org/mobile/">Mobile Add-ons</a></li>
<li><a href="https://addons.mozilla.org/firefox/developers/">Developer Hub</a></li>
</ul>
</li>
<li>
<a href="http://support.mozilla.com/">Support</a>
<ul>
<li><a href="http://support.mozilla.com/en-US/kb/">Firefox Support</a></li>
<li><a href="http://support.mozilla.com/mobile">Mobile Support</a></li>
<li><a href="http://support.mozillamessaging.com/en-US/kb/">Thunderbird Support</a></li>
</ul>
</li>
<li>
<a href="/en-US/about/">About</a>
<ul>
<li><a href="/en-US/about/">About Firefox</a></li>
<li><a href="http://www.mozilla.org/join">Join Mozilla</a></li>
<li><a href="/en-US/about/participate/">Participate</a></li>
<li><a href="/en-US/press/">Press Center</a></li>
<li><a href="/en-US/about/careers.html">Careers</a></li>
<li><a href="/en-US/about/partnerships.html">Partnerships</a></li>
<li><a href="/en-US/about/legal.html">Legal</a></li>
<li><a href="/en-US/about/contact.html">Contact Us</a></li>
<li><a href="http://blog.mozilla.com/">Blog</a></li>
</ul>
</li>
</ul>
</div>
{# END footer menu #}
<div id="copyright">
<p id="footer-links">
<a href="http://www.mozilla.com/en-US/privacy-policy.html">{{ _('Privacy Policy') }}</a> &nbsp;|&nbsp;
<a href="http://www.mozilla.com/en-US/about/legal.html">{{ _('Legal Notices') }}</a> &nbsp;|&nbsp;
<a href="http://www.mozilla.com/en-US/legal/fraud-report/index.html">{{ _('Report Trademark Abuse') }}</a><br/>
</p>
<p>
{% trans legal_url='http://www.mozilla.com/en-US/about/legal.html#site',
license_url='http://creativecommons.org/licenses/by-sa/3.0/' %}
Except where otherwise <a href="{{ legal_url }}">noted</a>,
content on this site is licensed under the <br/>
<a href="{{ license_url }}">Creative Commons Attribution Share-Alike License v3.0</a>
or any later version.
{% endtrans %}
</p>
</div>
</div>{# /footer-contents #}
</div>

Просмотреть файл

@ -0,0 +1,83 @@
{# start #header #}
<div id="header">
<div>
<h1><a href="/en-US/firefox/" title="{{ _('Back to home page') }}">{{ _('Mozilla Firefox') }}</a></h1>
<a href="http://www.mozilla.org/" class="mozilla">{{ _('Mozilla') }}</a>
{# start menu #nav-main #}
<div id="nav-main" role="navigation">
<ul role="menubar">
<li id="nav-main-features" class="first">
<a aria-haspopup="true" aria-owns="nav-main-features-submenu" tabindex="0" href="/en-US/firefox/features/">Desktop</a>
<ul id="nav-main-features-submenu" aria-expanded="false">
<li class="first"><a tabindex="-1" href="/en-US/firefox/features/">Features</a></li>
<li><a tabindex="-1" href="/en-US/firefox/security/">Security</a></li>
<li><a tabindex="-1" href="/en-US/firefox/performance/">Performance</a></li>
<li><a tabindex="-1" href="/en-US/firefox/customize/">Customization</a></li>
<li><a tabindex="-1" href="/en-US/firefox/technology/">Technology</a></li>
<li><a tabindex="-1" href="/en-US/firefox/video/">Videos</a></li>
<li class="last"><a tabindex="-1" href="/en-US/firefox/central/">Tour</a></li>
</ul>
</li>
<li id="nav-main-mobile">
<a aria-haspopup="true" aria-owns="nav-main-mobile-submenu" tabindex="0" href="/en-US/mobile/">Mobile</a>
<ul id="nav-main-mobile-submenu" aria-expanded="false">
<li class="first"><a tabindex="-1" href="/en-US/mobile/">Mobile Overview</a></li>
<li><a tabindex="-1" href="/en-US/mobile/download/">Download</a></li>
<li><a tabindex="-1" href="/en-US/mobile/features/">Features</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/en-US/mobile/?browse=featured">Customize</a></li>
<li><a tabindex="-1" href="/en-US/mobile/sync/">Sync</a></li>
<li><a tabindex="-1" href="https://developer.mozilla.org/en-US/mobile">Develop</a></li>
<li><a tabindex="-1" href="/en-US/mobile/getinvolved/">Get Involved</a></li>
<li><a tabindex="-1" href="/en-US/mobile/faq/">FAQ</a></li>
<li class="last"><a tabindex="-1" href="https://blog.mozilla.com/mobile/">Blog</a></li>
</ul>
</li>
<li id="nav-main-addons">
<a aria-haspopup="true" aria-owns="nav-main-addons-submenu" tabindex="0" href="https://addons.mozilla.org/">Add-ons</a>
<ul id="nav-main-addons-submenu" aria-expanded="false">
<li class="first"><a tabindex="-1" href="https://addons.mozilla.org/firefox/">Firefox Add-ons</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/featured/">Featured Add-ons</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/extensions/">Extensions</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/themes/">Themes</a></li>
<li><a tabindex="-1" href="http://www.getpersonas.com/">Personas</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/search-tools/">Search Tools</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/language-tools/">Language Support</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/firefox/collections/">Collections</a></li>
<li><a tabindex="-1" href="https://addons.mozilla.org/mobile/">Mobile Add-ons</a></li>
<li class="last"><a tabindex="-1" href="https://addons.mozilla.org/firefox/developers/">Developer Hub</a></li>
</ul>
</li>
<li id="nav-main-support">
<a aria-haspopup="true" aria-owns="nav-main-support-submenu" tabindex="0" href="http://support.mozilla.com/">Support</a>
<ul id="nav-main-support-submenu" aria-expanded="false">
<li class="first"><a tabindex="-1" href="http://support.mozilla.com/en-US/kb/">Firefox Support</a></li>
<li><a tabindex="-1" href="http://support.mozilla.com/mobile">Mobile Support</a></li>
<li class="last"><a tabindex="-1" href="http://support.mozillamessaging.com/en-US/kb/">Thunderbird Support</a></li>
</ul>
</li>
<li id="nav-main-about" class="last">
<a aria-haspopup="true" aria-owns="nav-main-about-submenu" tabindex="0" href="/en-US/about/">About</a>
<ul id="nav-main-about-submenu" aria-expanded="false">
<li class="first"><a tabindex="-1" href="/en-US/about/">About Firefox</a></li>
<li><a tabindex="-1" href="http://www.mozilla.org/join">Join Mozilla</a></li>
<li><a tabindex="-1" href="/en-US/about/participate/">Participate</a></li>
<li><a tabindex="-1" href="/en-US/press/">Press Center</a></li>
<li><a tabindex="-1" href="/en-US/about/careers.html">Careers</a></li>
<li><a tabindex="-1" href="/en-US/about/partnerships.html">Partnerships</a></li>
<li><a tabindex="-1" href="/en-US/about/legal.html">Legal</a></li>
<li><a tabindex="-1" href="/en-US/about/contact.html">Contact Us</a></li>
<li class="last"><a tabindex="-1" href="http://blog.mozilla.com/">Blog</a></li>
</ul>
</li>
</ul>
</div>
{# end menu #nav-main #}
</div>
</div>
{# end #header #}

Просмотреть файл

@ -0,0 +1,13 @@
<form id="lang_form" dir="ltr" method="get" action="">
<label for="language">{{ _('Other languages:') }}</label>
<select id="language" name="lang" dir="ltr" onchange="this.form.submit()">
{% for code, name in LANGUAGES|dictsort -%}
<option value="{{ code }}" {{ code|ifeq(LANG|lower, "selected") }}>
{{ name }}
</option>
{%- endfor %}
</select>
<noscript>
<button type="submit">{{ _('Go') }}</button>
</noscript>
</form>