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 %} {% if for_site %}
<div id="wrapper"> <div id="wrapper">
<div id="header"> <div id="header">
<div id="branding" role="banner"> <div id="masthead">
<h1 id="site-title"> <div id="branding" role="banner">
<span> <h1 id="site-title">
<a href="http://www.mathjax.org/" title="MathJax" rel="home"> <span>
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/logo.gif" alt="MathJax"> <a href="http://www.mathjax.org/" title="MathJax" rel="home">
</a> <img src="http://www.mathjax.org/wp-content/themes/mathjax/images/logo.gif" alt="MathJax">
</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> </a>
</li> </span>
<li> </h1>
<a href="http://www.facebook.com/pages/MathJax/351834882701"> <div id="site-description">Beautiful math in all browsers</div>
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/facebook.png" alt="Facebook Page" title="Facebook Page"> <div id="header-box-right">
</a> <ul class="icon-list">
</li> <li>
<li> <a href="http://www.twitter.com/mathjax">
<a href="http://www.mathjax.org/feed/"> <img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/twitter.png" alt="Twitter" title="Twitter">
<img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/rss.png" alt="RSS Feed" title="RSS Feed"> </a>
</a> </li>
</li> <li>
</ul> <a href="http://www.facebook.com/pages/MathJax/351834882701">
<div id="search" class="widget-container widget_search"> <img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/facebook.png" alt="Facebook Page" title="Facebook Page">
<form action="/" method="get" accept-charset="utf-8"> </a>
<fieldset> </li>
<label class="screen-reader-text" for="s">Search for:</label> <li>
<input type="text" name="s" id="s" value=""> <a href="http://www.mathjax.org/feed/">
<input class="search-button" type="image" alt="Search" src="http://www.mathjax.org/wp-content/themes/mathjax/images/search.png"> <img src="http://www.mathjax.org/wp-content/themes/mathjax/images/social-icons/16px/rss.png" alt="RSS Feed" title="RSS Feed">
</fieldset> </a>
</form> </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>
</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>
<div class="clear"></div>
{% endif %} {% endif %}
{%- block header %}{% endblock %} {%- block header %}{% endblock %}

View File

@ -7,127 +7,133 @@
{% if for_site %} {% 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 { #wrapper {
background: white; margin-top: 20px;
padding: 0; background: #fff;
margin: 20px auto; padding: 0 20px;
width: 980px;
} }
/* deal with sphinx css not reseting anything */ #site-info {
float: left;
.widget_search fieldset { width: 700px;
border: 0; font-weight: bold;
margin: 0; font-size: 14px;
padding: 0;
} }
.icon-list { body {
margin: 0; padding: 0; 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 { #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 { #access {
font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif; background: #000;
background: #000; margin: 0 auto;
margin: 20px auto 0; width: 940px;
width: 940px; display:block;
display:block; float:left;
float:left;
} }
#access .menu-header, #access .menu-header {
div.menu { font-size: 13px;
font-size: 13px; margin-left: 12px;
margin-left: 12px;
} }
#access .menu-header ul, #access .menu-header ul {
div.menu ul { list-style: none;
list-style: none; margin: 0;
margin: 0;
} }
#access .menu-header li, #access .menu-header li {
div.menu li { float:left;
float:left; position: relative;
position: relative;
} }
#access a { #access a {
display:block; display:block;
text-decoration:none; text-decoration:none;
color: #DDD; color:#aaa;
font-weight: bold; padding:0 10px;
padding:0 10px; line-height:38px;
line-height:38px;
} }
#access ul ul { #access ul ul {
display:none; display:none;
position:absolute; position:absolute;
top:38px; top:38px;
left:0; left:0;
float:left; float:left;
box-shadow: 0px 3px 3px rgba(0,0,0,0.2); box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-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); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
width: 180px; width: 180px;
z-index: 99999; z-index: 99999;
} }
#access ul ul li { #access ul ul li {
min-width: 180px; min-width: 180px;
} }
#access ul ul ul { #access ul ul ul {
left:100%; left:100%;
top:0; top:0;
} }
#access ul ul a { #access ul ul a {
background:#333; background:#333;
height:auto; height:auto;
line-height:1em; line-height:1em;
padding:10px; padding:10px;
width: 160px; width: 160px;
} }
#access li:hover > a, #access li:hover > a,
#access ul ul :hover > a { #access ul ul :hover > a {
color:#fff; color:#fff;
background:#333; background:#333;
} }
#access ul li:hover > ul { #access ul li:hover > ul {
display:block; display:block;
} }
#access ul li.current_page_item > a, #access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a, #access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a, #access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a { #access ul li.current-menu-parent > a {
color: #fff; color: #fff;
} }
* html #access ul li.current_page_item a, * 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-item a,
* html #access ul li.current-menu-parent a, * html #access ul li.current-menu-parent a,
* html #access ul li a:hover { * 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 */
#header { #header {
background: #ffffff; padding: 20px 0 0;
padding: 20px;
height: 95px;
}
#branding {
} }
#site-title { #site-title {
float: left;
margin: 0; margin: 0;
width: 300px; width: 300px;
} }
#branding img { #branding img {
border: 0; border: 0;
} }
#site-description { #site-description {
margin: 36px 0 0; margin: 36px 0 0;
font-size: 18px; line-height: 18px; font-size: 18px;
float: left; float: left;
width: auto; width: auto;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
@ -191,13 +281,13 @@ div.menu li {
height: 16px; height: 16px;
float: left; float: left;
} }
.widget_search input[type="text"] { input[type="text"], textarea {
border: 2px solid #b5bfb8; border: 2px solid #b5bfb8;
background-color: #eaeaea; background-color: #eaeaea;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
} }
.widget_search input[type="text"]:focus { input[type="text"]:focus, textarea:focus{
outline-width: 0; outline-width: 0;
border-color: #169538; border-color: #169538;
} }
@ -210,9 +300,8 @@ div.menu li {
/* NAVIGATION */ /* NAVIGATION */
#access { #access {
margin: 20px 0px 0px; margin: 20px 0 10px;
} }
#access ul { padding: 0; }
#access li { min-width: 20px; } #access li { min-width: 20px; }
#access a { color: #dddddd; font-weight: bold; } #access a { color: #dddddd; font-weight: bold; }
#access a:hover, #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #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; font-weight: bold;
} }
#access li:hover > a, #access ul ul :hover > a { #access li:hover > a, #access ul ul :hover > a {
color:#fff; color:#fff;
background:#444; background:#444;
} }
#access ul ul a { #access ul ul a {
background:#444; background:#444;
} }
#menu-item-1167 { #menu-item-1167 {
margin-right: 12px;
float: right !important; float: right !important;
background: #E18B16 !important; background: #E18B16 !important;
} }
@ -239,15 +329,74 @@ div.menu li {
color: #ffffff !important; 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 %} {% endif %}
/* -- page layout ----------------------------------------------------------- */ /* -- page layout ----------------------------------------------------------- */
body { body {