Initial commit of Stanford's edX theme files

README.md

@@ -0,0 +1,10 @@
+Overview
+========
+This directory stores Stanford's theming files for its edX instance.
+We're storing the stuff here and then pulling it in to our instance
+when we deploy.
+
+We've organized the tree to mimic the directory structure of the edX
+codebase so that it's easy to tell where the files will end up upon
+deploy. We'll use a special settings file to set the template and
+staticfiles paths properly to point to these files.

static/css/vendor/su-identity.css

@@ -0,0 +1,301 @@
+/**
+ * su-identity.css
+ * ========================================================
+ * Custom base styles
+ * Last edited: 4/19/2013 by Nate Hardison <nate@edx.org>
+ */
+
+#su-header .container,
+#su-footer .container {
+  margin: 0 auto;
+}
+
+#su-header .span2,
+#su-footer .span2 {
+  display: block;
+  min-height: 1px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+#su-header .span10,
+#su-footer .span10 {
+  display: block;
+  min-height: 1px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+#su-header .container:after,
+#su-footer .container:after {
+  clear: both;
+}
+
+#su-header .row:after,
+#su-footer .row:after {
+  clear: both;
+}
+
+/* Background gradient */
+#su-header {
+  background: #8c1515;
+  box-shadow: inset 0 -4px 8px -2px rgba(0, 0, 0, 0.2); /* Horizontal offset , vertical offset, blur, internal spacing */
+  min-height: 30px;
+}
+
+#su-footer,
+#su-footer .container {
+  background: #8c1515;
+  color: #e3dfd5;
+  box-shadow: inset 0 4px 8px -2px rgba(0, 0, 0, 0.2); /* Horizontal offset , vertical offset, blur, internal spacing */
+}
+
+/* Prevent flush left */
+#su-header .container img {
+  padding: 4px 0 0 10px;
+}
+
+#su-footer a {
+  color: #e3dfd5;
+}
+
+#su-footer a:hover {
+  text-decoration: underline;
+}
+
+/* Prevent horizontal scroll bar */
+#su-footer .container {
+  padding: 3px 7px 20px;
+}
+
+#su-footer .container .row {
+  margin: 30px 0 0;
+}
+
+/* Align logo and text */
+#su-footer-logo {
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+#su-footer-text {
+  margin-top: 0;
+}
+
+#su-footer-text ul {
+  margin: 2px 0 0;
+  padding: 0;
+  line-height: 1em;
+}
+
+#su-footer-text ul li {
+  display: block;
+  list-style: none;
+}
+
+#su-footer-text ul li a {
+  font: 13px 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
+  text-decoration: none;
+}
+
+#su-footer p.copyright {
+  font: 11px 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
+  margin: 0;
+  padding: 30px 0 0;
+  line-height: 1.5em;
+  color: #e3dfd5;
+}
+
+#su-footer p.copyright span {
+  color: #e3dfd5;
+}
+
+/* Footer two columns */
+#su-footer .span2 {
+  width: 48%;
+  float: left;
+}
+
+#su-footer .span10 {
+  width: 48%;
+  float: right;
+}
+
+#su-footer img {
+  margin: 0 auto;
+  display: block;
+}
+
+/* Clear the floats */
+#su-footer .clear {
+  clear: both;
+}
+
+/*
+========================================================
+Media queries
+*/
+
+@media screen and (min-width: 480px) {
+}
+
+@media screen and (min-width: 768px) {
+  /* Prevent double background gradient */
+  #su-footer .container {
+    background:none;
+    box-shadow:none;
+  }
+
+  #bottom-text {
+    margin-top:2px;
+  }
+
+  /* Remove left padding */
+  #su-header .container img {
+    padding:4px 0 0;
+  }
+
+  /* Bootstrap style */
+  #su-header .container,
+  #su-footer .container {
+    width:724px;
+  }
+
+  #su-footer .container .row {
+    margin:30px 0 0 -20px;
+  }
+  /* Footer single column */
+  #su-footer .span2 {
+    float:left;
+    width:104px;
+    padding-left:8px; /* Prevent flush left */
+  }
+  /* Bootstrap style */
+  #su-footer .span10 {
+    width:600px;
+    margin-left:20px;
+    margin:0 12px 0 20px;
+    float:left;
+  }
+
+  #su-footer img {
+    margin:0 auto;
+  }
+
+  #su-footer ul li.alt {
+  	clear:right;
+  }
+  /* Footer two column */
+  #su-footer ul {
+    width:100%;
+    float:left;
+  }
+
+  #su-footer ul li {
+  	width:auto;
+  	margin:0 13px 3px 0;
+  	padding:0;
+  	float:none;
+  	clear:left;
+    display:inline-block;
+  }
+
+  #bottom-logo {
+    margin:-5px 0 10px;
+  }
+
+  #su-footer .clear {
+    clear:none;
+  }
+
+  p.copyright {
+    text-align:left;
+    padding-left:17%;
+    padding-top:25px;
+  }
+}
+
+@media screen and (min-width: 980px) {
+  /* Bootstrap style */
+  #su-header .container,
+  #su-footer .container {
+    width:940px;
+  }
+
+  #su-footer .span2 {
+    width:140px;
+  }
+
+  #su-footer .span10 {
+    width:780px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  /* Bootstrap style */
+  #su-header .container,
+  #su-footer .container {
+    width:1180px;
+  }
+
+  #su-footer .span2 {
+    width:170px;
+  }
+
+  #su-footer .span10 {
+    width:970px;
+  }
+
+  p.copyright {
+    padding-left:16%;
+  }
+}
+
+/*
+Sticky Footer Solution
+by Steve Hatcher 
+http://stever.ca
+http://www.cssstickyfooter.com
+*/
+
+/*html, body {*/
+	/*height: 100%;*/
+/*}*/
+/*#su-wrap {*/
+	/*min-height: 100%;*/
+/*}*/
+/*#su-content {*/
+	/*overflow:visible;*/
+	/*padding-bottom: 120px; [> must be same height as the footer <]*/
+/*}*/
+/*#su-footer {*/
+	/*position: relative;*/
+	/*margin-top: -120px; [> negative value of footer height <]*/
+	/*height: 120px;*/
+	/*clear:both;*/
+/*} */
+
+/*[> IE6/7 uses media, <]*/
+/*@media, {*/
+  /*#su-footer {*/
+    /*height: 219px;*/
+  /*}*/
+/*}*/
+
+/*[> IE8 uses \0/ <]*/
+/*@media all {*/
+  /*#su-footer {*/
+    /*height: 196px\0/;*/
+  /*}*/
+/*}*/
+
+/*[>Opera Fix<]*/
+	/*body:before { [> thanks to Maleika (Kohoutec)<]*/
+	/*content:"";*/
+	/*height:100%;*/
+	/*float:left;*/
+	/*width:0;*/
+	/*margin-top:-32767px;[> thank you Erik J - negate effect of float<]*/
+/*}*/

templates/theme_footer.html

@@ -0,0 +1,41 @@
+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="/footer.html"/>
+<%page args="suppress_toplevel_navigation=False"/>
+
+<%block name="footer_top_attributes">style="border-bottom: 0;"</%block>
+
+<%block name="footer_primary_links">
+  <a href="${reverse('tos')}">Terms of Service</a>
+  <a href="${reverse('privacy_edx')}">Privacy Policy</a>
+  <a href="${reverse('honor')}">Honor Code</a>
+  <a href="${reverse('help_edx')}">Help</a>
+</%block>
+
+<%block name="footer_social_links"/>
+
+<%block name="footer_bottom"/>
+
+<%block name="second_footer">
+  <div id="su-footer">
+    <div class="container">
+      <div class="row">
+        <div id="su-footer-logo" class="span2">
+          <a href="http://www.stanford.edu">
+            <img src="https://www.stanford.edu/su-identity/images/footer-stanford-logo@2x.png" alt="Stanford University" width="105" height="49"/>
+          </a>
+        </div>
+        <div id="su-footer-text" class="span10">
+          <ul>
+            <li class="home"><a href="http://www.stanford.edu">SU Home</a></li>
+            <li class="maps alt"><a href="http://visit.stanford.edu/plan/maps.html">Maps &amp; Directions</a></li>
+            <li class="search-stanford"><a href="http://www.stanford.edu/search/">Search Stanford</a></li>
+            <li class="terms alt"><a href="http://www.stanford.edu/site/terms.html">Terms of Use</a></li>
+            <li class="copyright"><a href="http://www.stanford.edu/site/copyright.html">Copyright Complaints</a></li>
+          </ul>
+          <div class="clear"></div>
+          <p class="copyright vcard">&copy; <span class="fn org">Stanford University</span>, <span class="adr"> <span class="locality">Stanford</span>, <span class="region">California</span> <span class="postal-code">94305</span> </span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</%block>

templates/theme_head_extra.html

@@ -0,0 +1,12 @@
+<%namespace name='static' file='/static_content.html'/>
+<link rel="stylesheet" href="${static.url('css/vendor/su-identity.css')}" />
+<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic,400italic,700italic,900italic,' rel='stylesheet' type='text/css'>
+<!--[if lt IE 9]>
+  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+<!--[if IE 8]>
+  <link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie8.css" />
+<![endif]-->
+<!--[if IE 7]>
+  <link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie7.css" />
+<![endif]-->

templates/theme_header.html

@@ -0,0 +1,21 @@
+<%namespace name='static' file='/static_content.html'/>
+<%inherit file="/navigation.html"/>
+<%page args="suppress_toplevel_navigation=False"/>
+
+<%block name="navigation_top">
+  <div id="su-header">
+    <div class="container">
+      <a href="http://www.stanford.edu">
+        <img src="https://www.stanford.edu/su-identity/images/brandbar-stanford-logo@2x.png" alt="Stanford University" width="152" height="23">
+      </a>
+    </div>
+  </div>
+</%block>
+
+<%block name="navigation_logo">
+  <img src="${static.url('images/stanford-2-logo.png')}" style="margin-top: -5px;" width="50" height="50" />
+</%block>
+
+<%block name="navigation_secondary_links">
+  <a href="${self.attr.reverse('about_edx')}">About</a>
+</%block>