Fix layout and CSS to duplicate www.mathjax.org in all browsers

This commit is contained in:
Davide P. Cervone 2011-03-10 14:27:50 -05:00
parent 498c18a609
commit ae4773bb50
2 changed files with 328 additions and 175 deletions

View File

@ -148,81 +148,85 @@
{% if for_site %}
<div id="wrapper">
<div id="header">
<div id="branding" role="banner">
<h1 id="site-title">
<span>
<a href="http://www.mathjax.org/" title="MathJax" rel="home">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/logo.gif" alt="MathJax">
</a>
</span>
</h1>
<div id="site-description">Beautiful math in all browsers</div>
<div id="header-box-right">
<ul class="icon-list">
<li>
<a href="http://www.twitter.com/mathjax">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/twitter.png" alt="Twitter" title="Twitter">
<div id="masthead">
<div id="branding" role="banner">
<h1 id="site-title">
<span>
<a href="http://www.mathjax.org/" title="MathJax" rel="home">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/logo.gif" alt="MathJax">
</a>
</li>
<li>
<a href="http://www.facebook.com/pages/MathJax/351834882701">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/facebook.png" alt="Facebook Page" title="Facebook Page">
</a>
</li>
<li>
<a href="http://www.mathjax.org/feed/">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/rss.png" alt="RSS Feed" title="RSS Feed">
</a>
</li>
</ul>
<div id="search" class="widget-container widget_search">
<form action="/" method="get" accept-charset="utf-8">
<fieldset>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" name="s" id="s" value="">
<input class="search-button" type="image" alt="Search" src="http://www.mathjax.org/wp-content/themes/mathjax/images/search.png">
</fieldset>
</form>
</span>
</h1>
<div id="site-description">Beautiful math in all browsers</div>
<div id="header-box-right">
<ul class="icon-list">
<li>
<a href="http://www.twitter.com/mathjax">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/twitter.png" alt="Twitter" title="Twitter">
</a>
</li>
<li>
<a href="http://www.facebook.com/pages/MathJax/351834882701">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/facebook.png" alt="Facebook Page" title="Facebook Page">
</a>
</li>
<li>
<a href="http://www.mathjax.org/feed/">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/rss.png" alt="RSS Feed" title="RSS Feed">
</a>
</li>
</ul>
<div id="search" class="widget-container widget_search">
<form action="/" method="get" accept-charset="utf-8">
<fieldset>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" name="s" id="s" value="">
<input class="search-button" type="image" alt="Search" src="http://www.mathjax.org/wp-content/themes/mathjax/images/search.png">
</fieldset>
</form>
</div>
</div>
</div>
<div class="clear"></div>
<div id="access" role="navigation">
<div class="menu-header">
<ul id="menu-navigation" class="menu">
<li id="menu-item-868" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/news/">News</a></li>
<li id="menu-item-846" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/">Demos</a>
<ul class="sub-menu">
<li id="menu-item-859" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/tex-samples/">TeX Samples</a></li>
<li id="menu-item-858" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/mathml-samples/">MathML Samples</a></li>
<li id="menu-item-1078" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/scaling-math/">Scaling Math</a></li>
<li id="menu-item-1097" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/copy-and-paste/">Copy and Paste Math</a></li>
</ul>
</li>
<li id="menu-item-848" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/">Resources</a>
<ul class="sub-menu">
<li id="menu-item-1262" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Get MathJax</a></li>
<li id="menu-item-1151" class="menu-item menu-item-type-custom"><a href="http://www.mathjax.org/resources/docsindex/">Documentation</a></li>
<li id="menu-item-1257" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/articles-and-presentations/">Articles, Presentations, and Tutorials</a></li>
<li id="menu-item-860" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/browser-compatibility/">Browser Compatibility</a></li>
<li id="menu-item-856" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/faqs/">FAQs</a></li>
</ul>
</li>
<li id="menu-item-847" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/community/">Community</a>
<ul class="sub-menu">
<li id="menu-item-1347" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/community/mathjax-badge/">MathJax Badge</a></li>
<li id="menu-item-1145" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/community/mathjax-in-use/">MathJax in Use</a></li>
<li id="menu-item-1577" class="menu-item menu-item-type-custom"><a href="http://groups.google.com/group/mathjax-users/">MathJax User Group</a></li>
</ul>
</li>
<li id="menu-item-853" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/sponsors/">Sponsors</a></li>
<li id="menu-item-854" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/contact/">Contact</a></li>
<li id="menu-item-1167" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Get MathJax</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div id="access" role="navigation">
<div class="menu-header">
<ul id="menu-navigation" class="menu">
<li id="menu-item-868" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/news/">News</a></li>
<li id="menu-item-846" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/">Demos</a>
<ul class="sub-menu">
<li id="menu-item-859" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/tex-samples/">TeX Samples</a></li>
<li id="menu-item-858" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/mathml-samples/">MathML Samples</a></li>
<li id="menu-item-1078" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/scaling-math/">Scaling Math</a></li>
<li id="menu-item-1097" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/demos/copy-and-paste/">Copy and Paste Math</a></li>
</ul>
</li>
<li id="menu-item-848" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/">Resources</a>
<ul class="sub-menu">
<li id="menu-item-1262" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Download</a></li>
<li id="menu-item-1151" class="menu-item menu-item-type-custom"><a href="http://www.mathjax.org/resources/docsindex/">Documentation</a></li>
<li id="menu-item-1257" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/articles-and-presentations/">Articles, Presentations, and Tutorials</a></li>
<li id="menu-item-860" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/browser-compatibility/">Browser Compatibility</a></li>
<li id="menu-item-856" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/faqs/">FAQs</a></li>
</ul>
</li>
<li id="menu-item-847" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/community/">Community</a>
<ul class="sub-menu">
<li id="menu-item-1347" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/community/mathjax-badge/">MathJax Badge</a></li>
<li id="menu-item-1145" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/community/mathjax-in-use/">MathJax in Use</a></li>
<li id="menu-item-1577" class="menu-item menu-item-type-custom"><a href="http://groups.google.com/group/mathjax-users/">MathJax User Group</a></li>
</ul>
</li>
<li id="menu-item-853" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/sponsors/">Sponsors</a></li>
<li id="menu-item-854" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/contact/">Contact</a></li>
<li id="menu-item-1167" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Download</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
{% endif %}
{%- block header %}{% endblock %}

