commit ae4773bb5036a4555f824132e48192e9609a85fc
parent 498c18a609bf50351996468b1a3c8578e6ffa813
Author: Davide P. Cervone <dpvc@union.edu>
Date: Thu, 10 Mar 2011 14:27:50 -0500
Fix layout and CSS to duplicate www.mathjax.org in all browsers
Diffstat:
2 files changed, 323 insertions(+), 170 deletions(-)
diff --git a/docs/source/mjtheme/layout.html b/docs/source/mjtheme/layout.html
@@ -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>
- <div class="clear"></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 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 class="clear"></div>
+
{% endif %}
{%- block header %}{% endblock %}
diff --git a/docs/source/mjtheme/static/mj.css_t b/docs/source/mjtheme/static/mj.css_t
@@ -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 */
-#branding img {
- display: block;
+#header {
+ padding: 30px 0 0 0;
}
-
-.widget_search label {
- display: none;
+#site-title {
+ float: left;
+ margin: 0 0 18px 0;
+ width: 700px;
+ font-size: 30px;
+ line-height: 36px;
}
-.screen-reader-text {
- left: -9000px;
- position: absolute;
+#site-title a {
+ color: #000;
+ font-weight: bold;
+ text-decoration: none;
}
-.widget_search input {
- color: #666;
- font-size: 12px;
- line-height: 18px;
+#site-description {
+ clear: right;
+ float: right;
+ font-style: italic;
+ margin: 14px 0 18px 0;
+ width: 220px;
}
-.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;
+#branding img {
+ clear: both;
+ border-top: 4px solid #000;
+ display: block;
+ border-bottom: 1px solid #000;
}
+
#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;
}
-/* HEADER */
+.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;
+}
-#header {
- background: #ffffff;
- padding: 20px;
- height: 95px;
+.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;
}
-#branding {
+
+#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 {
+ 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 {
