Merged in default and fixed conflicts
--HG-- branch : templates-profilecleanup
This commit is contained in:
Kyle Fiedler
261
6002x-faq.html
Normal file
261
6002x-faq.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<%inherit file="marketing.html" />
|
||||
<%block name="login_area">
|
||||
</%block>
|
||||
|
||||
<section class="subpage">
|
||||
<div>
|
||||
|
||||
<h1>
|
||||
More about 6.002x
|
||||
</h1>
|
||||
|
||||
<h2> Answering common questions about the first course on <i>MITx</i>, the
|
||||
Institute’s online-learning initiative.</h2>
|
||||
|
||||
<p>
|
||||
This set of questions and answers accompanies MIT’s February 13,
|
||||
2012, announcement regarding <i>MITx</i>’s prototype course —
|
||||
6.002x: Circuits and Electronics.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
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.
|
||||
|
||||
<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 <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, <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 <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 <i>MITx</i> represents a next step forward in that
|
||||
effort.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
What is 6.002x, and how is it different from the on-campus version of
|
||||
6.002?
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
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. <i>MITx</i>’s 6.002x is modeled on the on-campus
|
||||
version of 6.002.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The course introduces engineering in the context of the lumped
|
||||
circuit abstraction. Topics covered include: resistive elements and
|
||||
networks; independent and dependent sources; switches and MOS
|
||||
transistors; digital abstraction; amplifiers; energy storage
|
||||
elements; dynamics of first- and second-order networks; design in
|
||||
the time and frequency domains; and analog and digital circuits and
|
||||
applications.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
6.002x is built on the content created collaboratively by MIT
|
||||
professors Anant Agarwal and Jeffrey H. Lang for 6.002.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
How do I enroll in 6.002x?
|
||||
</h2>
|
||||
<p>
|
||||
To enroll, visit <a href="http://mitx.mit.edu">http://mitx.mit.edu</a>
|
||||
and sign up.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
When will the course be available online?
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
6.002x will become available online on Monday, March 5.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
Do I need to follow a set timeline in completing 6.002x?
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
How much time is required to complete the course?
|
||||
</h2>
|
||||
<p>
|
||||
Students should expect to spend approximately 10 hours per week on the
|
||||
course. However, the time taken by individual students might vary
|
||||
considerably depending on background and skill.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
Who are the instructors for 6.002x?
|
||||
</h2>
|
||||
<p>
|
||||
There are four instructors for 6.002x: Anant Agarwal, Chris Terman,
|
||||
Gerald Sussman and Piotr Mitros. The team also includes several
|
||||
teaching assistants (TAs).
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
What is the work like in 6.002x?
|
||||
</h2>
|
||||
<p>
|
||||
Students taking 6.002x will have weekly video lectures, readings from
|
||||
the textbook, practice exercises and homework; design and laboratory
|
||||
exercises are also significant components of the course. The course
|
||||
will also provide additional tutorial material. There will be a
|
||||
midterm and a final exam. An interactive laboratory playground will
|
||||
also be made available for students to experiment creatively.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
In general, for any given week, learners are expected to work through
|
||||
a couple of lecture sequences containing a few videos (each 5 to 10
|
||||
minutes in length) and a few interactive practice exercises. Learners
|
||||
can also read appropriate parts of the textbook linked to the
|
||||
videos. Lab and homework exercises will round out the week. Tutorials
|
||||
are also provided as additional reference material.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
What if I have a question during the course?
|
||||
</h2>
|
||||
<p>
|
||||
The course will include a discussion forum for learners to ask
|
||||
questions, to post answers, and for discussions. Several helpful
|
||||
documents, FAQs, tutorials and videos on using the various components
|
||||
of the course will also be provided.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
Will 6.002x offer any means for collaboration among online learners?
|
||||
</h2>
|
||||
<p>
|
||||
Yes. 6.002x will offer modest support for collaborative work through a
|
||||
prototype wiki and discussion forum.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
Are there prerequisites to take the course?
|
||||
</h2>
|
||||
<p>
|
||||
While <i>MITx</i> courses are open to all, there are some skills required to
|
||||
succeed in taking the course.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
In 6.002x, students are encouraged to have the knowledge obtained from
|
||||
a college-level physics course in electricity and
|
||||
magnetism (or from an advanced secondary-education course in electricity and magnetism, as with an Advanced Placement course in the United States). Students must know basic calculus and linear algebra, and
|
||||
have some basic background in differential equations.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Since more advanced mathematics will not show up until the second half
|
||||
of the course, the first half of the course will include an optional
|
||||
remedial differential equations component for students with weaker
|
||||
math backgrounds.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
How much does the course cost?
|
||||
</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
What is a credential?
|
||||
</h2>
|
||||
<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 <i>MITx</i>’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>
|
||||
|
||||
<h2>
|
||||
Who is grading the course?
|
||||
</h2>
|
||||
<p>
|
||||
<i>MITx</i> courses will use automated technologies to check student work
|
||||
including practice exercises, homework assignments, labs and exams.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
What is a passing grade?
|
||||
</h2>
|
||||
<p>
|
||||
Grading schemes for each course will be announced with the
|
||||
course. 6.002x will be graded on an absolute scale. The components
|
||||
affecting a student’s grade and the grade thresholds will be
|
||||
posted on the course website when the course comes online.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
Do I need to buy a textbook?
|
||||
</h2>
|
||||
<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. Relevant sections will be
|
||||
provided electronically as part of the online course. While the
|
||||
textbook is recommended, it is not required. The electronic text is
|
||||
provided for personal use in connection with this course only. The
|
||||
copyright for the book is owned by Elsevier. The book can be purchased
|
||||
on Amazon.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
Do I need to have special software to access 6.002x?
|
||||
</h2>
|
||||
<p>
|
||||
No, you do not need special software to access 6.002x, as you will
|
||||
access the online interactive course through your browser. The course
|
||||
website was developed and tested primarily with Google Chrome. We
|
||||
support current versions of Mozilla Firefox as well. The video player
|
||||
is designed to work with Flash. While we provide a partial non-Flash
|
||||
fallback for the video, as well as partial support for Internet
|
||||
Explorer, other browsers and tablets, portions of the functionality
|
||||
will be unavailable.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
When will the next courses become available and what topics will they be on?
|
||||
</h2>
|
||||
<p>
|
||||
Additional courses will be announced
|
||||
on <a href="http://mitx.mit.edu">mitx.mit.edu</a> as they become
|
||||
available. We expect this will happen in fall 2012.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
130
6002x-press-release.html
Normal file
130
6002x-press-release.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<%inherit file="marketing.html" />
|
||||
<%block name="login_area">
|
||||
</%block>
|
||||
|
||||
<section class="subpage">
|
||||
<div>
|
||||
|
||||
<h1> <i>MITx</i> prototype course opens for enrollment—Online-learning
|
||||
initiative’s first offering, ‘6.002x: Circuits and
|
||||
Electronics,’ accepting registrants now.</h1>
|
||||
|
||||
<p> MIT News Office</p>
|
||||
|
||||
<p> In December,
|
||||
MIT <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html">announced </a>the
|
||||
launch of an online learning initiative called “<i>MITx</i>.”
|
||||
Starting this week, interested learners can now enroll for free in the
|
||||
initiative”s prototype course -- 6.002x: Circuits and
|
||||
Electronics.</p>
|
||||
|
||||
<p>Students can sign up for the course
|
||||
at <a href="http://mitx.mit.edu">mitx.mit.edu</a>. The course will
|
||||
officially begin on March 5 and run through June 8.</p>
|
||||
|
||||
<p> Modeled after MIT’s 6.002 — an introductory course for
|
||||
undergraduate students in MIT’s Department of Electrical
|
||||
Engineering and Computer Science (EECS) — 6.002x will introduce
|
||||
engineering in the context of the lumped circuit abstraction, helping
|
||||
students make the transition from physics to the fields of electrical
|
||||
engineering and computer science. It will be taught by Anant Agarwal,
|
||||
EECS professor and director of MIT's Computer Science and
|
||||
Artificial Intelligence Laboratory (CSAIL); Chris Terman, CSAIL
|
||||
co-director; EECS Professor Gerald Sussman; and CSAIL Research
|
||||
Scientist Piotr Mitros.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
“We are very excited to begin <i>MITx</i> with this prototype
|
||||
class,” says MIT Provost L. Rafael Reif. “We will use
|
||||
this prototype course to optimize the tools we have built by
|
||||
soliciting and acting on feedback from learners.”
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
To access the course, registered students will log in
|
||||
at <a href="http://mitx.mit.edu">mitx.mit.edu</a>, where they will
|
||||
find a course schedule, an e-textbook for the course, and a discussion
|
||||
board. Each week, students will watch video lectures and
|
||||
demonstrations, work with practice exercises, complete homework
|
||||
assignments, and participate in an online interactive lab specifically
|
||||
designed to replicate its real-world counterpart. Students will also
|
||||
take exams and be able to check their grades as they progress in the
|
||||
course. Overall, students can expect to spend approximately 10 hours
|
||||
each week on the course.
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
“We invite you to join us for this pilot course of <i>MITx</i>,”
|
||||
Agarwal says. “The 6.002x team of professors and teaching
|
||||
assistants is excited to work with you on the discussion forum, and we
|
||||
look forward to your feedback to improve the learning
|
||||
experience.”
|
||||
</blockquote>
|
||||
|
||||
<p> <a href="http://mitx.mit.edu"> A video introduction to 6.002x can
|
||||
be found here.</a></p>
|
||||
|
||||
<p> <a href="/6002x-faq.html"> A set of Frequently Asked Questions
|
||||
about 6.002x can be found here.</a></p>
|
||||
|
||||
<p>
|
||||
<a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219">
|
||||
FAQs about <i>MITx</i> as a whole can be found here.
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
At the end of the prototype course, students who demonstrate their
|
||||
mastery will be able to receive a certificate of completion for
|
||||
free. In future <i>MITx</i> courses, students who complete the mastery
|
||||
requirement on <i>MITx</i> will be able to receive the credential for a
|
||||
modest fee.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Further courses are expected to become
|
||||
available beginning in the fall.
|
||||
</p>
|
||||
|
||||
|
||||
<h3>
|
||||
RELATED:
|
||||
</h3>
|
||||
<p>
|
||||
<a href="/index.html">
|
||||
6.002x course website
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="/6002x-faq.html">
|
||||
6.002x FAQ
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
ARCHIVE: "MIT launches online learning initiative"
|
||||
</h3>
|
||||
<a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html">
|
||||
http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html
|
||||
</a>
|
||||
|
||||
<h3>
|
||||
<i>MITx</i> website
|
||||
</h3>
|
||||
<a href="http://mitx.mit.edu">
|
||||
http://mitx.mit.edu
|
||||
</a>
|
||||
|
||||
<!--h3>
|
||||
TAGS:
|
||||
</h3>
|
||||
<p>
|
||||
<i>MITx</i>; students; education, teaching, academics; innovation and
|
||||
invention; faculty; mit administration; learning; electrical
|
||||
engineering and computer science; csail
|
||||
</p-->
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,9 +1,13 @@
|
||||
<%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>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<%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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Someone, hopefully you, signed up for an account for MIT's on-line
|
||||
Someone, hopefully you, signed up for an account for MITx's on-line
|
||||
offering of 6.002 using this email address. If it was you, and you'd
|
||||
like to activate and use your account, copy and paste this address
|
||||
into your web browser's address bar:
|
||||
|
||||
@@ -1 +1 @@
|
||||
Your account for MIT's on-line 6.002
|
||||
Your account for MITx's on-line 6.002
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<%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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!-- 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 & Electronics</h1>
|
||||
<h1>Enroll in 6.002x Circuits & 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. "John Smith, Jr").</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>
|
||||
|
||||
|
||||
1
custom_tags
Symbolic link
1
custom_tags
Symbolic link
@@ -0,0 +1 @@
|
||||
../data/custom_tags
|
||||
@@ -1,4 +1,4 @@
|
||||
<%inherit file="marketing.html" />
|
||||
<%inherit file="marketing.html" />
|
||||
|
||||
<%block name="header_text">
|
||||
<section class="course">
|
||||
@@ -7,7 +7,7 @@
|
||||
<h2>6.002x</h2>
|
||||
<a class="enroll" rel="leanModal" href="#enroll">Enroll in 6.002x Circuits <span>&</span> Electronics</a>
|
||||
</section>
|
||||
<p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT’s first undergraduate analog design course: 6.002. This course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012.</p>
|
||||
<p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT’s first undergraduate analog design course: 6.002. This course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012.</p>
|
||||
</section>
|
||||
</%block>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
<p>If you successfully complete the course, you will receive an electronic certificate of accomplishment from <em>MITx</em>. This certificate will indicate that you earned it from <em>MITx’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">
|
||||
@@ -102,7 +102,7 @@ $(function() {
|
||||
if(json.success) {
|
||||
$('#enroll').html(json.value);
|
||||
} else {
|
||||
$('#enroll_error').html(json.value);
|
||||
$('#enroll_error').html(json.value).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
|
||||
${ error }
|
||||
|
||||
<div id="login_div">
|
||||
<header>
|
||||
<h1>Log in to MITx</h1>
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
@@ -68,7 +68,9 @@ function postJSON(url, data, callback) {
|
||||
<nav>
|
||||
<h1><a href="http://mitx.mit.edu/">MITx</a></h1>
|
||||
% if settings.COURSEWARE_ENABLED:
|
||||
<%block name="login_area">
|
||||
<a rel="leanModal" class="login" href="#login">Log In</a>
|
||||
</%block>
|
||||
% endif
|
||||
</nav>
|
||||
</%block>
|
||||
@@ -94,13 +96,13 @@ 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>
|
||||
|
||||
% if settings.COURSEWARE_ENABLED:
|
||||
<div id="login" class="leanModal_box"><%include file="login.html" /></div>
|
||||
<div id="enroll" class="leanModal_box" name="enroll"><%include file="create_account.html" /></div>
|
||||
% endif
|
||||
<div id="pwd_reset" class="leanModal_box"><%include file="password_reset_form.html" /></div>
|
||||
<div id="reset_done" class="leanModal_box"></div>
|
||||
@@ -142,7 +144,7 @@ $(document).ready(function(){
|
||||
if (json.success) {
|
||||
$('#pwd_reset').html(json.value);
|
||||
} else {
|
||||
$('#pwd_error').html(json.error);
|
||||
$('#pwd_error').html(json.error).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
104
mitx-overview.html
Normal file
104
mitx-overview.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<%inherit file="marketing.html" />
|
||||
<%block name="login_area">
|
||||
</%block>
|
||||
<section class="subpage">
|
||||
<div>
|
||||
|
||||
<h1> <i>MITx</i> Advances MIT’s Vision for Online Learning</h1>
|
||||
|
||||
<p> Education has entered an era of rapid, exciting,
|
||||
technology-enabled change. At MIT, we welcome the opportunity to
|
||||
harness the power of on-line technology for our students and for the
|
||||
world. On December 19, 2011, we announced <i>MITx</i>, an initiative to
|
||||
offer exciting, challenging and enriching courses to anyone,
|
||||
anywhere, who has the motivation and ability to engage MIT’s
|
||||
educational content.</p>
|
||||
|
||||
<p> Ten years ago, MIT
|
||||
launched <a href="http://ocw.mit.edu/index.htm">OpenCourseWare</a>,
|
||||
which places online the course materials for substantially the entire
|
||||
MIT curriculum, and was the genesis of today’s worldwide
|
||||
movement in free, open educational resources. <i>MITx</i> is the next step
|
||||
in opening MIT’s educational doors to the world. Through OCW and
|
||||
<i>MITx</i>, MIT invites the world to join it in the passion, hard work and
|
||||
thrill of learning and discovery.</p>
|
||||
|
||||
<h2><i>MITx</i> will e-publish interactive online courses that:</h2>
|
||||
|
||||
<ul>
|
||||
<li>Empower students to learn at their own pace;</li>
|
||||
<li>Offer online laboratories where students can experiment and apply their learning;</li>
|
||||
<li>Connect students to each other in online discussion groups and wiki-based collaborative learning; </li>
|
||||
<li>Challenge learners with MIT-rigor course materials; and</li>
|
||||
<li>Assess individual student learning as the student progresses through the course.</li>
|
||||
</ul>
|
||||
|
||||
<p> <i>MITx</i> students who demonstrate their mastery of a subject can earn
|
||||
a certificate of completion awarded by <i>MITx</i>.</p>
|
||||
|
||||
<p> <i>MITx</i> courses will be available to the world through an Internet
|
||||
platform that MIT will make freely available. MIT hopes that other
|
||||
educational institutions, anywhere in the world, will adapt and use
|
||||
the platform to publish their own educational content online for the
|
||||
benefit of learners. Because the platform will be open-source and
|
||||
scalable, adopters and users can continuously improve it, for the
|
||||
benefit of everyone.</p>
|
||||
|
||||
<h2> Why Is MIT Creating <i>MITx</i>?</h2>
|
||||
|
||||
<p> Excellence in teaching and learning. MIT must always provide its
|
||||
students the very best teaching and learning tools possible. MIT
|
||||
began experimenting with online technologies in its educational
|
||||
programs long before we launched OCW in 2001. We have only increased
|
||||
our emphasis in recent years, as several MIT committees have studied
|
||||
how MIT might enhance the learning experience of its students and
|
||||
expand its impact worldwide through new online offerings.</p>
|
||||
|
||||
<p> These efforts, combined with those of numerous individual MIT
|
||||
faculty members, confirmed MIT’s conviction that digital
|
||||
technologies enrich learning. Many other innovative institutions and
|
||||
enterprises believe the same and are bringing creative online
|
||||
offerings forward. Having brain-stormed, investigated and studied,
|
||||
we were ready to act and eager to start. We announced our <i>MITx</i>
|
||||
aspiration to capture and encourage the energy of our faculty in
|
||||
creating new online teaching and learning tools. </p>
|
||||
|
||||
<p> Once up and running, <i>MITx</i> will be a laboratory for online
|
||||
learning. Whether <i>MITx</i> learners are MIT’s on-campus students,
|
||||
university students elsewhere, or independent learners, <i>MITx</i> will help
|
||||
us understand how online learning occurs and how virtual communities
|
||||
of learners assemble -- information that in turn will allow us to
|
||||
improve both <i>MITx</i> and our on-campus teaching. </p>
|
||||
|
||||
<p> Access to higher education. <i>MITx</i> will help shatter barriers to
|
||||
education. The constraints of MIT’s physical campus allow us to
|
||||
admit less than 10 percent of our undergraduate applicants. We teach
|
||||
on-campus only a tiny fraction of the people in the world with the
|
||||
ability and motivation to learn MIT content. Online technology
|
||||
provides a new and different portal into MIT-quality education.
|
||||
Through <i>MITx</i>, MIT educational content can reach, augment, and enrich
|
||||
the education and livelihood of many learners who cannot attend
|
||||
MIT. </p>
|
||||
|
||||
<p> <i>MITx</i> does not provide a full MIT education. Our residential
|
||||
campus is the heart of MIT’s knowledge creation and
|
||||
dissemination. MIT students enjoy a comprehensive curriculum and
|
||||
distinct educational environment. Without MIT, there would be no
|
||||
<i>MITx</i>. </p>
|
||||
|
||||
<p> Advancing the public good. <i>MITx</i> is an opportunity to help
|
||||
preserve and expand higher education as a public good. Historically,
|
||||
the investment of public and private assets in enormous amounts has
|
||||
produced the public benefits of knowledge creation and dissemination,
|
||||
leading to capable citizens, innovation, job creation, economic
|
||||
development, and broader welfare.</p>
|
||||
|
||||
<p> Today, as computation and Internet technologies enable higher
|
||||
education to migrate online, MIT sees the opportunity to democratize
|
||||
education with unprecedented efficiency and scalability. We possess a
|
||||
strong desire and feel a compelling obligation to offer a
|
||||
not-for-profit, mission-driven, open-technology approach to online
|
||||
learning. <i>MITx</i> is our contribution. </p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@@ -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="" /><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 & links:</strong> <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 & 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>
|
||||
@@ -43,17 +43,37 @@
|
||||
<a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&</span> Enroll</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’s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
|
||||
<p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT’s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div id="video-overlay" class="leanModal_box">
|
||||
<iframe 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>
|
||||
|
||||
25
mitx_help.html
Normal file
25
mitx_help.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<%inherit file="marketing.html" />
|
||||
|
||||
<section class="tos">
|
||||
<div>
|
||||
<section class="help-email">
|
||||
<h2>Help & Feedback</h2>
|
||||
<p> If run into problems signing up for the web site which you
|
||||
cannot resolve on your own, you can reach us at:</p>
|
||||
<dl>
|
||||
<dt>System-related questions</dt>
|
||||
<dd><a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></dd>
|
||||
<dt>Content-related questions</dt>
|
||||
<dd><a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></dd>
|
||||
<dt>Bug reports</dt>
|
||||
<dd><a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></dd>
|
||||
<dt>Suggestions</dt>
|
||||
<dd><a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></dd>
|
||||
</dl>
|
||||
|
||||
<p> Please bear in mind that while we read them, we do not expect to
|
||||
have time to respond to all e-mails.</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
{% load humanize %}
|
||||
Someone, hopefully you, signed up for a new account at djangoproject.com using this email address. If it was you, and you'd like to activate and use your account, click the link below or copy and paste it into your web browser's address bar:
|
||||
|
||||
http://127.0.0.1:8000/accounts/activate/{{ activation_key }}/
|
||||
|
||||
If you didn't request this, you don't need to do anything; you won't receive any more email from us, and the account will expire automatically in {{ expiration_days|apnumber }} days.
|
||||
@@ -1 +0,0 @@
|
||||
Activate your djangoproject.com account - you have {{ expiration_days }} days!
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<h1>Password reset unsuccessful</h1>
|
||||
|
||||
<p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
|
||||
<p>The password reset link was invalid, possibly because the link has already been used. Please request a new password reset.</p>
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
{% trans "Please go to the following page and choose a new password:" %}
|
||||
{% block reset_link %}
|
||||
https://6002x.mitx.mit.edu{% url 'django.contrib.auth.views.password_reset_confirm' uidb36=uid token=token %}
|
||||
{{ protocol }}://{{ site_name }}{% url 'django.contrib.auth.views.password_reset_confirm' uidb36=uid token=token %}
|
||||
{% endblock %}
|
||||
{% trans "Your username, in case you've forgotten:" %} {{ user.username }}
|
||||
|
||||
|
||||
@@ -1,11 +0,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();
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
// 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
|
||||
// ---------------------------------------- //
|
||||
|
||||
// fonts
|
||||
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
|
||||
$body-font-size: 14px;
|
||||
|
||||
// grid
|
||||
$columns: 12;
|
||||
$column-width: 80px;
|
||||
$gutter-width: 25px;
|
||||
$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
|
||||
|
||||
$gw-column: perc($column-width);
|
||||
$gw-gutter: perc($gutter-width);
|
||||
$body-line-height: golden-ratio($body-font-size, 1);
|
||||
|
||||
//Flexible grid
|
||||
$fg-column: $column-width;
|
||||
$fg-gutter: $gutter-width;
|
||||
$fg-max-columns: $columns;
|
||||
$fg-max-width: 1400px;
|
||||
$fg-min-width: 810px;
|
||||
|
||||
// color
|
||||
$light-gray: #ddd;
|
||||
$dark-gray: #333;
|
||||
$mit-red: #993333;
|
||||
|
||||
$text-color: $dark-gray;
|
||||
$border-color: $light-gray;
|
||||
481
sass/_index.scss
481
sass/_index.scss
@@ -1,481 +0,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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,37 +3,88 @@ div.info-wrapper {
|
||||
|
||||
section.updates {
|
||||
@extend .content;
|
||||
}
|
||||
|
||||
section.handouts {
|
||||
@extend .sidebar;
|
||||
@include border-radius(0px 4px 0px 4px);
|
||||
border-right: 0;
|
||||
border-left: 1px solid #d3d3d3;
|
||||
> h1 {
|
||||
@extend .top-header;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 0 lh();
|
||||
> p {
|
||||
margin-bottom: lh();
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding-bottom: lh(.5);
|
||||
margin-bottom: lh(.5);
|
||||
@extend .clearfix;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
|
||||
h2 {
|
||||
padding: 0 lh();
|
||||
float: left;
|
||||
width: flex-grid(2, 9);
|
||||
margin: 0 flex-gutter() 0 0;
|
||||
}
|
||||
|
||||
p {
|
||||
float: left;
|
||||
width: flex-grid(7, 9);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.handouts {
|
||||
@extend .sidebar;
|
||||
@include border-radius(0 4px 4px 0);
|
||||
border-right: 0;
|
||||
border-left: 1px solid #d3d3d3;
|
||||
|
||||
h1 {
|
||||
padding: 0 lh();
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
@include box-shadow(0 1px 0 #eee);
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
@extend .clearfix;
|
||||
|
||||
p {
|
||||
padding: 7px lh();
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-size: $body-font-size;
|
||||
|
||||
&:hover {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include box-shadow(0 1px 0 #eee);
|
||||
@include transition();
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
color: lighten($text-color, 10%);
|
||||
display: block;
|
||||
padding: 7px lh();
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0 1px 0 #fff);
|
||||
background: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
568
sass/_jquery-ui-1.8.16.custom.scss
Normal file
568
sass/_jquery-ui-1.8.16.custom.scss
Normal file
@@ -0,0 +1,568 @@
|
||||
/*
|
||||
* jQuery UI CSS Framework 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Theming/API
|
||||
*/
|
||||
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
.ui-helper-hidden { display: none; }
|
||||
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
|
||||
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
|
||||
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
.ui-helper-clearfix { display: inline-block; }
|
||||
/* required comment for clearfix to work in Opera \*/
|
||||
* html .ui-helper-clearfix { height:1%; }
|
||||
.ui-helper-clearfix { display:block; }
|
||||
/* end clearfix */
|
||||
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled { cursor: default !important; }
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
||||
|
||||
|
||||
/*
|
||||
* jQuery UI CSS Framework 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Theming/API
|
||||
*
|
||||
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Helvetica,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=2px&bgColorHeader=7fbcfd&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=50&borderColorHeader=dae5c9&fcHeader=031634&iconColorHeader=031634&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=dae5c9&fcContent=031634&iconColorContent=adcc80&bgColorDefault=7fbcdf&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=100&borderColorDefault=dae5c9&fcDefault=7a994c&iconColorDefault=adcc80&bgColorHover=bddeff&bgTextureHover=03_highlight_soft.png&bgImgOpacityHover=25&borderColorHover=7fbcdf&fcHover=7a994c&iconColorHover=adcc80&bgColorActive=023063&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=dae5c9&fcActive=dae5c9&iconColorActive=454545&bgColorHighlight=ffffff&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=cccccc&fcHighlight=444444&iconColorHighlight=adcc80&bgColorError=ffffff&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=fa720a&fcError=222222&iconColorError=fa720a&bgColorOverlay=eeeeee&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px
|
||||
*/
|
||||
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.1em; }
|
||||
.ui-widget .ui-widget { font-size: 1em; }
|
||||
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica, Arial, sans-serif; font-size: 1em; }
|
||||
.ui-widget-content { border: 1px solid #dae5c9; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #031634; }
|
||||
.ui-widget-content a { color: #031634; }
|
||||
.ui-widget-header { border: 1px solid #dae5c9; background: #7fbcfd url(images/ui-bg_highlight-soft_50_7fbcfd_1x100.png) 50% 50% repeat-x; color: #031634; font-weight: bold; }
|
||||
.ui-widget-header a { color: #031634; }
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dae5c9; background: #7fbcdf url(images/ui-bg_highlight-soft_100_7fbcdf_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; }
|
||||
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #7a994c; text-decoration: none; }
|
||||
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #7fbcdf; background: #bddeff url(images/ui-bg_highlight-soft_25_bddeff_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; }
|
||||
.ui-state-hover a, .ui-state-hover a:hover { color: #7a994c; text-decoration: none; }
|
||||
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dae5c9; background: #023063 url(images/ui-bg_glass_65_023063_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #dae5c9; }
|
||||
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #dae5c9; text-decoration: none; }
|
||||
.ui-widget :active { outline: none; }
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #cccccc; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #444444; }
|
||||
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #444444; }
|
||||
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #fa720a; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
|
||||
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #222222; }
|
||||
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #222222; }
|
||||
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
|
||||
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
|
||||
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_adcc80_256x240.png); }
|
||||
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); }
|
||||
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_031634_256x240.png); }
|
||||
.ui-state-default .ui-icon { background-image: url(images/ui-icons_adcc80_256x240.png); }
|
||||
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); }
|
||||
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
|
||||
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); }
|
||||
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_fa720a_256x240.png); }
|
||||
|
||||
/* positioning */
|
||||
.ui-icon-carat-1-n { background-position: 0 0; }
|
||||
.ui-icon-carat-1-ne { background-position: -16px 0; }
|
||||
.ui-icon-carat-1-e { background-position: -32px 0; }
|
||||
.ui-icon-carat-1-se { background-position: -48px 0; }
|
||||
.ui-icon-carat-1-s { background-position: -64px 0; }
|
||||
.ui-icon-carat-1-sw { background-position: -80px 0; }
|
||||
.ui-icon-carat-1-w { background-position: -96px 0; }
|
||||
.ui-icon-carat-1-nw { background-position: -112px 0; }
|
||||
.ui-icon-carat-2-n-s { background-position: -128px 0; }
|
||||
.ui-icon-carat-2-e-w { background-position: -144px 0; }
|
||||
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
||||
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
||||
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
||||
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
||||
.ui-icon-triangle-1-s { background-position: -64px -16px; }
|
||||
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
||||
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
||||
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
||||
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
||||
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
||||
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
||||
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
||||
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
||||
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
||||
.ui-icon-arrow-1-s { background-position: -64px -32px; }
|
||||
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
||||
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
||||
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
||||
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
||||
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
||||
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
||||
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
||||
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
||||
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
||||
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
||||
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
||||
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
|
||||
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
||||
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
||||
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
||||
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
||||
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
||||
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
||||
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
||||
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
||||
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
||||
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
||||
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
||||
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
||||
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
||||
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
||||
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
||||
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
||||
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
||||
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
||||
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
||||
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
||||
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
||||
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
||||
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
||||
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
||||
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
||||
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
||||
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
||||
.ui-icon-extlink { background-position: -32px -80px; }
|
||||
.ui-icon-newwin { background-position: -48px -80px; }
|
||||
.ui-icon-refresh { background-position: -64px -80px; }
|
||||
.ui-icon-shuffle { background-position: -80px -80px; }
|
||||
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
||||
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
||||
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
||||
.ui-icon-folder-open { background-position: -16px -96px; }
|
||||
.ui-icon-document { background-position: -32px -96px; }
|
||||
.ui-icon-document-b { background-position: -48px -96px; }
|
||||
.ui-icon-note { background-position: -64px -96px; }
|
||||
.ui-icon-mail-closed { background-position: -80px -96px; }
|
||||
.ui-icon-mail-open { background-position: -96px -96px; }
|
||||
.ui-icon-suitcase { background-position: -112px -96px; }
|
||||
.ui-icon-comment { background-position: -128px -96px; }
|
||||
.ui-icon-person { background-position: -144px -96px; }
|
||||
.ui-icon-print { background-position: -160px -96px; }
|
||||
.ui-icon-trash { background-position: -176px -96px; }
|
||||
.ui-icon-locked { background-position: -192px -96px; }
|
||||
.ui-icon-unlocked { background-position: -208px -96px; }
|
||||
.ui-icon-bookmark { background-position: -224px -96px; }
|
||||
.ui-icon-tag { background-position: -240px -96px; }
|
||||
.ui-icon-home { background-position: 0 -112px; }
|
||||
.ui-icon-flag { background-position: -16px -112px; }
|
||||
.ui-icon-calendar { background-position: -32px -112px; }
|
||||
.ui-icon-cart { background-position: -48px -112px; }
|
||||
.ui-icon-pencil { background-position: -64px -112px; }
|
||||
.ui-icon-clock { background-position: -80px -112px; }
|
||||
.ui-icon-disk { background-position: -96px -112px; }
|
||||
.ui-icon-calculator { background-position: -112px -112px; }
|
||||
.ui-icon-zoomin { background-position: -128px -112px; }
|
||||
.ui-icon-zoomout { background-position: -144px -112px; }
|
||||
.ui-icon-search { background-position: -160px -112px; }
|
||||
.ui-icon-wrench { background-position: -176px -112px; }
|
||||
.ui-icon-gear { background-position: -192px -112px; }
|
||||
.ui-icon-heart { background-position: -208px -112px; }
|
||||
.ui-icon-star { background-position: -224px -112px; }
|
||||
.ui-icon-link { background-position: -240px -112px; }
|
||||
.ui-icon-cancel { background-position: 0 -128px; }
|
||||
.ui-icon-plus { background-position: -16px -128px; }
|
||||
.ui-icon-plusthick { background-position: -32px -128px; }
|
||||
.ui-icon-minus { background-position: -48px -128px; }
|
||||
.ui-icon-minusthick { background-position: -64px -128px; }
|
||||
.ui-icon-close { background-position: -80px -128px; }
|
||||
.ui-icon-closethick { background-position: -96px -128px; }
|
||||
.ui-icon-key { background-position: -112px -128px; }
|
||||
.ui-icon-lightbulb { background-position: -128px -128px; }
|
||||
.ui-icon-scissors { background-position: -144px -128px; }
|
||||
.ui-icon-clipboard { background-position: -160px -128px; }
|
||||
.ui-icon-copy { background-position: -176px -128px; }
|
||||
.ui-icon-contact { background-position: -192px -128px; }
|
||||
.ui-icon-image { background-position: -208px -128px; }
|
||||
.ui-icon-video { background-position: -224px -128px; }
|
||||
.ui-icon-script { background-position: -240px -128px; }
|
||||
.ui-icon-alert { background-position: 0 -144px; }
|
||||
.ui-icon-info { background-position: -16px -144px; }
|
||||
.ui-icon-notice { background-position: -32px -144px; }
|
||||
.ui-icon-help { background-position: -48px -144px; }
|
||||
.ui-icon-check { background-position: -64px -144px; }
|
||||
.ui-icon-bullet { background-position: -80px -144px; }
|
||||
.ui-icon-radio-off { background-position: -96px -144px; }
|
||||
.ui-icon-radio-on { background-position: -112px -144px; }
|
||||
.ui-icon-pin-w { background-position: -128px -144px; }
|
||||
.ui-icon-pin-s { background-position: -144px -144px; }
|
||||
.ui-icon-play { background-position: 0 -160px; }
|
||||
.ui-icon-pause { background-position: -16px -160px; }
|
||||
.ui-icon-seek-next { background-position: -32px -160px; }
|
||||
.ui-icon-seek-prev { background-position: -48px -160px; }
|
||||
.ui-icon-seek-end { background-position: -64px -160px; }
|
||||
.ui-icon-seek-start { background-position: -80px -160px; }
|
||||
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
|
||||
.ui-icon-seek-first { background-position: -80px -160px; }
|
||||
.ui-icon-stop { background-position: -96px -160px; }
|
||||
.ui-icon-eject { background-position: -112px -160px; }
|
||||
.ui-icon-volume-off { background-position: -128px -160px; }
|
||||
.ui-icon-volume-on { background-position: -144px -160px; }
|
||||
.ui-icon-power { background-position: 0 -176px; }
|
||||
.ui-icon-signal-diag { background-position: -16px -176px; }
|
||||
.ui-icon-signal { background-position: -32px -176px; }
|
||||
.ui-icon-battery-0 { background-position: -48px -176px; }
|
||||
.ui-icon-battery-1 { background-position: -64px -176px; }
|
||||
.ui-icon-battery-2 { background-position: -80px -176px; }
|
||||
.ui-icon-battery-3 { background-position: -96px -176px; }
|
||||
.ui-icon-circle-plus { background-position: 0 -192px; }
|
||||
.ui-icon-circle-minus { background-position: -16px -192px; }
|
||||
.ui-icon-circle-close { background-position: -32px -192px; }
|
||||
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
||||
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
||||
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
||||
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
||||
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
||||
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
||||
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
||||
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
||||
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
||||
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
||||
.ui-icon-circle-check { background-position: -208px -192px; }
|
||||
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
||||
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
||||
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
||||
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
||||
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
||||
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
||||
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
||||
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
||||
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
||||
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
||||
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
||||
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; }
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay { background: #eeeeee url(images/ui-bg_flat_0_eeeeee_40x100.png) 50% 50% repeat-x; opacity: .80;filter:Alpha(Opacity=80); }
|
||||
.ui-widget-shadow { margin: -4px 0 0 -4px; padding: 4px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 0px; -khtml-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }/*
|
||||
* jQuery UI Resizable 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Resizable#theming
|
||||
*/
|
||||
.ui-resizable { position: relative;}
|
||||
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
|
||||
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
|
||||
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
|
||||
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
|
||||
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
|
||||
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
|
||||
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
|
||||
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
|
||||
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
|
||||
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
|
||||
* jQuery UI Selectable 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Selectable#theming
|
||||
*/
|
||||
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
|
||||
/*
|
||||
* jQuery UI Accordion 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Accordion#theming
|
||||
*/
|
||||
/* IE/Win - Fix animation bug - #4615 */
|
||||
.ui-accordion { width: 100%; }
|
||||
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
|
||||
.ui-accordion .ui-accordion-li-fix { display: inline; }
|
||||
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
|
||||
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
|
||||
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
|
||||
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
|
||||
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
|
||||
.ui-accordion .ui-accordion-content-active { display: block; }
|
||||
/*
|
||||
* jQuery UI Autocomplete 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Autocomplete#theming
|
||||
*/
|
||||
.ui-autocomplete { position: absolute; cursor: default; }
|
||||
|
||||
/* workarounds */
|
||||
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
|
||||
|
||||
/*
|
||||
* jQuery UI Menu 1.8.16
|
||||
*
|
||||
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Menu#theming
|
||||
*/
|
||||
.ui-menu {
|
||||
list-style:none;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
display:block;
|
||||
float: left;
|
||||
}
|
||||
.ui-menu .ui-menu {
|
||||
margin-top: -3px;
|
||||
}
|
||||
.ui-menu .ui-menu-item {
|
||||
margin:0;
|
||||
padding: 0;
|
||||
zoom: 1;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-menu .ui-menu-item a {
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
padding:.2em .4em;
|
||||
line-height:1.5;
|
||||
zoom:1;
|
||||
}
|
||||
.ui-menu .ui-menu-item a.ui-state-hover,
|
||||
.ui-menu .ui-menu-item a.ui-state-active {
|
||||
font-weight: normal;
|
||||
margin: -1px;
|
||||
}
|
||||
/*
|
||||
* jQuery UI Button 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Button#theming
|
||||
*/
|
||||
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
|
||||
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
|
||||
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
|
||||
.ui-button-icons-only { width: 3.4em; }
|
||||
button.ui-button-icons-only { width: 3.7em; }
|
||||
|
||||
/*button text element */
|
||||
.ui-button .ui-button-text { display: block; line-height: 1.4; }
|
||||
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
|
||||
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
|
||||
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
|
||||
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
|
||||
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
|
||||
/* no icon support for input elements, provide padding by default */
|
||||
input.ui-button { padding: .4em 1em; }
|
||||
|
||||
/*button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
|
||||
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
|
||||
/*button sets*/
|
||||
.ui-buttonset { margin-right: 7px; }
|
||||
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
|
||||
|
||||
/* workarounds */
|
||||
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
|
||||
/*
|
||||
* jQuery UI Dialog 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Dialog#theming
|
||||
*/
|
||||
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
|
||||
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
|
||||
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
|
||||
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
|
||||
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
|
||||
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
|
||||
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
|
||||
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
|
||||
.ui-draggable .ui-dialog-titlebar { cursor: move; }
|
||||
/*
|
||||
* jQuery UI Slider 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Slider#theming
|
||||
*/
|
||||
.ui-slider { position: relative; text-align: left; }
|
||||
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
|
||||
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
|
||||
|
||||
.ui-slider-horizontal { height: .8em; }
|
||||
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
|
||||
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
|
||||
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
|
||||
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
|
||||
|
||||
.ui-slider-vertical { width: .8em; height: 100px; }
|
||||
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
|
||||
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
|
||||
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
|
||||
.ui-slider-vertical .ui-slider-range-max { top: 0; }/*
|
||||
* jQuery UI Tabs 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Tabs#theming
|
||||
*/
|
||||
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
|
||||
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
|
||||
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
|
||||
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
|
||||
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
|
||||
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
|
||||
.ui-tabs .ui-tabs-hide { display: none !important; }
|
||||
/*
|
||||
* jQuery UI Datepicker 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Datepicker#theming
|
||||
*/
|
||||
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
|
||||
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
|
||||
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
|
||||
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
|
||||
.ui-datepicker .ui-datepicker-prev { left:2px; }
|
||||
.ui-datepicker .ui-datepicker-next { right:2px; }
|
||||
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
|
||||
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
|
||||
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
|
||||
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
|
||||
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
|
||||
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
|
||||
.ui-datepicker select.ui-datepicker-month,
|
||||
.ui-datepicker select.ui-datepicker-year { width: 49%;}
|
||||
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
|
||||
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
|
||||
.ui-datepicker td { border: 0; padding: 1px; }
|
||||
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
|
||||
|
||||
/* with multiple calendars */
|
||||
.ui-datepicker.ui-datepicker-multi { width:auto; }
|
||||
.ui-datepicker-multi .ui-datepicker-group { float:left; }
|
||||
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
|
||||
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
|
||||
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
|
||||
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
|
||||
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
|
||||
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
|
||||
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
|
||||
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
|
||||
|
||||
/* RTL support */
|
||||
.ui-datepicker-rtl { direction: rtl; }
|
||||
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||
|
||||
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
|
||||
.ui-datepicker-cover {
|
||||
display: none; /*sorry for IE5*/
|
||||
display/**/: block; /*sorry for IE5*/
|
||||
position: absolute; /*must have*/
|
||||
z-index: -1; /*must have*/
|
||||
filter: mask(); /*must have*/
|
||||
top: -4px; /*must have*/
|
||||
left: -4px; /*must have*/
|
||||
width: 200px; /*must have*/
|
||||
height: 200px; /*must have*/
|
||||
}/*
|
||||
* jQuery UI Progressbar 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Progressbar#theming
|
||||
*/
|
||||
.ui-progressbar { height:2em; text-align: left; }
|
||||
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
|
||||
@@ -1,183 +0,0 @@
|
||||
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;
|
||||
|
||||
hgroup {
|
||||
@extend .clearfix;
|
||||
float: left;
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
h2 {
|
||||
float: left;
|
||||
border: 0;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@extend .clearfix;
|
||||
@extend .wrapper;
|
||||
@include box-sizing(border-box);
|
||||
color: #777;
|
||||
margin-top: $body-line-height;
|
||||
padding: 0 $body-line-height;
|
||||
|
||||
p {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
color: #444;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,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;}
|
||||
@@ -9,7 +9,8 @@ div.profile-wrapper {
|
||||
border-right: 0;
|
||||
|
||||
h1 {
|
||||
padding: lh();
|
||||
padding:0 lh();
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -52,6 +53,10 @@ div.profile-wrapper {
|
||||
section.course-info {
|
||||
@extend .content;
|
||||
|
||||
> h1 {
|
||||
@extend .top-header;
|
||||
}
|
||||
|
||||
> ol {
|
||||
list-style: none;
|
||||
|
||||
|
||||
190
sass/_theme.scss
190
sass/_theme.scss
@@ -1,190 +0,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; }
|
||||
@@ -1,22 +1,16 @@
|
||||
@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/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar";
|
||||
|
||||
@@ -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);
|
||||
@@ -19,6 +19,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
h1.top-header {
|
||||
margin: (-(lh())) (-(lh())) lh();
|
||||
padding: lh();
|
||||
background: #f3f3f3;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
}
|
||||
|
||||
.button {
|
||||
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
|
||||
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
|
||||
@@ -1,6 +1,3 @@
|
||||
// Functions
|
||||
//---------------------------------------- //
|
||||
|
||||
// Flexible grid
|
||||
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
||||
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
||||
@@ -14,8 +11,13 @@
|
||||
@return percentage($gutter / $container-width);
|
||||
}
|
||||
|
||||
// Line-height
|
||||
@function lh($amount: 1) {
|
||||
@return $lh * $amount;
|
||||
// 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;
|
||||
}
|
||||
|
||||
31
sass/base/_variables.scss
Normal file
31
sass/base/_variables.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// Variables
|
||||
// ---------------------------------------- //
|
||||
|
||||
// fonts
|
||||
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
|
||||
$body-font-size: 14px;
|
||||
|
||||
// grid
|
||||
$columns: 12;
|
||||
$column-width: 80px;
|
||||
$gutter-width: 25px;
|
||||
$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
|
||||
|
||||
$gw-column: perc($column-width);
|
||||
$gw-gutter: perc($gutter-width);
|
||||
$body-line-height: golden-ratio($body-font-size, 1);
|
||||
|
||||
//Flexible grid
|
||||
$fg-column: $column-width;
|
||||
$fg-gutter: $gutter-width;
|
||||
$fg-max-columns: $columns;
|
||||
$fg-max-width: 1400px;
|
||||
$fg-min-width: 810px;
|
||||
|
||||
// color
|
||||
$light-gray: #ddd;
|
||||
$dark-gray: #333;
|
||||
$mit-red: #993333;
|
||||
|
||||
$text-color: $dark-gray;
|
||||
$border-color: $light-gray;
|
||||
2
sass/bourbon/_bourbon.scss
vendored
2
sass/bourbon/_bourbon.scss
vendored
@@ -1,7 +1,7 @@
|
||||
// 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
|
||||
|
||||
207
sass/bourbon/addons/_button.scss
vendored
207
sass/bourbon/addons/_button.scss
vendored
@@ -5,31 +5,59 @@
|
||||
$style: simple;
|
||||
}
|
||||
|
||||
@if $style == simple {
|
||||
@include simple($base-color);
|
||||
// Grayscale button
|
||||
@if $base-color == grayscale($base-color) {
|
||||
@if $style == simple {
|
||||
@include simple($base-color, $grayscale: true);
|
||||
}
|
||||
|
||||
@else if $style == shiny {
|
||||
@include shiny($base-color, $grayscale: true);
|
||||
}
|
||||
|
||||
@else if $style == pill {
|
||||
@include pill($base-color, $grayscale: true);
|
||||
}
|
||||
}
|
||||
|
||||
@else if $style == shiny {
|
||||
@include shiny($base-color);
|
||||
}
|
||||
// Colored button
|
||||
@else {
|
||||
@if $style == simple {
|
||||
@include simple($base-color);
|
||||
}
|
||||
|
||||
@else if $style == pill {
|
||||
@include pill($base-color);
|
||||
@else if $style == shiny {
|
||||
@include shiny($base-color);
|
||||
}
|
||||
|
||||
@else if $style == pill {
|
||||
@include pill($base-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin simple ($base-color) {
|
||||
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
||||
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$color: hsl(0, 0, 100%);
|
||||
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
||||
|
||||
// Simple Button
|
||||
//************************************************************************//
|
||||
@mixin simple($base-color, $grayscale: false) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
||||
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
||||
|
||||
@if lightness($base-color) > 70% {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border;
|
||||
@include border-radius (3px);
|
||||
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
|
||||
@@ -43,9 +71,15 @@
|
||||
-webkit-background-clip: padding-box;
|
||||
|
||||
&:hover {
|
||||
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
||||
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
}
|
||||
|
||||
@include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
|
||||
cursor: pointer;
|
||||
@@ -53,30 +87,47 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-active: grayscale($border-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
border: 1px solid $border-active;
|
||||
@include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shiny($base-color) {
|
||||
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
||||
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
||||
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
||||
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
||||
|
||||
// Shiny Button
|
||||
//************************************************************************//
|
||||
@mixin shiny($base-color, $grayscale: false) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
||||
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
||||
$color: hsl(0, 0, 100%);
|
||||
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
||||
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
||||
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
||||
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
||||
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
||||
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
||||
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
||||
|
||||
@if lightness($base-color) > 70% {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$fourth-stop: grayscale($fourth-stop);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$second-stop: grayscale($second-stop);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
$third-stop: grayscale($third-stop);
|
||||
}
|
||||
|
||||
border: 1px solid $border;
|
||||
border-bottom: 1px solid $border-bottom;
|
||||
@include border-radius(5px);
|
||||
@@ -85,43 +136,69 @@
|
||||
display: inline;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
||||
padding: 7px 20px 8px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
|
||||
&:hover {
|
||||
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
||||
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
||||
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
||||
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
||||
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
||||
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
||||
|
||||
@include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
|
||||
@if $grayscale == true {
|
||||
$first-stop-hover: grayscale($first-stop-hover);
|
||||
$second-stop-hover: grayscale($second-stop-hover);
|
||||
$third-stop-hover: grayscale($third-stop-hover);
|
||||
$fourth-stop-hover: grayscale($fourth-stop-hover);
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
@include linear-gradient(top, $first-stop-hover 0%,
|
||||
$second-stop-hover 50%,
|
||||
$third-stop-hover 50%,
|
||||
$fourth-stop-hover 100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
||||
|
||||
@if $grayscale == true {
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
@include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pill($base-color) {
|
||||
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
||||
$color: hsl(0, 0, 100%);
|
||||
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
||||
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
||||
|
||||
// Pill Button
|
||||
//************************************************************************//
|
||||
@mixin pill($base-color, $grayscale: false) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
||||
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
||||
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
||||
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
||||
|
||||
@if lightness($base-color) > 70% {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
@if $grayscale == true {
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
@include border-radius(16px);
|
||||
@@ -131,35 +208,54 @@
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: 3px 16px 5px;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
-webkit-background-clip: padding-box;
|
||||
|
||||
&:hover {
|
||||
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
||||
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
||||
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
||||
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
$text-shadow-hover: grayscale($text-shadow-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
@include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
|
||||
cursor: pointer;
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
text-shadow: 0 -1px 1px $text-shadow-hover;
|
||||
-webkit-background-clip: padding-box;
|
||||
}
|
||||
|
||||
&:active {
|
||||
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
||||
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
||||
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
||||
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
||||
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
||||
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
||||
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
||||
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
||||
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
||||
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$active-color: grayscale($active-color);
|
||||
$border-active: grayscale($border-active);
|
||||
$border-bottom-active: grayscale($border-bottom-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
$text-shadow-active: grayscale($text-shadow-active);
|
||||
}
|
||||
|
||||
background: $active-color;
|
||||
border: 1px solid $border-active;
|
||||
@@ -168,3 +264,4 @@
|
||||
text-shadow: 0 -1px 1px $text-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
1
sass/bourbon/addons/_font-family.scss
vendored
1
sass/bourbon/addons/_font-family.scss
vendored
@@ -1,4 +1,5 @@
|
||||
$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;
|
||||
|
||||
26
sass/bourbon/css3/_animation.scss
vendored
26
sass/bourbon/css3/_animation.scss
vendored
@@ -1,6 +1,22 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
14
sass/bourbon/css3/_linear-gradient.scss
vendored
14
sass/bourbon/css3/_linear-gradient.scss
vendored
@@ -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%);
|
||||
|
||||
31
sass/bourbon/functions/_golden-ratio.scss
vendored
31
sass/bourbon/functions/_golden-ratio.scss
vendored
@@ -1,31 +0,0 @@
|
||||
@function golden-ratio($value, $increment) {
|
||||
@if $increment > 0 {
|
||||
@for $i from 1 through $increment {
|
||||
$value: ($value * 1.618);
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 0 {
|
||||
$increment: abs($increment);
|
||||
@for $i from 1 through $increment {
|
||||
$value: ($value / 1.618);
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
// div {
|
||||
// Increment Up GR with positive value
|
||||
// font-size: golden-ratio(14px, 1); // returns: 22.652px
|
||||
//
|
||||
// Increment Down GR with negative value
|
||||
// font-size: golden-ratio(14px, -1); // returns: 8.653px
|
||||
//
|
||||
// Can be used with ceil(round up) or floor(round down)
|
||||
// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
|
||||
// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
|
||||
// }
|
||||
//
|
||||
// modularscale.com
|
||||
// goldenratiocalculator.com
|
||||
40
sass/bourbon/functions/_modular-scale.scss
vendored
Normal file
40
sass/bourbon/functions/_modular-scale.scss
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
@function modular-scale($value, $increment, $ratio) {
|
||||
@if $increment > 0 {
|
||||
@for $i from 1 through $increment {
|
||||
$value: ($value * $ratio);
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 0 {
|
||||
$increment: abs($increment);
|
||||
@for $i from 1 through $increment {
|
||||
$value: ($value / $ratio);
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
// div {
|
||||
// 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: modular-scale(14px, -1, 1.618); // returns: 8.653px
|
||||
//
|
||||
// Can be used with ceil(round up) or floor(round down)
|
||||
// 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
|
||||
@@ -1,3 +1,5 @@
|
||||
require "bourbon/generator"
|
||||
|
||||
module Bourbon
|
||||
if defined?(Rails)
|
||||
class Engine < ::Rails::Engine
|
||||
|
||||
@@ -5,84 +5,6 @@ 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.course-content {
|
||||
@extend .content;
|
||||
|
||||
77
sass/courseware/_sidebar.scss
Normal file
77
sass/courseware/_sidebar.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -44,7 +44,11 @@ div.answer-block {
|
||||
}
|
||||
|
||||
div.answered-by-owner {
|
||||
color: darken($mit-red, 20%);
|
||||
color: $mit-red;
|
||||
|
||||
div.comments-container {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,6 +69,7 @@ div.answer-actions {
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
a.question-edit, a.permant-link {
|
||||
color: #999;
|
||||
@@ -650,17 +650,17 @@ body.anon #searchBar {
|
||||
// padding-top: 6px;
|
||||
// font-family: 'Yanone Kaffeesatz',sans-serif; }
|
||||
|
||||
#listSearchTags {
|
||||
float: left;
|
||||
margin-top: 3px;
|
||||
color: #707070;
|
||||
font-size: 16px;
|
||||
font-family: 'Yanone Kaffeesatz',sans-serif; }
|
||||
// #listSearchTags {
|
||||
// float: left;
|
||||
// margin-top: 3px;
|
||||
// color: #707070;
|
||||
// font-size: 16px;
|
||||
// font-family: 'Yanone Kaffeesatz',sans-serif; }
|
||||
|
||||
ul#searchTags {
|
||||
margin-left: 10px;
|
||||
float: right;
|
||||
padding-top: 2px; }
|
||||
// ul#searchTags {
|
||||
// margin-left: 10px;
|
||||
// float: right;
|
||||
// padding-top: 2px; }
|
||||
|
||||
// .search-tips {
|
||||
// font-size: 16px;
|
||||
@@ -17,73 +17,19 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.action-link {
|
||||
a {
|
||||
color: darken(#F6EFD4, 50%);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(#F6EFD4, 70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.main-content {
|
||||
div.discussion-wrapper {
|
||||
@@ -92,9 +38,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);
|
||||
@@ -123,9 +69,10 @@ 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;
|
||||
padding: lh();
|
||||
width: flex-grid(3);
|
||||
|
||||
h2 {
|
||||
@@ -148,18 +95,4 @@ body.askbot {
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
div.footer-wrapper {
|
||||
@extend .clearfix;
|
||||
@extend .wrapper;
|
||||
@include box-shadow(0 1px 0 #fff);
|
||||
@include box-sizing(border-box);
|
||||
background-color: #000;
|
||||
border-top: 0;
|
||||
padding: $gw-gutter/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -93,6 +93,7 @@ div.question-header {
|
||||
float: left;
|
||||
margin-right: flex-gutter(8);
|
||||
width: flex-grid(6.2,8);
|
||||
|
||||
}
|
||||
|
||||
div.post-update-container {
|
||||
@@ -1,58 +1,106 @@
|
||||
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 {
|
||||
float: right;
|
||||
margin-left: flex-gutter();
|
||||
|
||||
nav {
|
||||
@extend .action-link;
|
||||
float: right;
|
||||
|
||||
a {
|
||||
&.on span{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '|';
|
||||
color: darken(#F6EFD4, 10%);
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.question-sort {
|
||||
vertical-align: bottom;
|
||||
width: flex-grid(5,9);
|
||||
section.question-tags-list {
|
||||
display: block;
|
||||
min-height: 26px;
|
||||
overflow: hidden;
|
||||
padding-top:5px;
|
||||
width: 100%;
|
||||
|
||||
nav {
|
||||
@include border-radius(35px);
|
||||
background-color: lighten(#F6EFD4, 5%) ;
|
||||
height: 30px;
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
margin: 3px 0;
|
||||
padding:0px 20px 5px;
|
||||
div {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.back {
|
||||
margin-right: 10px;
|
||||
|
||||
a {
|
||||
color: darken(#F6EFD4, 50%);
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
&.on span{
|
||||
font-weight: bold;
|
||||
}
|
||||
div.tags-list {
|
||||
|
||||
&:before {
|
||||
content: '|';
|
||||
color: darken(#F6EFD4, 10%);
|
||||
font-size: 22px;
|
||||
}
|
||||
ul.tags {
|
||||
display: inline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(#F6EFD4, 70%);
|
||||
li {
|
||||
span.delete-icon, div.delete-icon {
|
||||
@include border-radius(0 4px 4px 0);
|
||||
background: #555;
|
||||
color: #eee;
|
||||
cursor: pointer;
|
||||
float: none;
|
||||
display: inline;
|
||||
clear: none;
|
||||
left: 10px;
|
||||
padding: 3px 6px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.question-list {
|
||||
ul.question-list, div#question-list {
|
||||
width: flex-grid(9,9);
|
||||
|
||||
li.single-question {
|
||||
@@ -75,7 +123,7 @@ ul.question-list {
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
margin: 0px 0 15px 0;
|
||||
text-transform: none;
|
||||
}
|
||||
@@ -151,9 +199,5 @@ ul.question-list {
|
||||
}
|
||||
}
|
||||
|
||||
div.search-tips {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-result-summary {
|
||||
}
|
||||
44
sass/index/_base.scss
Normal file
44
sass/index/_base.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -14,8 +14,13 @@
|
||||
> div {
|
||||
padding-left: flex-grid(4) + flex-gutter();
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: lh();
|
||||
line-height: lh();
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -33,6 +38,15 @@
|
||||
|
||||
li {
|
||||
list-style: disc outside none;
|
||||
line-height: lh();
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: lh();
|
||||
|
||||
dd {
|
||||
margin-bottom: lh(.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
47
sass/index/_footer.scss
Normal file
47
sass/index/_footer.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
144
sass/index/_header.scss
Normal file
144
sass/index/_header.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
header.announcement {
|
||||
@include background-size(cover);
|
||||
background: #333;
|
||||
border-bottom: 1px solid #000;
|
||||
color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&.home {
|
||||
background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
|
||||
}
|
||||
|
||||
div {
|
||||
padding: lh(10) lh() lh(3);
|
||||
|
||||
//hide login link for homepage
|
||||
nav {
|
||||
h1 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a.login {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.course {
|
||||
background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) and (min-width: 700px) {
|
||||
background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
|
||||
}
|
||||
|
||||
div {
|
||||
padding: lh(4) lh() lh(2);
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@extend .wrapper;
|
||||
position: relative;
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: lh();
|
||||
@include border-radius(0 0 3px 3px);
|
||||
background: #333;
|
||||
background: rgba(#000, .7);
|
||||
padding: lh(.5) lh();
|
||||
|
||||
h1 {
|
||||
@include inline-block();
|
||||
margin-right: lh(.5);
|
||||
|
||||
a {
|
||||
font: italic 800 18px $header-font-family;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.login {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-family: $header-font-family;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
@extend .clearfix;
|
||||
@include inline-block();
|
||||
background: $mit-red;
|
||||
margin-left: flex-grid(4) + flex-gutter();
|
||||
padding: lh() lh(1.5);
|
||||
|
||||
h1 {
|
||||
@include inline-block();
|
||||
font-family: "Open Sans";
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2em;
|
||||
margin: 0 lh() 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include inline-block();
|
||||
font-family: "Open Sans";
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
&.course {
|
||||
section {
|
||||
width: flex-grid(4, 8);
|
||||
margin-right: flex-gutter(8);
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
@extend .button;
|
||||
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
|
||||
background-color: darken($mit-red, 20%);
|
||||
display: block;
|
||||
padding: lh(.5) lh();
|
||||
border-color: darken($mit-red, 30%);
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($mit-red, 10%);
|
||||
border-color: darken($mit-red, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
width: flex-grid(4, 8);
|
||||
line-height: lh();
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
233
sass/index/_index.scss
Normal file
233
sass/index/_index.scss
Normal file
@@ -0,0 +1,233 @@
|
||||
section.index-content {
|
||||
@extend .wrapper;
|
||||
@extend .clearfix;
|
||||
|
||||
section {
|
||||
@extend .clearfix;
|
||||
float: left;
|
||||
|
||||
h1 {
|
||||
font-size: 800 24px "Open Sans";
|
||||
margin-bottom: lh();
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: lh();
|
||||
margin-bottom: lh();
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.about {
|
||||
@include box-sizing(border-box);
|
||||
border-right: 1px solid #e5e5e5;
|
||||
margin-right: flex-gutter();
|
||||
padding-right: flex-gutter() / 2;
|
||||
width: flex-grid(8);
|
||||
|
||||
section {
|
||||
@extend .clearfix;
|
||||
margin-bottom: lh();
|
||||
|
||||
p {
|
||||
width: flex-grid(4, 8);
|
||||
float: left;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: flex-gutter(8);
|
||||
}
|
||||
}
|
||||
|
||||
&.intro {
|
||||
section {
|
||||
margin-bottom: 0;
|
||||
|
||||
&.intro-text {
|
||||
margin-right: flex-gutter(8);
|
||||
width: flex-grid(4, 8);
|
||||
|
||||
p {
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.intro-video {
|
||||
width: flex-grid(4, 8);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.features {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
padding-top: lh();
|
||||
margin-bottom: 0;
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #666;
|
||||
margin-bottom: lh();
|
||||
|
||||
span {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
width: auto;
|
||||
clear: both;
|
||||
|
||||
strong {
|
||||
font-family: "Open sans";
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $mit-red;
|
||||
text-decoration: none;
|
||||
@include transition();
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken($mit-red, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
|
||||
li {
|
||||
line-height: lh();
|
||||
width: flex-grid(4, 8);
|
||||
float: left;
|
||||
margin-bottom: lh(.5);
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: flex-gutter(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.course, &.staff {
|
||||
width: flex-grid(4);
|
||||
|
||||
h1 {
|
||||
font: normal $body-font-size $body-font-family;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #666;
|
||||
margin-bottom: lh();
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: 800 24px $header-font-family;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: 400 18px $header-font-family;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend .button;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
img {
|
||||
float: left;
|
||||
margin-right: lh(.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.course {
|
||||
h2 {
|
||||
padding-top: lh(5);
|
||||
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
|
||||
@include background-size(contain);
|
||||
|
||||
@media screen and (max-width: 998px) {
|
||||
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// index
|
||||
//---------------------------------------- //
|
||||
&.about-course {
|
||||
@include box-sizing(border-box);
|
||||
border-right: 1px solid #e5e5e5;
|
||||
margin-right: flex-gutter();
|
||||
padding-right: flex-gutter() / 2;
|
||||
width: flex-grid(8);
|
||||
|
||||
section {
|
||||
width: flex-grid(4, 8);
|
||||
|
||||
|
||||
&.about-info {
|
||||
margin-right: flex-gutter(8);
|
||||
}
|
||||
|
||||
&.requirements {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
padding-top: lh();
|
||||
margin-bottom: 0;
|
||||
|
||||
p {
|
||||
float: left;
|
||||
width: flex-grid(4, 8);
|
||||
margin-right: flex-gutter(8);
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cta {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
a.enroll {
|
||||
@extend .button;
|
||||
padding: lh(.5) lh(2);
|
||||
@include inline-block();
|
||||
text-align: center;
|
||||
font: 800 18px $header-font-family;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.copyright, section.tos, section.privacy-policy, section.honor-code {
|
||||
@extend .subpage;
|
||||
}
|
||||
@@ -13,15 +13,17 @@ $gw-gutter: 25px;
|
||||
$body-font-family: Georgia, serif;
|
||||
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
||||
|
||||
// @media screen and (min-width: 940px) {
|
||||
$body-font-size: 16px;
|
||||
$body-font-size: 16px;
|
||||
|
||||
// @media screen and (min-width:1200px) {
|
||||
// $body-font-size: 18px;
|
||||
// }
|
||||
|
||||
|
||||
// @media screen and (max-width: 939px) {
|
||||
// @media screen and (max-width:890px) {
|
||||
// $body-font-size: 14px;
|
||||
// }
|
||||
|
||||
$body-line-height: golden-ratio($body-font-size, 1);
|
||||
$lh: golden-ratio($body-font-size, 1);
|
||||
|
||||
// Colors
|
||||
45
sass/layout/_footer.scss
Normal file
45
sass/layout/_footer.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
104
sass/layout/_header.scss
Normal file
104
sass/layout/_header.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
div.header-wrapper {
|
||||
// @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
|
||||
@include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
|
||||
background: $mit-red;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
header {
|
||||
@extend .clearfix;
|
||||
@extend .wrapper;
|
||||
@include box-sizing(border-box);
|
||||
padding: 0 $body-line-height;
|
||||
|
||||
hgroup {
|
||||
@extend .clearfix;
|
||||
float: left;
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
h2 {
|
||||
float: left;
|
||||
border: 0;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
float: left;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-shadow: 0 -1px 0 darken($mit-red, 10%);
|
||||
max-height: 52px; //fix for firefox
|
||||
-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
sass/layout/_layout.scss
Normal file
28
sass/layout/_layout.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
html {
|
||||
margin-top: 0;
|
||||
|
||||
body {
|
||||
color: $dark-gray;
|
||||
font: $body-font-size $body-font-family;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background: #f4f4f4; //#f3f1e5
|
||||
|
||||
section.main-content {
|
||||
@extend .clearfix;
|
||||
@extend .wrapper;
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius(4px);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #bbb;
|
||||
|
||||
@media screen and (min-width: 1400px) {
|
||||
// @include border-radius(3px);
|
||||
@include box-shadow(0 0 4px #dfdfdf);
|
||||
border: 1px solid #bbb;
|
||||
margin-top: lh(.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
font-weight: bold;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@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";
|
||||
|
||||
6
sass/print.scss
Normal file
6
sass/print.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.header-wrapper {display:none;}
|
||||
#accordion {display:none;}
|
||||
.ui-accordion {display:none;
|
||||
visibility:hidden;
|
||||
width:0%;
|
||||
}
|
||||
69
sass/wiki/_sidebar.scss
Normal file
69
sass/wiki/_sidebar.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
div#wiki_panel {
|
||||
@extend .sidebar;
|
||||
overflow: auto;
|
||||
|
||||
input[type="button"] {
|
||||
@extend h3;
|
||||
@include transition();
|
||||
color: lighten($text-color, 10%);
|
||||
font-size: $body-font-size;
|
||||
margin: 0 !important;
|
||||
padding: 7px lh();
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0 1px 0 #fff);
|
||||
background: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
&.search {
|
||||
@include box-shadow(0 1px 0 #eee);
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
padding: 7px lh();
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.create-article {
|
||||
h3 {
|
||||
a {
|
||||
padding: 7px lh();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#wiki_create_form {
|
||||
@extend .clearfix;
|
||||
padding: 15px;
|
||||
background: #d6d6d6;
|
||||
border-bottom: 1px solid #bbb;
|
||||
|
||||
input[type="text"] {
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
&#cancel {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,76 +2,6 @@ div.wiki-wrapper {
|
||||
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;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<p class="markdown-example">circuit:basic</p>
|
||||
<p class="markdown-example"><span>$</span>LaTeX Math Expression<span>$</span></p>
|
||||
To create a new wiki article, create a link to it. Clicking the link gives you the creation page.
|
||||
<p class="markdown-example">[Article Name](/wiki/view/ArticleName)</p>
|
||||
<p class="markdown-example">[Article Name](wiki:ArticleName)</p>
|
||||
Other useful examples:<br>
|
||||
<p class="markdown-example">[Link](http://google.com)</p>
|
||||
<p class="markdown-example">Huge Header
|
||||
|
||||
5
tos.html
5
tos.html
@@ -215,7 +215,8 @@ risk. Your access to or download of information, materials, or data
|
||||
through the Site or any reference sites is at your own discretion and
|
||||
risk and that you will be solely responsible for any damage to your
|
||||
property (including your computer system) or loss of data that results
|
||||
from the download or use of such material or data.</p>
|
||||
from the download or use of such material or data. We may close or
|
||||
limit enrollment for pedagogical or technological reasons.</p>
|
||||
|
||||
<p><strong>User Postings Disclaimer.</strong> You understand that when
|
||||
using the Site you will be exposed to User Postings from a variety of
|
||||
@@ -301,6 +302,6 @@ consent to the personal jurisdiction of and exclusive venue in the
|
||||
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 6, 2012</p><div>
|
||||
<p><strong>Effective Date:</strong> February 10, 2012</p><div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user