View File

@ -7,127 +7,133 @@
{% if for_site %}
/* style copied over from http://mathjax.org/ for the header */
/******************************************
* CSS configuration from www.mathjax.org
******************************************/
body {
background: #D2D3D3 !important;
/*
* Culled from twentyten style.css
*/
*
#access .menu-header,
#branding,
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
background: white;
padding: 0;
margin: 20px auto;
width: 980px;
margin-top: 20px;
background: #fff;
padding: 0 20px;
}
/* deal with sphinx css not reseting anything */
.widget_search fieldset {
border: 0;
margin: 0;
padding: 0;
#site-info {
float: left;
width: 700px;
font-weight: bold;
font-size: 14px;
}
.icon-list {
margin: 0; padding: 0;
body {
background: #D2D3D3 ! important;
}
/* from wp twentyten */
#header {
padding: 30px 0 0 0;
}
#site-title {
float: left;
margin: 0 0 18px 0;
width: 700px;
font-size: 30px;
line-height: 36px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
font-style: italic;
margin: 14px 0 18px 0;
width: 220px;
}
#branding img {
display: block;
clear: both;
border-top: 4px solid #000;
display: block;
border-bottom: 1px solid #000;
}
.widget_search label {
display: none;
}
.screen-reader-text {
left: -9000px;
position: absolute;
}
.widget_search input {
color: #666;
font-size: 12px;
line-height: 18px;
}
.widget_search input[type="text"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px inset;
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
background: #F9F9F9;
border: 1px solid #CCC;
padding: 2px;
}
#access {
font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
background: #000;
margin: 20px auto 0;
width: 940px;
display:block;
float:left;
background: #000;
margin: 0 auto;
width: 940px;
display:block;
float:left;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
#access .menu-header {
font-size: 13px;
margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
#access .menu-header ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float:left;
position: relative;
#access .menu-header li {
float:left;
position: relative;
}
#access a {
display:block;
text-decoration:none;
color: #DDD;
font-weight: bold;
padding:0 10px;
line-height:38px;
display:block;
text-decoration:none;
color:#aaa;
padding:0 10px;
line-height:38px;
}
#access ul ul {
display:none;
position:absolute;
top:38px;
left:0;
float:left;
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
width: 180px;
z-index: 99999;
display:none;
position:absolute;
top:38px;
left:0;
float:left;
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
min-width: 180px;
}
#access ul ul ul {
left:100%;
top:0;
left:100%;
top:0;
}
#access ul ul a {
background:#333;
height:auto;
line-height:1em;
padding:10px;
width: 160px;
background:#333;
height:auto;
line-height:1em;
padding:10px;
width: 160px;
}
#access li:hover > a,
#access ul ul :hover > a {
color:#fff;
background:#333;
color:#fff;
background:#333;
}
#access ul li:hover > ul {
display:block;
display:block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
color: #fff;
}
* html #access ul li.current_page_item a,
@ -135,29 +141,113 @@ div.menu li {
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color:#fff;
color:#fff;
}
.navigation {
font-size: 12px;
line-height: 18px;
overflow: hidden;
color: #888;
}
.navigation a:link,
.navigation a:visited {
color: #888;
text-decoration: none;
}
.navigation a:active,
.navigation a:hover {
color: #FF4B33;
}
.widget_search #s { /* This keeps the search inputs in line */
width: 60%;
}
.widget_search label {
display:none;
}
.widget-container {
margin: 0 0 18px 0;
}
#site-info {
font-weight: bold;
}
#site-info a {
color: #000;
text-decoration: none;
}
#access,
.navigation {
-webkit-text-size-adjust: 120%;
}
#site-description {
-webkit-text-size-adjust: none;
}
@media print {
body {
background:none !important;
}
#wrapper {
float: none !important;
clear: both !important;
display: block !important;
position: relative !important;
}
#header {
border-bottom: 2pt solid #000;
padding-bottom: 18pt;
}
#site-title,
#site-description {
float: none;
margin: 0;
padding:0;
line-height: 1.4em;
}
#access,
#branding img,
#respond,
.navigation {
display: none !important;
}
#header {
width: 100%;
margin: 0;
}
#site-info {
float: none;
width: auto;
}
}
/*
* from mathjax style.css
*/
.clear {
clear: both;
}
/* HEADER */
#header {
background: #ffffff;
padding: 20px;
height: 95px;
}
#branding {
padding: 20px 0 0;
}
#site-title {
float: left;
margin: 0;
width: 300px;
}
#branding img {
border: 0;
border: 0;
}
#site-description {
margin: 36px 0 0;
font-size: 18px; line-height: 18px;
font-size: 18px;
float: left;
width: auto;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
@ -191,13 +281,13 @@ div.menu li {
height: 16px;
float: left;
}
.widget_search input[type="text"] {
input[type="text"], textarea {
border: 2px solid #b5bfb8;
background-color: #eaeaea;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.widget_search input[type="text"]:focus {
input[type="text"]:focus, textarea:focus{
outline-width: 0;
border-color: #169538;
}
@ -210,9 +300,8 @@ div.menu li {
/* NAVIGATION */
#access {
margin: 20px 0px 0px;
margin: 20px 0 10px;
}
#access ul { padding: 0; }
#access li { min-width: 20px; }
#access a { color: #dddddd; font-weight: bold; }
#access a:hover, #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a,
@ -221,14 +310,15 @@ div.menu li {
font-weight: bold;
}
#access li:hover > a, #access ul ul :hover > a {
color:#fff;
background:#444;
color:#fff;
background:#444;
}
#access ul ul a {
background:#444;
background:#444;
}
#menu-item-1167 {
margin-right: 12px;
float: right !important;
background: #E18B16 !important;
}
@ -239,15 +329,74 @@ div.menu li {
color: #ffffff !important;
}
/* modify layout to match mathjax site */
.related, .document {
width: 940px !important;
margin: 0 auto;
/*
* Adjustementst to www.mathjax.org settings to work with
* to match the global settings from www.mathjax.org
*/
#access {
margin-bottom: 1px;
}
fieldset {
border: 0;
padding: 0;
margin: 0;
}
#header {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
line-height:18px;
}
#header-box-right {
line-height: 18px;
font-size: 12px;
border: 0;
padding: 0;
}
#header-box-right ul, #header-box-right form {
margin: 0;
padding: 0;
border: 0;
}
#header-box-right .icon-list {
margin-left: 93px
}
#header input {
font-family: Georgia, "Bitstream Charter", serif;
}
#header input[type="text"] {
padding: 2px;
background-color: #eaeaea;
border: 2px solid #b5bfb8;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#header input[type="text"]:focus {
outline-width: 0;
border-color: #169538;
}
.menu-header ul, .menu-header li {
margin: 0;
padding: 0;
border: 0;
}
/***************************************
* End of site-specific configuration
***************************************/
{% endif %}
/* -- page layout ----------------------------------------------------------- */
body {