Commit 5842284a by Kyle Fiedler

Merged defualt

--HG--
branch : templates-ernie-html5-buttontoggle
parents 8b5d56ff f1fc649e
...@@ -5,3 +5,5 @@ syntax: glob ...@@ -5,3 +5,5 @@ syntax: glob
*.swp *.swp
*.orig *.orig
*.DS_Store *.DS_Store
#*
.#*
\ No newline at end of file
<%inherit file="marketing.html" /> <%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage"> <section class="subpage">
<div> <div>
...@@ -6,39 +9,40 @@ ...@@ -6,39 +9,40 @@
More about 6.002x More about 6.002x
</h1> </h1>
<h2> Answering common questions about the first course on MITx, the <h2> Answering common questions about the first course on <i>MITx</i>, the
Institute&rsquo;s online-learning initiative.</h2> Institute&rsquo;s online-learning initiative.</h2>
<p> <p>
This set of questions and answers accompanies MIT&rsquo;s February 13, This set of questions and answers accompanies MIT&rsquo;s February 13,
2012, announcement regarding MITx&rsquo;s prototype course &mdash; 2012, announcement regarding <i>MITx</i>&rsquo;s prototype course &mdash;
6.002x: Circuits and Electronics. 6.002x: Circuits and Electronics.
</p> </p>
<h2> <h2>
What is MITx? MIT seeks through the development of MITx to improve What is <i>MITx</i>?</h2>
<p> MIT seeks through the development of <i>MITx</i> to improve
education both on the MIT campus and around the world. education both on the MIT campus and around the world.
</h2>
<p> On campus, MITx will be coupled with an Institute-wide research <p> On campus, <i>MITx</i> will be coupled with an Institute-wide research
initiative on online teaching and learning. The online learning tools initiative on online teaching and learning. The online learning tools
that MITx develops will benefit the educational experience of that <i>MITx</i> develops will benefit the educational experience of
residential students by supplementing and reinforcing the classroom residential students by supplementing and reinforcing the classroom
and laboratory experiences.</p> and laboratory experiences.</p>
<p> <p>
Beyond the MIT campus, MITx will endeavor to break down barriers to Beyond the MIT campus, <i>MITx</i> will endeavor to break down barriers to
education in two ways. First, it will offer the online teaching of MIT education in two ways. First, it will offer the online teaching of MIT
courses to people around the world and the opportunity for able courses to people around the world and the opportunity for able
learners to gain certification of mastery of MIT material. Second, it learners to gain certification of mastery of MIT material. Second, it
will make freely available to educational institutions everywhere the will make freely available to educational institutions everywhere the
open-source software infrastructure on which MITx courses are based. open-source software infrastructure on which <i>MITx</i> courses are based.
</p> </p>
<p> <p>
Since it launched OpenCourseWare 10 years ago, MIT has been committed Since it launched OpenCourseWare 10 years ago, MIT has been committed
to using technology to improve and greatly widen access to to using technology to improve and greatly widen access to
education. The launch of MITx represents a next step forward in that education. The launch of <i>MITx</i> represents a next step forward in that
effort. effort.
</p> </p>
...@@ -52,18 +56,18 @@ At MIT, each course is assigned a number. All courses in the ...@@ -52,18 +56,18 @@ At MIT, each course is assigned a number. All courses in the
Department of Electrical Engineering and Computer Science (EECS) start Department of Electrical Engineering and Computer Science (EECS) start
with the number 6, and 6.002 (also known as Circuits and Electronics) with the number 6, and 6.002 (also known as Circuits and Electronics)
is one of the introductory courses for EECS is one of the introductory courses for EECS
undergraduates. MITx&rsquo;s 6.002x is modeled on the on-campus undergraduates. <i>MITx</i>&rsquo;s 6.002x is modeled on the on-campus
version of 6.002. version of 6.002.
</p> </p>
<p> <p>
The course introduces engineering in the context of the lumped The course introduces engineering in the context of the lumped
circuit abstraction. Topics covered include: resistive elements and circuit abstraction. Topics covered include: resistive elements and
networks; independent and dependent sources; switches and MOS networks; independent and dependent sources; switches and MOS
transistors; digital abstraction; amplifiers; energy storage transistors; digital abstraction; amplifiers; energy storage
elements; dynamics of first- and second-order networks; design in elements; dynamics of first- and second-order networks; design in
the time and frequency domains; and analog and digital circuits and the time and frequency domains; and analog and digital circuits and
applications. applications.
</p> </p>
<p> <p>
...@@ -92,7 +96,7 @@ Do I need to follow a set timeline in completing 6.002x? ...@@ -92,7 +96,7 @@ Do I need to follow a set timeline in completing 6.002x?
</h2> </h2>
<p> <p>
In this pilot course of MITx, learners seeking a certificate will have In this pilot course of <i>MITx</i>, learners seeking a certificate will have
weekly deadlines for homework and labs. Similarly, the midterm and weekly deadlines for homework and labs. Similarly, the midterm and
final exam will be given within a specific range of days. However, final exam will be given within a specific range of days. However,
faster-paced learners can proceed multiple weeks ahead if they choose. faster-paced learners can proceed multiple weeks ahead if they choose.
...@@ -159,14 +163,14 @@ prototype wiki and discussion forum. ...@@ -159,14 +163,14 @@ prototype wiki and discussion forum.
Are there prerequisites to take the course? Are there prerequisites to take the course?
</h2> </h2>
<p> <p>
While MITx courses are open to all, there are some skills required to While <i>MITx</i> courses are open to all, there are some skills required to
succeed in taking the course. succeed in taking the course.
</p> </p>
<p> <p>
In 6.002x, students are encouraged to have the knowledge obtained from In 6.002x, students are encouraged to have the knowledge obtained from
an AP or college-level physics course in electricity and a college-level physics course in electricity and
magnetism. Students must know basic calculus and linear algebra, and magnetism (or from an advanced secondary-education course in electricity and magnetism, as with an Advanced Placement course in the United States). Students must know basic calculus and linear algebra, and
have some basic background in differential equations. have some basic background in differential equations.
</p> </p>
...@@ -181,7 +185,7 @@ math backgrounds. ...@@ -181,7 +185,7 @@ math backgrounds.
How much does the course cost? How much does the course cost?
</h2> </h2>
<p> <p>
All of the courses on MITx will be free of charge. Those who have the All of the courses on <i>MITx</i> will be free of charge. Those who have the
ability and motivation to demonstrate mastery of content can receive a ability and motivation to demonstrate mastery of content can receive a
credential for a modest fee. For this prototype course, the fee for a credential for a modest fee. For this prototype course, the fee for a
credential will be waived. credential will be waived.
...@@ -193,8 +197,8 @@ What is a credential? ...@@ -193,8 +197,8 @@ What is a credential?
<p> <p>
Any learner who successfully completes 6.002x will receive an Any learner who successfully completes 6.002x will receive an
electronic certificate indicating a grade. This certificate will electronic certificate indicating a grade. This certificate will
indicate that you earned it from MITx&rsquo;s pilot course. In this indicate that you earned it from <i>MITx</i>&rsquo;s pilot course. In this
prototype version, MITx will not require that you be tested in a prototype version, <i>MITx</i> will not require that you be tested in a
testing center or otherwise have your identity certified in order to testing center or otherwise have your identity certified in order to
receive this certificate. receive this certificate.
</p> </p>
...@@ -203,7 +207,7 @@ receive this certificate. ...@@ -203,7 +207,7 @@ receive this certificate.
Who is grading the course? Who is grading the course?
</h2> </h2>
<p> <p>
MITx courses will use automated technologies to check student work <i>MITx</i> courses will use automated technologies to check student work
including practice exercises, homework assignments, labs and exams. including practice exercises, homework assignments, labs and exams.
</p> </p>
...@@ -218,14 +222,14 @@ posted on the course website when the course comes online. ...@@ -218,14 +222,14 @@ posted on the course website when the course comes online.
</p> </p>
<h2> <h2>
Do I need to buy a textbook? Do I need to buy a textbook?
</h2> </h2>
<p> <p>
The course uses the textbook Foundations of Analog and Digital The course uses the textbook Foundations of Analog and Digital
Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan
Kaufmann Publishers, Elsevier, July 2005. Relevant sections will be Kaufmann Publishers, Elsevier, July 2005. Relevant sections will be
provided electronically as part of the online course. While the provided electronically as part of the online course. While the
textbook is recommended, it is not required. The electronic text is textbook is recommended, it is not required. The electronic text is
provided for personal use in connection with this course only. The provided for personal use in connection with this course only. The
copyright for the book is owned by Elsevier. The book can be purchased copyright for the book is owned by Elsevier. The book can be purchased
on Amazon. on Amazon.
...@@ -249,9 +253,9 @@ will be unavailable. ...@@ -249,9 +253,9 @@ will be unavailable.
When will the next courses become available and what topics will they be on? When will the next courses become available and what topics will they be on?
</h2> </h2>
<p> <p>
Additional courses will be announced Additional courses will be announced
on <a href="http://mitx.mit.edu">mitx.mit.edu</a> as they become on <a href="http://mitx.mit.edu">mitx.mit.edu</a> as they become
available. We expect this will happen in fall 2012. available. We expect this will happen in fall 2012.
</p> </p>
</div> </div>
</section> </section>
<%inherit file="marketing.html" /> <%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage"> <section class="subpage">
<div> <div>
<h1> MITx prototype course opens for enrollment&mdash;Online-learning <h1> <i>MITx</i> prototype course opens for enrollment&mdash;Online-learning
initiative&rsquo;s first offering, &lsquo;6.002x: Circuits and initiative&rsquo;s first offering, &lsquo;6.002x: Circuits and
Electronics,&rsquo; accepting registrants now.</h1> Electronics,&rsquo; accepting registrants now.</h1>
...@@ -10,7 +13,7 @@ Electronics,&rsquo; accepting registrants now.</h1> ...@@ -10,7 +13,7 @@ Electronics,&rsquo; accepting registrants now.</h1>
<p> In December, <p> In December,
MIT <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html">announced </a>the 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;MITx.&rdquo; launch of an online learning initiative called &ldquo;<i>MITx</i>.&rdquo;
Starting this week, interested learners can now enroll for free in the Starting this week, interested learners can now enroll for free in the
initiative&rdquo;s prototype course -- 6.002x: Circuits and initiative&rdquo;s prototype course -- 6.002x: Circuits and
Electronics.</p> Electronics.</p>
...@@ -25,14 +28,14 @@ Engineering and Computer Science (EECS) &mdash; 6.002x will introduce ...@@ -25,14 +28,14 @@ Engineering and Computer Science (EECS) &mdash; 6.002x will introduce
engineering in the context of the lumped circuit abstraction, helping engineering in the context of the lumped circuit abstraction, helping
students make the transition from physics to the fields of electrical students make the transition from physics to the fields of electrical
engineering and computer science. It will be taught by Anant Agarwal, engineering and computer science. It will be taught by Anant Agarwal,
EECS professor and director of MIT&rdquo;s Computer Science and EECS professor and director of MIT's Computer Science and
Artificial Intelligence Laboratory (CSAIL); Chris Terman, CSAIL Artificial Intelligence Laboratory (CSAIL); Chris Terman, CSAIL
co-director; EECS Professor Gerald Sussman; and CSAIL Research co-director; EECS Professor Gerald Sussman; and CSAIL Research
Scientist Piotr Mitros.</p> Scientist Piotr Mitros.</p>
<blockquote> <blockquote>
<p> <p>
&ldquo;We are very excited to begin MITx with this prototype &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 class,&rdquo; says MIT Provost L. Rafael Reif. &ldquo;We will use
this prototype course to optimize the tools we have built by this prototype course to optimize the tools we have built by
soliciting and acting on feedback from learners.&rdquo; soliciting and acting on feedback from learners.&rdquo;
...@@ -53,7 +56,7 @@ each week on the course. ...@@ -53,7 +56,7 @@ each week on the course.
</p> </p>
<blockquote> <blockquote>
&ldquo;We invite you to join us for this pilot course of MITx,&rdquo; &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 Agarwal says. &ldquo;The 6.002x team of professors and teaching
assistants is excited to work with you on the discussion forum, and we assistants is excited to work with you on the discussion forum, and we
look forward to your feedback to improve the learning look forward to your feedback to improve the learning
...@@ -67,22 +70,21 @@ be found here.</a></p> ...@@ -67,22 +70,21 @@ be found here.</a></p>
about 6.002x can be found here.</a></p> about 6.002x can be found here.</a></p>
<p> <p>
<a href="/mitx-overview.html"> <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219">
FAQs about MITx as a whole can be found here. FAQs about <i>MITx</i> as a whole can be found here.
</a> </a>
</p> </p>
<p> <p>
At the end of the prototype course, students who demonstrate their At the end of the prototype course, students who demonstrate their
mastery will be able to receive a certificate of completion for mastery will be able to receive a certificate of completion for
free. In future MITx courses, students who complete the mastery free. In future <i>MITx</i> courses, students who complete the mastery
requirement on MITx will be able to receive the credential for a requirement on <i>MITx</i> will be able to receive the credential for a
modest fee. modest fee.
</p> </p>
<p> <p>
Enrollment in 6.002x is limited, and registrations will be taken on a Further courses are expected to become
first-come, first-served basis. Further courses are expected to become
available beginning in the fall. available beginning in the fall.
</p> </p>
...@@ -110,19 +112,19 @@ http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html ...@@ -110,19 +112,19 @@ http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html
</a> </a>
<h3> <h3>
MITx website <i>MITx</i> website
</h3> </h3>
<a href="http://mitx.mit.edu"> <a href="http://mitx.mit.edu">
http://mitx.mit.edu http://mitx.mit.edu
</a> </a>
<h3> <!--h3>
TAGS: TAGS:
</h3> </h3>
<p> <p>
MITx; students; education, teaching, academics; innovation and <i>MITx</i>; students; education, teaching, academics; innovation and
invention; faculty; mit administration; learning; electrical invention; faculty; mit administration; learning; electrical
engineering and computer science; csail engineering and computer science; csail
</p> </p-->
</div> </div>
</section> </section>
<%inherit file="marketing.html" />
<%inherit file="main.html" /> <section class="tos">
<div>
<section class="activation"> <section class="activation">
<h1>Account already active!</h1> <h1>Account already active!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> --> <!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p> This account has already been activated. We will notify you as <p> This account has already been activated. We will notify you as
soon as the course starts.</p> soon as the course starts.</p>
<p>For now you can go to the <a href="https://mitx.mit.edu/">MITx homepage</a> or the <a href="/">6.002x course page</a>.</p>
</div>
</section> </section>
<%inherit file="marketing.html" />
<%inherit file="main.html" /> <section class="tos">
<div>
<section class="activation">
<h1>Activation Complete!</h1> <h1>Activation Complete!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> --> <!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p>Thanks for activating your email. We will notify you as soon as the course starts.</p> <p>Thanks for activating your email. We will notify you as soon as the course starts.</p>
<p>For now you can go to the <a href="https://mitx.mit.edu/">MITx homepage</a> or the <a href="/">6.002x course page</a>.</p>
</div>
</section> </section>
<%inherit file="main.html" /> <%inherit file="marketing.html" />
<section class="activation">
<section class="tos">
<div>
<h1>Activation Invalid</h1> <h1>Activation Invalid</h1>
<p>Something went wrong. Check to make sure the URL you went to was <p>Something went wrong. Check to make sure the URL you went to was
correct -- e-mail programs will sometimes split it into two 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 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> 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> </section>
<!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details--> <!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details-->
<div name="enroll_form" id="enroll_form"> <div name="enroll_form" id="enroll_form">
<h1>Enroll in 6.002 Circuits &amp; Electronics</h1> <h1>Enroll in 6.002x Circuits &amp; Electronics</h1>
<form name="enroll" id="enroll_form" method="get"> <form name="enroll" id="enroll_form" method="get">
<fieldset><% if 'error' in locals(): e = error %> <fieldset><% if 'error' in locals(): e = error %>
...@@ -11,26 +11,26 @@ ...@@ -11,26 +11,26 @@
<li class="email"> <li class="email">
<label>E-mail*</label> <label>E-mail*</label>
<input name="email" id="ca_email" type="email" required /> <input name="email" id="ca_email" type="email" />
</li> </li>
<li class="password"> <li class="password">
<label>Password*</label> <label>Password*</label>
<input name="password" id="ca_password" type="password" required /> <input name="password" id="ca_password" type="password" />
</li> </li>
<li class="username"> <li class="username">
<label>Username (public)* <span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></span></label> <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" required /> <input name="username" id="ca_username" type="text" />
<div id="sregion_nick" class="tip">Nickname you'd like to use on forums.</div> <div id="sregion_nick" class="tip">Nickname you'd like to use on forums.</div>
</li> </li>
<li class="full-name"> <li class="full-name">
<label>Full name<span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label> <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" /> <input name="name" id="ca_name" type="text" />
<div class="tip" id="sregion_name">If you would like us to give you a certificate of completion at the end, we need your full legal name, as you would like it to appear on the certificate (e.g. &quot;John Smith, Jr&quot;).</div> <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>
<li class="location"> <li class="location">
...@@ -49,16 +49,17 @@ ...@@ -49,16 +49,17 @@
</li> </li>
<li class="terms"> <li class="terms">
<label> <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" required />I agree to the Terms of Service*</label> <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>
<li class="honor-code"> <li class="honor-code">
<label> <label>
<input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code" required />I agree to the 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> <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 engage in any activities that would dishonestly improve my results, or improve or hurt those of others.</li>
<li>Never post answers to problems.</li> <li>Not post answers to problems that are being used to assess student performance.</li>
<li>Maintain only one account.</li>
</ul> </ul>
</li> </li>
......
../data/custom_tags
\ No newline at end of file
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<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>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" target="_blank">Amazon</a>.</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>
<section class="requirements"> <section class="requirements">
......
<!-- TODO: http://docs.jquery.com/Plugins/Validation --> <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
${ error }
<div id="login_div"> <div id="login_div">
<header> <header>
<h1>Log in to MITx</h1> <h1>Log in to MITx</h1>
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /> <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" /> <link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/> <link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script> <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
...@@ -38,7 +37,7 @@ ...@@ -38,7 +37,7 @@
</head> </head>
<body> <body class="<%block name="bodyclass"/>">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
......
...@@ -68,7 +68,9 @@ function postJSON(url, data, callback) { ...@@ -68,7 +68,9 @@ function postJSON(url, data, callback) {
<nav> <nav>
<h1><a href="http://mitx.mit.edu/">MITx</a></h1> <h1><a href="http://mitx.mit.edu/">MITx</a></h1>
% if settings.COURSEWARE_ENABLED: % if settings.COURSEWARE_ENABLED:
<%block name="login_area">
<a rel="leanModal" class="login" href="#login">Log In</a> <a rel="leanModal" class="login" href="#login">Log In</a>
</%block>
% endif % endif
</nav> </nav>
</%block> </%block>
...@@ -94,6 +96,7 @@ function postJSON(url, data, callback) { ...@@ -94,6 +96,7 @@ function postJSON(url, data, callback) {
<li><a href="/t/tos.html">Terms of Service</a></li> <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/privacy.html">Privacy Policy</a></li>
<li><a href="/t/honor.html">Honor Code</a></li> <li><a href="/t/honor.html">Honor Code</a></li>
<li><a href="/t/mitx_help.html">Help</a></li>
</ul> </ul>
</div> </div>
</footer> </footer>
......
<%inherit file="marketing.html" /> <%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage"> <section class="subpage">
<div> <div>
<h1> MITx Advances MIT&rsquo;s Vision for Online Learning</h1> <h1> <i>MITx</i> Advances MIT&rsquo;s Vision for Online Learning</h1>
<p> Education has entered an era of rapid, exciting, <p> Education has entered an era of rapid, exciting,
technology-enabled change. At MIT, we welcome the opportunity to technology-enabled change. At MIT, we welcome the opportunity to
harness the power of on-line technology for our students and for the harness the power of on-line technology for our students and for the
world. On December 19, 2011, we announced MITx, an initiative to world. On December 19, 2011, we announced <i>MITx</i>, an initiative to
offer exciting, challenging, and enriching courses to anyone, offer exciting, challenging and enriching courses to anyone,
anywhere, who has the motivation and ability to engage MIT&rsquo;s anywhere, who has the motivation and ability to engage MIT&rsquo;s
educational content.</p> educational content.</p>
<p> Ten years ago, MIT <p> Ten years ago, MIT
launched <a href="http://ocw.mit.edu/index.htm">OpenCourseware</a>, launched <a href="http://ocw.mit.edu/index.htm">OpenCourseWare</a>,
which places online the course materials for substantially the entire which places online the course materials for substantially the entire
MIT curriculum, and was the genesis of today&rsquo;s worldwide MIT curriculum, and was the genesis of today&rsquo;s worldwide
movement in free, open educational resources. MITx is the next step 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 in opening MIT&rsquo;s educational doors to the world. Through OCW and
MITx, MIT invites the world to join it in the passion, hard work, and <i>MITx</i>, MIT invites the world to join it in the passion, hard work and
thrill of learning and discovery.</p> thrill of learning and discovery.</p>
<h2>MITx will e-publish interactive online courses that:</h2> <h2><i>MITx</i> will e-publish interactive online courses that:</h2>
<ul> <ul>
<li>Empower students to learn at their own pace;</li> <li>Empower students to learn at their own pace;</li>
<li>Offer online laboratories where students can experiment and apply their learning;</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>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>Challenge learners with MIT-rigor course materials; and</li>
<li>Assess individual student learning as the student progresses through the course.</li> <li>Assess individual student learning as the student progresses through the course.</li>
</ul> </ul>
<p> MITx students who demonstrate their mastery of a subject can earn <p> <i>MITx</i> students who demonstrate their mastery of a subject can earn
a certificate of completion awarded by MITx.</p> a certificate of completion awarded by <i>MITx</i>.</p>
<p> MITx courses will be available to the world through an Internet <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 platform that MIT will make freely available. MIT hopes that other
educational institutions, anywhere in the world, will adapt and use educational institutions, anywhere in the world, will adapt and use
the platform to publish their own educational content online for the the platform to publish their own educational content online for the
benefit of learners. Because the platform will be open-source and benefit of learners. Because the platform will be open-source and
scalable, adopters and users can continuously improve it, for the scalable, adopters and users can continuously improve it, for the
benefit of everyone.</p> benefit of everyone.</p>
<h2> Why Is MIT Creating MITx?</h2> <h2> Why Is MIT Creating <i>MITx</i>?</h2>
<p> Excellence in teaching and learning. MIT must always provide its <p> Excellence in teaching and learning. MIT must always provide its
students the very best teaching and learning tools possible. MIT students the very best teaching and learning tools possible. MIT
began experimenting with online technologies in its educational began experimenting with online technologies in its educational
programs long before we launched OCW in 2001. We have only increased programs long before we launched OCW in 2001. We have only increased
our emphasis in recent years, as several MIT committees have studied our emphasis in recent years, as several MIT committees have studied
how MIT might enhance the learning experience of its students and how MIT might enhance the learning experience of its students and
expand its impact worldwide through new online offerings.</p> expand its impact worldwide through new online offerings.</p>
<p> These efforts, combined with those of numerous individual MIT <p> These efforts, combined with those of numerous individual MIT
faculty members, confirmed MIT&rsquo;s conviction that digital faculty members, confirmed MIT&rsquo;s conviction that digital
technologies enrich learning. Many other innovative institutions and technologies enrich learning. Many other innovative institutions and
enterprises believe the same and are bringing creative online enterprises believe the same and are bringing creative online
offerings forward. Having brain-stormed, investigated, and studied, offerings forward. Having brain-stormed, investigated and studied,
we were ready to act and eager to start. We announced our MITx 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 aspiration to capture and encourage the energy of our faculty in
creating new online teaching and learning tools. </p> creating new online teaching and learning tools. </p>
<p> Once up and running, MITx will be a laboratory for online <p> Once up and running, <i>MITx</i> will be a laboratory for online
learning. Whether MITx learners are MIT&rsquo;s on-campus students, learning. Whether <i>MITx</i> learners are MIT&rsquo;s on-campus students,
university students elsewhere, or independent learners, MITx will help university students elsewhere, or independent learners, <i>MITx</i> will help
us understand how online learning occurs and how virtual communities us understand how online learning occurs and how virtual communities
of learners assemble -- information that in turn will allow us to of learners assemble -- information that in turn will allow us to
improve both MITx and our on-campus teaching. </p> improve both <i>MITx</i> and our on-campus teaching. </p>
<p> Access to higher education. MITx will help shatter barriers to <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 education. The constraints of MIT&rsquo;s physical campus allow us to
admit less than 10 percent of our undergraduate applicants. We teach 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 on-campus only a tiny fraction of the people in the world with the
ability and motivation to learn MIT content. Online technology ability and motivation to learn MIT content. Online technology
provides a new and different portal into MIT-quality education. provides a new and different portal into MIT-quality education.
Through MITx, MIT educational content can reach, augment, and enrich Through <i>MITx</i>, MIT educational content can reach, augment, and enrich
the education and livelihood of many learners who cannot attend the education and livelihood of many learners who cannot attend
MIT. </p> MIT. </p>
<p> MITx does not provide a full MIT education. Our residential <p> <i>MITx</i> does not provide a full MIT education. Our residential
campus is the heart of MIT&rsquo;s knowledge creation and campus is the heart of MIT&rsquo;s knowledge creation and
dissemination. MIT students enjoy a comprehensive curriculum and dissemination. MIT students enjoy a comprehensive curriculum and
distinct educational environment. Without MIT, there would be no distinct educational environment. Without MIT, there would be no
MITx. </p> <i>MITx</i>. </p>
<p> Advancing the public good. MITx is an opportunity to help <p> Advancing the public good. <i>MITx</i> is an opportunity to help
preserve and expand higher education as a public good. Historically, preserve and expand higher education as a public good. Historically,
the investment of public and private assets in enormous amounts has the investment of public and private assets in enormous amounts has
produced the public benefits of knowledge creation and dissemination, produced the public benefits of knowledge creation and dissemination,
leading to capable citizens, innovation, job creation, economic leading to capable citizens, innovation, job creation, economic
...@@ -96,7 +98,7 @@ education to migrate online, MIT sees the opportunity to democratize ...@@ -96,7 +98,7 @@ education to migrate online, MIT sees the opportunity to democratize
education with unprecedented efficiency and scalability. We possess a education with unprecedented efficiency and scalability. We possess a
strong desire and feel a compelling obligation to offer a strong desire and feel a compelling obligation to offer a
not-for-profit, mission-driven, open-technology approach to online not-for-profit, mission-driven, open-technology approach to online
learning. MITx is our contribution. </p> learning. <i>MITx</i> is our contribution. </p>
</div> </div>
</section> </section>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</section> </section>
<section class="intro-video"> <section class="intro-video">
<a rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" alt="" /><span> Watch intro video</span></a> <a id="video-overlay-link" rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" id="video-img" alt="" /><span> Watch intro video</span></a>
</section> </section>
</section> </section>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<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> <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> </ul>
<p><strong>Press &amp; links:</strong> <a href="/t/6002x-press-release.html">6.002x Press Release</a>, <a href="/t/6002x-faq.html">6.002x FAQ</a>, <a href="/t/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>, </p> <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> </section>
...@@ -43,17 +43,37 @@ ...@@ -43,17 +43,37 @@
<a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll</a> <a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll</a>
</p> </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 1, 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> <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>
</section> </section>
<div id="video-overlay" class="leanModal_box"> <div id="video-overlay" class="leanModal_box">
<iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe> <iframe id="player" type="text/html" width="560" height="390" src="http://www.youtube.com/embed/p2Q6BrNhdh8?enablejsapi=1" frameborder="0">
</iframe>
</div> </div>
<script> <script>
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
});
}
$(function() { $(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 // 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. /* Handles when the user hits 'enroll'. Grabs form data. Does AJAX.
...@@ -89,7 +109,7 @@ $(function() { ...@@ -89,7 +109,7 @@ $(function() {
}); });
}) })
/*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */ /*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */
}); });
</script> </script>
<%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, 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></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>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<h1>Password reset unsuccessful</h1> <h1>Password reset unsuccessful</h1>
<p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p> <p>The password reset link was invalid, possibly because the link has already been used. Please request a new password reset.</p>
{% endif %} {% endif %}
......
section.activation {
@extend .wrapper;
@include box-shadow(0 1px 0 #fff);
@include box-sizing(border-box);
background: #fff;
border-top: 0;
border: 1px solid #ccc;
max-width: 600px;
padding: lh();
margin-top: lh();
}
body {
background-color: #fff;
color: #444;
font: $body-font-size $body-font-family;
:focus {
outline-color: #ccc;
}
h1 {
font: 800 24px $header-font-family;
}
li {
margin-bottom: lh();
}
em {
font-style: italic;
}
a {
color: $mit-red;
font-style: italic;
text-decoration: none;
&:hover, &:focus {
color: darken($mit-red, 10%);
}
}
#{$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;
width: 100%;
&:focus {
border-color: $mit-red;
}
}
}
header.announcement {
@include background-size(cover);
background: #333;
border-bottom: 1px solid #000;
color: #fff;
-webkit-font-smoothing: antialiased;
&.home {
background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
}
// @media screen and (max-width: 1199px) {
// }
div {
padding: lh(10) lh() lh(3);
//hide login link for homepage
nav {
h1 {
margin-right: 0;
}
a.login {
display: none;
}
}
}
}
&.course {
background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
}
@media screen and (max-width: 1199px) and (min-width: 700px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
}
div {
padding: lh(4) lh() lh(2);
}
}
div {
@extend .wrapper;
position: relative;
nav {
position: absolute;
top: 0;
right: lh();
@include border-radius(0 0 3px 3px);
background: #333;
background: rgba(#000, .7);
padding: lh(.5) lh();
h1 {
@include inline-block();
margin-right: lh(.5);
a {
font: italic 800 18px $header-font-family;
color: #fff;
text-decoration: none;
&:hover, &:focus {
color: #999;
}
}
}
a.login {
text-decoration: none;
color: #fff;
font-size: 12px;
font-style: normal;
font-family: $header-font-family;
&:hover, &:focus {
color: #999;
}
}
}
section {
@extend .clearfix;
@include inline-block();
background: $mit-red;
margin-left: flex-grid(4) + flex-gutter();
padding: lh() lh(1.5);
h1 {
@include inline-block();
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
@include inline-block();
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
line-height: 1.2em;
}
&.course {
section {
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
float: left;
margin-left: 0;
padding: 0;
a {
@extend .button;
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
background-color: darken($mit-red, 20%);
display: block;
padding: lh(.5) lh();
border-color: darken($mit-red, 30%);
text-align: center;
&:hover {
background-color: darken($mit-red, 10%);
border-color: darken($mit-red, 20%);
}
}
}
p {
width: flex-grid(4, 8);
line-height: lh();
float: left;
}
}
}
}
}
section.index-content {
@extend .wrapper;
@extend .clearfix;
section {
@extend .clearfix;
float: left;
h1 {
font-size: 24px;
font-weight: 800;
font-family: "Open Sans";
margin-bottom: lh();
}
p {
line-height: lh();
margin-bottom: lh();
}
ul {
margin: 0;
// list-style: disc outside none;
// li {
// list-style: disc outside none;
// }
}
&.about {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
section {
@extend .clearfix;
margin-bottom: lh();
p {
width: flex-grid(4, 8);
float: left;
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
a {
display: block;
width: 100%;
img {
width: 100%;
}
span {
display: none;
}
}
}
}
}
&.features {
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: lh();
span {
text-transform: none;
}
}
p {
width: auto;
clear: both;
strong {
font-family: "Open sans";
font-weight: 800;
}
a {
color: $mit-red;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: darken($mit-red, 15%);
}
}
}
ul {
margin-bottom: 0;
li {
line-height: lh();
width: flex-grid(4, 8);
float: left;
margin-bottom: lh(.5);
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
}
}
}
}
&.course, &.staff {
width: flex-grid(4);
h1 {
font: normal $body-font-size $body-font-family;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: lh();
}
h2 {
font: 800 24px $header-font-family;
}
h3 {
font: 400 18px $header-font-family;
}
a {
@extend .button;
}
ul {
list-style: none;
li {
img {
float: left;
margin-right: lh(.5);
}
}
}
}
&.course {
h2 {
padding-top: lh(5);
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
@include background-size(contain);
@media screen and (max-width: 998px) {
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
}
}
}
// index
//---------------------------------------- //
&.about-course {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
section {
width: flex-grid(4, 8);
&.about-info {
margin-right: flex-gutter(8);
}
&.requirements {
clear: both;
width: 100%;
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
p {
float: left;
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
&:nth-child(odd) {
margin-right: 0;
}
}
}
&.cta {
width: 100%;
text-align: center;
a.enroll {
@extend .button;
padding: lh(.5) lh(2);
@include inline-block();
text-align: center;
font: 800 18px $header-font-family;
}
}
}
}
}
}
section.copyright, section.tos, section.privacy-policy, section.honor-code {
@extend .subpage;
}
footer {
@extend .wrapper;
@extend .clearfix;
padding-top: 0;
div.footer-wrapper {
border-top: 1px solid #e5e5e5;
padding: lh() 0;
background: url('/static/images/marketing/mit-logo.png') right center no-repeat;
a {
color: #888;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: #666;
}
}
p {
@include inline-block();
margin-right: lh();
}
ul {
@include inline-block();
li {
@include inline-block();
&:after {
content: ' |';
display: inline;
color: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
}
}
}
#hide_acc {
min-height:600;
}
#mainblock {
border: 0;
padding: 0;
margin: 0;
width: 200;
min-height:600px;
margin-left: 276px;
margin-right: 0px;
}
.bordered { border: 1px solid #AAAAAA; border-style : dotted; }
.seq_problem_visited { background-color: #ccccaa;}
.seq_video_visited { background-color: #ccaacc;}
.seq_html_visited { background-color: #caaccc;}
.seq_tab_visited { background-color: #aacccc;}
.seq_vertical_visited { background-color: #acaccc;}
.seq_sequential_visited { background-color: #cacacc;}
.seq_problem_visited { background-color: #ccacac;}
.seq_schematic_visited { background-color: #cccaca;}
.seq_problem_inactive { background-color: #aaaa99;}
.seq_video_inactive { background-color: #aa99aa;}
.seq_video_inactive { background-color: #aaa99a;}
.seq_html_inactive { background-color: #a99aaa;}
.seq_tab_inactive { background-color: #99aaaa;}
.seq_vertical_inactive { background-color: #9a9aab;}
.seq_sequential_inactive { background-color: #a9a9aa;}
.seq_problem_inactive { background-color: #aa9a9a;}
.seq_schematic_inactive { background-color: #aaa9a9;}
.seq_active { background-color: red;}
/*
----------------------------------------------------------------------------------------
Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.
THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate
pmitros donated $10
Colors:
Light blue: bddeff
Blue: 7fbcfd
Very dark blue: #031634
Dark blue: #023063;
Dark Greenish: #7a994c;
Greenish: #adcc80;
Very light greenish: #dae5c9;
Bright orange: #fa720a;
----------------------------------------------------------------------------------------
*/
h1 {
clear:both;
}
h2 {
clear:both;
}
h3 {
font-size:1em;
margin:20px 0 5px 0;
clear:both;
}
#wrapper {
background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
margin:0 auto ;
width:100%;
}
// marketing pages
#topWrapper {
width:100%;
height:100px;
background-image:url(images/css/topWrapper-bg.jpg);
background-position:center top ;
background-repeat:repeat-x;
}
#topBanner {
width:800px;
margin:0 auto;
height:100px;
background-image:url(images/css/topBanner.jpg);
background-repeat:no-repeat;
}
#topnav {
background:transparent url('images/css/hmenu.jpg') repeat-x top left;
height:20px;
margin:0 auto ;
text-align:center;
width:800px;
ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:20px;
text-transform:uppercase;
font-size:0.9em;
font-family:Arial,sans-serif;
li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url('images/css/hmenu.jpg') repeat-x top left;
a {
display:block;
float:left;
color:#031634;
text-decoration:none;
padding:0px 50px ;
line-height:20px;
font-weight:bold;
}
}
}
}
#topnav ul li a:hover, #topnav li#current a {
color:#7a994c;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
}
#bg {
margin:0 auto;
padding:0;
background:transparent ;
background-image:url(images/css/hat.jpg);
background-repeat:no-repeat;
background-position: center top ;
}
#header {
margin: 0 auto;
min-height:0px;
height: 0px;
width: 800px;
}
#page {
background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
}
#container {
margin:0 auto;
width:800px;
}
#content {
width:780px;
margin:0 auto ;
text-align:left;
min-height:800px;
}
#content p {
text-align:justify;
}
#footerWrapper {
margin:0 auto;
height:10px;
padding:0;
background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
}
#footer {
margin:0 auto;
padding:0;
width:800px;
height:10px;
}
#sidebar ul.vmenu {
list-style: none;
text-align: left;
margin: 7px 0px 8px 0px;
padding: 0;
text-decoration: none;
border-top: 1px solid #eeeeee;
}
#sidebar ul.vmenu li {
list-style: none;
padding: 4px 0 4px 0px;
margin: 0 2px;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul.vmenu li a {
text-decoration: none;
color:#023063;
}
#sidebar ul.vmenu li a:hover {
color:#adcc80;
}
#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.vmenu ul li { border: none; }
@import "bourbon/bourbon"; @import "bourbon/bourbon";
@import "reset";
@import "font-face";
// Base layout // Base layout
@import "base-variables", "base-extends", "base"; @import "base/reset", "base/font-face";
@import "layout"; @import "base/variables", "base/functions", "base/extends", "base/base";
@import "leanmodal"; @import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal";
@import "jquery-ui-1.8.16.custom";
// pages // pages
@import "courseware", "courseware-video", "courseware-sequence-nav"; @import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav";
@import "textbook"; @import "textbook";
@import "info"; @import "info";
@import "profile"; @import "profile";
@import "wiki-basic-html", "wiki-create", "wiki"; @import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki";
@import "activation";
@import "help"; @import "help";
@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar"; @import "discussion/askbot-original", "discussion/discussion", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar";
// left over
// @import "theme";
// @import "local";
...@@ -29,6 +29,11 @@ em { ...@@ -29,6 +29,11 @@ em {
font-style: italic; font-style: italic;
} }
img {
max-width: 100%;
height: auto;
}
#{$all-text-inputs}, textarea { #{$all-text-inputs}, textarea {
@include box-shadow(0 -1px 0 #fff); @include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff); @include linear-gradient(#eee, #fff);
......
// Functions
//---------------------------------------- //
// Flexible grid // Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) { @function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter; $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
...@@ -14,8 +11,13 @@ ...@@ -14,8 +11,13 @@
@return percentage($gutter / $container-width); @return percentage($gutter / $container-width);
} }
// Percentage of container calculator
@function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width);
}
// Line-height // Line-height
@function lh($amount: 1) { @function lh($amount: 1) {
@return $lh * $amount; @return $body-line-height * $amount;
} }
// 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;
}
// Variables // Variables
// ---------------------------------------- // // ---------------------------------------- //
......
// Custom Functions // Custom Functions
@import "functions/deprecated-webkit-gradient"; @import "functions/deprecated-webkit-gradient";
@import "functions/golden-ratio";
@import "functions/grid-width"; @import "functions/grid-width";
@import "functions/modular-scale";
@import "functions/tint-shade"; @import "functions/tint-shade";
// CSS3 Mixins // CSS3 Mixins
......
$georgia: Georgia, Cambria, "Times New Roman", Times, serif; $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, 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; $verdana: Verdana, Geneva, sans-serif;
// http://www.w3.org/TR/css3-animations/#the-animation-name-property- // 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. // 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, @mixin animation-name ($name-1,
$name-2: false, $name-3: false, $name-2: false, $name-3: false,
$name-4: false, $name-5: false, $name-4: false, $name-5: false,
...@@ -127,8 +143,7 @@ ...@@ -127,8 +143,7 @@
} }
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable. // Deprecated
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
@mixin animation-basic ($name, $time: 0, $motion: ease) { @mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name); $length-of-name: length($name);
$length-of-time: length($time); $length-of-time: length($time);
...@@ -151,11 +166,6 @@ ...@@ -151,11 +166,6 @@
} @else { } @else {
@include animation-timing-function( $motion); @include animation-timing-function( $motion);
} }
@warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
} }
// Official animation shorthand property. Needs more work to actually be useful.
@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
-webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
-moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
animation: $name $duration $timing-function $delay $iteration-count $direction;
}
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
$G3: false, $G4: false, $G3: false, $G4: false,
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false) { $G9: false, $G10: false,
$fallback: false) {
// Detect what type of value exists in $pos // Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1)); $pos-type: type-of(nth($pos, 1));
...@@ -15,7 +16,15 @@ ...@@ -15,7 +16,15 @@
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
background-color: nth($G1, 1); // 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: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full); background-image: -moz-linear-gradient($pos, $full);
...@@ -27,5 +36,6 @@ ...@@ -27,5 +36,6 @@
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. // 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);
// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%); // @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%); // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
@function golden-ratio($value, $increment) { @function modular-scale($value, $increment, $ratio) {
@if $increment > 0 { @if $increment > 0 {
@for $i from 1 through $increment { @for $i from 1 through $increment {
$value: ($value * 1.618); $value: ($value * $ratio);
} }
} }
@if $increment < 0 { @if $increment < 0 {
$increment: abs($increment); $increment: abs($increment);
@for $i from 1 through $increment { @for $i from 1 through $increment {
$value: ($value / 1.618); $value: ($value / $ratio);
} }
} }
...@@ -16,16 +16,25 @@ ...@@ -16,16 +16,25 @@
} }
// div { // div {
// Increment Up GR with positive value // Increment Up GR with positive value
// font-size: golden-ratio(14px, 1); // returns: 22.652px // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
// //
// Increment Down GR with negative value // Increment Down GR with negative value
// font-size: golden-ratio(14px, -1); // returns: 8.653px // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
// //
// Can be used with ceil(round up) or floor(round down) // Can be used with ceil(round up) or floor(round down)
// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
// } // }
// //
// modularscale.com // modularscale.com
@function golden-ratio($value, $increment) {
@return modular-scale($value, $increment, 1.618)
}
// div {
// font-size: golden-ratio(14px, 1); // returns: 22.652px
// }
//
// goldenratiocalculator.com // goldenratiocalculator.com
require "bourbon/generator"
module Bourbon module Bourbon
if defined?(Rails) if defined?(Rails)
class Engine < ::Rails::Engine class Engine < ::Rails::Engine
......
...@@ -5,84 +5,6 @@ div.course-wrapper { ...@@ -5,84 +5,6 @@ div.course-wrapper {
list-style: none; list-style: none;
} }
div#accordion {
@extend .sidebar;
div#open_close_accordion {
position: absolute;
right: 0px;
width: 20px;
height: 20px;
background: #ccc;
border: 1px solid black;
right: -22px;
top: 5px;
}
h3 {
overflow: hidden;
margin: 0;
&:last-child {
@include box-shadow(none);
}
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
@extend .active;
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
overflow: hidden;
li {
&.active {
font-weight: bold;
}
a {
text-decoration: none;
margin-bottom: lh(.5);
display: block;
color: #000;
&:hover {
color: #666;
}
p {
margin-bottom: 0;
&.subtitle {
color: #666;
}
}
}
}
}
}
section.course-content { section.course-content {
@extend .content; @extend .content;
......
div#accordion {
@extend .sidebar;
div#open_close_accordion {
position: absolute;
right: 0px;
width: 20px;
height: 20px;
background: #ccc;
border: 1px solid black;
right: -22px;
top: 5px;
}
h3 {
overflow: hidden;
margin: 0;
&:last-child {
@include box-shadow(none);
}
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
@extend .active;
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
overflow: hidden;
li {
&.active {
font-weight: bold;
}
a {
text-decoration: none;
margin-bottom: lh(.5);
display: block;
color: #000;
&:hover {
color: #666;
}
p {
margin-bottom: 0;
&.subtitle {
color: #666;
}
}
}
}
}
}
...@@ -650,17 +650,17 @@ body.anon #searchBar { ...@@ -650,17 +650,17 @@ body.anon #searchBar {
// padding-top: 6px; // padding-top: 6px;
// font-family: 'Yanone Kaffeesatz',sans-serif; } // font-family: 'Yanone Kaffeesatz',sans-serif; }
#listSearchTags { // #listSearchTags {
float: left; // float: left;
margin-top: 3px; // margin-top: 3px;
color: #707070; // color: #707070;
font-size: 16px; // font-size: 16px;
font-family: 'Yanone Kaffeesatz',sans-serif; } // font-family: 'Yanone Kaffeesatz',sans-serif; }
ul#searchTags { // ul#searchTags {
margin-left: 10px; // margin-left: 10px;
float: right; // float: right;
padding-top: 2px; } // padding-top: 2px; }
// .search-tips { // .search-tips {
// font-size: 16px; // font-size: 16px;
......
...@@ -17,73 +17,19 @@ ...@@ -17,73 +17,19 @@
text-decoration: none; text-decoration: none;
} }
} }
.action-link {
a {
color: darken(#F6EFD4, 50%);
// Layout &:hover {
body.askbot { text-decoration: none;
.secondary-nav { color: darken(#F6EFD4, 70%);
margin: 0;
nav {
@extend .clearfix;
@extend .topbar;
@extend .wrapper;
@include box-sizing(border-box);
border: 1px solid darken(#F6EFD4, 10%);
border-top: 0;
margin: 0 auto;
padding: $body-line-height;
div {
float: left;
&.question-filter {
font-size:16px;
margin-top: 4px;
width: flex-grid(4);
ul {
@include border-radius(35px);
background: darken(#F6EFD4, 20%);
display: inline;
margin: 0 0 0 10px;
padding: $body-line-height/4 20px;
li {
display: inline-block;
list-style: none;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
a {
text-transform: capitalize;
text-shadow: none;
font-size: 14px;
&.on {
font-weight: bold;
}
}
}
}
}
&.search-box {
margin-left:2%;
text-align:right;
width: flex-grid(8);
input[type="text"] {
margin-right: 6px;
width: flex-grid(2,8);
}
}
}
} }
} }
}
// Layout
body.askbot {
section.main-content { section.main-content {
div.discussion-wrapper { div.discussion-wrapper {
...@@ -92,9 +38,9 @@ body.askbot { ...@@ -92,9 +38,9 @@ body.askbot {
div.discussion-content { div.discussion-content {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding: $gw-gutter; padding: lh();
vertical-align: top; vertical-align: top;
width: flex-grid(9); width: flex-grid(9) + flex-gutter();
p.tabula-rasa { p.tabula-rasa {
@include border-radius(5px); @include border-radius(5px);
...@@ -126,7 +72,7 @@ body.askbot { ...@@ -126,7 +72,7 @@ body.askbot {
@include border-radius(0 4px 4px 0); @include border-radius(0 4px 4px 0);
border-left: 1px solid #d3d3d3; border-left: 1px solid #d3d3d3;
border-right: 1px solid #f6f6f6; border-right: 1px solid #f6f6f6;
padding: $gw-gutter; padding: lh();
width: flex-grid(3); width: flex-grid(3);
h2 { h2 {
...@@ -149,18 +95,4 @@ body.askbot { ...@@ -149,18 +95,4 @@ body.askbot {
} }
} }
// footer {
// margin: 0 auto;
// padding: 0;
// div.footer-wrapper {
// @extend .clearfix;
// @extend .wrapper;
// @include box-shadow(0 1px 0 #fff);
// @include box-sizing(border-box);
// background-color: #000;
// border-top: 0;
// padding: $gw-gutter/2;
// }
// }
} }
...@@ -93,6 +93,7 @@ div.question-header { ...@@ -93,6 +93,7 @@ div.question-header {
float: left; float: left;
margin-right: flex-gutter(8); margin-right: flex-gutter(8);
width: flex-grid(6.2,8); width: flex-grid(6.2,8);
} }
div.post-update-container { div.post-update-container {
......
div.question-controls { div.question-list-header {
display: block; display: block;
margin-bottom: 30px; margin-bottom: 15px;
overflow: hidden; overflow: hidden;
width: flex-grid(9,9); width: flex-grid(9,9);
div { section.question-list-meta {
display: inline-block; display: block;
} overflow: hidden;
width: 100%;
div.question-count { div {
margin-right: flex-gutter(); display: inline-block;
width: flex-grid(4,9); float: left;
}
h1 { span.label {
margin-top: 0; color: #555;
}
div.question-list-title {
margin-right: flex-gutter();
h1 {
margin-top: 0;
}
} }
}
div.question-sort {
vertical-align: bottom;
width: flex-grid(5,9);
nav { div.question-sort {
@include border-radius(35px);
background-color: lighten(#F6EFD4, 5%) ;
height: 30px;
float: right; float: right;
font-size: 16px; margin-left: flex-gutter();
margin: 3px 0;
padding:0px 20px 5px;
a { nav {
color: darken(#F6EFD4, 50%); @extend .action-link;
float: right;
&.on span{ a {
font-weight: bold; &.on span{
} font-weight: bold;
}
&:before { &:before {
content: '|'; content: '|';
color: darken(#F6EFD4, 10%); color: darken(#F6EFD4, 10%);
font-size: 22px; font-size: 22px;
}
} }
}
}
}
&:hover { section.question-tags-list {
text-decoration: none; display: block;
color: darken(#F6EFD4, 70%); min-height: 26px;
overflow: hidden;
padding-top:5px;
width: 100%;
div {
display: inline-block;
float: left;
}
div.back {
margin-right: 10px;
a {
color: #555;
}
}
div.tags-list {
ul.tags {
display: inline;
li {
span.delete-icon, div.delete-icon {
@include border-radius(0 4px 4px 0);
background: #555;
color: #eee;
cursor: pointer;
float: none;
display: inline;
clear: none;
left: 10px;
padding: 3px 6px;
position: relative;
top: 1px;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
} }
} }
} }
} }
} }
ul.question-list { ul.question-list, div#question-list {
width: flex-grid(9,9); width: flex-grid(9,9);
li.single-question { li.single-question {
...@@ -75,7 +123,7 @@ ul.question-list { ...@@ -75,7 +123,7 @@ ul.question-list {
h2 { h2 {
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: bold;
margin: 0px 0 15px 0; margin: 0px 0 15px 0;
text-transform: none; text-transform: none;
} }
...@@ -151,9 +199,5 @@ ul.question-list { ...@@ -151,9 +199,5 @@ ul.question-list {
} }
} }
div.search-tips {
display: block;
}
.search-result-summary { .search-result-summary {
} }
body {
background-color: #fff;
color: #444;
font: $body-font-size $body-font-family;
:focus {
outline-color: #ccc;
}
h1 {
font: 800 24px $header-font-family;
}
li {
margin-bottom: lh();
}
em {
font-style: italic;
}
a {
color: $mit-red;
font-style: italic;
text-decoration: none;
&:hover, &:focus {
color: darken($mit-red, 10%);
}
}
#{$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;
width: 100%;
&:focus {
border-color: $mit-red;
}
}
}
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
p { p {
margin-bottom: lh(); margin-bottom: lh();
line-height: lh();
} }
h1 { h1 {
...@@ -37,6 +38,15 @@ ...@@ -37,6 +38,15 @@
li { li {
list-style: disc outside none; list-style: disc outside none;
line-height: lh();
}
}
dl {
margin-bottom: lh();
dd {
margin-bottom: lh(.5);
} }
} }
} }
......
footer {
@extend .wrapper;
@extend .clearfix;
padding-top: 0;
div.footer-wrapper {
border-top: 1px solid #e5e5e5;
padding: lh() 0;
background: url('/static/images/marketing/mit-logo.png') right center no-repeat;
a {
color: #888;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: #666;
}
}
p {
@include inline-block();
margin-right: lh();
}
ul {
@include inline-block();
li {
@include inline-block();
&:after {
content: ' |';
display: inline;
color: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
}
}
}
header.announcement {
@include background-size(cover);
background: #333;
border-bottom: 1px solid #000;
color: #fff;
-webkit-font-smoothing: antialiased;
&.home {
background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
}
div {
padding: lh(10) lh() lh(3);
//hide login link for homepage
nav {
h1 {
margin-right: 0;
}
a.login {
display: none;
}
}
}
}
&.course {
background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
}
@media screen and (max-width: 1199px) and (min-width: 700px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
}
div {
padding: lh(4) lh() lh(2);
}
}
div {
@extend .wrapper;
position: relative;
nav {
position: absolute;
top: 0;
right: lh();
@include border-radius(0 0 3px 3px);
background: #333;
background: rgba(#000, .7);
padding: lh(.5) lh();
h1 {
@include inline-block();
margin-right: lh(.5);
a {
font: italic 800 18px $header-font-family;
color: #fff;
text-decoration: none;
&:hover, &:focus {
color: #999;
}
}
}
a.login {
text-decoration: none;
color: #fff;
font-size: 12px;
font-style: normal;
font-family: $header-font-family;
&:hover, &:focus {
color: #999;
}
}
}
section {
@extend .clearfix;
@include inline-block();
background: $mit-red;
margin-left: flex-grid(4) + flex-gutter();
padding: lh() lh(1.5);
h1 {
@include inline-block();
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
@include inline-block();
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
line-height: 1.2em;
}
&.course {
section {
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
float: left;
margin-left: 0;
padding: 0;
a {
@extend .button;
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
background-color: darken($mit-red, 20%);
display: block;
padding: lh(.5) lh();
border-color: darken($mit-red, 30%);
text-align: center;
&:hover {
background-color: darken($mit-red, 10%);
border-color: darken($mit-red, 20%);
}
}
}
p {
width: flex-grid(4, 8);
line-height: lh();
float: left;
}
}
}
}
}
section.index-content {
@extend .wrapper;
@extend .clearfix;
section {
@extend .clearfix;
float: left;
h1 {
font-size: 800 24px "Open Sans";
margin-bottom: lh();
}
p {
line-height: lh();
margin-bottom: lh();
}
ul {
margin: 0;
}
&.about {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
section {
@extend .clearfix;
margin-bottom: lh();
p {
width: flex-grid(4, 8);
float: left;
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
a {
display: block;
width: 100%;
img {
width: 100%;
}
span {
display: none;
}
}
}
}
}
&.features {
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: lh();
span {
text-transform: none;
}
}
p {
width: auto;
clear: both;
strong {
font-family: "Open sans";
font-weight: 800;
}
a {
color: $mit-red;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: darken($mit-red, 15%);
}
}
}
ul {
margin-bottom: 0;
li {
line-height: lh();
width: flex-grid(4, 8);
float: left;
margin-bottom: lh(.5);
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
}
}
}
}
&.course, &.staff {
width: flex-grid(4);
h1 {
font: normal $body-font-size $body-font-family;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: lh();
}
h2 {
font: 800 24px $header-font-family;
}
h3 {
font: 400 18px $header-font-family;
}
a {
@extend .button;
}
ul {
list-style: none;
li {
img {
float: left;
margin-right: lh(.5);
}
}
}
}
&.course {
h2 {
padding-top: lh(5);
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
@include background-size(contain);
@media screen and (max-width: 998px) {
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
}
}
}
// index
//---------------------------------------- //
&.about-course {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
section {
width: flex-grid(4, 8);
&.about-info {
margin-right: flex-gutter(8);
}
&.requirements {
clear: both;
width: 100%;
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
p {
float: left;
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
&:nth-child(odd) {
margin-right: 0;
}
}
}
&.cta {
width: 100%;
text-align: center;
a.enroll {
@extend .button;
padding: lh(.5) lh(2);
@include inline-block();
text-align: center;
font: 800 18px $header-font-family;
}
}
}
}
}
}
section.copyright, section.tos, section.privacy-policy, section.honor-code {
@extend .subpage;
}
...@@ -13,15 +13,17 @@ $gw-gutter: 25px; ...@@ -13,15 +13,17 @@ $gw-gutter: 25px;
$body-font-family: Georgia, serif; $body-font-family: Georgia, serif;
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif; $header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
// @media screen and (min-width: 940px) { $body-font-size: 16px;
$body-font-size: 16px;
// }
// @media screen and (min-width:1200px) {
// $body-font-size: 18px;
// }
// @media screen and (max-width: 939px) { // @media screen and (max-width:890px) {
// $body-font-size: 14px; // $body-font-size: 14px;
// } // }
$body-line-height: golden-ratio($body-font-size, 1);
$lh: golden-ratio($body-font-size, 1); $lh: golden-ratio($body-font-size, 1);
// Colors // Colors
......
footer {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
color: #777;
margin-top: $body-line-height;
padding: 0 $body-line-height;
p {
float: left;
a {
color: #444;
&:link, &:visited {
color: #444;
}
&:hover, &:focus {
color: #000;
}
}
}
ul {
float: right;
li {
display: inline-block;
margin-right: 20px;
a {
color: #444;
&:link, &:visited {
color: #444;
}
&:hover, &:focus {
color: #000;
}
}
}
}
}
html { div.header-wrapper {
margin-top: 0; // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
background: $mit-red;
border-bottom: 1px solid #fff;
body { header {
color: $dark-gray; @extend .clearfix;
font: $body-font-size $body-font-family; @extend .wrapper;
text-align: center; @include box-sizing(border-box);
margin: 0; padding: 0 $body-line-height;
background: #f4f4f4; //#f3f1e5
div.header-wrapper {
// @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
background: $mit-red;
border-bottom: 1px solid #fff;
header {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
padding: 0 $body-line-height;
hgroup { hgroup {
@extend .clearfix; @extend .clearfix;
float: left; float: left;
h1 { h1 {
border-right: 1px solid darken($mit-red, 5%); border-right: 1px solid darken($mit-red, 5%);
color: darken($mit-red, 25%); color: darken($mit-red, 25%);
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
margin: 0 lh() 0 0; margin: 0 lh() 0 0;
padding: 17px lh() 14px 0; padding: 17px lh() 14px 0;
text-shadow: 0 1px 0 lighten($mit-red, 10%); text-shadow: 0 1px 0 lighten($mit-red, 10%);
line-height: lh(); line-height: lh();
@include inline-block(); @include inline-block();
} }
h2 { h2 {
@include inline-block(); @include inline-block();
margin: 0 lh() 0 0; margin: 0 lh() 0 0;
padding: 19px lh() 9px 0; padding: 19px lh() 9px 0;
line-height: lh(); line-height: lh();
border-right: 1px solid darken($mit-red, 5%); border-right: 1px solid darken($mit-red, 5%);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
a { a {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: rgba(#fff, .7); color: rgba(#fff, .7);
}
}
} }
}
}
@media screen and (max-width: 920px) { @media screen and (max-width: 920px) {
border-bottom: 1px solid darken($mit-red, 5%); border-bottom: 1px solid darken($mit-red, 5%);
display: block; display: block;
float: none; float: none;
h1 {
float: right;
border: 0;
margin-right: 0;
padding-right: 0;
}
h2 { h1 {
float: left; float: right;
border: 0; border: 0;
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
}
}
} }
nav { h2 {
float: left; float: left;
display: block; border: 0;
margin: 0; margin-right: 0;
padding: 0; padding-right: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
ul {
@extend .clearfix;
display: inline-block;
padding: 19px 0 9px;
margin: 0;
li {
margin-right: lh();
display: inline-block;
margin-bottom: 0;
line-height: lh();
a {
color: #fff;
text-decoration: none;
&:hover {
color: rgba(#fff, .7);
background-color: none;
text-decoration: none;
}
}
}
}
} }
} }
} }
section.main-content { nav {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
@include border-radius(4px);
overflow: hidden;
background: #fff;
border-bottom: 1px solid #bbb;
@media screen and (min-width: 1400px) {
// @include border-radius(3px);
@include box-shadow(0 0 4px #dfdfdf);
border: 1px solid #bbb;
margin-top: lh(.5);
}
}
img {
max-width: 100%;
height: auto;
}
}
footer {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
color: #777;
margin-top: $body-line-height;
padding: 0 $body-line-height;
p {
float: left; float: left;
display: block;
margin: 0;
padding: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
a {
color: #444;
&:link, &:visited { ul {
color: #444; @extend .clearfix;
}
&:hover, &:focus {
color: #000;
}
}
}
ul {
float: right;
li {
display: inline-block; display: inline-block;
margin-right: 20px; padding: 19px 0 9px;
margin: 0;
a {
color: #444; li {
margin-right: lh();
&:link, &:visited { display: inline-block;
color: #444; margin-bottom: 0;
} line-height: lh();
&:hover, &:focus { a {
color: #000; color: #fff;
} text-decoration: none;
&:hover {
color: rgba(#fff, .7);
background-color: none;
text-decoration: none;
}
}
} }
} }
} }
......
html {
margin-top: 0;
body {
color: $dark-gray;
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
background: #f4f4f4; //#f3f1e5
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
@include border-radius(4px);
overflow: hidden;
background: #fff;
border-bottom: 1px solid #bbb;
@media screen and (min-width: 1400px) {
// @include border-radius(3px);
@include box-shadow(0 0 4px #dfdfdf);
border: 1px solid #bbb;
margin-top: lh(.5);
}
}
}
}
@import "bourbon/bourbon"; @import "bourbon/bourbon";
@import "reset"; @import "base/reset", "base/font-face", "base/functions";
@import "font-face";
// pages // pages
@import "index-functions", "index-variables", "index-extends", "index"; @import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
@import "leanmodal"; @import "layout/leanmodal";
.header-wrapper {display:none;}
#accordion {display:none;}
.ui-accordion {display:none;
visibility:hidden;
width:0%;
}
div#wiki_panel {
@extend .sidebar;
overflow: auto;
input[type="button"] {
@extend h3;
@include transition();
color: lighten($text-color, 10%);
font-size: $body-font-size;
margin: 0 !important;
padding: 7px lh();
text-align: left;
width: 100%;
&:hover {
@include box-shadow(0 1px 0 #fff);
background: #efefef;
}
}
ul {
li {
&.search {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 7px lh();
label {
display: none;
}
}
&.create-article {
h3 {
a {
padding: 7px lh();
}
}
}
}
}
div#wiki_create_form {
@extend .clearfix;
padding: 15px;
background: #d6d6d6;
border-bottom: 1px solid #bbb;
input[type="text"] {
margin-bottom: 6px;
display: block;
width: 100%;
@include box-sizing(border-box);
}
ul {
list-style: none;
li {
float: left;
&#cancel {
float: right;
margin-top: 10px;
}
}
}
}
}
...@@ -2,76 +2,6 @@ div.wiki-wrapper { ...@@ -2,76 +2,6 @@ div.wiki-wrapper {
display: table; display: table;
width: 100%; width: 100%;
div#wiki_panel {
@extend .sidebar;
overflow: auto;
input[type="button"] {
@extend h3;
@include transition();
color: lighten($text-color, 10%);
font-size: $body-font-size;
margin: 0 !important;
padding: 7px lh();
text-align: left;
width: 100%;
&:hover {
@include box-shadow(0 1px 0 #fff);
background: #efefef;
}
}
ul {
li {
&.search {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 7px lh();
label {
display: none;
}
}
&.create-article {
h3 {
a {
padding: 7px lh();
}
}
}
}
}
div#wiki_create_form {
@extend .clearfix;
padding: 15px;
background: #d6d6d6;
border-bottom: 1px solid #bbb;
input[type="text"] {
margin-bottom: 6px;
display: block;
width: 100%;
@include box-sizing(border-box);
}
ul {
list-style: none;
li {
float: left;
&#cancel {
float: right;
margin-top: 10px;
}
}
}
}
}
section.wiki-body { section.wiki-body {
@extend .content; @extend .content;
......
...@@ -215,7 +215,8 @@ risk. Your access to or download of information, materials, or data ...@@ -215,7 +215,8 @@ risk. Your access to or download of information, materials, or data
through the Site or any reference sites is at your own discretion and through the Site or any reference sites is at your own discretion and
risk and that you will be solely responsible for any damage to your risk and that you will be solely responsible for any damage to your
property (including your computer system) or loss of data that results property (including your computer system) or loss of data that results
from the download or use of such material or data.</p> from the download or use of such material or data. We may close or
limit enrollment for pedagogical or technological reasons.</p>
<p><strong>User Postings Disclaimer.</strong> You understand that when <p><strong>User Postings Disclaimer.</strong> You understand that when
using the Site you will be exposed to User Postings from a variety of using the Site you will be exposed to User Postings from a variety of
...@@ -301,6 +302,6 @@ consent to the personal jurisdiction of and exclusive venue in the ...@@ -301,6 +302,6 @@ consent to the personal jurisdiction of and exclusive venue in the
federal and state courts located in and serving Boston, Massachusetts federal and state courts located in and serving Boston, Massachusetts
as the legal forum for any such dispute.</p> as the legal forum for any such dispute.</p>
<p><strong>Effective Date:</strong> February 6, 2012</p><div> <p><strong>Effective Date:</strong> February 10, 2012</p><div>
</div> </div>
</section> </section>
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