Commit 7954f9d4 by Calen Pennington

Merge remote-tracking branch 'templates/pmitros-name-change' into pmitros-name-change

parents 6c9b8e72 2f0b3918
File added
*.pyc
*~
*.scssc
*.swp
*.orig
*.DS_Store
#*
.#*
\ No newline at end of file
syntax: glob
*.pyc
*~
*.scssc
*.swp
*.orig
*.DS_Store
#*
.#*
\ No newline at end of file
<%inherit file="main.html" />
<section class="activation">
<h1>Page not found</h1>
<p>The page that you were looking for was not found. Go back to the <a href="/">homepage</a> or let us know about any pages that may have been moved at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a>.</p>
</section>
<%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage">
<div>
<h1> <i>MITx</i> prototype course opens for enrollment&mdash;Online-learning
initiative&rsquo;s first offering, &lsquo;6.002x: Circuits and
Electronics,&rsquo; accepting registrants now.</h1>
<p> MIT News Office</p>
<p> In December,
MIT <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html">announced </a>the
launch of an online learning initiative called &ldquo;<i>MITx</i>.&rdquo;
Starting this week, interested learners can now enroll for free in the
initiative&rdquo;s prototype course -- 6.002x: Circuits and
Electronics.</p>
<p>Students can sign up for the course
at <a href="http://mitx.mit.edu">mitx.mit.edu</a>. The course will
officially begin on March 5 and run through June 8.</p>
<p> Modeled after MIT&rsquo;s 6.002 &mdash; an introductory course for
undergraduate students in MIT&rsquo;s Department of Electrical
Engineering and Computer Science (EECS) &mdash; 6.002x will introduce
engineering in the context of the lumped circuit abstraction, helping
students make the transition from physics to the fields of electrical
engineering and computer science. It will be taught by Anant Agarwal,
EECS professor and director of MIT's Computer Science and
Artificial Intelligence Laboratory (CSAIL); Chris Terman, CSAIL
co-director; EECS Professor Gerald Sussman; and CSAIL Research
Scientist Piotr Mitros.</p>
<blockquote>
<p>
&ldquo;We are very excited to begin <i>MITx</i> with this prototype
class,&rdquo; says MIT Provost L. Rafael Reif. &ldquo;We will use
this prototype course to optimize the tools we have built by
soliciting and acting on feedback from learners.&rdquo;
</p>
</blockquote>
<p>
To access the course, registered students will log in
at <a href="http://mitx.mit.edu">mitx.mit.edu</a>, where they will
find a course schedule, an e-textbook for the course, and a discussion
board. Each week, students will watch video lectures and
demonstrations, work with practice exercises, complete homework
assignments, and participate in an online interactive lab specifically
designed to replicate its real-world counterpart. Students will also
take exams and be able to check their grades as they progress in the
course. Overall, students can expect to spend approximately 10 hours
each week on the course.
</p>
<blockquote>
&ldquo;We invite you to join us for this pilot course of <i>MITx</i>,&rdquo;
Agarwal says. &ldquo;The 6.002x team of professors and teaching
assistants is excited to work with you on the discussion forum, and we
look forward to your feedback to improve the learning
experience.&rdquo;
</blockquote>
<p> <a href="http://mitx.mit.edu"> A video introduction to 6.002x can
be found here.</a></p>
<p> <a href="/6002x-faq.html"> A set of Frequently Asked Questions
about 6.002x can be found here.</a></p>
<p>
<a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219">
FAQs about <i>MITx</i> as a whole can be found here.
</a>
</p>
<p>
At the end of the prototype course, students who demonstrate their
mastery will be able to receive a certificate of completion for
free. In future <i>MITx</i> courses, students who complete the mastery
requirement on <i>MITx</i> will be able to receive the credential for a
modest fee.
</p>
<p>
Further courses are expected to become
available beginning in the fall.
</p>
<h3>
RELATED:
</h3>
<p>
<a href="/index.html">
6.002x course website
</a>
</p>
<p>
<a href="/6002x-faq.html">
6.002x FAQ
</a>
</p>
<h3>
ARCHIVE: &quot;MIT launches online learning initiative&quot;
</h3>
<a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html">
http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html
</a>
<h3>
<i>MITx</i> website
</h3>
<a href="http://mitx.mit.edu">
http://mitx.mit.edu
</a>
<!--h3>
TAGS:
</h3>
<p>
<i>MITx</i>; students; education, teaching, academics; innovation and
invention; faculty; mit administration; learning; electrical
engineering and computer science; csail
</p-->
</div>
</section>
<%!
from django.core.urlresolvers import reverse
%>
<%def name="make_chapter(chapter)">
<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="${reverse('courseware_section', args=format_url_params([course_name, chapter['name'], section['name']]))}">
<p>${section['name']}</p>
<p class="subtitle">
${section['format']}
% if 'due' in section and section['due']!="":
due ${section['due']}
% endif
</p>
</a>
% endfor
</ul>
</%def>
% for chapter in toc:
${make_chapter(chapter)}
% endfor
<h3><a href="#">Using the System</a></h3>
<div>
<ul>
<li> Lecture
<li> Homework
<li> Lab
</ul>
</div>
<h3><a href="#">Basic Circuit Analysis</a></h3>
<div>
<ul>
<li> Electronic Text
<li> Introduction <br><small>lecture, 50min, due Feb 1</small>
<li> KVL, KCL, and Resistive <br><small>lecture, 50min, due Feb 3</small>
<li> Nodal analysis <br><small>lecture, 50min, due Feb 5</small>
<li> <div style="background-color:#aed0ea;">Linearity, Superposition <br><small>lecture, 50min, due Feb 7</small></div>
<li> Homework 1 <br><small>due Feb 14</small>
<li> Lab 0 <br><small>due Feb 7</small>
</ul>
</div>
<h3><a href="#">Digital Systems</a></h3>
<div>
<!--ul>
<li> Lecture
<li> Homework
<li> Lab
</ul-->
</div>
<h3><a href="#">Nonlinear Elements</a></h3>
<div>
<!--ul>
<li> Lecture
<li> Homework
<li> Lab
</ul-->
</div>
<h3><a href="#">Analog Amplification</a></h3>
<div>
<!--ul>
<li> Lecture
<li> Homework
<li> Lab
</ul-->
</div>
<h3><a href="#">Capacitors and Inductors</a></h3>
<div>
<!--ul>
<li> Lecture
<li> Homework
<li> Lab
</ul-->
</div>
<h3><a href="#">Operational Amplifiers</a></h3>
<div>
<!--ul>
<li> Lecture
<li> Homework
<li> Lab
</ul-->
</div>
<h3><a href="#">Applications</a></h3>
<div>
<!--ul>
<li> Lecture
<li> Homework
<li> Lab
</ul-->
</div>
$("#accordion").accordion({
active: ${ active_chapter },
header: 'h3',
autoHeight: false,
});
$("#open_close_accordion a").click(function(){
if ($(".course-wrapper").hasClass("closed")){
$(".course-wrapper").removeClass("closed");
} else {
$(".course-wrapper").addClass("closed");
}
});
$('.ui-accordion').bind('accordionchange', function(event, ui) {
var event_data = {'newheader':ui.newHeader.text(),
'oldheader':ui.oldHeader.text()};
log_event('accordion', event_data);
});
<%inherit file="marketing.html" />
<section class="tos">
<div>
<section class="activation">
<h1>Account already active!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p> This account has already been activated. You can log in at
the <a href="/">6.002x course page</a>.</p>
</div>
</section>
<%inherit file="marketing.html" />
<section class="tos">
<div>
<h1>Activation Complete!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p>Thanks for activating your account. You can log in at the <a href="/">6.002x course page</a>.</p>
</div>
</section>
<%inherit file="marketing.html" />
<section class="tos">
<div>
<h1>Activation Invalid</h1>
<p>Something went wrong. Check to make sure the URL you went to was
correct -- e-mail programs will sometimes split it into two
lines. If you still have issues, e-mail us to let us know what happened
at <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
<p>Or you can go back to the <a href="/">6.002x course page</a>.</p>
</div>
</section>
<%inherit file="marketing.html" />
<section class="copyright">
<div>
<h1> Licensing Information </h1>
<ul>
<li>
<h2>Videos and Exercises</h2>
<p> Copyright &copy; 2012 MIT. All rights reserved. In order to
further MIT's goal of making education accessible and affordable
to the world, MIT is planning to make <i>MITx</i> course content
available under open source licenses.
</p>
</li>
<li>
<h2>Textbook</h2>
<p> Copyright &copy; 2005 Elsevier Inc. All Rights
Reserved. Used with permission. While our goal is to build
courses with as much free and open content as possible, we
apologize that we do not have the ability to do so
entirely. </p>
</li>
<li>
<h2>Student-generated content</h2>
<td>Copyright &copy; 2012. All Rights Reserved. Due to privacy
concerns, we do not know what portion of these will be released
under open licenses. </td></li>
</ul>
<p>MIT and <i>MITx</i> are trademarks of the Massachusetts Institute
of Technology, and may not be used without permission.</p>
</div>
</section>
<%inherit file="main.html" />
<%block name="js_extra">
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
<script type="text/javascript">
$(function() {
${init}
$(".sequence-nav li a").hover(function(){
$(this).siblings().toggle();
});
});
</script>
</%block>
<%include file="navigation.html" args="active_page='courseware'" />
<section class="main-content">
<div class="course-wrapper">
<section class="course-index">
<header id="open_close_accordion">
<h2>Courseware Index</h2>
<a href="#">close</a>
</header>
<div id="accordion">
${accordion}
</div>
</section>
<section class="course-content">
${content}
</section>
</div>
</section>
<!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details-->
<div name="enroll_form" id="enroll_form">
<h1>Enroll in 6.002x Circuits &amp; Electronics</h1>
<!--[if lte IE 8]>
<p class="ie-warning"> Enrollment requires a modern web browser with JavaScript enabled. You don't have this. You can&rsquo;t enroll without upgrading, since you couldn&rsquo;t take the course without upgrading. Feel free to download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a> or <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=95346">Google Chrome</a>, for free, to enroll and take this course.</p>
<![endif]-->
<form name="enroll" id="enroll_form" method="get">
<fieldset><% if 'error' in locals(): e = error %>
<div id="enroll_error" name="enroll_error"></div>
<ol>
<li class="email">
<label>E-mail*</label>
<input name="email" id="ca_email" type="email" />
</li>
<li class="password">
<label>Password*</label>
<input name="password" id="ca_password" type="password" />
</li>
<li class="username">
<label>Username (public)* <span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></span></label>
<input name="username" id="ca_username" type="text" />
<div id="sregion_nick" class="tip">Nickname you'd like to use on forums.</div>
</li>
<li class="full-name">
<label>Full name*<span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label>
<input name="name" id="ca_name" type="text" />
<div class="tip" id="sregion_name">If you successfully complete the course, you will receive an electronic certificate of accomplishment from <i>MITx</i> with this name on it.</div>
</li>
<li class="location">
<label>Location <span class="ui-icon ui-icon-help" id="spinner_location" style="display:inline-block;"></span></label>
<input name="location" id="ca_location" type="text" />
<div id="sregion_location" class="tip">Preferred format is city, state, country (so for us, &quot;Cambridge, Massachusetts, USA&quot;).</div>
</li>
<li class="language">
<label>Preferred Language <span class="ui-icon ui-icon-help" id="spinner_language" style="display:inline-block;"></span></label>
<input name="language" id="ca_language" type="text" />
<div id="sregion_language" class="tip">Please let us know what language you'd most like to see the content in (even if not your native). We're working on translations and internationalization.</div>
</li>
<li class="terms">
<label> <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" />I agree to the <a href="/t/tos.html">Terms of Service</a>*</label>
</li>
<li class="honor-code">
<label>
<input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code" />I agree to the <a href="/t/honor.html">Honor Code</a>, summarized as:*</label>
<ul>
<li>Complete all mid-terms and final exams with only my own work.</li>
<li>Maintain only one account, and not share the username or password.</li>
<li>Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others.</li>
<li>Not post answers to problems that are being used to assess student performance.</li>
</ul>
</li>
</ol>
<input name="create_account_button" id="create_account_button" type="submit" value="Create Account">
</fieldset> </form>
</div>
<div align="center">
<form onsubmit="return submit_circuit('${name}');" action="" method="post">
<!--input type="hidden" class="schematic" width="600" height="400" name="schematic" value="" /-->
${ circuit_line }
<input type="submit" value="save">
<input type="hidden" name="csrfmiddlewaretoken" id="csrfmiddlewaretoken">
</form>
</div>
Someone, hopefully you, signed up for an account for MITx's on-line
offering of 6.002 using this email address. If it was you, and you'd
like to activate and use your account, copy and paste this address
into your web browser's address bar:
http://${ site }/activate/${ key }
If you didn't request this, you don't need to do anything; you won't
receive any more email from us. Please do not reply to this e-mail; if
you require assistance, check the help section of the MITx web site.
Your account for MITx's on-line 6.002
We received a request to change the e-mail associated with MITx
account ${username} from ${old_email} to ${new_email}. If this is
correct, please confirm your new e-mail address by visiting:
http://${ site }/confirmemail/${ key }
If you didn't request this, you don't need to do anything; you won't
receive any more email from us. Please do not reply to this e-mail; if
you require assistance, check the help section of the MITx web site.
This is to confirm that you changed the e-mail associated with MITx
account ${username} from ${oldemail} to ${newemail}. If you did not
make this request, please contact the course staff
immediately. Contact information is listed at:
https://6002x.mitx.mit.edu/t/mitx_help.html
Request to change MITx account e-mail
(Not currently used)
We are sorry. Our course staff did not approve your request to change
your name from ${old_name} to ${new_name}. If you need further
assistance, please e-mail the course staff at ta@mitx.mit.edu.
MITx's prototype offering, 6.002x, is now open. To log in, visit
https://6002x.mitx.mit.edu
where you will find a login button at the top right-hand corner of the
window.
Please make sure you're using the latest version of Google Chrome or
Firefox. If you've forgotten your password, the log-in form has a
place to reset it.
Once you log in, we recommend that you start the course by reviewing
the "System Usage Sequence" in the Overview section, and the "6.002x
At-a-Glance (Calendar)" handout under the Course Info tab. After you
familiarize yourself with the various features of the MITx platform,
you can jump right into the coursework by working on "Administrivia
and Circuit Elements", the first Lecture Sequence in Week 1.
Thanks for joining us for the ride!
The 6.002x team
(Please note that this e-mail address does not receive e-mails --
if you need assistance, please use the help section of the web
site)
Feedback from: ${ user }
E-mail: ${ email }
Browser: ${ browser }
url: ${ url }
time: ${ time }
Subject: ${ subject }
Feedback:
${ feedback }
<%inherit file="main.html" />
<%include file="navigation.html" args="active_page=''" />
<section class="main-content">
<div class="gradebook-wrapper">
<section class="gradebook-content">
<h1>Gradebook</h1>
% for s in students:
<h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
% for c in s['grade_info']['grade_summary']:
<h3>${c['category']} </h3>
<p>
% if 'subscores' in c:
% for ss in c['subscores']:
<br>${ss['summary']}
% endfor
% endif
</p>
% endfor
% endfor
</section>
</div>
</section>
<%inherit file="main.html" />
<%include file="navigation.html" args="active_page='help'"/>
<section class="help main-content">
<h1>Help</h1>
<section class="self-help">
<h2>Self-help</h2>
<ul>
<li>Read
the <a href="http://mitx.mit.edu/6002x-faq.html">FAQ</a>
carefully</li>
<li>Check the <a href="/info">course updates</a> -- we will
announce major errors and issues there </li>
<li>Check whether the issues has been asked on
the <a href="/discussion">discussion forums</a>, and if not,
ask</li>
<li>Ask in the IRC channel (irc.mitx.mit.edu, channel #6002)]</li>
<li>Check the <a href="/info">course handouts.</a></li>
</ul>
</section>
<section class="help-email">
<h2>Help email</h2>
<p> If you can't solve your problems with self-help, we have several
e-mail addresses set up:</p>
<dl>
<dt>System-related questions</dt>
<dd><a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></dd>
<dt>Content-related questions</dt>
<dd><a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></dd>
<dt>Bug reports</dt>
<dd><a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></dd>
<dt>Suggestions</dt>
<dd><a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></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. For technical
questions, please make sure you are using the latest version
of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>
or <a href="https://www.google.com/chrome/">Chrome</a>, and
include browser and version in your e-mail, as well as
screenshots or other pertinent details. </p>
</section>
</section>
<h1> ${ homework['name']} Test </h1>
<ol>
% for problem in homework['problems']:
<li>
<h2>${ problem['name'] }</h2>
${ problem['html'] }
<section>
<input type="hidden" name="problem_id" value="${ problem['name'] }">
<input type="submit" value="Check">
</section>
</li>
% endfor
</ol>
<%inherit file="marketing.html" />
<section class="honor-code">
<div>
<h1> Collaboration Policy </h1>
<p> By enrolling in a course on <i>MITx</i>, you are joining a
special worldwide community of learners. The aspiration
of <i>MITx</i> is to provide anyone in the world who has the
motivation and ability to engage MIT coursework the opportunity
to attain the best MIT-based educational experience that
Internet technology enables. You are part of the community who
will help <i>MITx</i> achieve this goal.
<p> <i>MITx</i> depends upon your motivation to learn the material
and to do so with honesty. In order to participate
in <i>MITx</i>, you must agree to the Honor Code below and any
additional terms specific to a class. This Honor Code, and any
additional terms, will be posted on each class website.
<div style="color:darkred;">
<h2> <i>MITx</i> Honor Code Pledge</h2>
<p> By enrolling in an <i>MITx</i> course, I agree that I will:
<ul>
<li> Complete all mid-terms and final exams with my own work
and only my own work. I will not submit the work of any
other person.
<li> Maintain only one user account and not let anyone else
use my username and/or password.
<li> Not engage in any activity that would dishonestly improve
my results, or improve or hurt the results of others.
<li> Not post answers to problems that are being used to
assess student performance.
</ul>
</div>
<p> Unless otherwise indicated by the instructor of an <i>MITx</i>
course, learners on <i>MITx</i> are encouraged to:
<ul>
<li> Collaborate with others on the lecture videos, exercises,
homework and labs.
<li> Discuss with others general concepts and materials in
each course.
<li> Present ideas and written work to fellow <i>MITx</i>
learners or others for comment or criticism.
</ul>
</div>
</section>
<%inherit file="marketing.html" />
<%block name="title">MITx 6.002x: Circuits & Electronics</%block>
<%block name="description">6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT's first undergraduate analog design course: 6.002.</%block>
<%block name="keywords">MITx, circuits, electronics, EECS, electrical engineering, analog circuits, digital circuits, online learning, MIT, online laboratory, education, learners, undergraduate, certificate</%block>
<%block name="header_text">
<section class="course">
<section>
<h1>Circuits &amp; Electronics</h1>
<h2>6.002x</h2>
<a class="enroll" rel="leanModal" href="#enroll"><noscript>In order to</noscript> Enroll in 6.002x Circuits <span>&amp;</span> Electronics <noscript>you need to have javascript enabled</noscript></a>
</section>
<p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT&rsquo;s first undergraduate analog design course: 6.002. This course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012.</p>
</section>
</%block>
<%block name="header_class">course</%block>
<section class="index-content">
<section class="about-course">
<section class="about-info">
<h1>About 6.002x</h1>
<p>6.002x (Circuits and Electronics) is designed to serve as a first course in an undergraduate electrical engineering (EE), or electrical engineering and computer science (EECS) curriculum. At MIT, 6.002 is in the core of department subjects required for all undergraduates in EECS.</p>
<p>The course introduces engineering in the context of the lumped circuit abstraction. Topics covered include: resistive elements and networks; independent and dependent sources; switches and MOS transistors; digital abstraction; amplifiers; energy storage elements; dynamics of first- and second-order networks; design in the time and frequency domains; and analog and digital circuits and applications. Design and lab exercises are also significant components of the course. You should expect to spend approximately 10 hours per week on the course.</p>
</section>
<section class="on-mitx">
<h1>6.002x on <em>MITx</em></h1> <!-- Link doesn't need to be here, but there should be some way to get back to main MITx site -->
<p>If you successfully complete the course, you will receive an electronic certificate of accomplishment from <em>MITx</em>. This certificate will indicate that you earned it from <em>MITx&rsquo;s</em> pilot course. In this prototype version, <em>MITx</em> will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.</p>
<p>The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005. While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on <a href="http://www.amazon.com/exec/obidos/ASIN/1558607358/ref=nosim/mitopencourse-20" target="_blank">Amazon</a>.</p>
</section>
<section class="requirements">
<h1> Requirements </h1>
<p>In order to succeed in this course, you must have taken an AP level physics course in electricity and magnetism. You must know basic calculus and linear algebra and have some background in 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 those who need it.</p>
<p>The course web site was developed and tested primarily with
Google Chrome. We support current versions of Mozilla Firefox as
well. The video player is designed to work with Flash. While we
provide a partial non-Flash fallback for the video, as well as
partial support for Internet Explorer, other browsers, and
tablets, portions of the functionality will be unavailable. </p>
</section>
<section class="cta">
<a class="enroll" rel="leanModal" href="#enroll"><noscript>In order to</noscript> Enroll in 6.002x Circuits &amp; Electronics <noscript>you need to have javascript enabled</noscript></a>
</section>
</section>
<section class="staff">
<h1>About the course staff</h1>
<ul>
<li>
<img src="/static/staff/agarwal-mit-news-small.jpg" alt="Anant Agarwal">
<h2>Anant Agarwal</h2>
<p>Director of MIT&rsquo;s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT&rsquo;s Smullin and Jamieson prizes for teaching and co-authored the course textbook &ldquo;Foundations of Analog and Digital Electronic Circuits.&rdquo;</p></li>
<li>
<img src="/static/staff/gjs-small.jpg" alt="Gerald Sussman">
<h2>Gerald Sussman</h2>
<p>Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.</p></li>
<li>
<img src="/static/staff/pmitros-small.jpg" alt="Piotr Mitros">
<h2>Piotr Mitros</h2>
<p>Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.</p></li>
</ul>
</section>
</section>
<div id="enroll" class="leanModal_box" name="enroll"><%include file="create_account.html" /></div>
<script>
$(function() {
// 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. */
$('form#enroll_form').submit(function(e) {
e.preventDefault();
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).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
}
}
);
});
/* 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>
<%inherit file="main.html" />
<%include file="navigation.html" args="active_page='info'" />
<section class="main-content">
<div class="info-wrapper">
<section class="updates">
<%include file="updates.html" />
</section>
<section class="handouts">
<%include file="handouts.html" />
</section>
</div>
</section>
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
<div id="login_div">
<header>
<h1>Log in to MITx</h1>
<p class="no-account">If you don&rsquo;t have an account yet, <a href="#enroll" rel="leanModal">please enroll here</a></p>
</header>
<!--[if lte IE 9]>
<p class="ie-warning">You are using a browser that is not supported by <em>MITx</em>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
<![endif]-->
<form id="login_form" method="post">
<ol>
<li>
<label>E-mail*</label>
<input name="email" id="li_email" type="email" required>
</li>
<li>
<label>Password*</label>
<input name="password" id="li_password" type="password" required>
</li>
<li class="remember">
<label><input name="remember" id="remember" type="checkbox">Remember me</label>
</li>
</ol>
<input name="submit" id="login_button" type="submit" value="Log in">
</form>
<div class="lost-password">
<div id="lost_password"><a class="" rel="leanModal" href="#pwd_reset">Lost password?</a></div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<%block name="title"><title>MITx 6.002x</title></%block>
<link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
<script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="${ settings.LIB_URL }jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="${ settings.LIB_URL }swfobject/swfobject.js"></script>
<!--[if lt IE 9]>
<script src="/static/js/html5shiv.js"></script>
<![endif]-->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["\\(","\\)"]],
displayMath: [["\\[","\\]"]]}
});
</script>
<script type="text/javascript" src="${ settings.LIB_URL }mathjax-MathJax-c9db6ac/MathJax.js?config=TeX-AMS_HTML-full"></script>
<%block name="headextra"/>
</head>
<body class="<%block name="bodyclass"/>">
<!--[if lte IE 9]>
<p class="ie-warning">You are using a browser that is not supported by <em>MITx</em>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
<![endif]-->
${self.body()}
<%block name="bodyextra"/>
<footer>
<!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
<p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
</p>
<nav>
<ul class="social">
<li class="linkedin">
<a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
</li>
<li class="twitter">
<a href="https://twitter.com/#!/MyMITx">Twitter</a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
</li>
</ul>
<ul>
<li><a href="#feedback_div" rel="leanModal">Feedback</a></li>
<li><a href="#calculator_div" rel="leanModal">Calculator</a></li>
<li><a href="/s/help.html">Help</a></li>
<li><a href="/logout">Log out</a></li>
</ul>
</nav>
</footer>
<div id="feedback_div" class="leanModal_box">
<p>Found a bug? Got an idea for improving our system? Let us know.</p>
<form>
<ol>
<li><label>Subject:</label> <input type="text" id="feedback_subject"></li>
<li><label>Feedback: </label><textarea id="feedback_message"></textarea></li>
<li><input id="feedback_button" type="button" value="Submit"></li>
</ol>
</form>
</div>
<div id="calculator_div" class="leanModal_box">
<form id="calculator">
<input type="text" id="calculator_input">
<input id="calculator_button" type="submit" value="=">
<input type="text" id="calculator_output" readonly>
</form>
<dl>
<dt>Suffixes:</dt>
<dd> %kMGTcmunp</dd>
<dt>Operations:</dt>
<dd>^ * / + - ()</dd>
<dt>Functions:</dt>
<dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
<dt>Constants</dt>
<dd>e, pi</dd>
<!-- Students won't know what parallel means at this time. Complex numbers aren't well tested in the courseware, so we would prefer to not expose them. If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
<dt>Unsupported:</dt> <dd>||, j </dd> -->
</dl>
</div>
<script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/video_player.js"></script>
<script type="text/javascript" src="/static/js/schematic.js"></script>
<script type="text/javascript" src="/static/js/cktsim.js"></script>
<script>
// Feedback form
$(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");
});
});
});
// Calculator
$(function() {
$("form#calculator").submit(function(e){
e.preventDefault();
$.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
function(data){
$("#calculator_output").attr("value",data.result);
});
});
});
$(function(){
$("a[rel*=leanModal]").leanModal();
});
</script>
<%block name="js_extra"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title><%block name="title">MITx: MIT's new online learning initiative</%block></title>
<meta name="description" content="<%block name="description">MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world</%block>" />
<meta name="keywords" content="<%block name="keywords">MITx, online learning, MIT, online laboratory, education, learners, undergraduate, certificate</%block>" />
<!--link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /-->
<link rel="stylesheet" href="/static/css/marketing.css" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--[if lt IE 8]>
<link rel="stylesheet" href="/static/css/marketing-ie.css" type="text/css" media="all" />
<![endif]-->
<script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="${ settings.LIB_URL }jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
<!--script type="text/javascript" src="${ settings.LIB_URL }swfobject/swfobject.js"></script-->
<!--script type="text/javascript" src="${ settings.LIB_URL }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> -->
<script src="/static/js/html5shiv.js"></script>
<%block name="headextra"/>
<script type="text/javascript">
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function postJSON(url, data, callback) {
$.ajax({type:'POST',
url: url,
dataType: 'json',
data: data,
success: callback,
headers : {'X-CSRFToken':getCookie('csrftoken')}
});
}
</script>
</head>
<body>
<%block name="header">
<header class="announcement <%block name="header_class"/>">
<div class="anouncement-wrapper">
<%block name="header_nav">
<nav>
<h1><a href="http://mitx.mit.edu/">MITx</a></h1>
% if settings.COURSEWARE_ENABLED:
<%block name="login_area">
<a rel="leanModal" class="login" href="#login">Log In</a>
</%block>
% endif
</nav>
</%block>
<%block name="header_text">
<section>
<h1><em>MITx</em></h1>
<h2>MIT&rsquo;s new online learning initiative</h2>
</section>
</%block>
</div>
</header>
</%block>
${self.body()}
<%block name="bodyextra"/>
<footer>
<div class="footer-wrapper">
<p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a></p>
<ul>
<li><a href="/t/tos.html">Terms of Service</a></li>
<li><a href="/t/privacy.html">Privacy Policy</a></li>
<li><a href="/t/honor.html">Honor Code</a></li>
<li><a href="/t/mitx_help.html">Help</a></li>
</ul>
<ul class="social">
<li class="linkedin">
<a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
</li>
<li class="twitter">
<a href="https://twitter.com/#!/MyMITx">Twitter</a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
</li>
</ul>
</div>
</footer>
% if settings.COURSEWARE_ENABLED:
<div id="login" class="leanModal_box"><%include file="login.html" /></div>
% endif
<div id="pwd_reset" class="leanModal_box"><%include file="password_reset_form.html" /></div>
<div id="reset_done" class="leanModal_box"></div>
<script>
$(document).ready(function(){
/* Handles when the user tries to log in. Grabs form data. Does AJAX.
Either shows error, or redirects. */
$('form#login_form').submit(function(e) {
e.preventDefault();
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="/info";
} else if($('#login_error').length == 0) {
$('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
} else {
$('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
}
}
);
});
$('form#pwd_reset_form').submit(function(e) {
e.preventDefault();
var submit_data = {};
submit_data['email'] = $('#id_email').val();
postJSON('/password_reset/',
submit_data,
function(json){
if (json.success) {
$('#pwd_reset').html(json.value);
} else {
$('#pwd_error').html(json.error).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
}
}
);
});
});
$(function(){
$("a[rel*=leanModal]").leanModal();
$("a.login").click(function(){
$("#login_form #li_email").focus();
});
$("a.enroll").click(function(){
$("#enroll_form #ca_email").focus();
});
});
</script>
<%block name="js_extra"/>
</body>
</html>
<%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage">
<div>
<h1> <i>MITx</i> Advances MIT&rsquo;s Vision for Online Learning</h1>
<p> Education has entered an era of rapid, exciting,
technology-enabled change. At MIT, we welcome the opportunity to
harness the power of on-line technology for our students and for the
world. On December 19, 2011, we announced <i>MITx</i>, an initiative to
offer exciting, challenging and enriching courses to anyone,
anywhere, who has the motivation and ability to engage MIT&rsquo;s
educational content.</p>
<p> Ten years ago, MIT
launched <a href="http://ocw.mit.edu/index.htm">OpenCourseWare</a>,
which places online the course materials for substantially the entire
MIT curriculum, and was the genesis of today&rsquo;s worldwide
movement in free, open educational resources. <i>MITx</i> is the next step
in opening MIT&rsquo;s educational doors to the world. Through OCW and
<i>MITx</i>, MIT invites the world to join it in the passion, hard work and
thrill of learning and discovery.</p>
<h2><i>MITx</i> will e-publish interactive online courses that:</h2>
<ul>
<li>Empower students to learn at their own pace;</li>
<li>Offer online laboratories where students can experiment and apply their learning;</li>
<li>Connect students to each other in online discussion groups and wiki-based collaborative learning; </li>
<li>Challenge learners with MIT-rigor course materials; and</li>
<li>Assess individual student learning as the student progresses through the course.</li>
</ul>
<p> <i>MITx</i> students who demonstrate their mastery of a subject can earn
a certificate of completion awarded by <i>MITx</i>.</p>
<p> <i>MITx</i> courses will be available to the world through an Internet
platform that MIT will make freely available. MIT hopes that other
educational institutions, anywhere in the world, will adapt and use
the platform to publish their own educational content online for the
benefit of learners. Because the platform will be open-source and
scalable, adopters and users can continuously improve it, for the
benefit of everyone.</p>
<h2> Why Is MIT Creating <i>MITx</i>?</h2>
<p> Excellence in teaching and learning. MIT must always provide its
students the very best teaching and learning tools possible. MIT
began experimenting with online technologies in its educational
programs long before we launched OCW in 2001. We have only increased
our emphasis in recent years, as several MIT committees have studied
how MIT might enhance the learning experience of its students and
expand its impact worldwide through new online offerings.</p>
<p> These efforts, combined with those of numerous individual MIT
faculty members, confirmed MIT&rsquo;s conviction that digital
technologies enrich learning. Many other innovative institutions and
enterprises believe the same and are bringing creative online
offerings forward. Having brain-stormed, investigated and studied,
we were ready to act and eager to start. We announced our <i>MITx</i>
aspiration to capture and encourage the energy of our faculty in
creating new online teaching and learning tools. </p>
<p> Once up and running, <i>MITx</i> will be a laboratory for online
learning. Whether <i>MITx</i> learners are MIT&rsquo;s on-campus students,
university students elsewhere, or independent learners, <i>MITx</i> will help
us understand how online learning occurs and how virtual communities
of learners assemble -- information that in turn will allow us to
improve both <i>MITx</i> and our on-campus teaching. </p>
<p> Access to higher education. <i>MITx</i> will help shatter barriers to
education. The constraints of MIT&rsquo;s physical campus allow us to
admit less than 10 percent of our undergraduate applicants. We teach
on-campus only a tiny fraction of the people in the world with the
ability and motivation to learn MIT content. Online technology
provides a new and different portal into MIT-quality education.
Through <i>MITx</i>, MIT educational content can reach, augment, and enrich
the education and livelihood of many learners who cannot attend
MIT. </p>
<p> <i>MITx</i> does not provide a full MIT education. Our residential
campus is the heart of MIT&rsquo;s knowledge creation and
dissemination. MIT students enjoy a comprehensive curriculum and
distinct educational environment. Without MIT, there would be no
<i>MITx</i>. </p>
<p> Advancing the public good. <i>MITx</i> is an opportunity to help
preserve and expand higher education as a public good. Historically,
the investment of public and private assets in enormous amounts has
produced the public benefits of knowledge creation and dissemination,
leading to capable citizens, innovation, job creation, economic
development, and broader welfare.</p>
<p> Today, as computation and Internet technologies enable higher
education to migrate online, MIT sees the opportunity to democratize
education with unprecedented efficiency and scalability. We possess a
strong desire and feel a compelling obligation to offer a
not-for-profit, mission-driven, open-technology approach to online
learning. <i>MITx</i> is our contribution. </p>
</div>
</section>
<%inherit file="marketing.html" />
<%block name="header_class">home</%block>
<section class="index-content">
<section class="about">
<section class="intro">
<section class="intro-text">
<p><em>MITx</em> will offer a portfolio of MIT courses for free to a virtual community of learners around the world. It will also enhance the educational experience of its on-campus students, offering them online tools that supplement and enrich their classroom and laboratory experiences.</p>
<p>The first <em>MITx</em> course, 6.002x (Circuits and Electronics), will be launched in an experimental prototype form. Watch this space for further upcoming courses, which will become available in Fall 2012.</p>
</section>
<section class="intro-video">
<a id="video-overlay-link" rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" id="video-img" alt="Link to MITx introduction video" /><span> Watch intro video</span></a>
</section>
</section>
<section class="features">
<h2><em>MIT<span>x</span></em> courses will be offered on an online learning platform that:</h2>
<ul>
<li>organizes and presents course material to enable students to learn worldwide</li>
<li>features interactive instruction, online laboratories and student-to-student and student-to-professor communication</li>
<li>allows for the individual assessment of any student&rsquo;s work and allows students who demonstrate their mastery of subjects to earn certificates awarded by <em>MITx</em></li>
<li>operates on an open-source, scalable software infrastructure in order to make it continuously improving and readily available to other educational institutions, such as universities and K-12 school systems.</li>
</ul>
<p><strong>Press &amp; links:</strong> <a href="/6002x-press-release.html">6.002x Press Release</a>, <a href="/6002x-faq.html">6.002x FAQ</a>, <a href="/mitx-overview.html">MITx overview</a>, <a href="http://www.boston.com/news/local/massachusetts/articles/2011/12/19/mit_to_launch_online_only_graded_courses_free_to_all/?page=full" target="_blank">Boston Globe</a>, <a href="http://www.nytimes.com/2011/12/19/education/mit-expands-free-online-courses-offering-certificates.html?_r=3&hpw=" target="_blank">New York Times</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html" target="_blank">MIT Press Release</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219" target="_blank"><em>MITx</em> FAQ</a>, <a href="http://ocw.mit.edu/index.htm" target="_blank">OpenCourseWare</a></p>
</section>
</section>
<section class="course">
<hgroup>
<h1>Spring 2012 Course offering</h1>
<h2>Circuits and Electronics</h2>
<h3>6.002x</h3>
</hgroup>
<p>
<a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll <span class="arrow">&#8227;</span></a>
</p>
<p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
</section>
</section>
<div id="video-overlay" class="leanModal_box">
<iframe id="player" type="text/html" width="560" height="390" src="http://www.youtube.com/embed/p2Q6BrNhdh8?enablejsapi=1" frameborder="0">
</iframe>
</div>
<%block name="js_extra">
<script>
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
});
}
$(function() {
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
$("a#video-overlay-link").click(function(){
player.playVideo();
$("a.modal_close, #lean_overlay").click(function(){
player.pauseVideo();
});
});
// 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);
}
}
);
});
/* 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>
</%block>
<%inherit file="marketing.html" />
<section class="tos">
<div>
<section class="help-email">
<h2>Help &amp; Feedback</h2>
<p> If run into problems signing up for the web site which you
cannot resolve on your own, please check
the <a href="http://mitx.mit.edu/6002x-faq.html">Frequently
Asked Questions</a>. If you find a bug or other issues, you can
reach us at:</p>
<dl>
<dt>System-related questions</dt>
<dd><a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> -- For technical questions, please make sure you are using a current version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome/">Chrome</a>, and include browser and version in your e-mail, as well as screenshots or other pertinent details. </dd>
<dt>Content-related questions</dt>
<dd><a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></dd>
<dt>Bug reports</dt>
<dd><a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></dd>
<dt>Suggestions</dt>
<dd><a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></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>
</div>
</section>
<%inherit file="main.html" />
<%include file="navigation.html" args="active_page=''" />
<section class="main-content">
<div class="gradebook-wrapper">
<section class="gradebook-content">
<h1>Pending name changes</h1>
<table>
% for s in students:
<tr><td><a href=/profile/${s.uid}/>${s.oldname}</td><td>${s.newname}</td><td onclick="update({$s.uid});">[Change]</td></tr>
% endfor
</table>
</section>
</div>
</section>
<%page args="active_page" />
<div class="header-wrapper">
<header>
<hgroup>
<h1><em>MITx</em></h1>
<h2><a href="/courseware">Circuits and Electronics</a></h2>
</hgroup>
<nav class="${active_page}">
<ul class="coursenav">
<li class="courseware"><a href="/courseware">Courseware</a></li>
<li class="info"><a href="/info">Course Info</a></li>
<li class="book"><a href="/book">Textbook</a></li>
<li class="discussion"><a href="/discussion/questions">Discussion</a></li>
<li class="wiki"><a href="/wiki/view">Wiki</a></li>
<li class="profile"><a href="/profile">Profile</a></li>
</ul>
</nav>
</header>
</div>
<h1>Password reset</h1>
<p>Forgotten your password? Enter your e-mail address below, and we'll e-mail instructions for setting a new one.</p>
<form id="pwd_reset_form">
<div id="pwd_error"></div>
<label for="id_email">E-mail address:</label>
<input id="id_email" type="email" name="email" maxlength="75" />
<input type="submit" id="pwd_reset_button" value="Reset my password" />
</form>
<%inherit file="marketing.html" />
<section class="privacy-policy">
<div>
<h1>Privacy Policy</h1>
<h2>Confidentiality &amp; Security of Personally
Identifiable Information</h2>
<p>We care about the confidentiality and security of your personal
information. We will use commercially reasonable efforts to keep your
Personally Identifiable Information private and will not share it with third
parties, except as set forth in this Privacy Policy. However, no method of
transmitting or storing electronic data is ever completely secure, and we
cannot guarantee that such information will never be accessed, used, or
released in a manner that is inconsistent with this policy. </p>
<p>This Privacy Policy only applies to information that we collect
through the Site and does not apply to information that we may collect
from you in other ways (for example, this policy does not apply to
information that you may provide to us over the phone, by fax or
through conventional mail). In addition, please note your educational
records are protected by the Family Educational Rights and Privacy Act
(&quot;FERPA&quot;) to the extent FERPA applies.</p>
<h2>Usernames and Postings </h2>
<p>Comments or other information posted by you to our forums,
wikis, or other areas of the Site designed for public communications may be
viewed and downloaded by others who visit the Site. For this reason, we
encourage you to use an anonymous username, and to not post any personally
identifiable information to those forums (or other public areas).</p>
<h2>What You Consent to by Using Our Site</h2>
<p>Please understand that by submitting any Personally Identifiable
Information to us, you consent and agree that we may collect, use and
disclose such Personally Identifiable Information in accordance with
this Privacy Policy and our Terms of Service (&quot;TOS&quot;), and as
permitted or required by law. If you do not agree with these terms,
then please do not provide any Personally Identifiable Information to
us. As used herein, &quot;Personally Identifiable Information&quot;
means your full name, email address, your physical address (if you
provide it) and your student identification number, if applicable. If
you refuse, or if you choose not to provide us with any required
Personally Identifiable Information, we may not be able to provide you
with the services that can be offered on our Site.</p>
<h2>Information We Collect and How We Use It </h2>
<p>We collect information, including Personally Identifiable
Information, when you sign up for a User Account, participate in
online courses, send us email messages and/or participate in our
public forums. We collect information about student performance and
patterns of learning. We track information indicating, among other
things, which pages of our Site were visited, the order in which they
were visited, when they were visited, and which hyperlinks and other
user interface controls were used.</p>
<p>We may log the IP address, operating system and browser software
used by each user of the Site, and we may be able to determine from an
IP address a user's Internet Service Provider and the geographic
location of his or her point of connectivity. Various web analysis
tools are used to collect this information. Some of the information is
collected through cookies (a small text file placed on your
computer). You should be able to control how and whether cookies will
be accepted by your web browser. Most browsers offer instructions on
how to reset the browser to reject cookies in the &quot;Help&quot;
section of the toolbar. If you reject our cookies, many functions and
conveniences of this Site may not work properly.</p>
<p>Among other things, we may use the information that you provide
(including your Personally Identifiable Information) in connection
with the following:</p>
<ul>
<li>To help us improve <i>MITx</i> offerings, both individually
(e.g. by course staff when working with a student) and in
aggregate, and to individualize the experience and to evaluate
the access and use of the Site and the impact of <i>MITx</i> on
the worldwide educational community.
</li>
<li>For purposes of scientific research, particularly, for
example, in the areas of cognitive science and education. </li>
<li>For the purpose for which you specifically provided
the personal information, for example to respond to a specific inquiry or
provide you the specific course and/or services you select. </li>
<li>To track both individual and aggregate attendance,
progress and completion of an online course, and to analyze statistics on
student performance and how students learn. </li>
<li>To monitor and detect violations of the Honor Code, the
Terms of Service, as well as other misuses and potential misuses of the
site. </li>
<li>To publish information gathered about <i>MITx</i>
access, use, impact, and student performance but only as non-personally
identifiable data.</li>
<li>To send you updates about online courses offered by <i>MITx</i>
or other MIT events or to send you email messages about Site maintenance
or updates.</li>
<li>To archive this information and/or use it for future
communications with you.</li>
<li>As otherwise described to you at the point of
collection. </li>
</ul>
<p> In addition to the above situations where your information may be
shared with others, there is also the possibility that <i>MITx</i>
will affiliate with other educational institutions and/or
that <i>MITx</i> will become a (or part of a) nonprofit entity
separate from MIT. In those events, the other educational
institutions and/or separate entity will have access to the
information you provide, to the extent permitted by FERPA.
<h2>Sharing with Third Parties</h2>
<p>We may share the information we collect with third parties
as follows:</p>
<ul>
<li> With service providers or
contractors that perform certain functions on our behalf, including processing
information that you provide to us on the Site, operating the Site or portions
of it, or in connection with other aspects of <i>MITx</i> services. These
service providers and contractors will be obligated to keep your information
confidential.</p>
<li> With all users and other visitors
to the Site, to the extent that you submit post comments or other information
to a portion of the Site designed for public communications. As provided in the
Terms of Service, we may provide those postings to students in future offerings
of the course, either within the context of the forums, the courseware, or
otherwise, for marketing purposes, or in any other way. If we do use your postings,
we will use them without your real name and e-mail (except with explicit
permission), but we may use your username. </p>
<li>To connect you to other users of the Site. For instance, we
may recommend specific study partners, or connect potential student
mentees and mentors. In such cases, we may use all information
collected to determine who to connect you to, but we will only connect
you by username, and not disclose your real name or e-mail address to
your contact. </p>
<li> To respond to subpoenas, court orders, or other legal process, in
response to a request for cooperation from law enforcement or another
government agency, to investigate, prevent, or take action regarding
illegal activities, suspected fraud, or to enforce our user agreement
or privacy policy, or to protect our rights or the rights of
others.</p>
<li> As otherwise described to you at the point of collection or
pursuant to your consent. For example, from time to time, we may ask
your permission to use your Personally Identifiable Information in
other ways. In the future, <i>MITx</i> may have an alumni association,
resume book, etc. We may offer services where it is possible to
verify <i>MITx</i> credentials. </p>
<li> For integration with third party services. Videos and other
content may be hosted on YouTube and other web sites not controlled
by <i>MITx</i>. We may provide links and other integration with social
networks, and other sites. Those web sites are guided by their own
privacy policies. </p>
</ul>
<h2>Personalization and Pedagogical Improvements</h2>
<p>Our goal is to provide current and future visitors with the best
possible educational experience. To further this goal, we sometimes
present different users with different versions of course materials
and software. We do this to personalize the experience to the
individual learner (assess the learner's level of ability and learning
style, and present materials best suited to the learner), to evaluate
the effectiveness of our course materials, to improve our
understanding of the learning process, and to otherwise improve the
effectiveness of our offerings. We may publish or otherwise publicize
results from this process, but only as non-personally-identifiable
data. </p>
<h2>Changing Our Privacy Policy</h2>
<p>Please note that we review our privacy practices from time to time,
and that these practices are subject to change. We will publish notice
of any such modifications online on this page for a reasonable period
of time following such modifications, and by changing the effective
date of this Privacy Policy. By continuing to access the Site after
such changes have been posted, you signify your agreement to be bound
by them. Be sure to return to this page periodically to ensure
familiarity with the most current version of this Privacy Policy. </p>
<h2>Privacy Concerns</h2>
<p>If you have privacy concerns, or have disclosed data you would
prefer to keep private, please contact us
at <a href="mailto:privacy@mitx.mit.edu">privacy@mitx.mit.edu</a>. </p>
<p> Effective Date: February 6, 2012
</div>
</section>
<h2>${ problem['name'] }</h2>
<section class="problem">
${ problem['html'] }
<section class="action">
<input type="hidden" name="problem_id" value="${ problem['name'] }">
% if check_button:
<input id="check_${ id }" type="button" value="Check ${ attempts }" >
% endif
% if reset_button:
<input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
% endif
% if save_button:
<input id="save_${ id }" type="button" value="Save" >
% endif
% if answer_available:
<input id="show_${ id }" type="button" value="Show Answer" >
% endif
% if explain :
<a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
% endif
</section>
</section>
function ${ id }_load() {
$('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }',
function() {
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
update_schematics();
$('#check_${ id }').click(function() {
$("input.schematic").each(function(index,element){ element.schematic.update_value(); });
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;
});
postJSON('/modx/problem/${ id }/problem_check',
submit_data,
function(json) {
switch(json.success) {
case 'incorrect': // Worked, but answer not
case 'correct':
${ id }_load();
//alert("!!"+json.success);
break;
default:
alert(json.success);
}
});
log_event('problem_check', submit_data);
});
$('#reset_${ id }').click(function() {
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;
});
postJSON('/modx/problem/${ id }/problem_reset', {'id':'${ id }'}, function(json) {
${ id }_load();
});
log_event('problem_reset', submit_data);
});
$('#show_${ id }').click(function() {
postJSON('/modx/problem/${ id }/problem_show', {}, function(data) {
for (var key in data) {
$("#answer_"+key).text(data[key]);
}
});
log_event('problem_show', {'problem':'${ id }'});
});
$('#save_${ id }').click(function() {
$("input.schematic").each(function(index,element){ element.schematic.update_value(); });
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;});
postJSON('/modx/problem/${ id }/problem_save',
submit_data, function(data){
if(data.success) {
alert('Saved');
}}
);
log_event('problem_save', submit_data);
});
}
);}
$(function() {
${ id }_load();
});
<section id="main_${id}" class="problems-wrapper"></section>
<%inherit file="main.html" />
<%!
from django.core.urlresolvers import reverse
%>
<%block name="headextra">
<script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
<script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
<script>
<%include file="profile_graphs.js"/>
</script>
<script>
var loc=true; // Activate on clicks? Not if already clicked.
var lang=true;
$(function() {
$("#change_location").click(function() {
$(this).hide();
log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});
if(loc) {
$("#description").html('<div>'+
"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('<form>'+'<input id="id_loc_text" type="text" name="loc_text" />'+
'<input type="submit" id="change_loc_button" value="Save" />'+'</form>');
$("#change_loc_button").click(function() {
$("#change_location").show();
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() {
$(this).hide();
log_event("profile", {"type":"language_show", "old":$("#language_sub").text()});
if(lang) {
lang=false;
$("#language_sub").html('<form>'+'<input id="id_lang_text" type="text" name="lang_text" />'+
'<input type="submit" id="change_lang_button" value="Save" />'+'</form>');
$("#change_lang_button").click(function() {
$("#change_language").show();
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(){
$('.modal').trigger('click');
log_event("profile", {"type":"password_show"});
});
$('#pwd_reset_button').click(function() {
$.post('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
"email" : $('#id_email').val()}, function(data){
$("#password_reset_complete_link").click();
log_event("profile", {"type":"password_send"});
});
});
$("#submit_email_change").click(function(){
alert("Test 1");
var new_email = $('#new_email_field').val();
var new_password = $('#new_email_password').val();
postJSON('/email_change/',{"new_email":new_email},
function(data){});
alert("Test 2");
log_event("profile", {"type":"email_change_request",
"old_email":"${email}",
"new_email":new_email});
alert("Test 3");
});
});
</script>
</%block>
<%include file="navigation.html" args="active_page='profile'" />
<section class="main-content">
<div class="profile-wrapper">
<section class="course-info">
<h1>Course Progress</h1>
<div id="grade-detail-graph"></div>
<ol class="chapters">
%for chapter in chapters:
%if not chapter['chapter'] == "hidden":
<li>
<h2><a href="${reverse('courseware_chapter', args=format_url_params([chapter['course'], chapter['chapter']])) }">
${ chapter['chapter'] }</a></h2>
<ol class="sections">
%for section in chapter['sections']:
<li>
<%
earned = section['section_total'][0]
total = section['section_total'][1]
percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else ""
%>
<h3><a href="${reverse('courseware_section', args=format_url_params([chapter['course'], chapter['chapter'], section['section']])) }">
${ section['section'] }</a> ${"({0:g}/{1:g}) {2}".format( earned, total, percentageString )}</h3>
${section['subtitle']}
%if 'due' in section and section['due']!="":
due ${section['due']}
%endif
%if len(section['scores']) > 0:
<ol class="scores">
${ "Problem Scores: " if section['graded'] else "Practice Scores: "}
%for score in section['scores']:
<li class="score">${"{0:g}/{1:g}".format(score[0],score[1])}</li>
%endfor
</ol>
%endif
</li> <!--End section-->
%endfor
</ol> <!--End sections-->
</li> <!--End chapter-->
%endif
%endfor
</ol> <!--End chapters-->
</section>
<section class="user-info">
<header>
<h1>${name}</h1>
%if True:
<a href="#apply_name_change" rel="leanModal">Apply to change</a>
%else:
(Name change pending)
%endif
</header>
<ul>
<li>
Forum name: <strong>${username}</strong>
</li>
<li>
E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal" class="edit-email">Edit</a>
</li>
<li>
Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Edit</a>
</li>
<li>
Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Edit</a>
</li>
</ul>
<div id="change_password_pop">
<h2>Password change</h2>
<p>We'll e-mail a password reset link to ${email}.</p>
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
<input type="submit" id="pwd_reset_button" value="Reset Password" />
</div>
<div id="unenroll">
<a href="#unenroll_course" rel="leanModal">Unenroll from 6.002x</a>
</div>
</section>
</div>
</section>
<div id="password_reset_complete" class="leanModal_box">
<a href="#password_reset_complete" rel="leanModal" id="password_reset_complete_link"></a>
<h1>Password Reset Email Sent</h1>
<p>
An email has been sent to ${email}. Follow the link in the email to change your password.
</p>
</div>
<div id="apply_name_change" class="leanModal_box">
<h1>Apply to change your name</h1>
<form>
<fieldset>
<p>A member of the course staff will review your request, and if approved, update your information. Please allow up to a week for your requested to be processed.</p>
<ul>
<li>
<label>Enter your desired full name, as it will appear on the MITx Certificate: </label>
<input id="new_name" value="" type="text" />
</li>
<li>
<label>Reason for name change:</label>
<textarea id="name_rationale" value=""></textarea>
</li>
<li>
<input type="submit" id="submit">
</li>
</ul>
</fieldset>
</form>
</div>
<div id="change_email" class="leanModal_box">
<h1>Change e-mail</h1>
<form>
<fieldset>
<ul>
<li>
<label> Please enter your new email address: </label>
<input id="new_email_field" type="email" value="" />
</li>
<li>
<label> Please confirm your password: </label>
<input id="new_email_password" value="" type="password" />
</li>
<li>
<p> We will send a confirmation to both ${email} and your new e-mail as part of the process.</p>
<input type="submit" id="submit_email_change" />
</li>
</ul>
</fieldset>
</form>
</div>
<div id="unenroll_course" class="leanModal_box">
<h1> Unenroll </h1>
<p> At the end of the semester, all students who do not complete the course will be automatically dropped. If you would still prefer to deactivate your account, you can: </p>
<form>
<fieldset>
<ul>
<li>
<label><input type="radio" name="updates" checked /> Deactivate account/do not inform me about future courses. </label>
</li>
<li>
<label><input type="radio" name="updates" /> Deactivate account, but inform me about future courses.</label>
</li>
<li>
<input type="submit" id="" value="Unenroll" />
</li>
</ul>
</fieldset>
</form>
</div>
<%!
import json
%>
$(function () {
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #000',
padding: '4px 6px',
color: '#fff',
'background-color': '#333',
opacity: 0.90
}).appendTo("body").fadeIn(200);
}
/* -------------------------------- Grade detail bars -------------------------------- */
<%
colors = ["#b72121", "#600101", "#666666", "#333333"]
tickIndex = 1
sectionSpacer = 0.5
sectionIndex = 0
series = []
ticks = [] #These are the indices and x-axis labels for the data
bottomTicks = [] #Labels on the bottom
detail_tooltips = {} #This an dictionary mapping from 'section' -> array of detail_tooltips
droppedScores = [] #These are the datapoints to indicate assignments which aren't factored into the total score
dropped_score_tooltips = []
for section in grade_summary:
if 'subscores' in section: ##This is for sections like labs or homeworks, with several smaller components and a total
series.append({
'label' : section['category'],
'data' : [[i + tickIndex, score['percentage']] for i,score in enumerate(section['subscores'])],
'color' : colors[sectionIndex]
})
ticks += [[i + tickIndex, score['label'] ] for i,score in enumerate(section['subscores'])]
bottomTicks.append( [tickIndex + len(section['subscores'])/2, section['category']] )
detail_tooltips[ section['category'] ] = [score['summary'] for score in section['subscores']]
droppedScores += [[tickIndex + index, 0.05] for index in section['dropped_indices']]
dropExplanation = "The lowest {0} {1} scores are dropped".format( len(section['dropped_indices']), section['category'] )
dropped_score_tooltips += [dropExplanation] * len(section['dropped_indices'])
tickIndex += len(section['subscores']) + sectionSpacer
category_total_label = section['category'] + " Total"
series.append({
'label' : category_total_label,
'data' : [ [tickIndex, section['totalscore']['score']] ],
'color' : colors[sectionIndex]
})
ticks.append( [tickIndex, section['totallabel']] )
detail_tooltips[category_total_label] = [section['totalscore']['summary']]
else:
series.append({
'label' : section['category'],
'data' : [ [tickIndex, section['totalscore']['score']] ],
'color' : colors[sectionIndex]
})
ticks.append( [tickIndex, section['totallabel']] )
detail_tooltips[section['category']] = [section['totalscore']['summary']]
tickIndex += 1 + sectionSpacer
sectionIndex += 1
detail_tooltips['Dropped Scores'] = dropped_score_tooltips
## ----------------------------- Grade overviewew bar ------------------------- ##
totalWeight = 0.0
sectionIndex = 0
totalScore = 0.0
overviewBarX = tickIndex
for section in grade_summary:
weighted_score = section['totalscore']['score'] * section['weight']
summary_text = "{0} - {1:.1%} of a possible {2:.0%}".format(section['category'], weighted_score, section['weight'])
weighted_category_label = section['category'] + " - Weighted"
if section['totalscore']['score'] > 0:
series.append({
'label' : weighted_category_label,
'data' : [ [overviewBarX, weighted_score] ],
'color' : colors[sectionIndex]
})
detail_tooltips[weighted_category_label] = [ summary_text ]
sectionIndex += 1
totalWeight += section['weight']
totalScore += section['totalscore']['score'] * section['weight']
ticks += [ [overviewBarX, "Total"] ]
tickIndex += 1 + sectionSpacer
%>
var series = ${ json.dumps(series) };
var ticks = ${ json.dumps(ticks) };
var bottomTicks = ${ json.dumps(bottomTicks) };
var detail_tooltips = ${ json.dumps(detail_tooltips) };
var droppedScores = ${ json.dumps(droppedScores) };
//Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up
series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "#333"} );
var options = {
series: {stack: true,
lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.8, align: 'center', lineWidth: 0, fill: .8 },},
xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}, ticks: ticks, labelAngle: 90},
yaxis: {ticks: [[1, "100%"], [0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"], [0, "0%"]], min: 0.0, max: 1.0, labelWidth: 50},
grid: { hoverable: true, clickable: true, borderWidth: 1,
markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#ddd"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#e9e9e9"},
{yaxis: {from: 0.6, to: 0.7 }, color: "#f3f3f3"}, ] },
legend: {show: false},
};
var $grade_detail_graph = $("#grade-detail-graph");
if ($grade_detail_graph.length > 0) {
var plot = $.plot($grade_detail_graph, series, options);
var o = plot.pointOffset({x: ${overviewBarX} , y: ${totalScore}});
$grade_detail_graph.append('<div style="position:absolute;left:' + (o.left - 12) + 'px;top:' + (o.top - 20) + 'px">${"{totalscore:.0%}".format(totalscore=totalScore)}</div>');
}
var previousPoint = null;
$("#grade-detail-graph").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != (item.dataIndex, item.seriesIndex)) {
previousPoint = (item.dataIndex, item.seriesIndex);
$("#tooltip").remove();
if (item.series.label in detail_tooltips) {
var series_tooltips = detail_tooltips[item.series.label];
if (item.dataIndex < series_tooltips.length) {
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]);
}
}
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
{% extends "admin/base_site.html" %}
{% load i18n admin_modify adminmedia %}
{% load url from future %}
{% block extrahead %}{{ block.super }}
{% url 'admin:jsi18n' as jsi18nurl %}
<script type="text/javascript" src="{{ jsi18nurl|default:"../../../../jsi18n/" }}"></script>
{% endblock %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/forms.css" />{% endblock %}
{% block bodyclass %}{{ opts.app_label }}-{{ opts.object_name.lower }} change-form{% endblock %}
{% block breadcrumbs %}{% if not is_popup %}
<div class="breadcrumbs">
<a href="../../../../">{% trans "Home" %}</a> &rsaquo;
<a href="../../../">{{ opts.app_label|capfirst|escape }}</a> &rsaquo;
<a href="../../">{{ opts.verbose_name_plural|capfirst }}</a> &rsaquo;
<a href="../">{{ original|truncatewords:"18" }}</a> &rsaquo;
{% trans 'Change password' %}
</div>
{% endif %}{% endblock %}
{% block content %}<div id="content-main">
<form action="{{ form_url }}" method="post" id="{{ opts.module_name }}_form">{% csrf_token %}{% block form_top %}{% endblock %}
<div>
{% if is_popup %}<input type="hidden" name="_popup" value="1" />{% endif %}
{% if form.errors %}
<p class="errornote">
{% blocktrans count form.errors.items|length as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %}
</p>
{% endif %}
<p>{% blocktrans with original.username as username %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktrans %}</p>
<fieldset class="module aligned">
<div class="form-row">
{{ form.password1.errors }}
{# TODO: get required class on label_tag #}
<label for="id_password1" class="required">{% trans 'Password' %}:</label> {{ form.password1 }}
</div>
<div class="form-row">
{{ form.password2.errors }}
{# TODO: get required class on label_tag #}
<label for="id_password2" class="required">{% trans 'Password (again)' %}:</label> {{ form.password2 }}
<p class="help">{% trans 'Enter the same password as above, for verification.' %}</p>
</div>
</fieldset>
<div class="submit-row">
<input type="submit" value="{% trans 'Change password' %}" class="default" />
</div>
<script type="text/javascript">document.getElementById("id_password1").focus();</script>
</div>
</form></div>
{% endblock %}
{% extends "admin/base_site.html" %}
{% load i18n %}
{% block breadcrumbs %}<div class="breadcrumbs"><a href="../">{% trans 'Home' %}</a></div>{% endblock %}
{% block content %}
<p>{% trans "Thanks for spending some quality time with the Web site today." %}</p>
<p><a href="../">{% trans 'Log in again' %}</a></p>
{% endblock %}
{% extends "registration/base.html" %}
{% block title %}Log in{% endblock %}
{% block content %}
<h1>Log in</h1>
{% if form.errors %}
<p class="error">Please correct the errors below:</p>
{% endif %}
<form method="post" action="?next={{ next|default:"/" }}">
{% csrf_token %}
<dl>
<dt><label for="id_username">Username:</label>{% if form.username.errors %} <span class="error">{{ form.username.errors|join:", " }}</span>{% endif %}</dt>
<dd>{{ form.username }}</dd>
<dt><label for="id_password">Password:</label>{% if form.password.errors %} <span class="error">{{ form.password.errors|join:", " }}</span>{% endif %}</dt>
<dd>{{ form.password }}</dd>
<dt><input type="submit" value="Log in" /></dt>
</dl>
</form>
{% endblock %}
{% block content-related %}
<p>If you don't have an account, you can <a href="/accounts/register/">sign
up</a> for one.
{% endblock %}
{% extends "registration/base.html" %}
{% block title %}Logged out{% endblock %}
{% block content %}
<h1>You've been logged out.</h1>
<p>Thanks for stopping by; when you come back, don't forget to <a href="/accounts/login/">log in</a> again.</p>
{% endblock %}
\ No newline at end of file
{% extends "admin/base_site.html" %}
{% load i18n %}
{% load url from future %}
{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}<a href="{{ docsroot }}">{% trans 'Documentation' %}</a> / {% endif %}{% trans 'Change password' %} / <a href="../../logout/">{% trans 'Log out' %}</a>{% endblock %}
{% block breadcrumbs %}<div class="breadcrumbs"><a href="../../">{% trans 'Home' %}</a> &rsaquo; {% trans 'Password change' %}</div>{% endblock %}
{% block title %}{% trans 'Password change successful' %}{% endblock %}
{% block content %}
<h1>{% trans 'Password change successful' %}</h1>
<p>{% trans 'Your password was changed.' %}</p>
{% endblock %}
{% extends "admin/base_site.html" %}
{% load i18n adminmedia %}
{% load url from future %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/forms.css" />{% endblock %}
{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}<a href="{{ docsroot }}">{% trans 'Documentation' %}</a> / {% endif %} {% trans 'Change password' %} / <a href="../logout/">{% trans 'Log out' %}</a>{% endblock %}
{% block breadcrumbs %}<div class="breadcrumbs"><a href="../">{% trans 'Home' %}</a> &rsaquo; {% trans 'Password change' %}</div>{% endblock %}
{% block title %}{% trans 'Password change' %}{% endblock %}
{% block content %}<div id="content-main">
<form action="" method="post">{% csrf_token %}
<div>
{% if form.errors %}
<p class="errornote">
{% blocktrans count form.errors.items|length as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %}
</p>
{% endif %}
<h1>{% trans 'Password change' %}</h1>
<p>{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</p>
<fieldset class="module aligned wide">
<div class="form-row">
{{ form.old_password.errors }}
<label for="id_old_password" class="required">{% trans 'Old password' %}:</label>{{ form.old_password }}
</div>
<div class="form-row">
{{ form.new_password1.errors }}
<label for="id_new_password1" class="required">{% trans 'New password' %}:</label>{{ form.new_password1 }}
</div>
<div class="form-row">
{{ form.new_password2.errors }}
<label for="id_new_password2" class="required">{% trans 'Password (again)' %}:</label>{{ form.new_password2 }}
</div>
</fieldset>
<div class="submit-row">
<input type="submit" value="{% trans 'Change my password' %}" class="default" />
</div>
<script type="text/javascript">document.getElementById("id_old_password").focus();</script>
</div>
</form></div>
{% endblock %}
{% load i18n %}
<h1> Password reset complete </h1>
{% block content %}
Your password has been set. You may go ahead and <a href="/">log in</a> now.
{% endblock %}
{% block content %}
{% if validlink %}
<h1>Enter new password</h1>
<p>Please enter your new password twice so we can verify you typed it in correctly.</p>
<form action="" method="post">{% csrf_token %}
{{ form.new_password1.errors }}
<p class="aligned wide"><label for="id_new_password1">New password:</label>{{ form.new_password1 }}</p>
{{ form.new_password2.errors }}
<p class="aligned wide"><label for="id_new_password2">Confirm password:</label>{{ form.new_password2 }}</p>
<p><input type="submit" value="Change my password" /></p>
</form>
{% else %}
<h1>Password reset unsuccessful</h1>
<p>The password reset link was invalid, possibly because the link has already been used. Please request a new password reset.</p>
{% endif %}
{% endblock %}
<h1>Password reset successful</h1>
<p>We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.</p>
{% load i18n %}{% load url from future %}{% autoescape off %}
{% blocktrans %}You're receiving this e-mail because you requested a password reset for your user account at {{ site_name }}.{% endblocktrans %}
{% trans "Please go to the following page and choose a new password:" %}
{% block reset_link %}
{{ protocol }}://{{ site_name }}{% url 'django.contrib.auth.views.password_reset_confirm' uidb36=uid token=token %}
{% endblock %}
{% trans "Your username, in case you've forgotten:" %} {{ user.username }}
{% trans "Thanks for using our site!" %}
{% blocktrans %}The MITx team{% endblocktrans %}
{% endautoescape %}
<h1>Check your email</h1>
<p>An activation link has been sent to ${ email }, along with
instructions for activating your account.</p>
{% extends "registration/base.html" %}
{% block title %}Registration complete{% endblock %}
{% block content %}
<h1>Check your email</h1>
<p>An activation link has been sent to the email address you supplied, along with instructions for activating your account.</p>
{% endblock %}
\ No newline at end of file
{% extends "registration/base.html" %}
{% block title %}Sign up{% endblock %}
{% block content %}
{% if form.errors %}
<p class="errors">Please correct the errors below: {{ form.non_field_errors }}</p>
{% endif %}
<h1>Create an account</h1>
<form method="post" action="" class="wide">
{% csrf_token %}
<p>
<label for="id_username">Username:</label>
{% if form.username.errors %}
<p class="errors">{{ form.username.errors.as_text }}</p>
{% endif %}
{{ form.username }}
</p>
<p>
<label for="id_email">Email address:</label>
{% if form.email.errors %}
<p class="errors">{{ form.email.errors.as_text }}</p>
{% endif %}
{{ form.email }}
</p>
<p>
<label for="id_password1">Password:</label>
{% if form.password1.errors %}
<p class="errors">{{ form.password1.errors.as_text }}</p>
{% endif %}
{{ form.password1 }}
</p>
<p>
<label for="id_password2">Password (type again to catch typos):</label>
{% if form.password2.errors %}
<p class="errors">{{ form.password2.errors.as_text }}</p>
{% endif %}
{{ form.password2 }}
</p>
<p class="submit"><input type="submit" value="Register &rarr;"></p>
</form>
{% endblock %}
{% block content-related %}
<p>Fill out the form to the left (all fields are required), and your
account will be created; you'll be sent an email with instructions on how
to finish your registration.</p>
<p>We'll only use your email to send you signup instructions. We hate spam
as much as you do.</p>
<p>This account will let you log into the ticket tracker, claim tickets,
and be exempt from spam filtering.</p>
{% endblock %}
This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster development of CSS. For more information about sass: http://sass-lang.com
To use sass all you need to do is enter:
$ gem install sass
We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon
To use bourbon you need to install it with:
$ gem install bourbon
Then to generate Sass files cd to templates directory and watch the sass files for developement:
$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb
To generate a compressed css file for production:
$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb --style :compressed
These will automatically generate the CSS files on save.
div.gradebook-wrapper {
@extend .table-wrapper;
section.gradebook-content {
@extend .content;
h1 {
@extend .top-header;
}
}
}
section.help.main-content {
padding: lh();
h1 {
margin-top: 0;
margin-bottom: lh();
padding-bottom: lh();
border-bottom: 1px solid #ddd;
}
p {
max-width: 700px;
}
h2 {
margin-top: 0;
}
section.self-help {
margin-bottom: lh();
margin-right: flex-gutter();
float: left;
width: flex-grid(6);
ul {
margin-left: flex-gutter(6);
li {
margin-bottom: lh(.5);
}
}
}
section.help-email {
float: left;
width: flex-grid(6);
dl {
margin-bottom: lh();
display: block;
dd {
margin-bottom: lh();
}
dt {
font-weight: bold;
float: left;
clear: left;
width: flex-grid(2, 6);
}
}
}
}
div.info-wrapper {
@extend .table-wrapper;
section.updates {
@extend .content;
> h1 {
@extend .top-header;
}
> p {
margin-bottom: lh();
}
> ol {
list-style: none;
> li {
padding-bottom: lh(.5);
margin-bottom: lh(.5);
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
&:first-child {
padding: lh(.5);
margin-left: (-(lh(.5)));
background: $cream;
border-bottom: 1px solid darken($cream, 10%);
}
h2 {
float: left;
width: flex-grid(2, 9);
margin: 0 flex-gutter() 0 0;
}
section.update-description {
float: left;
width: flex-grid(7, 9);
margin-bottom: 0;
p {
&:last-child {
margin-bottom: 0;
}
}
}
}
}
}
section.handouts {
@extend .sidebar;
@include border-radius(0 4px 4px 0);
border-right: 0;
border-left: 1px solid #d3d3d3;
h1 {
padding: lh(.5) lh();
font-size: 18px;
margin: 0 ;
@extend .bottom-border;
}
ol {
list-style: none;
li {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
@extend .clearfix;
p {
padding: 7px lh();
margin: 0;
text-transform: none;
letter-spacing: 0;
font-size: $body-font-size;
&:hover {
background: #efefef;
}
a {
display: inline;
padding: 0;
&:hover {
text-decoration: underline;
background: none;
}
}
}
a {
@include transition();
color: lighten($text-color, 10%);
display: block;
padding: 7px lh();
text-decoration: none;
&:hover {
background: #efefef;
}
}
}
}
}
}
div.profile-wrapper {
@extend .table-wrapper;
color: #000;
section.user-info {
@extend .sidebar;
@include border-radius(0px 4px 4px 0);
border-left: 1px solid #d3d3d3;
border-right: 0;
header {
padding: lh(.5) lh();
margin: 0 ;
@extend .bottom-border;
h1 {
font-size: 18px;
}
}
ul {
list-style: none;
li {
@include transition();
color: lighten($text-color, 10%);
display: block;
text-decoration: none;
@include box-shadow(0 1px 0 #eee);
padding: 7px lh();
border-bottom: 1px solid #d3d3d3;
position: relative;
div#location_sub, div#language_sub {
font-weight: bold;
@include inline-block();
form {
width: 100%;
}
input {
&[type="text"] {
margin: lh(.5) 0;
width: 100%;
@include box-sizing(border-box);
}
&[type="input"]{
}
}
&:empty {
padding: 0;
}
}
div#description {
font-size: 12px;
}
a#change_language, a#change_location, a.edit-email {
position: absolute;
top: 9px;
right: lh(.5);
text-transform: uppercase;
font-size: 12px;
color: #999;
&:hover {
color: #555;
}
}
}
}
div#change_password_pop {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
color: #4D4D4D;
padding: 7px lh();
h2 {
margin-top: 0;
font-weight: bold;
text-transform: uppercase;
font-size: $body-font-size;
}
}
div#unenroll {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
a {
color: lighten($text-color, 10%);
display: block;
display: block;
padding: 7px lh();
@include transition();
&:hover {
background: #efefef;
}
}
}
}
section.course-info {
@extend .content;
> h1 {
@extend .top-header;
}
div#grade-detail-graph {
width: 100%;
min-height: 300px;
}
> ol {
border-top: 1px solid #e3e3e3;
list-style: none;
margin-top: lh();
> li {
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
display: table;
padding: lh() 0;
width: 100%;
&:last-child {
border-bottom: 0px;
}
h2 {
border-right: 1px dashed #ddd;
@include box-sizing(border-box);
display: table-cell;
margin: 0;
padding: 0;
padding-right: flex-gutter(9);
width: flex-grid(2, 9);
}
ol.sections {
display: table-cell;
list-style: none;
padding-left: flex-gutter(9);
width: flex-grid(7, 9);
> li {
padding:0 0 lh() 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: 0;
}
h3 {
color: #666;
}
ol {
list-style: none;
li {
display: inline-block;
padding-right: 1em;
}
}
}
}
}
}
}
}
div.book-wrapper {
@extend .table-wrapper;
section.book-sidebar {
@extend .sidebar;
@include box-sizing(border-box);
@extend .tran;
ul#booknav {
font-size: 12px;
a {
color: #000;
&:hover {
color: #666;
}
}
li {
background: none;
padding-left: 30px;
div.hitarea {
margin-left: -22px;
background-image: url('/static/images/treeview-default.gif');
position: relative;
top: 4px;
&:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
}
ul {
background: none;
}
}
> li {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: 7px 7px 7px 30px;
}
}
}
section.book {
@extend .content;
nav {
@extend .topbar;
@extend .clearfix;
a {
@extend .block-link;
padding: 0 lh();
}
ul {
@extend .clearfix;
li {
&.last {
float: left;
display: block;
a {
@include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
border-right: 1px solid darken(#f6efd4, 20%);
border-left: 0;
}
}
&.next {
display: block;
float: right;
}
}
}
&.bottom-nav {
margin-top: lh();
margin-bottom: -(lh());
border-bottom: 0;
border-top: 1px solid #EDDFAA;
}
}
section.page {
text-align: center;
img {
border: 1px solid $border-color;
max-width: 100%;
}
}
}
&.closed {
section.book-sidebar {
width: flex-grid(.6);
header#open_close_accordion {
padding: 0;
a {
background-image: url('/static/images/slide-right-icon.png');
}
h2 {
visibility: hidden;
width: 10px;
padding: 0;
}
}
ul#booknav {
visibility: hidden;
width: 10px;
padding: 0;
overflow: hidden;
max-height: 100px;
}
}
section.course-content {
width: flex-grid(11.5) + flex-gutter();
}
}
}
@import "bourbon/bourbon";
// Base layout
@import "base/reset", "base/font-face";
@import "base/variables", "base/functions", "base/extends", "base/base";
@import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal";
@import "plugins/jquery-ui-1.8.16.custom";
// pages
@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
@import "textbook";
@import "info";
@import "profile";
@import "gradebook";
@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki", "wiki/table";
@import "help";
@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar", "discussion/modals", "discussion/profile", "discussion/badges";
:focus {
outline-color: #ccc;
}
h1, h2, h3, h4, h5, h6 {
a {
color: #000;
}
}
h1 {
font-size:1.6em;
margin:20px 0 10px 0;
}
h2 {
font-size: $body-font-size;
font-weight: bold;
letter-spacing: 1px;
margin:20px 0 10px 0;
text-transform: uppercase;
}
p {
margin-bottom: $body-line-height;
}
em {
font-style: italic;
}
img {
max-width: 100%;
height: auto;
}
#{$all-text-inputs}, textarea {
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
border: 1px solid #999;
font: $body-font-size $body-font-family;
padding: 4px;
&:focus {
border-color: $mit-red;
}
}
a {
color: $mit-red;
&:link {
color: $mit-red;
}
&:visited {
color: darken($mit-red, 10%);
}
&:link, &:visited {
text-decoration:none;
}
&:hover, &:focus {
text-decoration:underline;
}
}
input[type="submit"], input[type="button"], button {
@extend .button;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrapper {
margin: 0 auto;
max-width: $fg-max-width;
min-width: $fg-min-width;
text-align: left;
width: flex-grid(12);
div.table-wrapper {
display: table;
width: flex-grid(12);
}
}
h1.top-header {
background: #f3f3f3;
border-bottom: 1px solid #e3e3e3;
margin: (-(lh())) (-(lh())) lh();
padding: lh();
}
.button {
border: 1px solid darken(#888, 10%);
@include border-radius(3px);
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
color: #fff;
cursor: pointer;
font: bold $body-font-size $body-font-family;
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
padding: 4px 8px;
text-decoration: none;
text-shadow: none;
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
border: 1px solid darken(#888, 20%);
}
}
.content {
@include box-shadow(inset 0 0 2px 3px #f3f3f3);
@include box-sizing(border-box);
display: table-cell;
padding: lh();
vertical-align: top;
width: flex-grid(9) + flex-gutter();
@media print {
@include box-shadow(none);
}
}
.sidebar {
background: #e3e3e3;
@include border-radius(4px 0 0 4px);
border-right: 1px solid #d3d3d3;
@include box-shadow( inset 0 0 0 1px #f6f6f6);
@include box-sizing(border-box);
display: table-cell;
font-family: $body-font-family;
position: relative;
text-shadow: 0 1px 0 #f1f1f1;
vertical-align: top;
width: flex-grid(3);
h1, h2 {
font-size: 18px;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
.bottom-border {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
}
@media print {
display: none;
}
h3 {
border: none;
border-bottom: 1px solid #d3d3d3;
@extend .bottom-border;
background: none;
color: #000;
font-weight: normal;
margin: 0;
overflow: hidden;
a {
color: lighten($text-color, 10%);
display: block;
font-size: $body-font-size;
padding: 7px 7px 7px 30px;
text-decoration: none;
@include transition();
&:hover {
background: #efefef;
@include box-shadow(0 1px 0 #fff);
}
}
span.ui-icon {
background-image: url(images/ui-icons_454545_256x240.png);
}
&.active {
background: none;
border: 0;
border-bottom: 1px solid #bbb;
@include box-shadow(none);
color: #000;
font-weight: bold;
a {
color: #000;
}
}
}
header#open_close_accordion {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: lh(.5) lh();
position: relative;
h2 {
padding-right: 20px;
margin: 0;
}
a {
background: #eee url('/static/images/slide-left-icon.png') center center no-repeat;
border: 1px solid #D3D3D3;
@include border-radius(3px 0 0 3px);
height: 16px;
padding: 8px;
position: absolute;
right: -1px;
text-indent: -9999px;
top: 6px;
width: 16px;
&:hover {
background-color: white;
}
}
}
a.button {
text-decoration: none;
}
}
.topbar {
@extend .clearfix;
background: $cream;
border-bottom: 1px solid darken($cream, 10%);
@include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
font-size: 12px;
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
text-shadow: 0 1px 0 #fff;
line-height: 46px;
height:46px;
@media print {
display: none;
}
a {
color: darken($cream, 80%);
&:hover {
color: darken($cream, 60%);
text-decoration: none;
}
&.block-link {
background: darken($cream, 5%);
border-left: 1px solid darken($cream, 20%);
@include box-shadow(inset 1px 0 0 lighten($cream, 5%));
display: block;
text-transform: uppercase;
&:hover {
background: none;
}
}
}
}
.tran {
@include transition( all, .2s, $ease-in-out-quad);
}
p.ie-warning {
display: block !important;
line-height: 1.3em;
background: yellow;
padding: lh();
text-align: left;
margin-bottom: 0;
}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */
// Not used in UI
// @font-face {
// font-family: 'Open Sans';
// src: url('/static/fonts/OpenSans-Light-webfont.eot');
// src: url('/static/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
// url('/static/fonts/OpenSans-Light-webfont.woff') format('woff'),
// url('/static/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
// url('/static/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
// font-weight: 300;
// font-style: normal;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('/static/fonts/OpenSans-LightItalic-webfont.eot');
// src: url('/static/fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
// url('/static/fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
// url('/static/fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
// url('/static/fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
// font-weight: 300;
// font-style: italic;
// }
@font-face {
font-family: 'Open Sans';
src: url('/static/fonts/OpenSans-Regular-webfont.eot');
src: url('/static/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('/static/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/static/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('/static/fonts/OpenSans-Italic-webfont.eot');
src: url('/static/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/OpenSans-Italic-webfont.woff') format('woff'),
url('/static/fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
url('/static/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
font-weight: 400;
font-style: italic;
}
// Not used in UI
// @font-face {
// font-family: 'Open Sans';
// src: url('/static/fonts/OpenSans-Semibold-webfont.eot');
// src: url('/static/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
// url('/static/fonts/OpenSans-Semibold-webfont.woff') format('woff'),
// url('/static/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
// url('/static/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
// font-weight: 600;
// font-style: normal;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('/static/fonts/OpenSans-SemiboldItalic-webfont.eot');
// src: url('/static/fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
// url('/static/fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
// url('/static/fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
// url('/static/fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
// font-weight: 600;
// font-style: italic;
// }
@font-face {
font-family: 'Open Sans';
src: url('/static/fonts/OpenSans-Bold-webfont.eot');
src: url('/static/fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('/static/fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('/static/fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('/static/fonts/OpenSans-BoldItalic-webfont.eot');
src: url('/static/fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('/static/fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('/static/fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('/static/fonts/OpenSans-ExtraBold-webfont.eot');
src: url('/static/fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('/static/fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('/static/fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
font-weight: 800;
font-style: italic;
}
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
}
// Flexible grid gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
}
// Percentage of container calculator
@function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width);
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
// Variables
// ---------------------------------------- //
// fonts
$body-font-family: "Open 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);
//Flexible grid
$fg-column: $column-width;
$fg-gutter: $gutter-width;
$fg-max-columns: $columns;
$fg-max-width: 1400px;
$fg-min-width: 810px;
// color
$light-gray: #ddd;
$dark-gray: #333;
$mit-red: #993333;
$cream: #F6EFD4;
$text-color: $dark-gray;
$border-color: $light-gray;
// Custom Functions
@import "functions/deprecated-webkit-gradient";
@import "functions/grid-width";
@import "functions/modular-scale";
@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";
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
$verdana: Verdana, Geneva, sans-serif;
//************************************************************************//
// 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;
// }
@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;
}
}
// 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);
// 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.
// Official animation shorthand property.
@mixin animation ($animation-1,
$animation-2: false, $animation-3: false,
$animation-4: false, $animation-5: false,
$animation-6: false, $animation-7: false,
$animation-8: false, $animation-9: false)
{
$full: compact($animation-1, $animation-2, $animation-3, $animation-4,
$animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
-webkit-animation: $full;
-moz-animation: $full;
animation: $full;
}
// Individual Animation 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;
}
// Deprecated
@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);
}
@warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
}
@mixin appearance ($value) {
-webkit-appearance: $value;
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
}
//************************************************************************//
// 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);
@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;
}
@mixin border-image ($image) {
-webkit-border-image: $image;
-moz-border-image: $image;
-ms-border-image: $image;
-o-border-image: $image;
border-image: $image;
}
@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);
}
// 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;
}
@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;
}
@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;
}
// 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;
}
// 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;
}
@mixin linear-gradient($pos, $G1, $G2: false,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$fallback: 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);
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if type-of($fallback) == color {
$fallback-color: $fallback;
}
background-color: $fallback-color;
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(#1e5799, #2989d8, $fallback:#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%);
// 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);
@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;
}
// 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;
}
// 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;
}
@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;
// }
@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;
}
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