Skip to content

E
edx-platform
Commit 2202ec09 by Bridger Maxwell
Options

Merged Mako simplewiki templates

parents 67fc2586 78407157
Showing with 2649 additions and 329 deletions
.DS_Store 0 → 100644
File added
.hgignore
syntax: glob
*.pyc
*~
accordion.html
<%def name="make_chapter(chapter)">
<h3><a href="#">${chapter['name']}</a></h3>
<div>
<ul style="margin-left:-2em;">
% for section in chapter['sections']:
<li> <div
% if 'active' in section and section['active']:
style="background-color:#aed0ea;"
% endif
>
<a href='/courseware/${format_string(course_name)}/${format_string(chapter['name'])}/${format_string(section['name'])}'>${section['name']}</a> <br>
<small><b>${section['format']}</b>
% if 'time' in section and section['time']!="":
(${int(section['time'])/60} min)
% endif
% if 'due' in section and section['due']!="":
due ${section['due']}
% endif
</small>
</div>
% endfor
</ul>
</div>
</%def>
<h3><a href="#">${chapter['name']}</a></h3>
<ul>
% for section in chapter['sections']:
<li
% if 'active' in section and section['active']:
class="active"
% endif
>
<a href='/courseware/${format_string(course_name)}/${format_string(chapter['name'])}/${format_string(section['name'])}'>
${section['name']}
<p>
${section['format']}
% if 'time' in section and section['time']!="":
(${int(section['time'])/60} min)
% endif
% if 'due' in section and section['due']!="":
due ${section['due']}
% endif
</p>
</a>
% endfor
</ul>
</%def>
% for chapter in toc:
${make_chapter(chapter)}
......
activation_complete.html
<h1> Activation Complete </h1>
<h1>Activation Complete</h1>
<p> Now go <a href="/">log in</a> and try the course!
<p>Now go <a href="/">log in</a> and try the course!</a></p>
activation_invalid.html
<h1> Activation Invalid </h1>
<h1>Activation Invalid </h1>
<p> Something went wrong. Did you already activate the account? If so,
<p>Something went wrong. Did you already activate the account? If so,
go <a href="/">log in</a> and try the course. Otherwise, e-mail us to
let us know what happened.
let us know what happened.</p>
courseware.html
<%inherit file="main.html" />
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
<script type="text/javascript">
$(function() {
......@@ -21,35 +22,16 @@ $('#hide_acc').click(function() {
});
</script>
<div id="coursenav" align=right width=100%>
<a href="/book">Textbook</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/courseware"><b>Courseware</b></a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/discussion">Discussion</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/wiki">Wiki</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/profile">Profile</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/s/help.html">Help</a> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/logout">Log out</a>
</div>
<%include file="navigation.html" />
<div id="bodyContent">
<table width=100% cellpadding=0><tr>
<td width=276 valign=top>
<div id="accordion" style="position:relative; top:-6px; ">
${accordion}
<section class="main-content">
<div class="course-wrapper">
<div id="accordion">
${accordion}
</div>
</td>
<td valign=top>
<div>
${content}
</div>
</td>
</tr></table>
</div>
<section class="course-content">
${content}
</section>
</div>
</section>
credits.html
<%inherit file="main.html" />
<div id="topWrapper">
<div id="topBanner"></div>
</div>
<div id="topnav">
<ul>
<li id="current" style="border:none">
<a href="#" shape="rect">Home</a>
</li>
<li style="border:none">
<a href="/t/info.html" shape="rect">Course Info</a>
</li>
<li style="border:none">
<a href="/t/staff.html" shape="rect">Instructors</a>
</li>
<li style="border:none">
<a href="credits.html" shape="rect">Credits</a>
</li>
</ul>
</div>
<!-- end top wrapper -->
<div id="wrapper">
<div id="bg">
<div id="header"></div>
<div id="page">
<!-- begin container -->
<div id="container">
<!-- content -->
<div id="content">
<h1> Credits </h1>
<p> The team of instructors is Anant Agarwal, Piotr Mitros, Chris
Terman, and Gerald Sussman. Our intrepid team of TAs is
<p> The main codebase was crammed out in two months by Piotr
Mitros. Evgeny Fadeev helped integrate Askbot into the
system. Schematic entry and circuit simulation are by Chris
Terman. Jean-Michel Claus designed the applets. IT and infrastructure
are managed by Scott Bloomquist of TechSquare, Inc.
<p> The codebase was made possible by Django, JQuery, JQueryUI,
MathJAX, swfobject, askbot, django-simplewiki, pyparsing, and the
original FancyBox. Graphic design and css started from a free template
from <a href="http://www.dotemplate.com/">dotemplate.com</a>, one of
the few, genuinely free template web sites (although you have to
e-mail the owner to find that out), and was heavily modified by Piotr
Mitros, and later, thoughtbot.
<p> The system is running in the Amazon cloud, which allows us to hold up
to anticipated loads.
<div id="topWrapper">
<div id="topBanner"></div>
</div>
<div id="topnav">
<ul>
<li id="current" style="border:none">
<a href="#" shape="rect">Home</a>
</li>
<li style="border:none">
<a href="/t/info.html" shape="rect">Course Info</a>
</li>
<li style="border:none">
<a href="/t/staff.html" shape="rect">Instructors</a>
</li>
<li style="border:none">
<a href="credits.html" shape="rect">Credits</a>
</li>
</ul>
</div>
<!-- end top wrapper -->
<div id="wrapper">
<div id="bg">
<div id="page">
<!-- begin container -->
<div id="container">
<!-- content -->
<div id="content">
<h1> Credits </h1>
<p> The team of instructors is Anant Agarwal, Piotr Mitros, Chris
Terman, and Gerald Sussman. Our intrepid team of TAs is
<p> The main codebase was crammed out in two months by Piotr
Mitros. Evgeny Fadeev helped integrate Askbot into the
system. Schematic entry and circuit simulation are by Chris
Terman. Jean-Michel Claus designed the applets. IT and infrastructure
are managed by Scott Bloomquist of TechSquare, Inc.</p>
<p> The codebase was made possible by Django, JQuery, JQueryUI,
MathJAX, swfobject, askbot, django-simplewiki, pyparsing, and the
original FancyBox. Graphic design and css started from a free template
from <a href="http://www.dotemplate.com/">dotemplate.com</a>, one of
the few, genuinely free template web sites (although you have to
e-mail the owner to find that out), and was heavily modified by Piotr
Mitros, and later, thoughtbot.</p>
<p> The system is running in the Amazon cloud, which allows us to hold up to anticipated loads. </p>
</div>
</div>
credits.html.orig 0 → 100644
<%inherit file="main.html" />
<div id="topnav">
<ul>
<li id="current" style="border:none">
<a href="#" shape="rect">Home</a>
</li>
<li style="border:none">
<a href="/t/info.html" shape="rect">Course Info</a>
</li>
<li style="border:none">
<a href="/t/staff.html" shape="rect">Instructors</a>
</li>
<li style="border:none">
<a href="credits.html" shape="rect">Credits</a>
</li>
</ul>
</div>
<!-- end top wrapper -->
<div id="wrapper">
<div id="bg">
<div id="page">
<!-- begin container -->
<div id="container">
<!-- content -->
<div id="content">
<h1> Credits </h1>
<p> The team of instructors is Anant Agarwal, Piotr Mitros, Chris
Terman, and Gerald Sussman. Our intrepid team of TAs is
<p> The main codebase was crammed out in two months by Piotr
Mitros. Evgeny Fadeev helped integrate Askbot into the
system. Schematic entry and circuit simulation are by Chris
Terman. Jean-Michel Claus designed the applets. IT and infrastructure
are managed by Scott Bloomquist of TechSquare, Inc.</p>
<p> The codebase was made possible by Django, JQuery, JQueryUI,
MathJAX, swfobject, askbot, django-simplewiki, pyparsing, and the
original FancyBox. Graphic design and css started from a free template
from <a href="http://www.dotemplate.com/">dotemplate.com</a>, one of
the few, genuinely free template web sites (although you have to
e-mail the owner to find that out), and was heavily modified by Piotr
Mitros, and later, thoughtbot.</p>
<p> The system is running in the Amazon cloud, which allows us to hold up to anticipated loads. </p>
</div>
</div>
feedback_email.txt 0 → 100644
Feedback from: ${ user }
url: ${ url }
time: ${ time }
Subject: ${ subject }
Feedback:
${ feedback }
help.html
<%inherit file="main.html" />
<div id="coursenav" align=right width=100%>
<a href="/book">Textbook</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/courseware">Courseware</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/discussion">Discussion</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/wiki">Wiki</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/profile">Profile</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/s/help.html"><b>Help</b></a> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/logout">Log out</a>
</div>
<div align=center width=100%>
<div align=left width=100 style="width:400px; ">
<h1> Help </h1>
<%include file="navigation.html" />
<p> If you need help, first try <a href="discussion/questions/">asking
a question in the forums</a> and in the IRC channel (irc.mitx.org,
channel #6002). As the semester starts, we will add a Frequently Asked
Questions section.
<section class="main-content">
<h1>Help</h1>
<p> If you can't solve your problems with self-help, we have several
e-mail addresses set up:
<dl>
<dt> technical@mitx.mit.edu
<dd> System-related questions
<dt> content@mitx.mit.edu
<dd> Content-related questions
<dt> bugs@mitx.mit.edu
<dd> Bug reports
<dt> suggestions@mitx.mit.edu
<dd> Suggestions
</dl>
<p> Please bear in mind that while we read them, we do not expect to
have time to respond to all e-mails.
</div>
</div>
<p> If you need help, first try <a href="discussion/questions/">asking a question in the forums</a> and in the IRC channel (irc.mitx.org, channel #6002). As the semester starts, we will add a Frequently Asked Questions section.</p>
<p> If you can't solve your problems with self-help, we have several e-mail addresses set up:</p>
<dl>
<dt> technical@mitx.mit.edu</dt>
<dd> System-related questions</dd>
<dt> content@mitx.mit.edu</dt>
<dd> Content-related questions</dd>
<dt> bugs@mitx.mit.edu</dt>
<dd> Bug reports</dd>
<dt> suggestions@mitx.mit.edu</dt>
<dd> Suggestions</dd>
</dl>
<p> Please bear in mind that while we read them, we do not expect to have time to respond to all e-mails.</p>
</section>
homework.html
<h1> ${ homework['name']} </h1>
<ol>
% for problem in homework['problems']:
<h2> ${ problem['name'] } </h2>
${ problem['html'] }
<br>
<input type="hidden" name="problem_id" value="${ problem['name'] }">
<input type="submit" value="Check">
<li>
<h2> ${ problem['name'] } </h2>
${ problem['html'] }
<br>
<input type="hidden" name="problem_id" value="${ problem['name'] }">
<input type="submit" value="Check">
</li>
% endfor
</ol>
index.html
......@@ -74,76 +74,78 @@ $(function() {
</script>
<div id="topWrapper">
<div id="topBanner"></div>
</div>
<div id="topnav">
<ul>
<li id="current" style="border:none">
<a href="#" shape="rect">Home</a>
</li>
<li style="border:none">
<a href="/t/info.html" shape="rect">Course Info</a>
</li>
<li style="border:none">
<a href="/t/staff.html" shape="rect">Instructors</a>
</li>
<li style="border:none">
<a href="/t/credits.html" shape="rect">Credits</a>
</li>
</ul>
</div>
<!-- end top wrapper -->
<div id="wrapper">
<div id="bg">
<div id="header"></div>
<div id="page">
<!-- begin container -->
<div id="container">
<!-- content -->
<div id="content">
<center>
<table>
<tr><td align=right><big><a id="inline" href="#enroll">Enroll &gt;&gt;</a><br><br><br>
<a id="inline" href="#login">Log In &gt;&gt;</a></big></td><td><div style="width:50px; float:center;"></div></td><td>
<div style="width:300px; float:center;">
Taught by Anant Agarwal, with Gerald Sussman, Piotr Mitros, and Chris
Terman, "6.002 Circuits and Electronics" is an an on-line adaption of
MIT's first undergraduate analog design course. This course will run,
free of charge, for students worldwide from February 1, 2012 through
July 1, 2012.
<br><br>Students who successfully complete the course will receive an
electronic certificate of accomplishment from MIT. Students will not
receive course credit, but students successfully finishing the course
will be well-placed to take an exam to pass out of 6.002 should they
ever enroll at MIT, and potentially, similar courses at other schools.
<br><br> In order to succeed in this course, students must have some
background in calculus and differential equations. Since more advanced
mathematics will not show up until the second half of the course, the
first half of the course will include an optional remedial
differential equations component for students with weaker math
backgrounds.
<div id="topWrapper">
<div id="topBanner"></div>
</div>
<div style="display:none"><div id="enroll" name="enroll"><%include file="create_account.html" /></div></div>
<div style="display:none"><div id="login"><%include file="login.html" /></div></div>
<div style="display:none"><div id="pwd_reset"><%include file="password_reset_form.html" /></div></div>
<div style="display:none"><div id="reset_done"></div></div>
</td></tr></table>
</div>
<!-- end content -->
</div>
<!-- end container -->
<div id="topnav">
<ul>
<li id="current" style="border:none">
<a href="#" shape="rect">Home</a>
</li>
<li style="border:none">
<a href="/t/info.html" shape="rect">Course Info</a>
</li>
<li style="border:none">
<a href="/t/staff.html" shape="rect">Instructors</a>
</li>
<li style="border:none">
<a href="/t/credits.html" shape="rect">Credits</a>
</li>
</ul>
</div>
<!-- end top wrapper -->
<div id="wrapper">
<div id="bg">
<div id="header"></div>
<div id="page">
<!-- begin container -->
<div id="container">
<!-- content -->
<div id="content">
<center>
<table>
<tr><td align=right><big><a id="inline" href="#enroll">Enroll &gt;&gt;</a><br><br><br>
<a id="inline" href="#login">Log In &gt;&gt;</a></big></td><td><div style="width:50px; float:center;"></div></td><td>
<div style="width:300px; float:center;">
Taught by Anant Agarwal, with Gerald Sussman, Piotr Mitros, and Chris
Terman, "6.002 Circuits and Electronics" is an an on-line adaption of
MIT's first undergraduate analog design course. This course will run,
free of charge, for students worldwide from February 1, 2012 through
July 1, 2012.
<br><br>Students who successfully complete the course will receive an
electronic certificate of accomplishment from MIT. Students will not
receive course credit, but students successfully finishing the course
will be well-placed to take an exam to pass out of 6.002 should they
ever enroll at MIT, and potentially, similar courses at other schools.
<br><br> In order to succeed in this course, students must have some
background in calculus and differential equations. Since more advanced
mathematics will not show up until the second half of the course, the
first half of the course will include an optional remedial
differential equations component for students with weaker math
backgrounds.
</div>
<div style="display:none"><div id="enroll" name="enroll"><%include file="create_account.html" /></div></div>
<div style="display:none"><div id="login"><%include file="login.html" /></div></div>
<div style="display:none"><div id="pwd_reset"><%include file="password_reset_form.html" /></div></div>
<div style="display:none"><div id="reset_done"></div></div>
</td></tr></table>
</div>
<!-- end content -->
</div>
<div id="footerWrapper"></div>
</div>
</div>
<!-- end container -->
</div>
<div id="footerWrapper"></div>
</div>
</div>
index.html.orig 0 → 100644
<%inherit file="main.html" />
<script>
$(function() {
/* Set up FancyBox pop-ups */
$("a#inline").fancybox({
'hideOnContentClick': false
});
// TODO: Clean up as per http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery
/* Handles when the user hits 'enroll'. Grabs form data. Does AJAX.
Either shows error, or shows success. */
$('#create_account_button').click(function() {
var submit_data={};
$.each($("[id^=ca_]"), function(index,value){
submit_data[value.name]=value.value;
});
$.each($("[id^=cb_]"), function(index,value){
submit_data[value.name]=value.checked;
});
postJSON('/create_account',
submit_data,
function(json) {
if(json.success) {
$('#enroll').html(json.value);
} else {
$('#enroll_error').html(json.value);
}
}
);
});
/* Handles when the user tries to log in. Grabs form data. Does AJAX.
Either shows error, or redirects. */
$('#login_button').click(function() {
var submit_data={};
$.each($("[id^=li_]"), function(index,value){
submit_data[value.name]=value.value;
});
submit_data["remember"] = ($('#remember').attr("checked")? true : false);
postJSON('/login',
submit_data,
function(json) {
if(json.success) {
location.href="/courseware";
} else {
$('#login_error').html("Invalid Login");
}
}
);
});
$('#pwd_reset_button').click(function() {
$.post('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
"email" : $('#id_email').val()}, function(data){
$('#pwd_reset').html(data);
});
});
/* Activate stupid spinner drop-downs in enrollment form */
var spinner_array=$("[id^=spinner_]");
spinner_array.each(function(i) {
var s=spinner_array[i];
$("#"+s.id).click(function(){
$("#sregion"+s.id.substring(7)).toggle();
});
})
/*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */
});
</script>
<div id="topWrapper">
<div id="topBanner"></div>
</div>
<div id="topnav">
<ul>
<li id="current" style="border:none">
<a href="#" shape="rect">Home</a>
</li>
<li style="border:none">
<a href="/t/info.html" shape="rect">Course Info</a>
</li>
<li style="border:none">
<a href="/t/staff.html" shape="rect">Instructors</a>
</li>
<li style="border:none">
<a href="/t/credits.html" shape="rect">Credits</a>
</li>
</ul>
</div>
<!-- end top wrapper -->
<div id="wrapper">
<div id="bg">
<div id="header"></div>
<div id="page">
<!-- begin container -->
<div id="container">
<!-- content -->
<div id="content">
<center>
<table>
<tr><td align=right><big><a id="inline" href="#enroll">Enroll &gt;&gt;</a><br><br><br>
<a id="inline" href="#login">Log In &gt;&gt;</a></big></td><td><div style="width:50px; float:center;"></div></td><td>
<div style="width:300px; float:center;">
Taught by Anant Agarwal, with Gerald Sussman, Piotr Mitros, and Chris
Terman, "6.002 Circuits and Electronics" is an an on-line adaption of
MIT's first undergraduate analog design course. This course will run,
free of charge, for students worldwide from February 1, 2012 through
July 1, 2012.
<br><br>Students who successfully complete the course will receive an
electronic certificate of accomplishment from MIT. Students will not
receive course credit, but students successfully finishing the course
will be well-placed to take an exam to pass out of 6.002 should they
ever enroll at MIT, and potentially, similar courses at other schools.
<br><br> In order to succeed in this course, students must have some
background in calculus and differential equations. Since more advanced
mathematics will not show up until the second half of the course, the
first half of the course will include an optional remedial
differential equations component for students with weaker math
backgrounds.
</div>
<div style="display:none"><div id="enroll" name="enroll"><%include file="create_account.html" /></div></div>
<div style="display:none"><div id="login"><%include file="login.html" /></div></div>
<div style="display:none"><div id="pwd_reset"><%include file="password_reset_form.html" /></div></div>
<div style="display:none"><div id="reset_done"></div></div>
</td></tr></table>
</div>
<!-- end content -->
</div>
<!-- end container -->
</div>
<div id="footerWrapper"></div>
</div>
</div>
info.html
<%inherit file="main.html" />
<div id="topWrapper">
<div id="topBanner"></div>
</div>
<div id="topnav">
<ul>
<li style="border:none">
......
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html>
<html>
<head>
<title> MITX 6.002 </title>
<link rel="stylesheet" href="/static/lib/jquery.treeview.css" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/local.css" type="text/css" media="all" />
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<style type="text/css">#slider { margin: 10px; }</style>
<script type="text/javascript" src="/static/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/static/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/static/lib//swfobject/swfobject.js"></script>
<script type="text/javascript" src="/static/lib/jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/video_player.js"></script>
<script type="text/javascript" src="/static/js/schematic.js"></script>
<style type="text/css">#slider { margin: 10px; }</style>
<!-- Warning: Do not upgrade FancyBox. V2.0 is under a non-free CC license -->
<script type="text/javascript" src="/static/lib/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="/static/lib/fancybox/jquery.fancybox-1.3.4.css">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["\\(","\\)"]],
displayMath: [["\\[","\\]"]]}
});
</script>
<script type="text/javascript" src="/static/lib/mathjax/MathJax.js?config=TeX-AMS_HTML-full"></script>
<title>MITX 6.002</title>
<link rel="stylesheet" href="/static/lib/jquery.treeview.css" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/static/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/static/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/static/lib//swfobject/swfobject.js"></script>
<script type="text/javascript" src="/static/lib/jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/video_player.js"></script>
<script type="text/javascript" src="/static/js/schematic.js"></script>
<!-- Warning: Do not upgrade FancyBox. V2.0 is under a non-free CC license -->
<script type="text/javascript" src="/static/lib/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="/static/lib/fancybox/jquery.fancybox-1.3.4.css">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["\\(","\\)"]],
displayMath: [["\\[","\\]"]]}
});
</script>
<script type="text/javascript" src="/static/lib/mathjax/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script>
$(function() {
// Set up FancyBox pop-ups
$("a#inline").fancybox({
'hideOnContentClick': false
});
});
</script>
</head>
<body>
${self.body()}
<div id="bottomWrapper">
<div id="footer">
<p style="padding-top:20px"> Copyright (c). 2011. MIT. <a href=http://creativecommons.org/licenses/by-sa/3.0/>Some rights reserved.</a>
<!-- Template based on a design from http://www.dotemplate.com/ -- Donated $10 (pmitros) so we don't need to include credit. -->
</p>
</div>
</div>
${self.body()}
<footer>
<p> Copyright (c). 2011. MIT. <a href=http://creativecommons.org/licenses/by-sa/3.0/>Some rights reserved.</a> Please give us <a id="inline"
href="#feedback_div">feedback</a>. Try our <a id="inline"
href="#calculator_div">calculator</a>.
<!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
</p>
<div style="display:none"><div id="feedback_div">Found a bug? Got an
idea for improving our system? Let us know.
<br> Subject: <br><input id="feedback_subject" size=40>
<br> Feedback: <br><textarea id="feedback_message" cols="40" rows="5">
</textarea>
<br> <input id="feedback_button" type="button" value="Submit">
<script>$(function() {
$("#feedback_button").click(function(){
postJSON("/send_feedback", {"subject":$("#feedback_subject").attr("value"),
"url":document.URL,
"message":$("#feedback_message").attr("value")},
function(data){
$("#feedback_subject").attr("value","");
$("#feedback_message").attr("value","");
$("#feedback_div").html("Feedback submitted. Thank you");
});
});
});</script>
</div></div>
<div style="display:none"><div id="calculator_div">
<input id="calculator_input" > <input id="calculator_button" type=button value="=&gt;">
<input id="calculator_output" readonly>
<script>$(function() {
$("#calculator_button").click(function(){
$.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
function(data){
$("#calculator_output").attr("value",data.result);
});
});
});</script>
<br>
Supported operations: ^ * / + - || ()
<br>
Supported suffixes: %kMGTcmunp
</div></div>
<ul>
<li><a href="/s/help.html">Help</a></li>
<li><a href="/logout">Log out</a></li>
</ul>
</footer>
</body>
</html>
main.html.orig 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>MITX 6.002</title>
<link rel="stylesheet" href="/static/lib/jquery.treeview.css" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/static/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/static/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/static/lib//swfobject/swfobject.js"></script>
<script type="text/javascript" src="/static/lib/jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/video_player.js"></script>
<script type="text/javascript" src="/static/js/schematic.js"></script>
<!-- Warning: Do not upgrade FancyBox. V2.0 is under a non-free CC license -->
<script type="text/javascript" src="/static/lib/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="/static/lib/fancybox/jquery.fancybox-1.3.4.css">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["\\(","\\)"]],
displayMath: [["\\[","\\]"]]}
});
</script>
<script type="text/javascript" src="/static/lib/mathjax/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script>
$(function() {
// Set up FancyBox pop-ups
$("a#inline").fancybox({
'hideOnContentClick': false
});
});
</script>
</head>
<body>
${self.body()}
<footer>
<p> Copyright (c). 2011. MIT. <a href=http://creativecommons.org/licenses/by-sa/3.0/>Some rights reserved.</a> Please give us <a id="inline"
href="#feedback_div">feedback</a>. Try our <a id="inline"
href="#calculator_div">calculator</a>.
<!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
</p>
<div style="display:none"><div id="feedback_div">Found a bug? Got an
idea for improving our system? Let us know.
<br> Subject: <br><input id="feedback_subject" size=40>
<br> Feedback: <br><textarea id="feedback_message" cols="40" rows="5">
</textarea>
<br> <input id="feedback_button" type="button" value="Submit">
<script>$(function() {
$("#feedback_button").click(function(){
postJSON("/send_feedback", {"subject":$("#feedback_subject").attr("value"),
"url":document.URL,
"message":$("#feedback_message").attr("value")},
function(data){
$("#feedback_subject").attr("value","");
$("#feedback_message").attr("value","");
$("#feedback_div").html("Feedback submitted. Thank you");
});
});
});</script>
</div></div>
<div style="display:none"><div id="calculator_div">
<input id="calculator_input" > <input id="calculator_button" type=button value="=&gt;">
<input id="calculator_output" readonly>
<script>$(function() {
$("#calculator_button").click(function(){
$.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
function(data){
$("#calculator_output").attr("value",data.result);
});
});
});</script>
<br>
Supported operations: ^ * / + - || ()
<br>
Supported suffixes: %kMGTcmunp
</div></div>
<ul>
<li><a href="/s/help.html">Help</a></li>
<li><a href="/logout">Log out</a></li>
</ul>
</footer>
</body>
</html>
navigation.html 0 → 100644
<div class="header-wrapper">
<header>
<h1>Circuits and Electronics</h1>
<nav>
<ul class="coursenav">
<li><a href="/courseware">Courseware</a></li>
<li><a href="/book">Textbook</a></li>
<li><a href="/discussion">Discussion</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/profile">Profile</a></li>
</ul>
</nav>
</header>
</div>
problem.html
<h2> ${ problem['name'] } </h2>
${ problem['html'] }
<br>
<input type="hidden" name="problem_id" value="${ problem['name'] }">
% if check_button:
......
profile.html
......@@ -45,9 +45,6 @@ $(function() {
}
});
$("a#inline").fancybox({
'hideOnContentClick': false
});
$('#change_password').click(function(){
$('#inline').trigger('click');
......@@ -65,75 +62,55 @@ $(function() {
</script>
<div align="right" id="coursenav"><div align=right><table><tr><td align=right valign=top>
<a href="/book">Textbook</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/courseware">Courseware</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/discussion">Discussion</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/wiki">Wiki</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/profile"><b>Profile</b></a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/s/help.html">Help</a> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/logout">Log out</a>
</td></tr><tr><td valign=top>
</td></tr></table>
</div></div>
<center>
<br><br><br><br>
<h1> ${name} </h1>
<table><td align=right>Forum name:</td><td>${username}</td></tr>
<td align=right>E-mail:</td><td>${email}</td></tr>
<tr id="change_location"> <td align=right>Location:</a></td><td><div class="bordered" id="location_sub">${location}&nbsp;</div></td></tr>
<tr id="change_language"><td align=right><div id="change_language">Language:</a></td><td><div id="language_sub" class="bordered">${language}&nbsp;</div></td></tr>
<tr id="change_password"><td align=right><div>Password:</a></td><td><div id="change_password" class="bordered">********</a></td></tr></table>
<div><a id="inline" href="#change_password_pop"></a></div> <!-- hidden trigger for password -->
<div id="description"></div>
<h1> Course Progress </h1>
<table>
% for hw in homeworks:
<tr><td> ${ hw['chapter'] }</td><td>/</td> <td> ${ hw['section'] } </td><td>&nbsp;</td><td>
% for score in hw['scores']:
${ score[0] }/${ score[1] }
% endfor
</td></tr>
% endfor
</table>
</center>
<div style="display:none"><div id="change_password_pop">
<div id="pwd_reset">
<table width=400><tr><td> <h1>Password reset</h1>
<p>Hit the button below, and we'll e-mail you a password reset link at ${email}.</p>
<p>
<div align=right>
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
<input type="button" id="pwd_reset_button" value="E-mail me" /></p>
</div>
</td></tr></table>
</div>
</div></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<%include file="navigation.html" />
<section class="main-content">
<div class="profile-wrapper">
<section class="user-info">
<h1>${name}</h1>
<ul>
<li>Forum name: ${username}</li>
<li>E-mail: ${email}</li>
<li>Location: ${location}</li>
<li>Language: ${language}</li>
<li>Password: ********</li>
</ul>
<!-- <div><a href="#change_password_pop">Reset password</a></div> -->
<!-- hidden trigger for password -->
<div id="change_password_pop">
<h2>Password reset</h2>
<p>We'll e-mail you a password reset link at ${email}.</p>
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
<input type="button" id="pwd_reset_button" value="Reset Password" />
</div>
</section>
<section class="course-info">
<h1>Course Progress</h1>
<!-- <div id="description"></div> -->
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<h3>${ hw['section'] }</h3>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</li>
% endfor
</ol>
</section>
</div>
</section>
profile.html.orig 0 → 100644
<%inherit file="main.html" />
<script>
var loc=true; // Activate on clicks? Not if already clicked.
var lang=true;
$(function() {
$("#change_location").click(function() {
log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});
if(loc) {
$("#description").html('<div style="color:#FF0000">'+
"Preferred format is city, state, country (so for us, "+
"&quot;Cambridge, Massachusetts, USA&quot;), but give "+
"as much or as little detail as you want. </div>");
loc=false;
$("#location_sub").html('<input id="id_loc_text" type="text" name="loc_text" />'+
'<input type="button" id="change_loc_button" value="Change" />');
$("#change_loc_button").click(function() {
postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
$("#location_sub").text(json.location);
loc=true;
$("#description").html("");
log_event("profile", {"type":"location_change", "new":json.location});
});
});
}
});
$("#change_language").click(function() {
log_event("profile", {"type":"language_show", "old":$("#language_sub").text()});
if(lang) {
lang=false;
$("#language_sub").html('<input id="id_lang_text" type="text" name="lang_text" />'+
'<input type="button" id="change_lang_button" value="Change" />');
$("#change_lang_button").click(function() {
postJSON('/change_setting', {'language':$("#id_lang_text").attr("value")}, function(json) {
$("#language_sub").text(json.language);
lang=true;
$("#description").html("");
log_event("profile", {"type":"language_change", "new":json.language});
});
});
}
});
$('#change_password').click(function(){
$('#inline').trigger('click');
log_event("profile", {"type":"password_show"});
});
$('#pwd_reset_button').click(function() {
$.post('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
"email" : $('#id_email').val()}, function(data){
$('#pwd_reset').html(data);
log_event("profile", {"type":"password_send"});
});
});
})
</script>
<%include file="navigation.html" />
<section class="main-content">
<div class="profile-wrapper">
<section class="user-info">
<h1>${name}</h1>
<ul>
<li>Forum name: ${username}</li>
<li>E-mail: ${email}</li>
<li>Location: ${location}</li>
<li>Language: ${language}</li>
<li>Password: ********</li>
</ul>
<!-- <div><a href="#change_password_pop">Reset password</a></div> -->
<!-- hidden trigger for password -->
<div id="change_password_pop">
<h2>Password reset</h2>
<p>We'll e-mail you a password reset link at ${email}.</p>
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
<input type="button" id="pwd_reset_button" value="Reset Password" />
</div>
</section>
<section class="course-info">
<h1>Course Progress</h1>
<!-- <div id="description"></div> -->
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<h3>${ hw['section'] }</h3>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</li>
% endfor
</ol>
</section>
</div>
</section>
sass/.DS_Store 0 → 100644
File added
sass/_base-extends.scss 0 → 100644
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrapper {
margin: 0 auto;
max-width: $max-width;
width: grid-width(12);
text-align: left;
}
.button {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@include border-radius(3px);
border: 1px solid darken($mit-red, 10%);
padding: 10px 15px;
color: #fff;
font: bold $body-font-size $body-font-family;
text-shadow: 0 1px 0 darken($mit-red, 10%);
cursor: pointer;
&:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 10%), darken($mit-red, 5%));
border: 1px solid darken($mit-red, 20%);
}
}
sass/_base-variables.scss 0 → 100644
// Percentage of container calculator
@function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width);
}
// Line-height
@function lh($amount: 1) {
@return $base-line-height * $amount;
}
// Variables
// ---------------------------------------- //
// fonts
$body-font-family: "Droid Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
$body-font-size: 14px;
// grid
$columns: 12;
$column-width: 80px;
$gutter-width: 25px;
$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
$gw-column: perc($column-width);
$gw-gutter: perc($gutter-width);
$body-line-height: golden-ratio($body-font-size, 1);
// color
$light-gray: #ddd;
$dark-gray: #333;
$mit-red: #993333;
$text-color: $dark-gray;
$border-color: $light-gray;
sass/_base.scss 0 → 100644
h1 {
}
h2 {
}
h3 {
}
p {
margin-bottom: $body-line-height;
}
#{$all-text-inputs}, textarea {
@include border-radius(3px);
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
border: 1px solid #bbb;
font: $body-font-size $body-font-family;
padding: 8px;
&:focus {
border-color: $mit-red;
}
}
input[type="submit"], input[type="button"], button {
// @extend .button;
}
sass/_courseware.scss 0 → 100644
div.course-wrapper {
display: table;
width: 100%;
div#accordion {
@include box-shadow( inset -1px 0 0 #f6f6f6);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
display: table-cell;
font-family: $body-font-family;
text-shadow: 0 1px 0 #f6f6f6;
vertical-align: top;
width: grid-width(3);
h3 {
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-default {
background: none;
font-weight: normal;
border: none;
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
@include box-shadow(none);
background: none;
border: 0;
border-bottom: 1px solid #aaa;
color: #000;
font-weight: bold;
a {
color: #000;
}
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border-bottom: 1px solid #c3c3c3;
border-top: 1px solid #c3c3c3;
border: none;
font-size: 12px;
margin: 0;
li {
&.active {
font-weight: bold;
}
}
}
}
section.course-content {
@include box-sizing(border-box);
display: table-cell;
padding: $gw-gutter;
vertical-align: top;
width: grid-width(9);
ol.vert-mod {
li {
@extend .clearfix;
}
}
ol.sequence-nav {
margin-bottom: $body-line-height;
li {
cursor: pointer;
display: table-cell;
min-width: 30px;
min-height: 30px;
padding: 0 10px;
}
}
div.video-wrapper {
float: left;
width: 640px;
min-height: 500px;
section {
ul {
display: inline-block;
li {
margin-top: 5px;
display: inline-block;
cursor: pointer;
div {
&:empty {
display: none;
}
}
}
}
div#slider {
margin: -14px 0 10px 60px;
}
div#vidtime {
float: left;
}
div#video_speeds {
float: right;
cursor: pointer;
span {
&:hover {
color: $mit-red;
}
}
}
}
}
ol.subtitles {
width: 220px;
margin-left: 20px;
float: left;
li {
margin-bottom: 8px;
cursor: pointer;
&.current {
background-color: #f3f3f3;
}
&:hover {
color: $mit-red;
}
}
}
}
}
sass/_font-face.scss 0 → 100644
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff');
}
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: bold;
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMXbFhgvWbfSbdVg11QabG8w.woff') format('woff');
}
sass/_layout.scss 0 → 100644
html {
margin-top: 0;
body {
color: $dark-gray;
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
background: #f3f3f3;
div.header-wrapper {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 1px 1px #ccc);
@include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
border-bottom: 1px solid darken($mit-red, 10%);
header {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
padding: 0 $body-line-height;
h1 {
border-right: 1px solid darken($mit-red, 5%);
font-size: $body-font-size;
font-weight: bold;
margin: 0 $gw-gutter 0 0;
padding: 15px $gw-gutter 15px 0;
display: block;
float: left;
color: #000;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
}
nav {
float: left;
display: block;
margin: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
ul {
@extend .clearfix;
display: inline-block;
padding: 15px 0;
margin: 0;
li {
margin-right: $body-line-height;
display: inline-block;
margin-bottom: 0;
a {
color: #fff;
&:hover {
color: rgba(#fff, .7);
background-color: none;
text-decoration: none;
}
}
}
}
}
}
}
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-shadow(0 1px 0 #fff);
@include box-sizing(border-box);
background: #fff;
border-top: 0;
border: 1px solid #ccc;
}
img {
max-width: 100%;
height: auto;
}
}
footer {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
color: #777;
margin-top: $body-line-height;
padding: 0 $body-line-height;
p {
float: left;
a {
color: #444;
}
}
ul {
float: right;
li {
display: inline-block;
margin-right: 20px;
a {
color: #444;
}
}
}
}
}
sass/_local.scss 0 → 100644
#hide_acc {
min-height:600;
}
#mainblock {
border: 0;
padding: 0;
margin: 0;
width: 200;
min-height:600px;
margin-left: 276px;
margin-right: 0px;
}
.bordered { border: 1px solid #AAAAAA; border-style : dotted; }
.seq_problem_visited { background-color: #ccccaa;}
.seq_video_visited { background-color: #ccaacc;}
.seq_video_visited { background-color: #cccaac;}
.seq_html_visited { background-color: #caaccc;}
.seq_tab_visited { background-color: #aacccc;}
.seq_vertical_visited { background-color: #acaccc;}
.seq_sequential_visited { background-color: #cacacc;}
.seq_problem_visited { background-color: #ccacac;}
.seq_schematic_visited { background-color: #cccaca;}
.seq_problem_inactive { background-color: #aaaa99;}
.seq_video_inactive { background-color: #aa99aa;}
.seq_video_inactive { background-color: #aaa99a;}
.seq_html_inactive { background-color: #a99aaa;}
.seq_tab_inactive { background-color: #99aaaa;}
.seq_vertical_inactive { background-color: #9a9aab;}
.seq_sequential_inactive { background-color: #a9a9aa;}
.seq_problem_inactive { background-color: #aa9a9a;}
.seq_schematic_inactive { background-color: #aaa9a9;}
.seq_active { background-color: red;}
sass/_profile.scss 0 → 100644
div.profile-wrapper {
display: table;
section.user-info {
@include box-sizing(border-box);
margin-right: $gw-gutter;
padding: $body-line-height;
width: grid-width(6);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
text-shadow: 0 1px 0 #f6f6f6;
display: table-cell;
}
section.course-info {
@include box-sizing(border-box);
padding: $body-line-height;
width: grid-width(6);
display: table-cell;
ul {
li {
display: inline-block;
padding-right: 1em;
}
}
}
}
sass/_reset.scss 0 → 100644
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
sass/_textbook.scss 0 → 100644
div.book-wrapper {
display: table;
ul#booknav {
@include box-shadow( inset -1px 0 0 #f6f6f6);
@include box-sizing(border-box);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
font-family: $body-font-family;
padding: $body-line-height;
text-shadow: 0 1px 0 #f6f6f6;
vertical-align: top;
width: grid-width(3);
min-width: 240px;
display: table-cell;
li {
ul {
background: none;
}
}
}
section.book {
@include box-sizing(border-box);
padding: $body-line-height;
vertical-align: top;
width: grid-width(9) + $gw-gutter;
display: table-cell;
nav {
background: #F6EFD4;
border-bottom: 1px solid darken(#F6EFD4, 10%);
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
ul {
@extend .clearfix;
li {
padding: 15px;
&.last {
float: left;
}
&.next {
float: right;
}
a {
font-size: 12px;
text-transform: uppercase;
color: darken(#F6EFD4, 80%);
text-shadow: 0 1px 0 #fff;
&:hover {
color: darken(#F6EFD4, 60%);
}
}
}
}
}
section.page {
img {
border: 1px solid $border-color;
}
}
}
}
sass/_theme.scss 0 → 100644
/*
----------------------------------------------------------------------------------------
Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.
THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate
pmitros donated $10
Colors:
Light blue: bddeff
Blue: 7fbcfd
Very dark blue: #031634
Dark blue: #023063;
Dark Greenish: #7a994c;
Greenish: #adcc80;
Very light greenish: #dae5c9;
Bright orange: #fa720a;
----------------------------------------------------------------------------------------
*/
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size:1.6em;
margin:25px 0 10px 0;
clear:both;
}
h2 {
font-size:1.1em;
margin:20px 0 10px 0;
clear:both;
}
h3 {
font-size:1em;
margin:20px 0 5px 0;
clear:both;
}
a:link, a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#wrapper {
background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
margin:0 auto ;
width:100%;
}
// marketing pages
#topWrapper {
width:100%;
height:100px;
background-image:url(images/css/topWrapper-bg.jpg);
background-position:center top ;
background-repeat:repeat-x;
}
#topBanner {
width:800px;
margin:0 auto;
height:100px;
background-image:url(images/css/topBanner.jpg);
background-repeat:no-repeat;
}
#topnav {
background:transparent url('images/css/hmenu.jpg') repeat-x top left;
height:20px;
margin:0 auto ;
text-align:center;
width:800px;
ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:20px;
text-transform:uppercase;
font-size:0.9em;
font-family:Arial,sans-serif;
li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url('images/css/hmenu.jpg') repeat-x top left;
a {
display:block;
float:left;
color:#031634;
text-decoration:none;
padding:0px 50px ;
line-height:20px;
font-weight:bold;
}
}
}
}
#topnav ul li a:hover, #topnav li#current a {
color:#7a994c;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
}
#bg {
margin:0 auto;
padding:0;
background:transparent ;
background-image:url(images/css/hat.jpg);
background-repeat:no-repeat;
background-position: center top ;
}
#header {
margin: 0 auto;
min-height:0px;
height: 0px;
width: 800px;
}
#page {
background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
}
#container {
margin:0 auto;
width:800px;
}
#content {
width:780px;
margin:0 auto ;
text-align:left;
min-height:800px;
}
#content p {
text-align:justify;
}
#footerWrapper {
margin:0 auto;
height:10px;
padding:0;
background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
}
#footer {
margin:0 auto;
padding:0;
width:800px;
height:10px;
}
#sidebar ul.vmenu {
list-style: none;
text-align: left;
margin: 7px 0px 8px 0px;
padding: 0;
text-decoration: none;
border-top: 1px solid #eeeeee;
}
#sidebar ul.vmenu li {
list-style: none;
padding: 4px 0 4px 0px;
margin: 0 2px;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul.vmenu li a {
text-decoration: none;
color:#023063;
}
#sidebar ul.vmenu li a:hover {
color:#adcc80;
}
#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.vmenu ul li { border: none; }
sass/application.scss 0 → 100644
@import "bourbon/bourbon";
@import "reset";
@import "font-face";
// Base layout
@import "base-variables", "base-extends", "base";
@import "layout";
// pages
@import "courseware";
@import "textbook";
@import "profile";
// left over
@import "theme";
@import "local";
sass/bourbon/_bourbon.scss 0 → 100644
// Custom Functions
@import "functions/deprecated-webkit-gradient";
@import "functions/golden-ratio";
@import "functions/grid-width";
@import "functions/tint-shade";
// CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
@import "css3/background-image";
@import "css3/background-size";
@import "css3/border-image";
@import "css3/border-radius";
@import "css3/box-shadow";
@import "css3/box-sizing";
@import "css3/columns";
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
// Addons & other mixins
@import "addons/button";
@import "addons/font-family";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/timing-functions";
sass/bourbon/addons/_button.scss 0 → 100644
@mixin button ($style: simple, $base-color: #4294f0) {
@if type-of($style) == color {
$base-color: $style;
$style: simple;
}
@if $style == simple {
@include simple($base-color);
}
@else if $style == shiny {
@include shiny($base-color);
}
@else if $style == pill {
@include pill($base-color);
}
}
@mixin simple ($base-color) {
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$color: hsl(0, 0, 100%);
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
border: 1px solid $border;
@include border-radius (3px);
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline;
font-size: 11px;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
padding: 6px 18px 7px;
text-shadow: 0 1px 0 $text-shadow;
-webkit-background-clip: padding-box;
&:hover {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
@include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}
&:active {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
border: 1px solid $border-active;
@include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
}
}
@mixin shiny($base-color) {
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
$color: hsl(0, 0, 100%);
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
border: 1px solid $border;
border-bottom: 1px solid $border-bottom;
@include border-radius(5px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline;
font-size: 14px;
font-weight: bold;
padding: 7px 20px 8px;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 1px $text-shadow;
&:hover {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
@include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
cursor: pointer;
}
&:active {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
}
}
@mixin pill($base-color) {
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
$color: hsl(0, 0, 100%);
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@include linear-gradient ($base-color, $stop-gradient);
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
@include border-radius(16px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
color: $color;
display: inline;
font-size: 11px;
font-weight: normal;
line-height: 1;
padding: 3px 16px 5px;
text-align: center;
text-shadow: 0 -1px 1px $text-shadow;
-webkit-background-clip: padding-box;
&:hover {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
@include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
cursor: pointer;
text-shadow: 0 -1px 1px $text-shadow-hover;
-webkit-background-clip: padding-box;
}
&:active {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
background: $active-color;
border: 1px solid $border-active;
border-bottom: 1px solid $border-bottom-active;
@include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
sass/bourbon/addons/_font-family.scss 0 → 100644
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$verdana: Verdana, Geneva, sans-serif;
sass/bourbon/addons/_html5-input-types.scss 0 → 100644
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
$unquoted-inputs-list: ();
@each $input-type in $inputs-list {
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}
$all-text-inputs: $unquoted-inputs-list;
// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
sass/bourbon/addons/_position.scss 0 → 100644
@mixin position ($position: relative, $coordinates: 0 0 0 0) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
}
$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);
position: $position;
@if not(unitless($top)) {
top: $top;
}
@if not(unitless($right)) {
right: $right;
}
@if not(unitless($bottom)) {
bottom: $bottom;
}
@if not(unitless($left)) {
left: $left;
}
}
sass/bourbon/addons/_timing-functions.scss 0 → 100644
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
// EASE IN
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
// EASE OUT
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
// EASE IN OUT
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
sass/bourbon/css3/_animation.scss 0 → 100644
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
@mixin animation-name ($name-1,
$name-2: false, $name-3: false,
$name-4: false, $name-5: false,
$name-6: false, $name-7: false,
$name-8: false, $name-9: false)
{
$full: compact($name-1, $name-2, $name-3, $name-4,
$name-5, $name-6, $name-7, $name-8, $name-9);
-webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
}
@mixin animation-duration ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
-webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
}
@mixin animation-timing-function ($motion-1: ease,
// ease | linear | ease-in | ease-out | ease-in-out
$motion-2: false, $motion-3: false,
$motion-4: false, $motion-5: false,
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
$full: compact($motion-1, $motion-2, $motion-3, $motion-4,
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
-webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
}
@mixin animation-iteration-count ($value-1: 1,
// infinite | <number>
$value-2: false, $value-3: false,
$value-4: false, $value-5: false,
$value-6: false, $value-7: false,
$value-8: false, $value-9: false)
{
$full: compact($value-1, $value-2, $value-3, $value-4,
$value-5, $value-6, $value-7, $value-8, $value-9);
-webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
}
@mixin animation-direction ($direction-1: normal,
// normal | alternate
$direction-2: false, $direction-3: false,
$direction-4: false, $direction-5: false,
$direction-6: false, $direction-7: false,
$direction-8: false, $direction-9: false)
{
$full: compact($direction-1, $direction-2, $direction-3, $direction-4,
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
-webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
}
@mixin animation-play-state ($state-1: running,
// running | paused
$state-2: false, $state-3: false,
$state-4: false, $state-5: false,
$state-6: false, $state-7: false,
$state-8: false, $state-9: false)
{
$full: compact($state-1, $state-2, $state-3, $state-4,
$state-5, $state-6, $state-7, $state-8, $state-9);
-webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
}
@mixin animation-delay ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
-webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
}
@mixin animation-fill-mode ($mode-1: none,
// http://goo.gl/l6ckm
// none | forwards | backwards | both
$mode-2: false, $mode-3: false,
$mode-4: false, $mode-5: false,
$mode-6: false, $mode-7: false,
$mode-8: false, $mode-9: false)
{
$full: compact($mode-1, $mode-2, $mode-3, $mode-4,
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
-webkit-animation-fill-mode: $full;
-moz-animation-fill-mode: $full;
animation-fill-mode: $full;
}
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
@mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name);
$length-of-time: length($time);
$length-of-motion: length($motion);
@if $length-of-name > 1 {
@include animation-name(zip($name));
} @else {
@include animation-name( $name);
}
@if $length-of-time > 1 {
@include animation-duration(zip($time));
} @else {
@include animation-duration( $time);
}
@if $length-of-motion > 1 {
@include animation-timing-function(zip($motion));
} @else {
@include animation-timing-function( $motion);
}
}
// Official animation shorthand property. Needs more work to actually be useful.
@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
-webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
-moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
animation: $name $duration $timing-function $delay $iteration-count $direction;
}
sass/bourbon/css3/_appearance.scss 0 → 100644
@mixin appearance ($value) {
-webkit-appearance: $value;
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
}
sass/bourbon/css3/_background-image.scss 0 → 100644
//************************************************************************//
// Background-image property for adding multiple background images with
// gradients, or for stringing multiple gradients together.
//************************************************************************//
@import "../functions/linear-gradient";
@import "../functions/radial-gradient";
@mixin background-image(
$image-1 , $image-2: false,
$image-3: false, $image-4: false,
$image-5: false, $image-6: false,
$image-7: false, $image-8: false,
$image-9: false, $image-10: false
) {
$images: compact($image-1, $image-2,
$image-3, $image-4,
$image-5, $image-6,
$image-7, $image-8,
$image-9, $image-10);
background-image: add-prefix($images, webkit);
background-image: add-prefix($images, moz);
background-image: add-prefix($images, ms);
background-image: add-prefix($images, o);
background-image: add-prefix($images);
}
@function add-prefix($images, $vendor: false) {
$images-prefixed: ();
@for $i from 1 through length($images) {
$type: type-of(nth($images, $i)); // Get type of variable - List or String
// If variable is a list - Gradient
@if $type == list {
$gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
$gradient: render-gradients($gradient-args, $gradient-type, $vendor);
$images-prefixed: append($images-prefixed, $gradient, comma);
}
// If variable is a string - Image
@else if $type == string {
$images-prefixed: join($images-prefixed, nth($images, $i), comma);
}
}
@return $images-prefixed;
}
@function render-gradients($gradients, $gradient-type, $vendor: false) {
$vendor-gradients: false;
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
}
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}
//Examples:
//@include background-image(linear-gradient(top, orange, red));
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
//@include background-image(url("/images/a.png"), linear-gradient(orange, red));
//@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
//@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
sass/bourbon/css3/_background-size.scss 0 → 100644
@mixin background-size ($length-1,
$length-2: false, $length-3: false,
$length-4: false, $length-5: false,
$length-6: false, $length-7: false,
$length-8: false, $length-9: false)
{
$full: compact($length-1, $length-2, $length-3, $length-4,
$length-5, $length-6, $length-7, $length-8, $length-9);
-webkit-background-size: $full;
-moz-background-size: $full;
-ms-background-size: $full;
-o-background-size: $full;
background-size: $full;
}
sass/bourbon/css3/_border-image.scss 0 → 100644
@mixin border-image ($image) {
-webkit-border-image: $image;
-moz-border-image: $image;
-ms-border-image: $image;
-o-border-image: $image;
border-image: $image;
}
sass/bourbon/css3/_border-radius.scss 0 → 100644
@mixin border-radius ($radii) {
-webkit-border-radius: $radii;
-moz-border-radius: $radii;
-ms-border-radius: $radii;
-o-border-radius: $radii;
border-radius: $radii;
}
@mixin border-top-left-radius($radii) {
-webkit-border-top-left-radius: $radii;
-moz-border-top-left-radius: $radii;
-ms-border-top-left-radius: $radii;
-o-border-top-left-radius: $radii;
border-top-left-radius: $radii;
}
@mixin border-top-right-radius($radii) {
-webkit-border-top-right-radius: $radii;
-moz-border-top-right-radius: $radii;
-ms-border-top-right-radius: $radii;
-o-border-top-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-left-radius($radii) {
-webkit-border-bottom-left-radius: $radii;
-moz-border-bottom-left-radius: $radii;
-ms-border-bottom-left-radius: $radii;
-o-border-bottom-left-radius: $radii;
border-bottom-left-radius: $radii;
}
@mixin border-bottom-right-radius($radii) {
-webkit-border-bottom-right-radius: $radii;
-moz-border-bottom-right-radius: $radii;
-ms-border-bottom-right-radius: $radii;
-o-border-bottom-right-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-top-radius($radii) {
@include border-top-left-radius($radii);
@include border-top-right-radius($radii);
}
@mixin border-right-radius($radii) {
@include border-top-right-radius($radii);
@include border-bottom-right-radius($radii);
}
@mixin border-bottom-radius($radii) {
@include border-bottom-left-radius($radii);
@include border-bottom-right-radius($radii);
}
@mixin border-left-radius($radii) {
@include border-top-left-radius($radii);
@include border-bottom-left-radius($radii);
}
sass/bourbon/css3/_box-shadow.scss 0 → 100644
// Box-Shadow Mixin Requires Sass v3.1.1+
@mixin box-shadow ($shadow-1,
$shadow-2: false, $shadow-3: false,
$shadow-4: false, $shadow-5: false,
$shadow-6: false, $shadow-7: false,
$shadow-8: false, $shadow-9: false)
{
$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
$shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
-ms-box-shadow: $full;
-o-box-shadow: $full;
box-shadow: $full;
}
sass/bourbon/css3/_box-sizing.scss 0 → 100644
@mixin box-sizing ($box) {
// content-box | border-box | inherit
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
-ms-box-sizing: $box;
-o-box-sizing: $box;
box-sizing: $box;
}
sass/bourbon/css3/_columns.scss 0 → 100644
@mixin columns($arg: auto) {
// <column-count> || <column-width>
-webkit-columns: $arg;
-moz-columns: $arg;
columns: $arg;
}
@mixin column-count($int: auto) {
// auto || integer
-webkit-column-count: $int;
-moz-column-count: $int;
column-count: $int;
}
@mixin column-gap($length: normal) {
// normal || length
-webkit-column-gap: $length;
-moz-column-gap: $length;
column-gap: $length;
}
@mixin column-fill($arg: auto) {
// auto || length
-webkit-columns-fill: $arg;
-moz-columns-fill: $arg;
columns-fill: $arg;
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
-webkit-column-rule: $arg;
-moz-column-rule: $arg;
column-rule: $arg;
}
@mixin column-rule-color($color) {
-webkit-column-rule-color: $color;
-moz-column-rule-color: $color;
column-rule-color: $color;
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-webkit-column-rule-style: $style;
-moz-column-rule-style: $style;
column-rule-style: $style;
}
@mixin column-rule-width ($width: none) {
-webkit-column-rule-width: $width;
-moz-column-rule-width: $width;
column-rule-width: $width;
}
@mixin column-span($arg: none) {
// none || all
-webkit-column-span: $arg;
-moz-column-span: $arg;
column-span: $arg;
}
@mixin column-width($length: auto) {
// auto || length
-webkit-column-width: $length;
-moz-column-width: $length;
column-width: $length;
}
sass/bourbon/css3/_flex-box.scss 0 → 100644
// CSS3 Flexible Box Model and property defaults
// Custom shorthand notation for flexbox
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
@include display-box;
@include box-orient($orient);
@include box-pack($pack);
@include box-align($align);
}
@mixin display-box {
display: -webkit-box;
display: -moz-box;
display: box;
}
@mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit
-webkit-box-orient: $orient;
-moz-box-orient: $orient;
box-orient: $orient;
}
@mixin box-pack($pack: start) {
// start|end|center|justify
-webkit-box-pack: $pack;
-moz-box-pack: $pack;
box-pack: $pack;
}
@mixin box-align($align: stretch) {
// start|end|center|baseline|stretch
-webkit-box-align: $align;
-moz-box-align: $align;
box-align: $align;
}
@mixin box-direction($direction: normal) {
// normal|reverse|inherit
-webkit-box-direction: $direction;
-moz-box-direction: $direction;
box-direction: $direction;
}
@mixin box-lines($lines: single) {
// single|multiple
-webkit-box-lines: $lines;
-moz-box-lines: $lines;
box-lines: $lines;
}
@mixin box-ordinal-group($integer: 1) {
-webkit-box-ordinal-group: $integer;
-moz-box-ordinal-group: $integer;
box-ordinal-group: $integer;
}
@mixin box-flex($value: 0.0) {
-webkit-box-flex: $value;
-moz-box-flex: $value;
box-flex: $value;
}
@mixin box-flex-group($integer: 1) {
-webkit-box-flex-group: $integer;
-moz-box-flex-group: $integer;
box-flex-group: $integer;
}
sass/bourbon/css3/_inline-block.scss 0 → 100644
// Legacy support for inline-block in IE7 (maybe IE6)
@mixin inline-block {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
}
sass/bourbon/css3/_linear-gradient.scss 0 → 100644
@mixin linear-gradient($pos, $G1, $G2: false,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: top; // Default position
}
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
background-color: nth($G1, 1);
background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full);
background-image: -ms-linear-gradient($pos, $full);
background-image: -o-linear-gradient($pos, $full);
background-image: unquote("linear-gradient(#{$pos}, #{$full})");
}
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
// @include linear-gradient(#1e5799, #2989d8);
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
sass/bourbon/css3/_radial-gradient.scss 0 → 100644
// Requires Sass 3.1+
@mixin radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
background-color: nth($G1, 1);
background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
background-image: -webkit-radial-gradient($pos, $shape-size, $full);
background-image: -moz-radial-gradient($pos, $shape-size, $full);
background-image: -ms-radial-gradient($pos, $shape-size, $full);
background-image: -o-radial-gradient($pos, $shape-size, $full);
background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
}
// Usage: Gradient position and shape-size are required. Color stops are optional.
// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
sass/bourbon/css3/_transform.scss 0 → 100644
@mixin transform($property: none) {
// none | <transform-function>
-webkit-transform: $property;
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
-webkit-transform-origin: $axes;
-moz-transform-origin: $axes;
-ms-transform-origin: $axes;
-o-transform-origin: $axes;
transform-origin: $axes;
}
sass/bourbon/css3/_transition.scss 0 → 100644
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all, 2.0s, ease-in-out);
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
// Detect # of args passed into each variable
$length-of-property: length($property);
$length-of-duration: length($duration);
$length-of-timing-function: length($timing-function);
$length-of-delay: length($delay);
@if $length-of-property > 1 {
@include transition-property(zip($property)); }
@else {
@include transition-property( $property);
}
@if $length-of-duration > 1 {
@include transition-duration(zip($duration)); }
@else {
@include transition-duration( $duration);
}
@if $length-of-timing-function > 1 {
@include transition-timing-function(zip($timing-function)); }
@else {
@include transition-timing-function( $timing-function);
}
@if $length-of-delay > 1 {
@include transition-delay(zip($delay)); }
@else {
@include transition-delay( $delay);
}
}
@mixin transition-property ($prop-1: all,
$prop-2: false, $prop-3: false,
$prop-4: false, $prop-5: false,
$prop-6: false, $prop-7: false,
$prop-8: false, $prop-9: false)
{
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
-webkit-transition-property: $full;
-moz-transition-property: $full;
-ms-transition-property: $full;
-o-transition-property: $full;
transition-property: $full;
}
@mixin transition-duration ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
-webkit-transition-duration: $full;
-moz-transition-duration: $full;
-ms-transition-duration: $full;
-o-transition-duration: $full;
transition-duration: $full;
}
@mixin transition-timing-function ($motion-1: ease,
$motion-2: false, $motion-3: false,
$motion-4: false, $motion-5: false,
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
$motion-6, $motion-7, $motion-8, $motion-9);
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-webkit-transition-timing-function: $full;
-moz-transition-timing-function: $full;
-ms-transition-timing-function: $full;
-o-transition-timing-function: $full;
transition-timing-function: $full;
}
@mixin transition-delay ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
-webkit-transition-delay: $full;
-moz-transition-delay: $full;
-ms-transition-delay: $full;
-o-transition-delay: $full;
transition-delay: $full;
}
sass/bourbon/functions/_deprecated-webkit-gradient.scss 0 → 100644
// Render Deprecated Webkit Gradient - Linear || Radial
//************************************************************************//
@function deprecated-webkit-gradient($type, $full) {
$gradient-list: ();
$gradient: false;
$full-length: length($full);
$percentage: false;
$gradient-type: $type;
@for $i from 1 through $full-length {
$gradient: nth($full, $i);
@if length($gradient) == 2 {
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
$gradient-list: join($gradient-list, $color-stop, comma);
}
@else {
@if $i == $full-length {
$percentage: 100%;
}
@else {
$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
}
$color-stop: color-stop(unquote($percentage), $gradient);
$gradient-list: join($gradient-list, $color-stop, comma);
}
}
@if $type == radial {
$gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
}
@else if $type == linear {
$gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
}
@return $gradient;
}
sass/bourbon/functions/_golden-ratio.scss 0 → 100644
@function golden-ratio($value, $increment) {
@if $increment > 0 {
@for $i from 1 through $increment {
$value: ($value * 1.618);
}
}
@if $increment < 0 {
$increment: abs($increment);
@for $i from 1 through $increment {
$value: ($value / 1.618);
}
}
@return $value;
}
// div {
// Increment Up GR with positive value
// font-size: golden-ratio(14px, 1); // returns: 22.652px
//
// Increment Down GR with negative value
// font-size: golden-ratio(14px, -1); // returns: 8.653px
//
// Can be used with ceil(round up) or floor(round down)
// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
// }
//
// modularscale.com
// goldenratiocalculator.com
sass/bourbon/functions/_grid-width.scss 0 → 100644
@function grid-width($n) {
@return $n * $gw-column + ($n - 1) * $gw-gutter;
}
// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
//
// $gw-column: 100px; // Column Width
// $gw-gutter: 40px; // Gutter Width
//
// div {
// width: grid-width(4); // returns 520px;
// margin-left: $gw-gutter; // returns 40px;
// }
sass/bourbon/functions/_linear-gradient.scss 0 → 100644
@function linear-gradient($pos: top, $G1: false, $G2: false,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: top; // Default position
}
$type: linear;
$gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
$type-gradient: append($type, $gradient, comma);
@return $type-gradient;
}
sass/bourbon/functions/_radial-gradient.scss 0 → 100644
// This function is required and used by the background-image mixin.
@function radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
$type: radial;
$gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
$type-gradient: append($type, $gradient, comma);
@return $type-gradient;
}
sass/bourbon/functions/_tint-shade.scss 0 → 100644
// Add percentage of white to a color
@function tint($color, $percent){
@return mix(white, $color, $percent);
}
// Add percentage of black to a color
@function shade($color, $percent){
@return mix(black, $color, $percent);
}
sass/reademe.md 0 → 100644
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment