Skip to content

E
edx-platform
Commit 47b0ca55 by Piotr Mitros
Options

Merge 

--HG--
branch : pmitros-mod-template
parents 6fa23e90 0807cf81
Showing with 1951 additions and 1468 deletions
.DS_Store
No preview for this file type
.hgignore
......@@ -5,3 +5,5 @@ syntax: glob
*.swp
*.orig
*.DS_Store
#*
.#*
\ No newline at end of file
6002x-faq.html
......@@ -9,39 +9,107 @@
More about 6.002x
</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>
<p>
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.
</p>
<h2> I tried to register for the course, but it says the username
is already taken.</h2>
<p> The system only allows each username to be used once. Probably,
someone else already signed up with that username. Try a different,
more unique username. For example, try adding a random number to the
end.</p>
<h2> I am interested in a different subject. What other courses do
you offer? </h2>
<p> 6.002x is the pilot course for MITx. While we plan to offer a
range of courses in the future, at present, 6.002x is the only course
available.</p>
<h2>How will I know that the course has started?</h2>
<p> The course will start on March 5. Check the website
mitx.mit.edu as the date approaches. A login button will appear on
the course website 6.002x.mitx.mit.edu on or slightly before March 5
so you can login, begin to get familiar with the site and start the
course.</p>
<h2> Why is there no log-in button?</h2>
<p> You will not be able to log into the course until either the
starting date, or shortly before.</p>
<h2> Does the class have a schedule?</h2>
<p> The lectures are on-line videos, and may be watched at your own
pace and schedule. The course will have fixed deadlines for homework
assignments and exams. </p>
<h2> I just enrolled for the course. I have not received any form
of acknowledgement that I have enrolled.</h2>
<p> You should receive a single activation e-mail. If you did not, the
most common issues are:
<ul>
<li> Typo in e-mail address
<li> Old browser. We recommend trying a modern version of Firefox or Chrome
<li> JavaScript disabled
<li> Activation e-mail in spam folder. Check spam folder.
<li> Non-unique username. Try adding a random string at the end.
</ul>
<p>If you run into issues, try recreating your account. There is no need
to do anything about the old account, if any. If it is not activated
through the link in the e-mail, it will disappear later.
<h2> How do I drop the course?</h2>
<p> You do not have to do anything. You can simply stop working on the
course at any time you choose to do so.</p>
<h2>What happens if I drop the course?</h2>
<p> For the prototype course, learners achieving grades of "A," "B,"
or "C" will receive an electronic Certificate of completion with the
learner's name and grade on it. If you receive a grade below a "C" or
do not complete the course, you will not receive a Certificate and no
grade record attaching your name to your participation in the class
will be disclosed outside of MITx. You can also choose to opt for a
no record at any time. However, the posts you make while enrolled in
the class will remain visible. </p>
<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.
</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
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
and laboratory experiences.</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
courses to people around the world and the opportunity for able
learners to gain certification of mastery of MIT material. Second, it
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>
Since it launched OpenCourseWare 10 years ago, MIT has been committed
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.
</p>
......@@ -55,7 +123,7 @@ At MIT, each course is assigned a number. All courses in the
Department of Electrical Engineering and Computer Science (EECS) start
with the number 6, and 6.002 (also known as Circuits and Electronics)
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.
</p>
......@@ -95,7 +163,7 @@ Do I need to follow a set timeline in completing 6.002x?
</h2>
<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
final exam will be given within a specific range of days. However,
faster-paced learners can proceed multiple weeks ahead if they choose.
......@@ -162,7 +230,7 @@ prototype wiki and discussion forum.
Are there prerequisites to take the course?
</h2>
<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.
</p>
......@@ -184,7 +252,7 @@ math backgrounds.
How much does the course cost?
</h2>
<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
credential for a modest fee. For this prototype course, the fee for a
credential will be waived.
......@@ -196,8 +264,8 @@ What is a credential?
<p>
Any learner who successfully completes 6.002x will receive an
electronic certificate indicating a grade. This certificate will
indicate that you earned it from MITx&rsquo;s pilot course. In this
prototype version, MITx will not require that you be tested in a
indicate that you earned it from <i>MITx</i>&rsquo;s pilot course. In this
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
receive this certificate.
</p>
......@@ -206,7 +274,7 @@ receive this certificate.
Who is grading the course?
</h2>
<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.
</p>
......
6002x-press-release.html
......@@ -5,7 +5,7 @@
<section class="subpage">
<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
Electronics,&rsquo; accepting registrants now.</h1>
......@@ -13,7 +13,7 @@ Electronics,&rsquo; accepting registrants now.</h1>
<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;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
initiative&rdquo;s prototype course -- 6.002x: Circuits and
Electronics.</p>
......@@ -28,14 +28,14 @@ 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&rdquo;s Computer Science and
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 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
this prototype course to optimize the tools we have built by
soliciting and acting on feedback from learners.&rdquo;
......@@ -56,7 +56,7 @@ each week on the course.
</p>
<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
assistants is excited to work with you on the discussion forum, and we
look forward to your feedback to improve the learning
......@@ -70,16 +70,16 @@ be found here.</a></p>
about 6.002x can be found here.</a></p>
<p>
<a href="/mitx-overview.html">
FAQs about MITx as a whole can be found here.
<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 MITx courses, students who complete the mastery
requirement on MITx will be able to receive the credential for a
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>
......@@ -112,19 +112,19 @@ http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html
</a>
<h3>
MITx website
<i>MITx</i> website
</h3>
<a href="http://mitx.mit.edu">
http://mitx.mit.edu
</a>
<h3>
<!--h3>
TAGS:
</h3>
<p>
MITx; students; education, teaching, academics; innovation and
<i>MITx</i>; students; education, teaching, academics; innovation and
invention; faculty; mit administration; learning; electrical
engineering and computer science; csail
</p>
</p-->
</div>
</section>
accordion_init.js
$("#accordion").accordion({
active: ${ active_chapter },
autoHeight: false
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()};
'oldheader':ui.oldHeader.text()};
log_event('accordion', event_data);
});
activation_active.html
<%inherit file="marketing.html" />
<%inherit file="main.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. 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>
activation_complete.html
<%inherit file="marketing.html" />
<%inherit file="main.html" />
<section class="activation">
<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 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>
activation_email.txt
......@@ -6,4 +6,5 @@ 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.
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.
activation_invalid.html
<%inherit file="main.html" />
<section class="activation">
<%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>
courseware.html
......@@ -27,9 +27,16 @@
<section class="main-content">
<div class="course-wrapper">
<div id="accordion">
${accordion}
</div>
<section class="course-index">
<div id="open_close_accordion">
<h2>Courseware Index</h2>
<a href="#">close</a>
</div>
<div id="accordion">
${accordion}
</div>
</section>
<section class="course-content">
${content}
......
create_account.html
<!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details-->
<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">
<fieldset><% if 'error' in locals(): e = error %>
......@@ -11,26 +11,26 @@
<li class="email">
<label>E-mail*</label>
<input name="email" id="ca_email" type="email" required />
<input name="email" id="ca_email" type="email" />
</li>
<li class="password">
<label>Password*</label>
<input name="password" id="ca_password" type="password" required />
<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" required />
<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" />
<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 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 class="location">
......@@ -49,16 +49,17 @@
</li>
<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 class="honor-code">
<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>
<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>Never post answers to problems.</li>
<li>Maintain only one account.</li>
<li>Not post answers to problems that are being used to assess student performance.</li>
</ul>
</li>
......
custom_tags
../data/custom_tags/
\ No newline at end of file
../data/custom_tags
\ No newline at end of file
index.html
<%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>
......@@ -31,7 +35,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>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 class="requirements">
......@@ -58,17 +62,17 @@
<ul>
<li>
<img src="/static/staff/agarwal-mit-news-small.jpg">
<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">
<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">
<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>
......
login.html
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
${ error }
<div id="login_div">
<header>
<h1>Log in to MITx</h1>
......
main.html
......@@ -5,7 +5,6 @@
<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 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"/>
<script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
......@@ -38,7 +37,7 @@
</head>
<body>
<body class="<%block name="bodyclass"/>">
${self.body()}
<%block name="bodyextra"/>
......
marketing.html
<!DOCTYPE html>
<html>
<head>
<%block name="title"><title>MITx 6.002</title></%block>
<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]-->
......@@ -96,6 +101,7 @@ function postJSON(url, data, callback) {
<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>
</div>
</footer>
......
mitx-overview.html
......@@ -4,12 +4,12 @@
<section class="subpage">
<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,
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 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,
anywhere, who has the motivation and ability to engage MIT&rsquo;s
educational content.</p>
......@@ -18,12 +18,12 @@ educational content.</p>
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. 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
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>
<h2>MITx will e-publish interactive online courses that:</h2>
<h2><i>MITx</i> will e-publish interactive online courses that:</h2>
<ul>
<li>Empower students to learn at their own pace;</li>
......@@ -33,10 +33,10 @@ thrill of learning and discovery.</p>
<li>Assess individual student learning as the student progresses through the course.</li>
</ul>
<p> MITx students who demonstrate their mastery of a subject can earn
a certificate of completion awarded by MITx.</p>
<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> 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
educational institutions, anywhere in the world, will adapt and use
the platform to publish their own educational content online for the
......@@ -44,7 +44,7 @@ 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 MITx?</h2>
<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
......@@ -59,34 +59,34 @@ 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 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
creating new online teaching and learning tools. </p>
<p> Once up and running, MITx will be a laboratory for online
learning. Whether MITx learners are MIT&rsquo;s on-campus students,
university students elsewhere, or independent learners, MITx will help
<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 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
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 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
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
dissemination. MIT students enjoy a comprehensive curriculum and
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,
the investment of public and private assets in enormous amounts has
produced the public benefits of knowledge creation and dissemination,
......@@ -98,7 +98,7 @@ 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. MITx is our contribution. </p>
learning. <i>MITx</i> is our contribution. </p>
</div>
</section>
mitx_global.html
......@@ -12,7 +12,7 @@
</section>
<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="Link to MITx introduction video" /><span> Watch intro video</span></a>
</section>
</section>
......@@ -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>
</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>, </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>
......@@ -40,7 +40,7 @@
</hgroup>
<p>
<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 <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>
......@@ -48,12 +48,32 @@
</section>
<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>
<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.
......@@ -89,7 +109,7 @@ $(function() {
});
})
/*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */
});
</script>
mitx_help.html 0 → 100644
<%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></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>
navigation.html
......@@ -7,7 +7,6 @@
</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>
......
profile.html
......@@ -5,9 +5,9 @@
%>
<%block name="headextra">
<script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.symbol.js"></script>
<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>
......@@ -91,49 +91,45 @@ $(function() {
<div id="grade-detail-graph" style="width:650px;height:200px;"></div>
<ol>
<%
lastChapter = None
%>
% for hw in homeworks:
<ol class="chapters">
%for chapter in chapters:
%if not chapter['chapter'] == "hidden":
<li>
%if hw['chapter'] != lastChapter:
<h2><a href="${reverse('courseware_chapter', args=format_url_params([hw['course'], hw['chapter']])) }">
${ hw['chapter'] }</a></h2>
<% lastChapter = hw['chapter'] %>
%else:
<h2>-</h2>
%endif
<div class="scores">
<h3><a href="${reverse('courseware_section', args=format_url_params([hw['course'], hw['chapter'], hw['section']])) }">
<%
earned = hw['section_total'][0]
total = hw['section_total'][1]
percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else ""
%>
${ hw['section'] }</a> ${"({0}/{1}) {2}".format( earned, total, percentageString )}</h3>
${hw['subtitle']}
% if 'due' in hw and hw['due']!="":
due ${hw['due']}
% endif
<ul>
%if len(hw['scores']) > 0:
%if hw['graded']:
Problem Scores:
%else:
Practice Scores:
%endif
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
<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}/{1}) {2}".format( earned, total, percentageString )}</h3>
${section['subtitle']}
%if 'due' in section and section['due']!="":
due ${section['due']}
%endif
</ul>
</div>
</li>
% endfor
</ol>
%if len(section['scores']) > 0:
<ol class="scores">
${ "Problem Scores: " if section['graded'] else "Practice Scores: "}
%for score in section['scores']:
<li class="score">${ 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">
......
profile_graphs.js
......@@ -16,7 +16,7 @@ $(function () {
}).appendTo("body").fadeIn(200);
}
/* -------------------------------- Grade detail graph -------------------------------- */
/* -------------------------------- Grade detail bars -------------------------------- */
var colors = [$.color.parse("#E8B800"), $.color.parse("#A0CEFA"), $.color.parse("#BD3738"), $.color.parse("#429A2E")];
//var colors = [$.color.parse("#1B2045"), $.color.parse("#557a00"), $.color.parse("#F5600"), $.color.parse("#FEBA2C")];
//var colors = [$.color.parse("#E7C856"), $.color.parse("#CD462E"), $.color.parse("#B01732"), $.color.parse("#41192A")];
......@@ -42,7 +42,7 @@ $(function () {
data: ${ json.dumps( [[i + tickIndex, score['percentage']] for i,score in enumerate(section['subscores'])] ) },
color: colors[${sectionIndex}].toString(),
});
ticks = ticks.concat( ${ json.dumps( [[i + tickIndex, str(i + 1)] for i,score in enumerate(section['subscores'])] ) } );
ticks = ticks.concat( ${ json.dumps( [[i + tickIndex, score['label'] ] for i,score in enumerate(section['subscores'])] ) } );
bottomTicks.push( [ ${tickIndex + len(section['subscores'])/2}, "${section['category']}" ] );
detail_tooltips["${section['category']}"] = ${ json.dumps([score['summary'] for score in section['subscores']] ) };
......@@ -57,8 +57,8 @@ $(function () {
data: [[${tickIndex}, ${section['totalscore']['score']}]],
color: colors[${sectionIndex}].toString(),
});
ticks = ticks.concat( [ [${tickIndex}, "Total"] ] );
detail_tooltips["${section['category']} Total"] = [ "${section['totalscore']['summary']}" ];
ticks = ticks.concat( [ [${tickIndex}, "${section['totallabel']}"] ] );
detail_tooltips["${section['category']} Average"] = [ "${section['totalscore']['summary']}" ];
<% tickIndex += 1 + sectionSpacer %>
%else: ##This is for sections like midterm or final, which have no smaller components
......@@ -66,12 +66,8 @@ $(function () {
data: [[${tickIndex}, ${section['totalscore']['score']}]],
color: colors[${sectionIndex}].toString(),
});
%if section['category'] == "Midterm":
bottomTicks = bottomTicks.concat( [ [${tickIndex}, "${section['category']}"] ] );
%else:
ticks = ticks.concat( [ [${tickIndex}, "${section['category']}"] ] );
%endif
ticks = ticks.concat( [ [${tickIndex}," ${section['totallabel']}"] ] );
detail_tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ];
<% tickIndex += 1 + sectionSpacer %>
......@@ -80,13 +76,45 @@ $(function () {
%endfor
//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: "red", xaxis: 2} );
series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red"} );
/* ----------------------------- 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'])
%>
%if section['totalscore']['score'] > 0:
series.push({label: "${section['category']} - Weighted",
data: [[${overviewBarX}, ${weighted_score}]],
color: colors[${sectionIndex}].toString(),
});
%endif
detail_tooltips["${section['category']} - Weighted"] = [ "${summary_text}" ];
<%
sectionIndex += 1
totalWeight += section['weight']
totalScore += section['totalscore']['score'] * section['weight']
%>
%endfor
ticks = ticks.concat( [ [${overviewBarX}, "Total"] ] );
<% tickIndex += 1 + sectionSpacer %>
var options = {
series: {lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},},
xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}},
xaxes: [{ticks: ticks}, {ticks: bottomTicks}],
series: {stack: true,
lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},},
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: "#EBFFD5"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#E6FFFF"},
......@@ -94,17 +122,42 @@ $(function () {
legend: {show: false},
};
if ($("#grade-detail-graph").length > 0) {
$.plot($("#grade-detail-graph"), series, options);
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>');
// //Rotate the x-axis labels
// var rotateValue = "rotate(-60deg)";
// var rotateOrigin = "bottom left";
// $("#grade-detail-graph .x1Axis .tickLabel").css( {
// '-webkit-transform': rotateValue,
// '-moz-transform': rotateValue,
// '-ms-transform': rotateValue,
// '-o-transform': rotateValue,
// 'transform': rotateValue,
//
// '-webkit-transform-origin': rotateOrigin,
// '-moz-transform-origin': rotateOrigin,
// '-ms-transform-origin': rotateOrigin,
// '-o-transform-origin': rotateOrigin,
//
// 'text-align' : 'left',
// });
}
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) {
previousPoint = item.dataIndex;
if (previousPoint != (item.dataIndex, item.seriesIndex)) {
previousPoint = (item.dataIndex, item.seriesIndex);
$("#tooltip").remove();
......
sass/.DS_Store
No preview for this file type
sass/reademe.md → sass/README
......@@ -5,7 +5,13 @@ $ 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
Then to generate Sass files cd to templates directory and watch the sass files with:
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
This will automatically generate the CSS files on save.
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.
sass/_activation.scss deleted 100644 → 0
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();
}
sass/_index.scss deleted 100644 → 0
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;
}
}
}
}
}
}
sass/_local.scss deleted 100644 → 0
#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;}
sass/_profile.scss
......@@ -57,31 +57,50 @@ div.profile-wrapper {
@extend .top-header;
}
ol {
> ol {
list-style: none;
border-top: 1px solid #e3e3e3;
margin-top: lh();
> li {
border-bottom: 1px solid #e3e3e3;
padding: lh() 0;
width: 100%;
display: table;
@extend .clearfix;
h2 {
float: left;
display: table-cell;
padding: 0;
margin: 0;
width: flex-grid(2, 9);
margin-right: flex-gutter(9);
padding-right: flex-gutter(9);
border-right: 1px dotted #ccc;
@include box-sizing(border-box);
}
div.scores {
float: left;
ol.sections {
padding-left: flex-gutter(9);
display: table-cell;
list-style: none;
width: flex-grid(7, 9);
> li {
padding:0 0 lh() 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: 0;
}
h3 {
color: #666;
}
ul {
ol {
list-style: none;
li {
......@@ -89,6 +108,7 @@ div.profile-wrapper {
padding-right: 1em;
}
}
}
}
}
}
......
sass/_theme.scss deleted 100644 → 0
/*
----------------------------------------------------------------------------------------
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; }
sass/application.scss
@import "bourbon/bourbon";
@import "reset";
@import "font-face";
// Base layout
@import "base-variables", "base-extends", "base";
@import "layout";
@import "leanmodal";
@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 "jquery-ui-1.8.16.custom";
// pages
@import "courseware", "courseware-video", "courseware-sequence-nav";
@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav";
@import "textbook";
@import "info";
@import "profile";
@import "wiki-basic-html", "wiki-create", "wiki";
@import "activation";
@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki";
@import "help";
@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar";
// left over
// @import "theme";
// @import "local";
@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar";
sass/_base.scss → sass/base/_base.scss
......@@ -29,6 +29,11 @@ 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);
......
sass/_base-extends.scss → sass/base/_extends.scss
......@@ -36,6 +36,8 @@ h1.top-header {
font: bold $body-font-size $body-font-family;
cursor: pointer;
-webkit-font-smoothing: antialiased;
text-shadow: none;
text-decoration: none;
&:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
......@@ -107,6 +109,10 @@ h1.top-header {
}
}
}
a.button {
text-decoration: none;
}
}
.topbar {
......
sass/_index-functions.scss → sass/base/_functions.scss
// Functions
//---------------------------------------- //
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
......@@ -14,8 +11,12 @@
@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 $lh * $amount;
@return $body-line-height * $amount;
}
sass/_base-variables.scss → sass/base/_variables.scss
// 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
// ---------------------------------------- //
......
sass/bourbon/_bourbon.scss
// Custom Functions
@import "functions/deprecated-webkit-gradient";
@import "functions/golden-ratio";
@import "functions/grid-width";
@import "functions/modular-scale";
@import "functions/tint-shade";
// CSS3 Mixins
......
sass/bourbon/addons/_font-family.scss
$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;
sass/bourbon/css3/_animation.scss
// 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,
......@@ -127,8 +143,7 @@
}
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
// Deprecated
@mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name);
$length-of-time: length($time);
......@@ -151,11 +166,6 @@
} @else {
@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;
}
sass/bourbon/css3/_linear-gradient.scss
......@@ -2,7 +2,8 @@
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
$G9: false, $G10: false,
$fallback: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
......@@ -15,7 +16,15 @@
$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: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full);
......@@ -27,5 +36,6 @@
// 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%);
sass/bourbon/functions/_golden-ratio.scss → sass/bourbon/functions/_modular-scale.scss
@function golden-ratio($value, $increment) {
@function modular-scale($value, $increment, $ratio) {
@if $increment > 0 {
@for $i from 1 through $increment {
$value: ($value * 1.618);
$value: ($value * $ratio);
}
}
@if $increment < 0 {
$increment: abs($increment);
@for $i from 1 through $increment {
$value: ($value / 1.618);
$value: ($value / $ratio);
}
}
......@@ -16,16 +16,25 @@
}
// div {
// Increment Up GR with positive value
// font-size: golden-ratio(14px, 1); // returns: 22.652px
// Increment Up GR with positive value
// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
//
// Increment Down GR with negative value
// font-size: golden-ratio(14px, -1); // returns: 8.653px
// Increment Down GR with negative value
// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
//
// Can be used with ceil(round up) or floor(round down)
// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
// }
//
// 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
sass/bourbon/lib/bourbon.rb
require "bourbon/generator"
module Bourbon
if defined?(Rails)
class Engine < ::Rails::Engine
......
sass/_courseware.scss → sass/courseware/_courseware.scss
......@@ -5,87 +5,17 @@ div.course-wrapper {
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;
}
}
}
}
}
.tran {
@include transition( all, .2s, $ease-in-out-quad);
}
section.course-content {
@extend .content;
h1 {
@extend .top-header;
}
p {
margin-bottom: lh();
......@@ -95,6 +25,12 @@ div.course-wrapper {
}
}
ul {
li {
margin-bottom: lh(.5);
}
}
.problem-set {
position: relative;
@extend .clearfix;
......@@ -180,7 +116,6 @@ div.course-wrapper {
}
}
section.problems-wrapper, div#seq_content {
@extend .problem-set;
}
......@@ -195,8 +130,17 @@ div.course-wrapper {
}
}
div#seq_content {
h1 {
background: none;
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
ol.vert-mod {
> li {
> li {
@extend .clearfix;
@extend .problem-set;
border-bottom: 1px solid #ddd;
......@@ -211,4 +155,34 @@ div.course-wrapper {
}
}
}
&.closed {
section.course-index {
width: flex-grid(.6);
div#open_close_accordion {
padding: 0;
a {
background-image: url('/static/images/slide-right-icon.png');
}
h2 {
visibility: hidden;
width: 10px;
padding: 0;
}
}
div#accordion {
visibility: hidden;
width: 10px;
padding: 0;
}
}
section.course-content {
width: flex-grid(11.5) + flex-gutter();
}
}
}
sass/courseware/_sidebar.scss 0 → 100644
section.course-index {
@extend .sidebar;
@extend .tran;
div#open_close_accordion {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 0 lh();
position: relative;
h2 {
padding-right: 20px;
}
a {
width: 16px;
text-indent: -9999px;
height: 16px;
position: absolute;
padding: 8px;
top: -12px;
right: -1px;
border: 1px solid #D3D3D3;
background: #eee url('/static/images/slide-left-icon.png') center center no-repeat;
@include border-radius(3px 0 0 3px);
&:hover {
background-color: white;
}
}
}
div#accordion {
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;
}
}
}
}
}
}
}
sass/_courseware-video.scss → sass/courseware/_video.scss
......@@ -88,6 +88,7 @@ section.course-content {
li {
float: left;
margin-bottom: 0;
a {
@include box-shadow(1px 0 0 #555);
......
sass/_discussion-answers.scss → sass/discussion/_answers.scss
div.answer-controls {
@include box-sizing(border-box);
@extend div.question-controls;
display: inline-block;
margin: 20px 0;
margin: 0 0 15px;
padding-left: flex-grid(1.1);
width: 100%;
div.answer-sort {
@extend div.question-sort;
div.answer-count {
display: inline-block;
float: left;
}
div.answer-count {
@extend div.question-count;
div.answer-sort {
float: right;
margin-left: flex-gutter();
nav {
@extend .action-link;
float: right;
margin-top: 25px;
a {
&.on span{
font-weight: bold;
}
&:before {
content: '|';
color: darken(#F6EFD4, 10%);
font-size: 22px;
}
}
}
}
}
......@@ -44,7 +64,10 @@ div.answer-block {
}
div.answered-by-owner {
color: $mit-red;
p {
font-style: italic;
color: #656565;
}
div.comments-container {
color: #555;
......@@ -52,6 +75,34 @@ div.answer-block {
}
}
div.paginator {
@extend div.answer-block;
text-align: center;
padding: 20px 0;
span {
@include border-radius(3px);
background: #eee;
margin: 0 5px;
padding: 4px 10px;
&.curr {
background: none;
color: $mit-red;
font-weight: bold;
}
&.next, &.prev {
@extend .light-button;
}
a {
color: #555;
text-decoration: none;
}
}
}
div.answer-own {
border-top: 1px solid #eee;
overflow:hidden;
......@@ -60,18 +111,28 @@ div.answer-own {
}
div.answer-actions {
text-align: right;
border-left: 3px solid darken(#F6EFD4, 10%);
margin: 0;
padding: 0;
padding:8px 8px 8px 0;
text-align: right;
background:lighten(#F6EFD4, 5%);
span.sep {
color: #ddd;
}
a {
text-decoration: none;
cursor: pointer;
text-decoration: none;
&.question-delete {
color: $mit-red;
}
&.question-edit, &.permant-link {
color: darken(#F6EFD4, 45%);;
}
}
a.question-edit, a.permant-link {
color: #999;
}
}
sass/_discussion.scss → sass/discussion/_discussion.scss
......@@ -16,74 +16,21 @@
border: 1px solid #ccc;
text-decoration: none;
}
}
// Layout
body.askbot {
.secondary-nav {
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);
}
}
}
.action-link {
a {
color: darken(#F6EFD4, 50%);
}
&:hover {
text-decoration: none;
color: darken(#F6EFD4, 70%);
}
}
}
// Layout
body.askbot {
section.main-content {
div.discussion-wrapper {
......@@ -92,9 +39,9 @@ body.askbot {
div.discussion-content {
@include box-sizing(border-box);
display: table-cell;
padding: $gw-gutter;
padding: lh();
vertical-align: top;
width: flex-grid(9);
width: flex-grid(9) + flex-gutter();
p.tabula-rasa {
@include border-radius(5px);
......@@ -119,48 +66,7 @@ body.askbot {
}
}
}
aside {
@extend .sidebar;
@include box-shadow(inset 1px 0 0 #f6f6f6);
@include border-radius(0 4px 4px 0);
border-left: 1px solid #d3d3d3;
border-right: 1px solid #f6f6f6;
padding: $gw-gutter;
width: flex-grid(3);
h2 {
font-size: 16px;
}
h3 {
border-bottom: 0;
box-shadow: none;
}
input[type="text"] {
width: 76%;
}
#displayTagFilterControl {
margin-top: 10px;
}
}
}
}
// 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;
// }
// }
}
sass/_form-wmd-toolbar.scss → sass/discussion/_form-wmd-toolbar.scss
......@@ -3,7 +3,7 @@
}
#wmd-button-bar {
background: url(static/images/askbot/editor-toolbar-background.png) repeat-x bottom;
background: url(/static/images/askbot/editor-toolbar-background.png) repeat-x bottom;
border: 1px solid #ddd;
height:36px;
float:left;
......
sass/_discussion-forms.scss → sass/discussion/_forms.scss
......@@ -73,6 +73,10 @@ form.question-form {
padding: 0;
margin-top: -15px;
h1 a {
float: right;
}
input[type="text"] {
width: flex-grid(6);
}
......
sass/_question-view.scss → sass/discussion/_question-view.scss
......@@ -93,6 +93,7 @@ div.question-header {
float: left;
margin-right: flex-gutter(8);
width: flex-grid(6.2,8);
}
div.post-update-container {
......@@ -102,8 +103,9 @@ div.question-header {
div.post-update-info {
@include box-sizing(border-box);
@include border-radius(5px);
background:lighten(#F6EFD4, 5%);
// @include border-radius(5px);
// background:lighten(#F6EFD4, 5%);
border-left: 3px solid darken(#F6EFD4, 10%);
padding: 10px;
margin-bottom: 10px;
......@@ -126,29 +128,33 @@ div.question-header {
div.change-date {
font-size: 12px;
margin-bottom: 10px;
margin-bottom: 2px;
}
div.avatar {
// div.avatar {
// display: inline-block;
// float: left;
// margin-right: 3px;
// img.gravatar {
// background: white;
// border: 1px solid darken(#F6EFD4, 10%);
// margin-right: 5px;
// padding: 3px ;
// vertical-align: bottom;
// }
// }
div.user-meta {
display: inline-block;
float: left;
margin-right: 3px;
img.gravatar {
background: white;
border: 1px solid darken(#F6EFD4, 10%);
span.username {
font-size: 20px;
margin-right: 5px;
padding: 3px ;
vertical-align: bottom;
}
}
div.user-meta {
display: inline-block;
width: 60%;
span.user-badges {
display: block;
// display: block;
}
}
}
......
sass/_discussion-questions.scss → sass/discussion/_questions.scss
div.question-controls {
div.question-list-header {
display: block;
margin-bottom: 30px;
margin-bottom: 15px;
overflow: hidden;
width: flex-grid(9,9);
div {
display: inline-block;
}
section.question-list-meta {
display: block;
overflow: hidden;
width: 100%;
div.question-count {
margin-right: flex-gutter();
width: flex-grid(4,9);
div {
display: inline-block;
float: left;
}
h1 {
margin-top: 0;
span.label {
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 {
@include border-radius(35px);
background-color: lighten(#F6EFD4, 5%) ;
height: 30px;
div.question-sort {
float: right;
font-size: 16px;
margin: 3px 0;
padding:0px 20px 5px;
margin-left: flex-gutter();
a {
color: darken(#F6EFD4, 50%);
nav {
@extend .action-link;
float: right;
&.on span{
font-weight: bold;
}
a {
&.on span{
font-weight: bold;
}
&:before {
content: '|';
color: darken(#F6EFD4, 10%);
font-size: 22px;
&:before {
content: '|';
color: darken(#F6EFD4, 10%);
font-size: 22px;
}
}
}
}
}
&:hover {
text-decoration: none;
color: darken(#F6EFD4, 70%);
}
section.question-tags-list {
display: block;
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.question-list {
ul.question-list, div#question-list {
width: flex-grid(9,9);
li.single-question {
......@@ -75,7 +99,7 @@ ul.question-list {
h2 {
font-size: 16px;
font-weight: normal;
font-weight: bold;
margin: 0px 0 15px 0;
text-transform: none;
}
......@@ -151,9 +175,5 @@ ul.question-list {
}
}
div.search-tips {
display: block;
}
.search-result-summary {
}
sass/discussion/_sidebar.scss 0 → 100644
div.discussion-wrapper aside {
@extend .sidebar;
@include box-shadow(inset 1px 0 0 #f6f6f6);
@include border-radius(0 4px 4px 0);
border-left: 1px solid #d3d3d3;
border-right: 1px solid #f6f6f6;
padding: lh();
width: flex-grid(3);
h2 {
color: #4D4D4D;
&.first {
margin-top: 0px;
}
}
h3 {
border-bottom: 0;
box-shadow: none;
}
input[type="text"] {
width: 76%;
}
div.box {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
display: block;
padding-bottom: 20px;
overflow: hidden;
&:last-child {
@include box-shadow(none);
border: 0;
}
&.contributors {
a {
@include border-radius(3px);
border: 1px solid #aaa;
cursor: pointer;
display: inline-block;
margin-right: 6px;
position: relative;
&:before {
@include border-radius(3px);
@include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4));
top: 1px; left: 1px; bottom: 1px; right: 1px;
content: '';
position: absolute;
}
}
img.gravatar {
@include border-radius(3px);
}
}
&.tag-selector {
ul {
margin-bottom: 10px;
display: block;
}
}
}
#displayTagFilterControl {
margin-top: 10px;
}
div.search-box {
input {
@include box-sizing(border-box);
display: inline;
}
input[type='submit'] {
@include box-shadow(none);
opacity: 0.5;
background: url(/static/images/askbot/search-icon.png) no-repeat center;
border: 0;
margin-left: 3px;
position: absolute;
text-indent: -9999px;
width: 24px;
&:hover {
opacity: 0.9;
}
&:focus {
opacity: 1;
}
}
input#keywords {
padding-left: 30px;
padding-right: 30px;
width: 100%;
}
input#clear {
@include box-shadow(none);
@include border-radius(15px);
border: none;
background: #bbb;
color: #fff;
display: inline;
font-size: 10px;
margin-left: -25px;
padding: 2px 5px;
}
}
// Question view sopecific
div.follow-buttons {
margin-top: 20px;
display: block;
a.button {
@include box-sizing(border-box);
display: block;
text-align: center;
width: 100%;
}
}
div.question-stats {
ul {
color: #777;
li {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 7px 0;
&:last-child {
@include box-shadow(none);
border: 0;
}
strong {
float: right;
padding-right: 10px;
}
}
}
}
div.markdown ul li {
margin: 20px 0;
ol li {
margin: 0;
}
}
}
sass/_discussion-tags.scss → sass/discussion/_tags.scss
ul.tags {
list-style: none;
display: inline;
li, a {
position: relative;
}
......@@ -7,21 +8,56 @@ ul.tags {
@include border-radius(4px);
background: #eee;
color: #555;
display: inline;
display: inline-block;
font-size: 12px;
margin-left: 15px;
padding: 3px 10px 5px 5px;
margin-bottom: 5px;
&:before {
border-color:transparent #eee transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
content:"";
height:0;
left:-11px;
position:absolute;
top:0;
left:-11px;
width:0;
height:0;
border-color:transparent #eee transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
span.delete-icon, div.delete-icon {
@include border-radius(0 4px 4px 0);
background: #555;
clear: none;
color: #eee;
cursor: pointer;
display: inline;
float: none;
left: 10px;
opacity: 0.5;
padding: 3px 6px;
position: relative;
top: 1px;
&:hover {
opacity: 1;
}
}
a {
color: #555;
text-decoration: none;
}
}
}
span.tag-number {
@include border-radius(3px);
background: #555;
font-size: 10px;
margin: 0 3px;
padding: 2px 5px;
color: #eee;
opacity: 0.5;
}
sass/index/_base.scss 0 → 100644
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;
}
}
}
sass/_index-extends.scss → sass/index/_extends.scss
......@@ -2,7 +2,7 @@
@include box-sizing(border-box);
margin: 0 auto;
max-width: $fg-max-width;
min-width: $fg-min-width;
// min-width: $fg-min-width;
padding: lh();
width: flex-grid(12);
}
......@@ -20,6 +20,7 @@
p {
margin-bottom: lh();
line-height: lh();
}
h1 {
......@@ -37,6 +38,15 @@
li {
list-style: disc outside none;
line-height: lh();
}
}
dl {
margin-bottom: lh();
dd {
margin-bottom: lh(.5);
}
}
}
......
sass/index/_footer.scss 0 → 100644
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;
@media screen and (max-width: 780px) {
background-position: left bottom;
padding-bottom: lh(3);
}
a {
color: #888;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: #666;
}
}
p {
@include inline-block();
margin-right: lh();
}
ul {
@include inline-block();
@media screen and (max-width: 780px) {
margin-top: lh();
}
li {
@include inline-block();
margin-bottom: 0;
&:after {
content: ' |';
display: inline;
color: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
}
}
}
sass/index/_header.scss 0 → 100644
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);
@media screen and (max-width:780px) {
padding: lh(2.5) lh() lh(2);
}
//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);
@media screen and (max-width:780px) {
padding: lh(2.5) 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;
background: $mit-red;
@include inline-block();
margin-left: flex-grid(4) + flex-gutter();
padding: lh() lh(1.5);
@media screen and (max-width: 780px) {
margin-left: 0;
}
h1 {
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
@include inline-block();
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
@include inline-block();
line-height: 1.2em;
}
&.course {
section {
float: left;
margin-left: 0;
margin-right: flex-gutter(8);
padding: 0;
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
float: none;
width: 100%;
margin-right: 0;
}
a {
@extend .button;
background-color: darken($mit-red, 20%);
border-color: darken($mit-red, 30%);
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
display: block;
padding: lh(.5) lh();
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;
@media screen and (max-width: 780px) {
float: none;
width: 100%;
}
}
}
}
}
}
sass/index/_index.scss 0 → 100644
section.index-content {
@extend .wrapper;
@extend .clearfix;
section {
@extend .clearfix;
float: left;
@media screen and (max-width: 780px) {
float: none;
width: auto;
margin-right: 0;
}
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);
@media screen and (max-width: 780px) {
width: 100%;
border-right: 0;
margin-right: 0;
padding-right: 0;
}
section {
@extend .clearfix;
margin-bottom: lh();
p {
width: flex-grid(4, 8);
float: left;
@media screen and (max-width: 780px) {
float: none;
width: auto;
}
&:nth-child(odd) {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
margin-right: 0;
width: auto;
}
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
width: auto;
}
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: #888;
margin-bottom: lh();
font-weight: normal;
font-size: 14px;
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);
@media screen and (max-width: 780px) {
width: auto;
float: none;
}
&:nth-child(odd) {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
}
}
}
}
}
&.course, &.staff {
width: flex-grid(4);
@media screen and (max-width: 780px) {
width: auto;
}
h1 {
color: #888;
font: normal $body-font-size $body-font-family;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: lh();
text-transform: uppercase;
}
h2 {
font: 800 24px $header-font-family;
}
h3 {
font: 400 18px $header-font-family;
}
a {
@extend .button;
span.arrow {
color: rgba(#fff, .6);
font-style: normal;
@include inline-block();
padding-left: 10px;
}
}
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) and (min-width: 781px){
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
}
@media screen and (max-width: 780px) {
padding-top: lh(5);
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
}
@media screen and (min-width: 500px) and (max-width: 781px) {
padding-top: lh(8);
}
}
}
// 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);
@media screen and (max-width: 780px) {
width: auto;
border-right: 0;
margin-right: 0;
padding-right: 0;
}
section {
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
width: auto;
}
&.about-info {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
&.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);
@media screen and (max-width: 780px) {
margin-right: 0;
float: none;
width: auto;
}
&: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;
}
}
}
}
&.staff {
h1 {
margin-top: lh(1);
}
}
}
}
section.copyright, section.tos, section.privacy-policy, section.honor-code {
@extend .subpage;
}
sass/_index-variables.scss → sass/index/_variables.scss
......@@ -5,7 +5,7 @@ $fg-column: 60px;
$fg-gutter: 25px;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
$fg-min-width: 781px;
$gw-column: 60px;
$gw-gutter: 25px;
......@@ -13,16 +13,8 @@ $gw-gutter: 25px;
$body-font-family: Georgia, serif;
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
// @media screen and (min-width: 940px) {
$body-font-size: 16px;
// }
// @media screen and (max-width: 939px) {
// $body-font-size: 14px;
// }
$lh: golden-ratio($body-font-size, 1);
$body-font-size: 16px;
$body-line-height: golden-ratio($body-font-size, 1);
// Colors
$mit-red: #933;
......
sass/layout/_footer.scss 0 → 100644
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;
}
}
}
}
}
sass/_layout.scss → sass/layout/_header.scss
html {
margin-top: 0;
body {
color: $dark-gray;
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
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;
div.header-wrapper {
background: $mit-red;
border-bottom: 1px solid #fff;
@include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
hgroup {
@extend .clearfix;
float: left;
header {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
padding: 0 $body-line-height;
h1 {
border-right: 1px solid darken($mit-red, 5%);
color: darken($mit-red, 25%);
font-size: 20px;
font-weight: 800;
margin: 0 lh() 0 0;
padding: 17px lh() 14px 0;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
line-height: lh();
@include inline-block();
}
hgroup {
@extend .clearfix;
float: left;
min-width: flex-grid(3);
padding-top: 13px;
h1 {
color: darken($mit-red, 25%);
font-size: 18px;
font-weight: 800;
@include inline-block();
line-height: lh();
margin: 0;
padding: 0 lh(.5) 0 0;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
&:after {
color: darken($mit-red, 10%);
content: "•";
display: inline-block;
font-size: 10px;
letter-spacing: -2px;
padding-left: lh(.5);
text-shadow: 0;
}
}
h2 {
@include inline-block();
margin: 0 lh() 0 0;
padding: 19px lh() 9px 0;
line-height: lh();
border-right: 1px solid darken($mit-red, 5%);
-webkit-font-smoothing: antialiased;
a {
color: #fff;
text-decoration: none;
&:hover {
color: rgba(#fff, .7);
}
}
h2 {
font-size: 16px;
@include inline-block();
letter-spacing: 0;
margin: 0;
padding: 0 lh() 0px 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
text-transform: none;
-webkit-font-smoothing: antialiased;
a {
color: #fff;
text-decoration: none;
&:hover {
color: rgba(#fff, .7);
}
}
}
@media screen and (max-width: 920px) {
border-bottom: 1px solid darken($mit-red, 5%);
display: block;
float: none;
h1 {
float: right;
border: 0;
margin-right: 0;
padding-right: 0;
}
@media screen and (max-width: 900px) {
display: block;
float: none;
h2 {
float: left;
border: 0;
margin-right: 0;
padding-right: 0;
}
}
h1 {
border: 0;
float: left;
}
nav {
h2 {
border: 0;
float: left;
display: block;
margin: 0;
padding: 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;
}
}
}
}
margin-right: 0;
}
}
}
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);
}
}
nav {
background: #501016;
border-bottom: 1px solid darken(#501016, 10%);
@include border-radius(3px 3px 0 0);
@include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
display: block;
float: left;
margin: 5px 0 0;
padding: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
img {
max-width: 100%;
height: auto;
}
}
ul {
@extend .clearfix;
margin: 0;
footer {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
color: #777;
margin-top: $body-line-height;
padding: 0 $body-line-height;
li {
line-height: lh();
margin-bottom: 0;
float: left;
p {
float: left;
a {
color: #fff;
display: block;
font-weight: bold;
padding: 10px lh() 8px;
text-decoration: none;
a {
color: #444;
@media screen and (max-width: 1020px) {
padding: 10px lh(.7) 8px;
}
&:link, &:visited {
color: #444;
&:hover {
color: rgba(#fff, .7);
background-color: none;
}
}
}
}
@media screen and (max-width: 900px) {
width: 100%;
float: none;
&:hover, &:focus {
color: #000;
ul {
li {
padding: auto;
display: table-cell;
width: 16.6666666667%;
text-align: center;
}
}
}
}
ul {
float: right;
.active {
background: #F4F4F4;
border: 1px solid darken(#501016, 10%);
border-bottom: 0;
@include border-radius(3px 3px 0 0);
@include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
color: #333;
text-shadow: 0 1px 0 #fff;
}
li {
display: inline-block;
margin-right: 20px;
&.courseware {
li.courseware a {
@extend .active;
}
}
a {
color: #444;
&.book {
li.book a {
@extend .active;
}
}
&:link, &:visited {
color: #444;
&.info {
li.info a {
@extend .active;
}
}
&:hover, &:focus {
color: #000;
&.discussion {
li.discussion a {
@extend .active;
}
}
&.wiki {
li.wiki a {
@extend .active;
}
}
&.profile {
li.profile a {
@extend .active;
}
}
}
......
sass/layout/_layout.scss 0 → 100644
html {
margin-top: 0;
body {
color: $dark-gray;
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
background: #f4f4f4; //#f3f1e5
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
overflow: hidden;
background: #fff;
border-bottom: 1px solid #bbb;
margin-top: 3px;
@include box-shadow(0 0 4px #dfdfdf);
border: 1px solid #bbb;
@media screen and (min-width: 1400px) {
@include border-radius(4px);
margin-top: lh(.5);
}
}
}
}
sass/_leanmodal.scss → sass/layout/_leanmodal.scss
......@@ -221,7 +221,6 @@ div#feedback_div{
div#calculator_div {
max-width: 500px;
form {
padding-bottom: lh();
margin-bottom: lh();
......@@ -246,11 +245,12 @@ div#calculator_div {
input#calculator_output {
border: 0;
background: 0;
background: none;
padding: lh(.35);
width: 60px;
font-size: 24px;
width: 378px;
font-weight: bold;
margin-top: 4px;
}
}
......
sass/marketing.scss
@import "bourbon/bourbon";
@import "reset";
@import "font-face";
@import "base/reset", "base/font-face", "base/functions";
// pages
@import "index-functions", "index-variables", "index-extends", "index";
@import "leanmodal";
@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
@import "layout/leanmodal";
sass/print.scss 0 → 100644
.header-wrapper {display:none;}
#accordion {display:none;}
.ui-accordion {display:none;
visibility:hidden;
width:0%;
}
sass/wiki/_sidebar.scss 0 → 100644
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;
}
}
}
}
}
sass/_wiki.scss → sass/wiki/_wiki.scss
......@@ -2,76 +2,6 @@ div.wiki-wrapper {
display: table;
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 {
@extend .content;
......
simplewiki_base.html
......@@ -65,35 +65,29 @@
});
</script>
<%block name="bodyextra">
<%block name="wiki_head"/>
</%block>
<%block name="bodyextra">
<%include file="navigation.html" args="active_page='wiki'" />
<section class="main-content">
<div class="wiki-wrapper">
<%block name="wiki_panel">
<%block name="wiki_panel">
<div id="wiki_panel">
<%
if (wiki_article is not UNDEFINED):
baseURL = reverse("wiki_view", args=[wiki_article.get_url()])
else:
baseURL = reverse("wiki_view", args=["/"])
%>
<%
if (wiki_article is not UNDEFINED):
baseURL = reverse("wiki_view", args=[wiki_article.get_url()])
else:
baseURL = reverse("wiki_view", args=["/"])
%>
<ul class="action">
<!-- <li> -->
<!-- <input type="button" onclick="javascript:location.href='${reverse("wiki_random", args=[])}'" value="Random article" class="button" /> -->
<!-- </li> -->
<li>
<input type="button" onclick="javascript:location.href='${reverse("wiki_list_articles", args=[])}'" value="All articles" class="button" />
</li>
<li class="create-article">
<h3>
<a href="#" id="create-article"/>Create Article</a>
......
simplewiki_edit.html
......@@ -8,6 +8,22 @@
${ wiki_article.title }
</%block>
<%block name="wiki_head">
<script>
$(function() {
//Store the initial contents of #id_contents (the wiki body field) so we can compare for unsaved changes
$("#id_contents").data('initial_contents', $("#id_contents").val());
window.onbeforeunload = function askConfirm() { //Warn the user before they navigate away
if ( $("#id_contents").val() != $("#id_contents").data('initial_contents') ) {
return "You have made changes to the article that have not been saved yet.";
}
};
});
</script>
</%block>
<%block name="wiki_body">
<form method="POST" id="wiki_revision">
<div style="display:none">
......
staff_problem_info.html 0 → 100644
<div class="staff_info">
${xml | h}
</div>
staticbook.html
......@@ -16,19 +16,19 @@ function goto_page(n) {
if(n<10) {
prefix="00";
}
$("#bookpage").attr("src","${ settings.BOOK_URL }p"+prefix+n+".jpg");
$("#bookpage").attr("src","${ settings.BOOK_URL }p"+prefix+n+".png");
};
function prev_page() {
var newpage=page-1;
if(newpage<1) newpage=1;
if(newpage<0) newpage=0;
goto_page(newpage);
log_event("book", {"type":"prevpage","new":page});
}
function next_page() {
var newpage=page+1;
if(newpage>1764) newpage=1764;
if(newpage>1008) newpage=1008;
goto_page(newpage);
log_event("book", {"type":"nextpage","new":page});
}
......@@ -56,7 +56,7 @@ function next_page() {
</ul>
</nav>
<img id="bookpage" src="${ settings.BOOK_URL }p${ "%03i"%(page) }.jpg">
<img id="bookpage" src="${ settings.BOOK_URL }p${ "%03i"%(page) }.png">
</section>
</section>
</div>
......
tos.html
......@@ -78,9 +78,7 @@ intent of misleading others.
<li>You, furthermore, agree not to scrape, or otherwise download in
bulk, user-contributed content, a list or directory of users on the
system, or other material including but not limited to on-line
textbooks, User Postings, or user information. You agree not to store
more than 5 pages of the electronic textbook or 5 forum posts in any
permanent medium (hard drive, optical disk, etc., flash drive, etc.).
textbooks, User Postings, or user information.
<lu>You agree to not misrepresent or attempt to misrepresent your
identity while using the Sites (although you are welcome and
encouraged to use an anonymous username in the forums).
......@@ -302,6 +300,6 @@ consent to the personal jurisdiction of and exclusive venue in the
federal and state courts located in and serving Boston, Massachusetts
as the legal forum for any such dispute.</p>
<p><strong>Effective Date:</strong> February 10, 2012</p><div>
<p><strong>Effective Date:</strong> February 20, 2012</p><div>
</div>
</section>
video_init.js
......@@ -58,15 +58,23 @@ for(var i=0; i<l.length; i++) {
add_speed(l[i], streams[l[i]])
}
//toggle video play/pause. the HTML assumes video is always autoplayed
//initially since it starts with class "pause". may want to set that in
//javascript
$("#video_control").click(function(){
if ($(this).hasClass("play")){
function toggleVideo(){
if ($("#video_control").hasClass("play")){
play();
$(this).removeClass().addClass("pause");
$("#video_control").removeClass().addClass("pause");
} else {
pause();
$(this).removeClass().addClass("play");
$("#video_control").removeClass().addClass("play");
}
}
$("#video_control").click(toggleVideo);
// space bar to pause video
$(".video-wrapper").keyup(function(e){
active = document.activeElement;
if (e.which == 32) {
e.preventDefault();
$("#video_control").click();
}
});
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