diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..6e5576ca7e Binary files /dev/null and b/.DS_Store differ diff --git a/templates/.gitignore b/templates/.gitignore new file mode 100644 index 0000000000..83605d2b8b --- /dev/null +++ b/templates/.gitignore @@ -0,0 +1,8 @@ +*.pyc +*~ +*.scssc +*.swp +*.orig +*.DS_Store +#* +.#* \ No newline at end of file diff --git a/templates/.hgignore b/templates/.hgignore new file mode 100644 index 0000000000..e2ae8c91cb --- /dev/null +++ b/templates/.hgignore @@ -0,0 +1,9 @@ +syntax: glob +*.pyc +*~ +*.scssc +*.swp +*.orig +*.DS_Store +#* +.#* \ No newline at end of file diff --git a/templates/404.html b/templates/404.html new file mode 100644 index 0000000000..65b4061b30 --- /dev/null +++ b/templates/404.html @@ -0,0 +1,7 @@ + +<%inherit file="main.html" /> + +
+

Page not found

+

The page that you were looking for was not found. Go back to the homepage or let us know about any pages that may have been moved at technical@mitx.mit.edu.

+
diff --git a/templates/6002x-faq.html b/templates/6002x-faq.html new file mode 100644 index 0000000000..73e04e8a7e --- /dev/null +++ b/templates/6002x-faq.html @@ -0,0 +1,381 @@ +<%inherit file="marketing.html" /> +<%block name="login_area"> + + +
+
+ +

+More about 6.002x +

+ +

Answering common questions about the first course on MITx, the +Institute’s online-learning initiative.

+ +

+This set of questions and answers accompanies MIT’s February 13, +2012, announcement regarding MITx’s prototype course — +6.002x: Circuits and Electronics. +

+ +

I tried to register for the course, but it says the username +is already taken.

+ +

The system only allows each username to be used once. Probably, +someone else already signed up with that username. Try a different, +more unique username. For example, try adding a random number to the +end.

+ +

I forgot my password

+ +

The log-in form will have a link to reset your password once the +course opens.

+ +

The videos stall out

+ +

You should confirm your internet connection is fast enough to stream +videos, and that Youtube is not blocked by your internet +provider. Since the videos are hosted by YouTube, we have no control +over most technical problems with video playback (aside from those +related specifically to our player).

+ +

You should also confirm you have a current version of Flash installed. +While our player supports YouTube's HTML5 API (which allows playback without +Flash), this support is experimental.

+ + +

I am interested in a different subject. What other courses do +you offer?

+ +

6.002x is the pilot course for MITx. While we plan to offer a +range of courses in the future, at present, 6.002x is the only course +available. Specific future offerings will be announced later.

+ + +

How will I know that the course has started?

+ +

The course will start on March 5. Check the website +mitx.mit.edu as the date approaches. A login button will appear on +the course website 6.002x.mitx.mit.edu on or slightly before March 5 +so you can login, begin to get familiar with the site and start the +course.

+ + +

I can't log in

+ +

You will not be able to log into the course until either the +starting date, or shortly before. If you have problems logging in once +the course has started, please verify that you are using the latest +version of either Firefox or Google Chrome, and have JavaScript and +cookies enabled.

+ + +

Does the class have a schedule?

+ +

The lectures are on-line videos, and may be watched at your own +pace and schedule. The course will have fixed deadlines for homework +assignments and exams.

+ + +

I just enrolled for the course. I have not received any form +of acknowledgement that I have enrolled.

+ +

You should receive a single activation e-mail. If you did not, the +most common issues are: +

+ +

If you run into issues, try recreating your account. There is no need +to do anything about the old account, if any. If it is not activated +through the link in the e-mail, it will disappear later. + + +

How do I drop the course?

+ +

You do not have to do anything. You can simply stop working on the +course at any time you choose to do so.

+ + +

What happens if I drop the course?

+ +

For the prototype course, learners achieving grades of "A," "B," +or "C" will receive an electronic Certificate of completion with the +learner's name and grade on it. If you receive a grade below a "C" or +do not complete the course, you will not receive a Certificate and no +grade record attaching your name to your participation in the class +will be disclosed outside of MITx. You can also choose to opt for a +no record at any time. However, the posts you make while enrolled in +the class will remain visible.

+ + +

+What is MITx?

+ +

MIT seeks through the development of MITx to improve +education both on the MIT campus and around the world. + +

On campus, MITx will be coupled with an Institute-wide research +initiative on online teaching and learning. The online learning tools +that MITx develops will benefit the educational experience of +residential students by supplementing and reinforcing the classroom +and laboratory experiences.

+ +

+Beyond the MIT campus, MITx will endeavor to break down barriers to +education in two ways. First, it will offer the online teaching of MIT +courses to people around the world and the opportunity for able +learners to gain certification of mastery of MIT material. Second, it +will make freely available to educational institutions everywhere the +open-source software infrastructure on which MITx courses are based. +

+ +

+Since it launched OpenCourseWare 10 years ago, MIT has been committed +to using technology to improve and greatly widen access to +education. The launch of MITx represents a next step forward in that +effort. +

+ + +

+What is 6.002x, and how is it different from the on-campus version of +6.002? +

+ +

+At MIT, each course is assigned a number. All courses in the +Department of Electrical Engineering and Computer Science (EECS) start +with the number 6, and 6.002 (also known as Circuits and Electronics) +is one of the introductory courses for EECS +undergraduates. MITx’s 6.002x is modeled on the on-campus +version of 6.002. +

+ +

+ 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. +

+ +

+6.002x is built on the content created collaboratively by MIT +professors Anant Agarwal and Jeffrey H. Lang for 6.002. +

+ + +

+How do I enroll in 6.002x? +

+

+To enroll, visit http://mitx.mit.edu +and sign up. +

+ + +

+When will the course be available online? +

+ +

+6.002x will become available online on Monday, March 5. +

+ + +

+Do I need to follow a set timeline in completing 6.002x? +

+ +

+In this pilot course of MITx, 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. +

+ + +

+How much time is required to complete the course? +

+

+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. +

+ + +

+Who are the instructors for 6.002x? +

+

+There are four instructors for 6.002x: Anant Agarwal, Chris Terman, +Gerald Sussman and Piotr Mitros. The team also includes several +teaching assistants (TAs). +

+ + +

+What is the work like in 6.002x? +

+

+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. +

+ +

+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. +

+ + +

+What if I have a question during the course? +

+

+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. +

+ + +

+Will 6.002x offer any means for collaboration among online learners? +

+

+Yes. 6.002x will offer modest support for collaborative work through a +prototype wiki and discussion forum. +

+ + +

+Are there prerequisites to take the course? +

+

+While MITx courses are open to all, there are some skills required to +succeed in taking the course. +

+ +

+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. +

+ +

+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. +

+ + +

+How much does the course cost? +

+

+All of the courses on MITx 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. +

+ + +

+What is a credential? +

+

+Any learner who successfully completes 6.002x will receive an +electronic certificate indicating a grade. This certificate will +indicate that you earned it from MITx’s pilot course. In +this prototype version, MITx will not require that you be +tested in a testing center or otherwise have your identity certified +in order to receive this certificate. MITx certificates are not +planned to count towards MIT course credit. +

+ + +

+Who is grading the course? +

+

+MITx courses will use automated technologies to check student work +including practice exercises, homework assignments, labs and exams. +

+ + +

+What is a passing grade? +

+

+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. +

+ + +

+Do I need to buy a textbook? +

+

+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. +

+ + +

+Do I need to have special software to access 6.002x? +

+

+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 the current version of +Google Chrome. We support current versions of Mozilla Firefox as +well. The video player is based on Youtube, and is designed to work +with Flash. We provide a partial non-Flash fallback for the video, but +this uses Google's experimental HTML5 API, and hence we cannot +guarantee those will continue to function for the duration of the +semester. We provide partial support for Internet Explorer, as well as +other browsers and tablets, but portions of the functionality will be +unavailable. +

+ + +

+When will the next courses become available and what topics will they be on? +

+

+ Additional courses will be announced + on mitx.mit.edu as they become + available. We expect this will happen in fall 2012. We also have + accounts + on Twitter, Facebook, + and LinkedIn. +

+
+
diff --git a/templates/6002x-press-release.html b/templates/6002x-press-release.html new file mode 100644 index 0000000000..439c234edd --- /dev/null +++ b/templates/6002x-press-release.html @@ -0,0 +1,130 @@ +<%inherit file="marketing.html" /> +<%block name="login_area"> + + +
+
+ +

MITx prototype course opens for enrollment—Online-learning +initiative’s first offering, ‘6.002x: Circuits and +Electronics,’ accepting registrants now.

+ +

MIT News Office

+ +

In December, +MIT announced the +launch of an online learning initiative called “MITx.” +Starting this week, interested learners can now enroll for free in the +initiative”s prototype course -- 6.002x: Circuits and +Electronics.

+ +

Students can sign up for the course +at mitx.mit.edu. The course will +officially begin on March 5 and run through June 8.

+ +

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.

+ +
+

+ “We are very excited to begin MITx 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.” +

+
+ +

+To access the course, registered students will log in +at mitx.mit.edu, 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. +

+ +
+“We invite you to join us for this pilot course of MITx,” +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.” +
+ +

A video introduction to 6.002x can +be found here.

+ +

A set of Frequently Asked Questions +about 6.002x can be found here.

+ +

+ +FAQs about MITx as a whole can be found here. + +

+ +

+At the end of the prototype course, students who demonstrate their +mastery will be able to receive a certificate of completion for +free. In future MITx courses, students who complete the mastery +requirement on MITx will be able to receive the credential for a +modest fee. +

+ +

+Further courses are expected to become +available beginning in the fall. +

+ + +

+RELATED: +

+

+ + 6.002x course website + +

+ +

+ + 6.002x FAQ + +

+ +

+ARCHIVE: "MIT launches online learning initiative" +

+ +http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html + + +

+MITx website +

+ +http://mitx.mit.edu + + + +
+
diff --git a/templates/Kirchhoff.html b/templates/Kirchhoff.html new file mode 100644 index 0000000000..541644d1e6 --- /dev/null +++ b/templates/Kirchhoff.html @@ -0,0 +1,147 @@ +

Kirchhoff's circuit laws

+
From Wikipedia, the free encyclopedia. See original page for copyright and attribution
+

Kirchhoff's current law (KCL)

+
+
+
The current entering any junction is equal to the current leaving that junction. i1 + i4 = i2 + i3
+
+
+

This law is also called Kirchhoff's first law, Kirchhoff's point rule, Kirchhoff's junction rule (or nodal rule), and Kirchhoff's first rule.

+

The principle of conservation of electric charge implies that:

+
+
At any node (junction) in an electrical circuit, the sum of currents flowing into that node is equal to the sum of currents flowing out of that node. +
+
+
+
+
+
+
+
+
+
+
+
or
+
+
+
+
+
+
+
+
+
+
+
+
+
The algebraic sum of currents in a network of conductors meeting at a point is zero.
+
+

Recalling that current is a signed (positive or negative) quantity reflecting direction towards or away from a node, this principle can be stated as:

+
+
\sum_{k=1}^n {I}_k = 0
+
+

n is the total number of branches with currents flowing towards or away from the node.

+

This formula is valid for complex currents:

+
+
\sum_{k=1}^n \tilde{I}_k = 0
+
+

The law is based on the conservation of charge whereby the charge (measured in coulombs) is the product of the current (in amperes) and the time (in seconds).

+

Changing charge density

+

KCL is only valid if the charge density remains constant at the point to which it is applied. Consider the current entering a single plate of a capacitor. If one imagines a closed surface around that single plate, current enters through the surface, but does not exit, thus violating KCL. Certainly, the currents through a closed surface around the entire capacitor will meet KCL since the current entering one plate is balanced by the current exiting the other plate, and that is usually all that is important in circuit analysis, but there is a problem when considering just one plate. Another common example is the current in an antenna where current enters the antenna from the transmitter feeder but no current exits from the other end.(Johnson and Graham, pp.36-37)

+

Maxwell introduced the concept of displacement currents to describe these situations. The current flowing into a capacitor plate is equal to the rate of accumulation of charge and hence is also equal to the rate of change of electric flux due to that charge (electric flux is measured in the same units, Coulombs, as electric charge in the SI system of units). This rate of change of flux, \psi \ , is what Maxwell called displacement current ID;

+
+
I_\mathrm D = \frac {d \psi}{d t}
+
+

When the displacement currents are included, Kirchhoff's current law once again holds. Displacement currents are not real currents in that they do not consist of moving charges, they should be viewed more as a correction factor to make KCL true. In the case of the capacitor plate, the real current entering the plate is exactly cancelled by a displacement current leaving the plate and heading for the opposite plate.

+

This can also be expressed in terms of vector field quantities by taking the divergence of Ampere's law with Maxwell's correction and combining with Gauss's law, yielding:

+
+
\nabla \cdot \mathbf{J} = -\nabla \cdot \frac{\partial \mathbf{D}}{\partial t} = -\frac{\partial \rho}{\partial t}
+
+

This is simply the charge conservation equation (in integral form, it says that the current flowing out of a closed surface is equal to the rate of loss of charge within the enclosed volume (Divergence theorem)). Kirchhoff's current law is equivalent to the statement that the divergence of the current is zero, true for time-invariant p, or always true if the displacement current is included with J.

+

Uses

+

A matrix version of Kirchhoff's current law is the basis of most circuit simulation software, such as SPICE.

+

[edit] Kirchhoff's voltage law (KVL)

+
+
+
+
+The sum of all the voltages around the loop is equal to zero. v1 + v2 + v3 - v4 = 0
+
+
+

This law is also called Kirchhoff's second law, Kirchhoff's loop (or mesh) rule, and Kirchhoff's second rule.

+

The principle of conservation of energy implies that

+
+
The directed sum of the electrical potential differences (voltage) around any closed circuit is zero. +
+
+
+
+
+
+
+
+
+
+
+
or
+
+
+
+
+
+
+
+
+
+
+
+
+
More simply, the sum of the emfs in any closed loop is equivalent to the sum of the potential drops in that loop. +
+
+
+
+
+
+
+
+
+
+
+
or
+
+
+
+
+
+
+
+
+
+
+
+
+
The algebraic sum of the products of the resistances of the conductors and the currents in them in a closed loop is equal to the total emf available in that loop.
+
+

Similarly to KCL, it can be stated as:

+
+
\sum_{k=1}^n V_k = 0
+
+

Here, n is the total number of voltages measured. The voltages may also be complex:

+
+
\sum_{k=1}^n \tilde{V}_k = 0
+
+

This law is based on the conservation of "energy given/taken by potential field" (not including energy taken by dissipation). Given a voltage potential, a charge which has completed a closed loop doesn't gain or lose energy as it has gone back to initial potential level.

+

This law holds true even when resistance (which causes dissipation of energy) is present in a circuit. The validity of this law in this case can be understood if one realizes that a charge in fact doesn't go back to its starting point, due to dissipation of energy. A charge will just terminate at the negative terminal, instead of positive terminal. This means all the energy given by the potential difference has been fully consumed by resistance which in turn loses the energy as heat dissipation.

+

To summarize, Kirchhoff's voltage law has nothing to do with gain or loss of energy by electronic components (resistors, capacitors, etc.). It is a law referring to the potential field generated by voltage sources. In this potential field, regardless of what electronic components are present, the gain or loss in "energy given by the potential field" must be zero when a charge completes a closed loop.

+

Electric field and electric potential

+

Kirchhoff's voltage law could be viewed as a consequence of the principle of conservation of energy. Otherwise, it would be possible to build a perpetual motion machine that passed a current in a circle around the circuit.

+

Considering that electric potential is defined as a line integral over an electric field, Kirchhoff's voltage law can be expressed equivalently as

+
+
\oint_C \mathbf{E} \cdot d\mathbf{l} = 0,
+
+

which states that the line integral of the electric field around closed loop C is zero.

+

In order to return to the more special form, this integral can be "cut in pieces" in order to get the voltage at specific components.

+

Limitations

+

This is a simplification of Faraday's law of induction for the special case where there is no fluctuating magnetic field linking the closed loop. Therefore, it practically suffices for explaining circuits containing only resistors and capacitors.

+

In the presence of a changing magnetic field the electric field is not conservative and it cannot therefore define a pure scalar potential-the line integral of the electric field around the circuit is not zero. This is because energy is being transferred from the magnetic field to the current (or vice versa). In order to "fix" Kirchhoff's voltage law for circuits containing inductors, an effective potential drop, or electromotive force (emf), is associated with each inductance of the circuit, exactly equal to the amount by which the line integral of the electric field is not zero by Faraday's law of induction.

diff --git a/templates/accordion.html b/templates/accordion.html new file mode 100644 index 0000000000..a94f738d29 --- /dev/null +++ b/templates/accordion.html @@ -0,0 +1,33 @@ +<%! + from django.core.urlresolvers import reverse +%> + +<%def name="make_chapter(chapter)"> +

${chapter['name']}

+ + + + +% for chapter in toc: + ${make_chapter(chapter)} +% endfor diff --git a/templates/accordion_bak.html b/templates/accordion_bak.html new file mode 100644 index 0000000000..9ac10a5764 --- /dev/null +++ b/templates/accordion_bak.html @@ -0,0 +1,70 @@ +

Using the System

+
+ +
+ +

Basic Circuit Analysis

+
+ +
+

Digital Systems

+
+ +
+

Nonlinear Elements

+
+ +
+

Analog Amplification

+
+ +
+

Capacitors and Inductors

+
+ +
+

Operational Amplifiers

+
+ +
+

Applications

+
+ +
+ diff --git a/templates/accordion_init.js b/templates/accordion_init.js new file mode 100644 index 0000000000..7c4ca2603c --- /dev/null +++ b/templates/accordion_init.js @@ -0,0 +1,19 @@ +$("#accordion").accordion({ + active: ${ active_chapter }, + header: 'h3', + autoHeight: false, +}); + +$("#open_close_accordion a").click(function(){ + if ($(".course-wrapper").hasClass("closed")){ + $(".course-wrapper").removeClass("closed"); + } else { + $(".course-wrapper").addClass("closed"); + } +}); + +$('.ui-accordion').bind('accordionchange', function(event, ui) { + var event_data = {'newheader':ui.newHeader.text(), + 'oldheader':ui.oldHeader.text()}; + log_event('accordion', event_data); +}); diff --git a/templates/activation_active.html b/templates/activation_active.html new file mode 100644 index 0000000000..c51cccbb70 --- /dev/null +++ b/templates/activation_active.html @@ -0,0 +1,13 @@ +<%inherit file="marketing.html" /> + +
+
+ +
+

Account already active!

+ +

This account has already been activated. We will notify you as + soon as the course starts.

+

For now you can go to the MITx homepage or the 6.002x course page.

+
+
diff --git a/templates/activation_complete.html b/templates/activation_complete.html new file mode 100644 index 0000000000..1a46dc21a9 --- /dev/null +++ b/templates/activation_complete.html @@ -0,0 +1,10 @@ +<%inherit file="marketing.html" /> + +
+
+

Activation Complete!

+ +

Thanks for activating your email. We will notify you as soon as the course starts.

+

For now you can go to the MITx homepage or the 6.002x course page.

+
+
diff --git a/templates/activation_email.txt b/templates/activation_email.txt new file mode 100644 index 0000000000..21a09335c7 --- /dev/null +++ b/templates/activation_email.txt @@ -0,0 +1,10 @@ +Someone, hopefully you, signed up for an account for MITx's on-line +offering of 6.002 using this email address. If it was you, and you'd +like to activate and use your account, copy and paste this address +into your web browser's address bar: + +http://${ site }/activate/${ key } + +If you didn't request this, you don't need to do anything; you won't +receive any more email from us. Please do not reply to this e-mail; if +you require assistance, check the help section of the MITx web site. diff --git a/templates/activation_email_subject.txt b/templates/activation_email_subject.txt new file mode 100644 index 0000000000..00231fa8b1 --- /dev/null +++ b/templates/activation_email_subject.txt @@ -0,0 +1 @@ +Your account for MITx's on-line 6.002 diff --git a/templates/activation_invalid.html b/templates/activation_invalid.html new file mode 100644 index 0000000000..419f7a0ae6 --- /dev/null +++ b/templates/activation_invalid.html @@ -0,0 +1,14 @@ +<%inherit file="marketing.html" /> + +
+
+

Activation Invalid

+ +

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 bugs@mitx.mit.edu.

+ +

Or you can go back to the 6.002x course page.

+
+
diff --git a/templates/book_toc.html b/templates/book_toc.html new file mode 100644 index 0000000000..ed4794da65 --- /dev/null +++ b/templates/book_toc.html @@ -0,0 +1,356 @@ +
  • Contents ix +
  • Preamble i + + +
  • 1 The Circuit Abstraction 3 +
  • 2 Resistive Networks 53 +
  • 3 Network Theorems 119 +
  • 4 Analysis of Nonlinear Circuits 193 +
  • 5 The Digital Abstraction 243 +
  • 6 The MOSFET Switch 285 +
  • 7 The MOSFET Amplifier 331 +
  • 8 The Small Signal Model 405 +
  • 9 Energy Storage Elements 457 +
  • 10 First-order Transients 503 +
  • 11 Energy and Power in Digital Circuits 595 +
  • 12 Transients in Second Order Circuits 625 +
  • 13 Sinusoidal Steady State 703 +
  • 14 Sinusoidal Steady State: Resonance 777 +
  • 15 The Operational Amplifier Abstraction 837 +
  • 16 Diodes 905 +
  • A1 Maxwell's Equations and the LMD 927 +
  • B Trigonometric Functions & Identities 941 +
  • C Complex Numbers 947 +
  • D Solving Simultaneous Linear Equations 957 + + +
  • Answers to Selected Problems 959 +
  • Figure Acknowledgments 971 +
  • Index 973 diff --git a/templates/copyright.html b/templates/copyright.html new file mode 100644 index 0000000000..003db8c2af --- /dev/null +++ b/templates/copyright.html @@ -0,0 +1,38 @@ +<%inherit file="marketing.html" /> + + diff --git a/templates/courseware.html b/templates/courseware.html new file mode 100644 index 0000000000..ec4be8c6c4 --- /dev/null +++ b/templates/courseware.html @@ -0,0 +1,36 @@ +<%inherit file="main.html" /> +<%block name="title">Courseware – MITx 6.002x + +<%block name="js_extra"> + + + + +<%include file="navigation.html" args="active_page='courseware'" /> + +
    +
    +
    +
    +

    Courseware Index

    + close +
    + +
    + ${accordion} +
    +
    + +
    + ${content} +
    +
    +
    diff --git a/templates/create_account.html b/templates/create_account.html new file mode 100644 index 0000000000..40cfaacd1c --- /dev/null +++ b/templates/create_account.html @@ -0,0 +1,73 @@ + +
    + +

    Enroll in 6.002x Circuits & Electronics

    + + +
    +
    <% if 'error' in locals(): e = error %> + +
    + +
      + + + +
    1. + + +
    2. + +
    3. + + + +
      Nickname you'd like to use on forums.
      +
    4. + +
    5. + + + +
      If you successfully complete the course, you will receive an electronic certificate of accomplishment from MITx with this name on it.
      +
    6. + +
    7. + + + +
      Preferred format is city, state, country (so for us, "Cambridge, Massachusetts, USA").
      +
    8. + +
    9. + + + + +
      Please let us know what language you'd most like to see the content in (even if not your native). We're working on translations and internationalization.
      +
    10. + +
    11. + +
    12. + +
    13. + +
        +
      • Complete all mid-terms and final exams with only my own work.
      • +
      • Maintain only one account, and not share the username or password.
      • +
      • Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others.
      • +
      • Not post answers to problems that are being used to assess student performance.
      • +
      +
    14. + +
    + +
    +
    diff --git a/templates/edit_circuit.html b/templates/edit_circuit.html new file mode 100644 index 0000000000..ca72cf040d --- /dev/null +++ b/templates/edit_circuit.html @@ -0,0 +1,8 @@ +
    +
    + +${ circuit_line } + + +
    +
    diff --git a/templates/emails/welcome_body.txt b/templates/emails/welcome_body.txt new file mode 100644 index 0000000000..bc859c88cf --- /dev/null +++ b/templates/emails/welcome_body.txt @@ -0,0 +1,25 @@ +MITx's prototype offering, 6.002x, is now open. To log in, visit + + https://6002x.mitx.mit.edu + +where you will find a login button at the top right-hand corner of the +window. + +Please make sure you're using the latest version of Google Chrome or +Firefox. If you've forgotten your password, the log-in form has a +place to reset it. + +Once you log in, we recommend that you start the course by reviewing +the "System Usage Sequence" in the Overview section, and the "6.002x +At-a-Glance (Calendar)" handout under the Course Info tab. After you +familiarize yourself with the various features of the MITx platform, +you can jump right into the coursework by working on "Administrivia +and Circuit Elements", the first Lecture Sequence in Week 1. + +Thanks for joining us for the ride! + +The 6.002x team + +(Please note that this e-mail address does not receive e-mails -- +if you need assistance, please use the help section of the web +site) diff --git a/templates/emails/welcome_subject.txt b/templates/emails/welcome_subject.txt new file mode 100644 index 0000000000..a905585689 --- /dev/null +++ b/templates/emails/welcome_subject.txt @@ -0,0 +1 @@ +Welcome to 6.002x! diff --git a/templates/feedback_email.txt b/templates/feedback_email.txt new file mode 100644 index 0000000000..426b6855ed --- /dev/null +++ b/templates/feedback_email.txt @@ -0,0 +1,8 @@ +Feedback from: ${ user } +E-mail: ${ email } +Browser: ${ browser } +url: ${ url } +time: ${ time } +Subject: ${ subject } +Feedback: +${ feedback } diff --git a/templates/gradebook.html b/templates/gradebook.html new file mode 100644 index 0000000000..340b0da696 --- /dev/null +++ b/templates/gradebook.html @@ -0,0 +1,22 @@ +<%inherit file="main.html" /> +<%include file="navigation.html" args="active_page=''" /> +
    +
    +
    +

    Gradebook

    + % for s in students: +

    ${s['username']}

    + % for c in s['grade_info']['grade_summary']: +

    ${c['category']}

    +

    + % if 'subscores' in c: + % for ss in c['subscores']: +
    ${ss['summary']} + % endfor + % endif +

    + % endfor + % endfor +
    +
    +
    diff --git a/templates/help.html b/templates/help.html new file mode 100644 index 0000000000..24ecd4e485 --- /dev/null +++ b/templates/help.html @@ -0,0 +1,50 @@ +<%inherit file="main.html" /> +<%block name="title">Help - MITx 6.002x + +<%include file="navigation.html" args="active_page='help'"/> + +
    +

    Help

    + +
    +

    Self-help

    + +
      +
    • Read + the FAQ + carefully
    • +
    • Check the course updates -- we will + announce major errors and issues there
    • +
    • Check whether the issues has been asked on + the discussion forums, and if not, + ask
    • +
    • Ask in the IRC channel (irc.mitx.mit.edu, channel #6002)]
    • +
    • Check the course handouts.
    • +
    +
    + +
    +

    Help email

    +

    If you can't solve your problems with self-help, we have several + e-mail addresses set up:

    + +
    +
    System-related questions
    +
    technical@mitx.mit.edu
    +
    Content-related questions
    +
    content@mitx.mit.edu
    +
    Bug reports
    +
    bugs@mitx.mit.edu
    +
    Suggestions
    +
    suggestions@mitx.mit.edu
    +
    + +

    Please bear in mind that while we read them, we do not + expect to have time to respond to all e-mails. For technical + questions, please make sure you are using the latest version + of Firefox + or Chrome, and + include browser and version in your e-mail, as well as + screenshots or other pertinent details.

    +
    +
    diff --git a/templates/homework.html b/templates/homework.html new file mode 100644 index 0000000000..058f513280 --- /dev/null +++ b/templates/homework.html @@ -0,0 +1,17 @@ +

    ${ homework['name']} Test

    + +
      +% for problem in homework['problems']: +
    1. +

      ${ problem['name'] }

      + + ${ problem['html'] } + +
      + + +
      +
    2. +% endfor +
    + diff --git a/templates/honor.html b/templates/honor.html new file mode 100644 index 0000000000..a763eb4f50 --- /dev/null +++ b/templates/honor.html @@ -0,0 +1,49 @@ +<%inherit file="marketing.html" /> + +
    +
    +

    Collaboration Policy

    + +

    By enrolling in a course on MITx, you are joining a + special worldwide community of learners. The aspiration + of MITx is to provide anyone in the world who has the + motivation and ability to engage MIT coursework the opportunity + to attain the best MIT-based educational experience that + Internet technology enables. You are part of the community who + will help MITx achieve this goal. + +

    MITx depends upon your motivation to learn the material + and to do so with honesty. In order to participate + in MITx, you must agree to the Honor Code below and any + additional terms specific to a class. This Honor Code, and any + additional terms, will be posted on each class website. + +

    +

    MITx Honor Code Pledge

    + +

    By enrolling in an MITx course, I agree that I will: + +

      +
    • Complete all mid-terms and final exams with my own work + and only my own work. I will not submit the work of any + other person. +
    • Maintain only one user account and not let anyone else + use my username and/or password. +
    • Not engage in any activity that would dishonestly improve + my results, or improve or hurt the results of others. +
    • Not post answers to problems that are being used to + assess student performance. +
    +
    +

    Unless otherwise indicated by the instructor of an MITx + course, learners on MITx are encouraged to: +

      +
    • Collaborate with others on the lecture videos, exercises, + homework and labs. +
    • Discuss with others general concepts and materials in + each course. +
    • Present ideas and written work to fellow MITx + learners or others for comment or criticism. +
    +
    +
    diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000000..961cedaa30 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,127 @@ +<%inherit file="marketing.html" /> + +<%block name="title">MITx 6.002x: Circuits & Electronics +<%block name="description">6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT's first undergraduate analog design course: 6.002. +<%block name="keywords">MITx, circuits, electronics, EECS, electrical engineering, analog circuits, digital circuits, online learning, MIT, online laboratory, education, learners, undergraduate, certificate + +<%block name="header_text"> +
    +
    +

    Circuits & Electronics

    +

    6.002x

    + Enroll in 6.002x Circuits & Electronics +
    +

    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.

    +
    + + +<%block name="header_class">course + +
    +
    + +
    +

    About 6.002x

    + +

    6.002x (Circuits and Electronics) is designed to serve as a first course in an undergraduate electrical engineering (EE), or electrical engineering and computer science (EECS) curriculum. At MIT, 6.002 is in the core of department subjects required for all undergraduates in EECS.

    + +

    The course introduces engineering in the context of the lumped circuit abstraction. Topics covered include: resistive elements and networks; independent and dependent sources; switches and MOS transistors; digital abstraction; amplifiers; energy storage elements; dynamics of first- and second-order networks; design in the time and frequency domains; and analog and digital circuits and applications. Design and lab exercises are also significant components of the course. You should expect to spend approximately 10 hours per week on the course.

    + +
    + +
    +

    6.002x on MITx

    + +

    If you successfully complete the course, you will receive an electronic certificate of accomplishment from MITx. This certificate will indicate that you earned it from MITx’s pilot course. In this prototype version, MITx will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.

    + +

    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 Amazon.

    +
    + +
    +

    Requirements

    + +

    In order to succeed in this course, you must have taken an AP level physics course in electricity and magnetism. You must know basic calculus and linear algebra and have some background in differential equations. Since more advanced mathematics will not show up until the second half of the course, the first half of the course will include an optional remedial differential equations component for those who need it.

    + +

    The course web site was developed and tested primarily with + Google Chrome. We support current versions of Mozilla Firefox as + well. The video player is designed to work with Flash. While we + provide a partial non-Flash fallback for the video, as well as + partial support for Internet Explorer, other browsers, and + tablets, portions of the functionality will be unavailable.

    +
    + +
    + Enroll in 6.002x Circuits & Electronics +
    + +
    + +
    +

    About the course staff

    + +
      +
    • + Anant Agarwal +

      Anant Agarwal

      +

      Director of MIT’s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT’s Smullin and Jamieson prizes for teaching and co-authored the course textbook “Foundations of Analog and Digital Electronic Circuits.”

    • + +
    • + Gerald Sussman +

      Gerald Sussman

      +

      Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.

    • + +
    • + Piotr Mitros +

      Piotr Mitros

      +

      Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.

    • +
    + +
    +
    + +
    <%include file="create_account.html" />
    + + diff --git a/templates/info.html b/templates/info.html new file mode 100644 index 0000000000..9489f5f1b1 --- /dev/null +++ b/templates/info.html @@ -0,0 +1,15 @@ +<%inherit file="main.html" /> +<%block name="title">Course Info - MITx 6.002x + +<%include file="navigation.html" args="active_page='info'" /> + +
    +
    +
    + <%include file="updates.html" /> +
    +
    + <%include file="handouts.html" /> +
    +
    +
    diff --git a/templates/login.html b/templates/login.html new file mode 100644 index 0000000000..f371aa2e4c --- /dev/null +++ b/templates/login.html @@ -0,0 +1,34 @@ + +
    +
    +

    Log in to MITx

    + +
    + + +
    +
      +
    1. + + +
    2. + +
    3. + + +
    4. + +
    5. + +
    6. + +
    + +
    + + +
    diff --git a/templates/main.html b/templates/main.html new file mode 100644 index 0000000000..119e861036 --- /dev/null +++ b/templates/main.html @@ -0,0 +1,139 @@ + + + + <%block name="title">MITx 6.002x + + + + + + + + + + + + + +<%block name="headextra"/> + + + +"> + + + ${self.body()} + <%block name="bodyextra"/> + + + +
    +

    Found a bug? Got an idea for improving our system? Let us know.

    + +
    +
      +
    1. +
    2. +
    3. +
    +
    + +
    + +
    +
    + + + +
    + +
    +
    Suffixes:
    +
    %kMGTcmunp
    +
    Operations:
    +
    ^ * / + - ()
    +
    Functions:
    +
    sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs
    +
    Constants
    +
    e, pi
    + + +
    +
    + + + + + + + + + + + +<%block name="js_extra"/> + + diff --git a/templates/marketing.html b/templates/marketing.html new file mode 100644 index 0000000000..88ff5199e1 --- /dev/null +++ b/templates/marketing.html @@ -0,0 +1,181 @@ + + + + <%block name="title">MITx: MIT's new online learning initiative</%block> + + MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world" /> + + MITx, online learning, MIT, online laboratory, education, learners, undergraduate, certificate" /> + + + + + + + + + + + + + + + + + + +<%block name="headextra"/> + + + + + + + <%block name="header"> +
    "> +
    + <%block name="header_nav"> + + + + <%block name="header_text"> +
    +

    MITx

    +

    MIT’s new online learning initiative

    +
    + +
    +
    + + + ${self.body()} + <%block name="bodyextra"/> + + + +% if settings.COURSEWARE_ENABLED: +
    <%include file="login.html" />
    +% endif +
    <%include file="password_reset_form.html" />
    +
    + + + +<%block name="js_extra"/> + + diff --git a/templates/mitx-overview.html b/templates/mitx-overview.html new file mode 100644 index 0000000000..c0de06e281 --- /dev/null +++ b/templates/mitx-overview.html @@ -0,0 +1,104 @@ +<%inherit file="marketing.html" /> +<%block name="login_area"> + +
    +
    + +

    MITx Advances MIT’s Vision for Online Learning

    + +

    Education has entered an era of rapid, exciting, +technology-enabled change. At MIT, we welcome the opportunity to +harness the power of on-line technology for our students and for the +world. On December 19, 2011, we announced MITx, an initiative to +offer exciting, challenging and enriching courses to anyone, +anywhere, who has the motivation and ability to engage MIT’s +educational content.

    + +

    Ten years ago, MIT +launched OpenCourseWare, +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. MITx is the next step +in opening MIT’s educational doors to the world. Through OCW and +MITx, MIT invites the world to join it in the passion, hard work and +thrill of learning and discovery.

    + +

    MITx will e-publish interactive online courses that:

    + +
      +
    • Empower students to learn at their own pace;
    • +
    • Offer online laboratories where students can experiment and apply their learning;
    • +
    • Connect students to each other in online discussion groups and wiki-based collaborative learning;
    • +
    • Challenge learners with MIT-rigor course materials; and
    • +
    • Assess individual student learning as the student progresses through the course.
    • +
    + +

    MITx students who demonstrate their mastery of a subject can earn +a certificate of completion awarded by MITx.

    + +

    MITx 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.

    + +

    Why Is MIT Creating MITx?

    + +

    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.

    + +

    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 MITx +aspiration to capture and encourage the energy of our faculty in +creating new online teaching and learning tools.

    + +

    Once up and running, MITx will be a laboratory for online +learning. Whether MITx learners are MIT’s on-campus students, +university students elsewhere, or independent learners, MITx will help +us understand how online learning occurs and how virtual communities +of learners assemble -- information that in turn will allow us to +improve both MITx and our on-campus teaching.

    + +

    Access to higher education. MITx 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 MITx, MIT educational content can reach, augment, and enrich +the education and livelihood of many learners who cannot attend +MIT.

    + +

    MITx 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 +MITx.

    + +

    Advancing the public good. MITx 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.

    + +

    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. MITx is our contribution.

    + +
    +
    diff --git a/templates/mitx_global.html b/templates/mitx_global.html new file mode 100644 index 0000000000..2f57a2efa1 --- /dev/null +++ b/templates/mitx_global.html @@ -0,0 +1,118 @@ +<%inherit file="marketing.html" /> + +<%block name="header_class">home + +
    +
    + +
    +
    +

    MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world. It will also enhance the educational experience of its on-campus students, offering them online tools that supplement and enrich their classroom and laboratory experiences.

    +

    The first MITx course, 6.002x (Circuits and Electronics), will be launched in an experimental prototype form. Watch this space for further upcoming courses, which will become available in Fall 2012.

    +
    + +
    + Link to MITx introduction video Watch intro video +
    + +
    + +
    +

    MITx courses will be offered on an online learning platform that:

    + +
      +
    • organizes and presents course material to enable students to learn worldwide
    • +
    • features interactive instruction, online laboratories and student-to-student and student-to-professor communication
    • +
    • allows for the individual assessment of any student’s work and allows students who demonstrate their mastery of subjects to earn certificates awarded by MITx
    • +
    • 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.
    • +
    + +

    Press & links: 6.002x Press Release, 6.002x FAQ, MITx overview, Boston Globe, New York Times, MIT Press Release, MITx FAQ, OpenCourseWare

    +
    + +
    + +
    +
    +

    Spring 2012 Course offering

    +

    Circuits and Electronics

    +

    6.002x

    +
    + +

    + More information & Enroll +

    + +

    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 MITx.

    +
    +
    + +
    + +
    + +<%block name="js_extra"> + + diff --git a/templates/mitx_help.html b/templates/mitx_help.html new file mode 100644 index 0000000000..64c22cfff4 --- /dev/null +++ b/templates/mitx_help.html @@ -0,0 +1,28 @@ +<%inherit file="marketing.html" /> + +
    +
    +
    +

    Help & Feedback

    +

    If run into problems signing up for the web site which you + cannot resolve on your own, please check + the Frequently + Asked Questions. If you find a bug or other issues, you can + reach us at:

    +
    +
    System-related questions
    +
    technical@mitx.mit.edu -- For technical questions, please make sure you are using a current version of Firefox or Chrome, and include browser and version in your e-mail, as well as screenshots or other pertinent details.
    +
    Content-related questions
    +
    content@mitx.mit.edu
    +
    Bug reports
    +
    bugs@mitx.mit.edu
    +
    Suggestions
    +
    suggestions@mitx.mit.edu
    +
    + +

    Please bear in mind that while we read them, we do not expect to + have time to respond to all e-mails.

    +
    +
    +
    + diff --git a/templates/navigation.html b/templates/navigation.html new file mode 100644 index 0000000000..345e6eaa3c --- /dev/null +++ b/templates/navigation.html @@ -0,0 +1,20 @@ +<%page args="active_page" /> +
    +
    +
    +

    MITx

    +

    Circuits and Electronics

    +
    + + +
    +
    diff --git a/templates/password_reset_form.html b/templates/password_reset_form.html new file mode 100644 index 0000000000..31464d833e --- /dev/null +++ b/templates/password_reset_form.html @@ -0,0 +1,10 @@ +

    Password reset

    + +

    Forgotten your password? Enter your e-mail address below, and we'll e-mail instructions for setting a new one.

    + +
    +
    + + + +
    diff --git a/templates/privacy.html b/templates/privacy.html new file mode 100644 index 0000000000..715578b36a --- /dev/null +++ b/templates/privacy.html @@ -0,0 +1,198 @@ +<%inherit file="marketing.html" /> + +
    +
    +

    Privacy Policy

    + +

    Confidentiality & Security of Personally +Identifiable Information

    + +

    We care about the confidentiality and security of your personal +information. We will use commercially reasonable efforts to keep your +Personally Identifiable Information private and will not share it with third +parties, except as set forth in this Privacy Policy. However, no method of +transmitting or storing electronic data is ever completely secure, and we +cannot guarantee that such information will never be accessed, used, or +released in a manner that is inconsistent with this policy.

    + +

    This Privacy Policy only applies to information that we collect +through the Site and does not apply to information that we may collect +from you in other ways (for example, this policy does not apply to +information that you may provide to us over the phone, by fax or +through conventional mail). In addition, please note your educational +records are protected by the Family Educational Rights and Privacy Act +("FERPA") to the extent FERPA applies.

    + +

    Usernames and Postings

    + +

    Comments or other information posted by you to our forums, +wikis, or other areas of the Site designed for public communications may be +viewed and downloaded by others who visit the Site. For this reason, we +encourage you to use an anonymous username, and to not post any personally +identifiable information to those forums (or other public areas).

    + +

    What You Consent to by Using Our Site

    + +

    Please understand that by submitting any Personally Identifiable +Information to us, you consent and agree that we may collect, use and +disclose such Personally Identifiable Information in accordance with +this Privacy Policy and our Terms of Service ("TOS"), and as +permitted or required by law. If you do not agree with these terms, +then please do not provide any Personally Identifiable Information to +us. As used herein, "Personally Identifiable Information" +means your full name, email address, your physical address (if you +provide it) and your student identification number, if applicable. If +you refuse, or if you choose not to provide us with any required +Personally Identifiable Information, we may not be able to provide you +with the services that can be offered on our Site.

    + +

    Information We Collect and How We Use It

    + +

    We collect information, including Personally Identifiable +Information, when you sign up for a User Account, participate in +online courses, send us email messages and/or participate in our +public forums. We collect information about student performance and +patterns of learning. We track information indicating, among other +things, which pages of our Site were visited, the order in which they +were visited, when they were visited, and which hyperlinks and other +user interface controls were used.

    + +

    We may log the IP address, operating system and browser software +used by each user of the Site, and we may be able to determine from an +IP address a user's Internet Service Provider and the geographic +location of his or her point of connectivity. Various web analysis +tools are used to collect this information. Some of the information is +collected through cookies (a small text file placed on your +computer). You should be able to control how and whether cookies will +be accepted by your web browser. Most browsers offer instructions on +how to reset the browser to reject cookies in the "Help" +section of the toolbar. If you reject our cookies, many functions and +conveniences of this Site may not work properly.

    + +

    Among other things, we may use the information that you provide +(including your Personally Identifiable Information) in connection +with the following:

    + +
      +
    • To help us improve MITx offerings, both individually + (e.g. by course staff when working with a student) and in + aggregate, and to individualize the experience and to evaluate + the access and use of the Site and the impact of MITx on + the worldwide educational community. +
    • +
    • For purposes of scientific research, particularly, for + example, in the areas of cognitive science and education.
    • +
    • For the purpose for which you specifically provided + the personal information, for example to respond to a specific inquiry or + provide you the specific course and/or services you select.
    • +
    • To track both individual and aggregate attendance, + progress and completion of an online course, and to analyze statistics on + student performance and how students learn.
    • +
    • To monitor and detect violations of the Honor Code, the + Terms of Service, as well as other misuses and potential misuses of the + site.
    • +
    • To publish information gathered about MITx + access, use, impact, and student performance but only as non-personally + identifiable data.
    • +
    • To send you updates about online courses offered by MITx + or other MIT events or to send you email messages about Site maintenance + or updates.
    • +
    • To archive this information and/or use it for future + communications with you.
    • +
    • As otherwise described to you at the point of + collection.
    • +
    + +

    In addition to the above situations where your information may be +shared with others, there is also the possibility that MITx +will affiliate with other educational institutions and/or +that MITx will become a (or part of a) nonprofit entity +separate from MIT. In those events, the other educational +institutions and/or separate entity will have access to the +information you provide, to the extent permitted by FERPA. + +

    Sharing with Third Parties

    + +

    We may share the information we collect with third parties +as follows:

    + +
      +
    • With service providers or +contractors that perform certain functions on our behalf, including processing +information that you provide to us on the Site, operating the Site or portions +of it, or in connection with other aspects of MITx services. These +service providers and contractors will be obligated to keep your information +confidential.

      + +
    • With all users and other visitors +to the Site, to the extent that you submit post comments or other information +to a portion of the Site designed for public communications. As provided in the +Terms of Service, we may provide those postings to students in future offerings +of the course, either within the context of the forums, the courseware, or +otherwise, for marketing purposes, or in any other way. If we do use your postings, +we will use them without your real name and e-mail (except with explicit +permission), but we may use your username.

      + +
    • To connect you to other users of the Site. For instance, we +may recommend specific study partners, or connect potential student +mentees and mentors. In such cases, we may use all information +collected to determine who to connect you to, but we will only connect +you by username, and not disclose your real name or e-mail address to +your contact.

      + +
    • To respond to subpoenas, court orders, or other legal process, in +response to a request for cooperation from law enforcement or another +government agency, to investigate, prevent, or take action regarding +illegal activities, suspected fraud, or to enforce our user agreement +or privacy policy, or to protect our rights or the rights of +others.

      + +
    • As otherwise described to you at the point of collection or +pursuant to your consent. For example, from time to time, we may ask +your permission to use your Personally Identifiable Information in +other ways. In the future, MITx may have an alumni association, +resume book, etc. We may offer services where it is possible to +verify MITx credentials.

      + +
    • For integration with third party services. Videos and other +content may be hosted on YouTube and other web sites not controlled +by MITx. We may provide links and other integration with social +networks, and other sites. Those web sites are guided by their own +privacy policies.

      +
    + +

    Personalization and Pedagogical Improvements

    + +

    Our goal is to provide current and future visitors with the best +possible educational experience. To further this goal, we sometimes +present different users with different versions of course materials +and software. We do this to personalize the experience to the +individual learner (assess the learner's level of ability and learning +style, and present materials best suited to the learner), to evaluate +the effectiveness of our course materials, to improve our +understanding of the learning process, and to otherwise improve the +effectiveness of our offerings. We may publish or otherwise publicize +results from this process, but only as non-personally-identifiable +data.

    + +

    Changing Our Privacy Policy

    + +

    Please note that we review our privacy practices from time to time, +and that these practices are subject to change. We will publish notice +of any such modifications online on this page for a reasonable period +of time following such modifications, and by changing the effective +date of this Privacy Policy. By continuing to access the Site after +such changes have been posted, you signify your agreement to be bound +by them. Be sure to return to this page periodically to ensure +familiarity with the most current version of this Privacy Policy.

    + +

    Privacy Concerns

    + +

    If you have privacy concerns, or have disclosed data you would +prefer to keep private, please contact us +at privacy@mitx.mit.edu.

    + +

    Effective Date: February 6, 2012 + +

    +
    diff --git a/templates/problem.html b/templates/problem.html new file mode 100644 index 0000000000..965f5a9c38 --- /dev/null +++ b/templates/problem.html @@ -0,0 +1,25 @@ +

    ${ problem['name'] }

    + +
    + ${ problem['html'] } + +
    + + + % if check_button: + + % endif + % if reset_button: + + % endif + % if save_button: + + % endif + % if answer_available: + + % endif + % if explain : + Explanation + % endif +
    +
    diff --git a/templates/problem.js b/templates/problem.js new file mode 100644 index 0000000000..547a1f0e81 --- /dev/null +++ b/templates/problem.js @@ -0,0 +1,69 @@ +function ${ id }_load() { + $('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }', + function() { + MathJax.Hub.Queue(["Typeset",MathJax.Hub]); + update_schematics(); + + $('#check_${ id }').click(function() { + $("input.schematic").each(function(index,element){ element.schematic.update_value(); }); + var submit_data={}; + $.each($("[id^=input_${ id }_]"), function(index,value){ + submit_data[value.id]=value.value; + }); + postJSON('/modx/problem/${ id }/problem_check', + submit_data, + function(json) { + switch(json.success) { + case 'incorrect': // Worked, but answer not + case 'correct': + ${ id }_load(); + //alert("!!"+json.success); + break; + default: + alert(json.success); + } + }); + log_event('problem_check', submit_data); + }); + + $('#reset_${ id }').click(function() { + var submit_data={}; + $.each($("[id^=input_${ id }_]"), function(index,value){ + submit_data[value.id]=value.value; + }); + + postJSON('/modx/problem/${ id }/problem_reset', {'id':'${ id }'}, function(json) { + ${ id }_load(); + }); + log_event('problem_reset', submit_data); + }); + + $('#show_${ id }').click(function() { + postJSON('/modx/problem/${ id }/problem_show', {}, function(data) { + for (var key in data) { + $("#answer_"+key).text(data[key]); + } + }); + + log_event('problem_show', {'problem':'${ id }'}); +}); + +$('#save_${ id }').click(function() { + $("input.schematic").each(function(index,element){ element.schematic.update_value(); }); + var submit_data={}; + $.each($("[id^=input_${ id }_]"), function(index,value){ + submit_data[value.id]=value.value;}); + postJSON('/modx/problem/${ id }/problem_save', + submit_data, function(data){ + if(data.success) { + alert('Saved'); + }} + ); + log_event('problem_save', submit_data); + }); +} +);} + +$(function() { + ${ id }_load(); +}); diff --git a/templates/problem_ajax.html b/templates/problem_ajax.html new file mode 100644 index 0000000000..7296b362ad --- /dev/null +++ b/templates/problem_ajax.html @@ -0,0 +1 @@ +
    diff --git a/templates/profile.html b/templates/profile.html new file mode 100644 index 0000000000..7b6a596bad --- /dev/null +++ b/templates/profile.html @@ -0,0 +1,168 @@ +<%inherit file="main.html" /> +<%block name="title">Profile - MITx 6.002x + +<%! + from django.core.urlresolvers import reverse +%> + +<%block name="headextra"> + + + + + + + + + +<%include file="navigation.html" args="active_page='profile'" /> + +
    +
    + +
    +

    Course Progress

    + +
    + +
      + %for chapter in chapters: + %if not chapter['chapter'] == "hidden": +
    1. +

      + ${ chapter['chapter'] }

      + +
        + %for section in chapter['sections']: +
      1. + <% + earned = section['section_total'][0] + total = section['section_total'][1] + percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else "" + %> + +

        + ${ section['section'] } ${"({0:g}/{1:g}) {2}".format( earned, total, percentageString )}

        + ${section['subtitle']} + %if 'due' in section and section['due']!="": + due ${section['due']} + %endif + + %if len(section['scores']) > 0: +
          + ${ "Problem Scores: " if section['graded'] else "Practice Scores: "} + %for score in section['scores']: +
        1. ${"{0:g}/{1:g}".format(score[0],score[1])}
        2. + %endfor +
        + %endif + +
      2. + %endfor +
      +
    2. + %endif + %endfor +
    +
    + + +
    +
    + +
    + +

    Password Reset Email Sent

    + An email has been sent to ${email}. Follow the link in the email to change your password. +
    diff --git a/templates/profile_graphs.js b/templates/profile_graphs.js new file mode 100644 index 0000000000..72a3de4471 --- /dev/null +++ b/templates/profile_graphs.js @@ -0,0 +1,164 @@ +<%! + import json +%> + +$(function () { + function showTooltip(x, y, contents) { + $('
    ' + contents + '
    ').css( { + position: 'absolute', + display: 'none', + top: y + 5, + left: x + 5, + border: '1px solid #000', + padding: '4px 6px', + color: '#fff', + 'background-color': '#333', + opacity: 0.90 + }).appendTo("body").fadeIn(200); + } + + /* -------------------------------- Grade detail bars -------------------------------- */ + + <% + colors = ["#b72121", "#600101", "#666666", "#333333"] + + tickIndex = 1 + sectionSpacer = 0.5 + sectionIndex = 0 + + series = [] + ticks = [] #These are the indices and x-axis labels for the data + bottomTicks = [] #Labels on the bottom + detail_tooltips = {} #This an dictionary mapping from 'section' -> array of detail_tooltips + droppedScores = [] #These are the datapoints to indicate assignments which aren't factored into the total score + dropped_score_tooltips = [] + + for section in grade_summary: + if 'subscores' in section: ##This is for sections like labs or homeworks, with several smaller components and a total + series.append({ + 'label' : section['category'], + 'data' : [[i + tickIndex, score['percentage']] for i,score in enumerate(section['subscores'])], + 'color' : colors[sectionIndex] + }) + + ticks += [[i + tickIndex, score['label'] ] for i,score in enumerate(section['subscores'])] + bottomTicks.append( [tickIndex + len(section['subscores'])/2, section['category']] ) + detail_tooltips[ section['category'] ] = [score['summary'] for score in section['subscores']] + + droppedScores += [[tickIndex + index, 0.05] for index in section['dropped_indices']] + + dropExplanation = "The lowest {0} {1} scores are dropped".format( len(section['dropped_indices']), section['category'] ) + dropped_score_tooltips += [dropExplanation] * len(section['dropped_indices']) + + + tickIndex += len(section['subscores']) + sectionSpacer + + + category_total_label = section['category'] + " Total" + series.append({ + 'label' : category_total_label, + 'data' : [ [tickIndex, section['totalscore']['score']] ], + 'color' : colors[sectionIndex] + }) + + ticks.append( [tickIndex, section['totallabel']] ) + detail_tooltips[category_total_label] = [section['totalscore']['summary']] + else: + series.append({ + 'label' : section['category'], + 'data' : [ [tickIndex, section['totalscore']['score']] ], + 'color' : colors[sectionIndex] + }) + + ticks.append( [tickIndex, section['totallabel']] ) + detail_tooltips[section['category']] = [section['totalscore']['summary']] + + tickIndex += 1 + sectionSpacer + sectionIndex += 1 + + + detail_tooltips['Dropped Scores'] = dropped_score_tooltips + + ## ----------------------------- Grade overviewew bar ------------------------- ## + totalWeight = 0.0 + sectionIndex = 0 + totalScore = 0.0 + overviewBarX = tickIndex + + for section in grade_summary: + weighted_score = section['totalscore']['score'] * section['weight'] + summary_text = "{0} - {1:.1%} of a possible {2:.0%}".format(section['category'], weighted_score, section['weight']) + + weighted_category_label = section['category'] + " - Weighted" + + if section['totalscore']['score'] > 0: + series.append({ + 'label' : weighted_category_label, + 'data' : [ [overviewBarX, weighted_score] ], + 'color' : colors[sectionIndex] + }) + + detail_tooltips[weighted_category_label] = [ summary_text ] + sectionIndex += 1 + totalWeight += section['weight'] + totalScore += section['totalscore']['score'] * section['weight'] + + ticks += [ [overviewBarX, "Total"] ] + tickIndex += 1 + sectionSpacer + %> + + var series = ${ json.dumps(series) }; + var ticks = ${ json.dumps(ticks) }; + var bottomTicks = ${ json.dumps(bottomTicks) }; + var detail_tooltips = ${ json.dumps(detail_tooltips) }; + var droppedScores = ${ json.dumps(droppedScores) }; + + //Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up + series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "#333"} ); + + var options = { + series: {stack: true, + lines: {show: false, steps: false }, + bars: {show: true, barWidth: 0.8, align: 'center', lineWidth: 0, fill: .8 },}, + xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}, ticks: ticks, labelAngle: 90}, + yaxis: {ticks: [[1, "100%"], [0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"], [0, "0%"]], min: 0.0, max: 1.0, labelWidth: 50}, + grid: { hoverable: true, clickable: true, borderWidth: 1, + markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#ddd"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#e9e9e9"}, + {yaxis: {from: 0.6, to: 0.7 }, color: "#f3f3f3"}, ] }, + legend: {show: false}, + }; + + var $grade_detail_graph = $("#grade-detail-graph"); + if ($grade_detail_graph.length > 0) { + var plot = $.plot($grade_detail_graph, series, options); + + var o = plot.pointOffset({x: ${overviewBarX} , y: ${totalScore}}); + $grade_detail_graph.append('
    ${"{totalscore:.0%}".format(totalscore=totalScore)}
    '); + } + + var previousPoint = null; + $("#grade-detail-graph").bind("plothover", function (event, pos, item) { + $("#x").text(pos.x.toFixed(2)); + $("#y").text(pos.y.toFixed(2)); + if (item) { + if (previousPoint != (item.dataIndex, item.seriesIndex)) { + previousPoint = (item.dataIndex, item.seriesIndex); + + $("#tooltip").remove(); + + if (item.series.label in detail_tooltips) { + var series_tooltips = detail_tooltips[item.series.label]; + if (item.dataIndex < series_tooltips.length) { + var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); + + showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]); + } + } + + } + } else { + $("#tooltip").remove(); + previousPoint = null; + } + }); +}); diff --git a/templates/registration/change_password.html b/templates/registration/change_password.html new file mode 100644 index 0000000000..5a2036d1dc --- /dev/null +++ b/templates/registration/change_password.html @@ -0,0 +1,55 @@ +{% extends "admin/base_site.html" %} +{% load i18n admin_modify adminmedia %} +{% load url from future %} +{% block extrahead %}{{ block.super }} +{% url 'admin:jsi18n' as jsi18nurl %} + +{% endblock %} +{% block extrastyle %}{{ block.super }}{% endblock %} +{% block bodyclass %}{{ opts.app_label }}-{{ opts.object_name.lower }} change-form{% endblock %} +{% block breadcrumbs %}{% if not is_popup %} + +{% endif %}{% endblock %} +{% block content %}
    +
    {% csrf_token %}{% block form_top %}{% endblock %} +
    +{% if is_popup %}{% endif %} +{% if form.errors %} +

    + {% blocktrans count form.errors.items|length as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %} +

    +{% endif %} + +

    {% blocktrans with original.username as username %}Enter a new password for the user {{ username }}.{% endblocktrans %}

    + +
    + +
    + {{ form.password1.errors }} + {# TODO: get required class on label_tag #} + {{ form.password1 }} +
    + +
    + {{ form.password2.errors }} + {# TODO: get required class on label_tag #} + {{ form.password2 }} +

    {% trans 'Enter the same password as above, for verification.' %}

    +
    + +
    + +
    + +
    + + +
    +
    +{% endblock %} diff --git a/templates/registration/logged_out.html b/templates/registration/logged_out.html new file mode 100644 index 0000000000..d339ef0a49 --- /dev/null +++ b/templates/registration/logged_out.html @@ -0,0 +1,12 @@ +{% extends "admin/base_site.html" %} +{% load i18n %} + +{% block breadcrumbs %}{% endblock %} + +{% block content %} + +

    {% trans "Thanks for spending some quality time with the Web site today." %}

    + +

    {% trans 'Log in again' %}

    + +{% endblock %} diff --git a/templates/registration/login.html b/templates/registration/login.html new file mode 100644 index 0000000000..70e58965a4 --- /dev/null +++ b/templates/registration/login.html @@ -0,0 +1,28 @@ +{% extends "registration/base.html" %} + +{% block title %}Log in{% endblock %} + +{% block content %} + +

    Log in

    + +{% if form.errors %} +

    Please correct the errors below:

    +{% endif %} + +
    +{% csrf_token %} +
    +
    {% if form.username.errors %} {{ form.username.errors|join:", " }}{% endif %}
    +
    {{ form.username }}
    +
    {% if form.password.errors %} {{ form.password.errors|join:", " }}{% endif %}
    +
    {{ form.password }}
    +
    +
    +
    +{% endblock %} + +{% block content-related %} +

    If you don't have an account, you can sign +up for one. +{% endblock %} diff --git a/templates/registration/login_error.html b/templates/registration/login_error.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/templates/registration/logout.html b/templates/registration/logout.html new file mode 100644 index 0000000000..3275d2e1b4 --- /dev/null +++ b/templates/registration/logout.html @@ -0,0 +1,8 @@ +{% extends "registration/base.html" %} + +{% block title %}Logged out{% endblock %} + +{% block content %} +

    You've been logged out.

    +

    Thanks for stopping by; when you come back, don't forget to log in again.

    +{% endblock %} \ No newline at end of file diff --git a/templates/registration/password_change_done.html b/templates/registration/password_change_done.html new file mode 100644 index 0000000000..0c0690d5e2 --- /dev/null +++ b/templates/registration/password_change_done.html @@ -0,0 +1,15 @@ +{% extends "admin/base_site.html" %} +{% load i18n %} +{% load url from future %} +{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}{% trans 'Documentation' %} / {% endif %}{% trans 'Change password' %} / {% trans 'Log out' %}{% endblock %} +{% block breadcrumbs %}{% endblock %} + +{% block title %}{% trans 'Password change successful' %}{% endblock %} + +{% block content %} + +

    {% trans 'Password change successful' %}

    + +

    {% trans 'Your password was changed.' %}

    + +{% endblock %} diff --git a/templates/registration/password_change_form.html b/templates/registration/password_change_form.html new file mode 100644 index 0000000000..23d6c1d8af --- /dev/null +++ b/templates/registration/password_change_form.html @@ -0,0 +1,51 @@ +{% extends "admin/base_site.html" %} +{% load i18n adminmedia %} +{% load url from future %} +{% block extrastyle %}{{ block.super }}{% endblock %} +{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}{% trans 'Documentation' %} / {% endif %} {% trans 'Change password' %} / {% trans 'Log out' %}{% endblock %} +{% block breadcrumbs %}{% endblock %} + +{% block title %}{% trans 'Password change' %}{% endblock %} + +{% block content %}
    + +
    {% csrf_token %} +
    +{% if form.errors %} +

    + {% blocktrans count form.errors.items|length as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %} +

    +{% endif %} + +

    {% trans 'Password change' %}

    + +

    {% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}

    + +
    + +
    + {{ form.old_password.errors }} + {{ form.old_password }} +
    + +
    + {{ form.new_password1.errors }} + {{ form.new_password1 }} +
    + +
    +{{ form.new_password2.errors }} + {{ form.new_password2 }} +
    + +
    + +
    + +
    + + +
    +
    + +{% endblock %} diff --git a/templates/registration/password_reset_complete.html b/templates/registration/password_reset_complete.html new file mode 100644 index 0000000000..0338ce57b0 --- /dev/null +++ b/templates/registration/password_reset_complete.html @@ -0,0 +1,9 @@ +{% load i18n %} + +

    Password reset complete

    + +{% block content %} + +Your password has been set. You may go ahead and log in now. + +{% endblock %} diff --git a/templates/registration/password_reset_confirm.html b/templates/registration/password_reset_confirm.html new file mode 100644 index 0000000000..9daa598a37 --- /dev/null +++ b/templates/registration/password_reset_confirm.html @@ -0,0 +1,45 @@ + + + + Reset password - MITx 6.002x + + + + + + + + + +{% block content %} +
    + +{% if validlink %} + +

    Enter new password

    + +

    Please enter your new password twice so we can verify you typed it in correctly.

    + +
    {% csrf_token %} +{{ form.new_password1.errors }} +

    {{ form.new_password1 }}

    +{{ form.new_password2.errors }} +

    {{ form.new_password2 }}

    +

    +
    + +{% else %} + +

    Password reset unsuccessful

    + +

    The password reset link was invalid, possibly because the link has already been used. Please request a new password reset.

    + +{% endif %} + +
    +{% endblock %} + + + diff --git a/templates/registration/password_reset_done.html b/templates/registration/password_reset_done.html new file mode 100644 index 0000000000..f47a520e0a --- /dev/null +++ b/templates/registration/password_reset_done.html @@ -0,0 +1,3 @@ +

    Password reset successful

    + +

    We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.

    diff --git a/templates/registration/password_reset_email.html b/templates/registration/password_reset_email.html new file mode 100644 index 0000000000..d5c4da23c1 --- /dev/null +++ b/templates/registration/password_reset_email.html @@ -0,0 +1,14 @@ +{% load i18n %}{% load url from future %}{% autoescape off %} +{% blocktrans %}You're receiving this e-mail because you requested a password reset for your user account at {{ site_name }}.{% endblocktrans %} + +{% trans "Please go to the following page and choose a new password:" %} +{% block reset_link %} +{{ protocol }}://{{ site_name }}{% url 'django.contrib.auth.views.password_reset_confirm' uidb36=uid token=token %} +{% endblock %} +{% trans "Your username, in case you've forgotten:" %} {{ user.username }} + +{% trans "Thanks for using our site!" %} + +{% blocktrans %}The MITx team{% endblocktrans %} + +{% endautoescape %} diff --git a/templates/registration/reg_complete.html b/templates/registration/reg_complete.html new file mode 100644 index 0000000000..256146f3b4 --- /dev/null +++ b/templates/registration/reg_complete.html @@ -0,0 +1,3 @@ +

    Check your email

    +

    An activation link has been sent to ${ email }, along with +instructions for activating your account.

    diff --git a/templates/registration/registration_complete.html b/templates/registration/registration_complete.html new file mode 100644 index 0000000000..9f0cea41db --- /dev/null +++ b/templates/registration/registration_complete.html @@ -0,0 +1,8 @@ +{% extends "registration/base.html" %} + +{% block title %}Registration complete{% endblock %} + +{% block content %} +

    Check your email

    +

    An activation link has been sent to the email address you supplied, along with instructions for activating your account.

    +{% endblock %} \ No newline at end of file diff --git a/templates/registration/registration_form.html b/templates/registration/registration_form.html new file mode 100644 index 0000000000..1e9d630639 --- /dev/null +++ b/templates/registration/registration_form.html @@ -0,0 +1,58 @@ +{% extends "registration/base.html" %} + +{% block title %}Sign up{% endblock %} + +{% block content %} + + {% if form.errors %} +

    Please correct the errors below: {{ form.non_field_errors }}

    + {% endif %} + +

    Create an account

    + +
    +{% csrf_token %} +

    + + {% if form.username.errors %} +

    {{ form.username.errors.as_text }}

    + {% endif %} + {{ form.username }} +

    +

    + + {% if form.email.errors %} +

    {{ form.email.errors.as_text }}

    + {% endif %} + {{ form.email }} +

    +

    + + {% if form.password1.errors %} +

    {{ form.password1.errors.as_text }}

    + {% endif %} + {{ form.password1 }} +

    +

    + + {% if form.password2.errors %} +

    {{ form.password2.errors.as_text }}

    + {% endif %} + {{ form.password2 }} +

    +

    +
    + +{% endblock %} + +{% block content-related %} +

    Fill out the form to the left (all fields are required), and your +account will be created; you'll be sent an email with instructions on how +to finish your registration.

    + +

    We'll only use your email to send you signup instructions. We hate spam +as much as you do.

    + +

    This account will let you log into the ticket tracker, claim tickets, +and be exempt from spam filtering.

    +{% endblock %} diff --git a/templates/sass/.DS_Store b/templates/sass/.DS_Store new file mode 100644 index 0000000000..5b92100c38 Binary files /dev/null and b/templates/sass/.DS_Store differ diff --git a/templates/sass/README b/templates/sass/README new file mode 100644 index 0000000000..fcd2d290a5 --- /dev/null +++ b/templates/sass/README @@ -0,0 +1,17 @@ +This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster development of CSS. For more information about sass: http://sass-lang.com + +To use sass all you need to do is enter: +$ gem install sass + +We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon + +To use bourbon you need to install it with: +$ gem install bourbon + +Then to generate Sass files cd to templates directory and watch the sass files for developement: +$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb + +To generate a compressed css file for production: +$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb --style :compressed + +These will automatically generate the CSS files on save. diff --git a/templates/sass/_gradebook.scss b/templates/sass/_gradebook.scss new file mode 100644 index 0000000000..3282d4141b --- /dev/null +++ b/templates/sass/_gradebook.scss @@ -0,0 +1,11 @@ +div.gradebook-wrapper { + @extend .table-wrapper; + + section.gradebook-content { + @extend .content; + + h1 { + @extend .top-header; + } + } +} diff --git a/templates/sass/_help.scss b/templates/sass/_help.scss new file mode 100644 index 0000000000..2784b41c82 --- /dev/null +++ b/templates/sass/_help.scss @@ -0,0 +1,54 @@ +section.help.main-content { + padding: lh(); + + h1 { + margin-top: 0; + margin-bottom: lh(); + padding-bottom: lh(); + border-bottom: 1px solid #ddd; + } + + p { + max-width: 700px; + } + + h2 { + margin-top: 0; + } + + section.self-help { + margin-bottom: lh(); + margin-right: flex-gutter(); + float: left; + width: flex-grid(6); + + ul { + margin-left: flex-gutter(6); + + li { + margin-bottom: lh(.5); + } + } + } + + section.help-email { + float: left; + width: flex-grid(6); + + dl { + margin-bottom: lh(); + display: block; + + dd { + margin-bottom: lh(); + } + + dt { + font-weight: bold; + float: left; + clear: left; + width: flex-grid(2, 6); + } + } + } +} diff --git a/templates/sass/_info.scss b/templates/sass/_info.scss new file mode 100644 index 0000000000..910036b093 --- /dev/null +++ b/templates/sass/_info.scss @@ -0,0 +1,109 @@ +div.info-wrapper { + @extend .table-wrapper; + + section.updates { + @extend .content; + + > h1 { + @extend .top-header; + } + + > p { + margin-bottom: lh(); + } + + > ol { + list-style: none; + + > li { + padding-bottom: lh(.5); + margin-bottom: lh(.5); + @extend .clearfix; + border-bottom: 1px solid #e3e3e3; + + &:first-child { + padding: lh(.5); + margin-left: (-(lh(.5))); + background: $cream; + border-bottom: 1px solid darken($cream, 10%); + } + + h2 { + float: left; + width: flex-grid(2, 9); + margin: 0 flex-gutter() 0 0; + } + + section.update-description { + float: left; + width: flex-grid(7, 9); + margin-bottom: 0; + + p { + &:last-child { + margin-bottom: 0; + } + } + } + } + } + } + + section.handouts { + @extend .sidebar; + @include border-radius(0 4px 4px 0); + border-right: 0; + border-left: 1px solid #d3d3d3; + + h1 { + padding: lh(.5) lh(); + font-size: 18px; + margin: 0 ; + @extend .bottom-border; + } + + ol { + list-style: none; + + li { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + @extend .clearfix; + + p { + padding: 7px lh(); + margin: 0; + text-transform: none; + letter-spacing: 0; + font-size: $body-font-size; + + &:hover { + background: #efefef; + } + + a { + display: inline; + padding: 0; + + &:hover { + text-decoration: underline; + background: none; + } + } + } + + a { + @include transition(); + color: lighten($text-color, 10%); + display: block; + padding: 7px lh(); + text-decoration: none; + + &:hover { + background: #efefef; + } + } + } + } + } +} diff --git a/templates/sass/_profile.scss b/templates/sass/_profile.scss new file mode 100644 index 0000000000..3182d61b36 --- /dev/null +++ b/templates/sass/_profile.scss @@ -0,0 +1,153 @@ +div.profile-wrapper { + @extend .table-wrapper; + color: #000; + + section.user-info { + @extend .sidebar; + @include border-radius(0px 4px 4px 0); + border-left: 1px solid #d3d3d3; + border-right: 0; + + h1 { + padding: lh(.5) lh(); + font-size: 18px; + margin: 0 ; + @extend .bottom-border; + } + + ul { + list-style: none; + + li { + @include transition(); + color: lighten($text-color, 10%); + display: block; + text-decoration: none; + @include box-shadow(0 1px 0 #eee); + padding: 7px lh(); + border-bottom: 1px solid #d3d3d3; + position: relative; + + div#location_sub, div#language_sub { + font-weight: bold; + @include inline-block(); + + form { + width: 100%; + } + + input { + + &[type="text"] { + margin: lh(.5) 0; + width: 100%; + @include box-sizing(border-box); + } + + &[type="input"]{ + } + } + + &:empty { + padding: 0; + } + } + + div#description { + font-size: 12px; + } + + a#change_language, a#change_location { + position: absolute; + top: 9px; + right: lh(.5); + text-transform: uppercase; + font-size: 12px; + color: #999; + + &:hover { + color: #555; + } + } + } + } + + div#change_password_pop { + padding: 7px lh(); + color: #4D4D4D; + } + } + + section.course-info { + @extend .content; + + > h1 { + @extend .top-header; + } + + div#grade-detail-graph { + width: 100%; + min-height: 300px; + } + + > ol { + border-top: 1px solid #e3e3e3; + list-style: none; + margin-top: lh(); + + > li { + @extend .clearfix; + border-bottom: 1px solid #e3e3e3; + display: table; + padding: lh() 0; + width: 100%; + + &:last-child { + border-bottom: 0px; + } + + h2 { + border-right: 1px dashed #ddd; + @include box-sizing(border-box); + display: table-cell; + margin: 0; + padding: 0; + padding-right: flex-gutter(9); + width: flex-grid(2, 9); + } + + ol.sections { + display: table-cell; + list-style: none; + padding-left: flex-gutter(9); + width: flex-grid(7, 9); + + > li { + padding:0 0 lh() 0; + + &:first-child { + padding-top: 0; + } + + &:last-child { + border-bottom: 0; + } + + h3 { + color: #666; + } + + ol { + list-style: none; + + li { + display: inline-block; + padding-right: 1em; + } + } + } + } + } + } + } +} diff --git a/templates/sass/_textbook.scss b/templates/sass/_textbook.scss new file mode 100644 index 0000000000..d1747e9e3b --- /dev/null +++ b/templates/sass/_textbook.scss @@ -0,0 +1,132 @@ +div.book-wrapper { + @extend .table-wrapper; + + section.book-sidebar { + @extend .sidebar; + @include box-sizing(border-box); + @extend .tran; + + ul#booknav { + font-size: 12px; + + a { + color: #000; + + &:hover { + color: #666; + } + } + + li { + background: none; + padding-left: 30px; + + div.hitarea { + margin-left: -22px; + background-image: url('/static/images/treeview-default.gif'); + position: relative; + top: 4px; + + &:hover { + opacity: 0.6; + filter: alpha(opacity=60); + } + } + + ul { + background: none; + } + } + + > li { + border-bottom: 1px solid #d3d3d3; + @include box-shadow(0 1px 0 #eee); + padding: 7px 7px 7px 30px; + } + } + } + + section.book { + @extend .content; + + nav { + @extend .topbar; + @extend .clearfix; + + a { + @extend .block-link; + padding: 0 lh(); + } + + ul { + @extend .clearfix; + + li { + &.last { + float: left; + display: block; + + a { + @include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%)); + border-right: 1px solid darken(#f6efd4, 20%); + border-left: 0; + } + } + + &.next { + display: block; + float: right; + } + } + } + + &.bottom-nav { + margin-top: lh(); + margin-bottom: -(lh()); + border-bottom: 0; + border-top: 1px solid #EDDFAA; + } + } + + section.page { + text-align: center; + + img { + border: 1px solid $border-color; + max-width: 100%; + } + } + } + + &.closed { + section.book-sidebar { + width: flex-grid(.6); + + header#open_close_accordion { + padding: 0; + + a { + background-image: url('/static/images/slide-right-icon.png'); + } + + h2 { + visibility: hidden; + width: 10px; + padding: 0; + } + } + + ul#booknav { + visibility: hidden; + width: 10px; + padding: 0; + overflow: hidden; + max-height: 100px; + } + } + + section.course-content { + width: flex-grid(11.5) + flex-gutter(); + } + } +} diff --git a/templates/sass/application.scss b/templates/sass/application.scss new file mode 100644 index 0000000000..b949b2fac7 --- /dev/null +++ b/templates/sass/application.scss @@ -0,0 +1,18 @@ +@import "bourbon/bourbon"; + +// Base layout +@import "base/reset", "base/font-face"; +@import "base/variables", "base/functions", "base/extends", "base/base"; +@import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal"; +@import "plugins/jquery-ui-1.8.16.custom"; + +// pages +@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier"; +@import "textbook"; +@import "info"; +@import "profile"; +@import "gradebook"; +@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki", "wiki/table"; +@import "help"; + +@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar", "discussion/modals", "discussion/profile", "discussion/badges"; diff --git a/templates/sass/base/_base.scss b/templates/sass/base/_base.scss new file mode 100644 index 0000000000..3f985ea666 --- /dev/null +++ b/templates/sass/base/_base.scss @@ -0,0 +1,77 @@ +:focus { + outline-color: #ccc; +} + +h1, h2, h3, h4, h5, h6 { + a { + color: #000; + } +} + +h1 { + font-size:1.6em; + margin:20px 0 10px 0; +} + +h2 { + font-size: $body-font-size; + font-weight: bold; + letter-spacing: 1px; + margin:20px 0 10px 0; + text-transform: uppercase; +} + +p { + margin-bottom: $body-line-height; +} + +em { + font-style: italic; +} + +img { + max-width: 100%; + height: auto; +} + +#{$all-text-inputs}, textarea { + @include box-shadow(0 -1px 0 #fff); + @include linear-gradient(#eee, #fff); + border: 1px solid #999; + font: $body-font-size $body-font-family; + padding: 4px; + + &:focus { + border-color: $mit-red; + } +} + +a { + color: $mit-red; + + &:link { + color: $mit-red; + } + + &:visited { + color: darken($mit-red, 10%); + } + + &:link, &:visited { + text-decoration:none; + } + + p &, li > &, span > &, .inline { + border-bottom: 1px solid #bbb; + font-style: italic; + } + + &:hover, &:focus { + color: #000; + } +} + +input[type="submit"], input[type="button"], button { + @extend .button; +} + diff --git a/templates/sass/base/_extends.scss b/templates/sass/base/_extends.scss new file mode 100644 index 0000000000..aa9e4e65dc --- /dev/null +++ b/templates/sass/base/_extends.scss @@ -0,0 +1,221 @@ +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.wrapper { + margin: 0 auto; + max-width: $fg-max-width; + min-width: $fg-min-width; + text-align: left; + width: flex-grid(12); + + div.table-wrapper { + display: table; + width: flex-grid(12); + } +} + +h1.top-header { + background: #f3f3f3; + border-bottom: 1px solid #e3e3e3; + margin: (-(lh())) (-(lh())) lh(); + padding: lh(); +} + +.button { + border: 1px solid darken(#888, 10%); + @include border-radius(3px); + @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc); + color: #fff; + cursor: pointer; + font: bold $body-font-size $body-font-family; + @include linear-gradient(lighten(#888, 5%), darken(#888, 5%)); + padding: 4px 8px; + text-decoration: none; + text-shadow: none; + -webkit-font-smoothing: antialiased; + + &:hover, &:focus { + @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc); + @include linear-gradient(lighten(#888, 10%), darken(#888, 5%)); + border: 1px solid darken(#888, 20%); + } +} + +.content { + @include box-shadow(inset 0 0 2px 3px #f3f3f3); + @include box-sizing(border-box); + display: table-cell; + padding: lh(); + vertical-align: top; + width: flex-grid(9) + flex-gutter(); + + @media print { + @include box-shadow(none); + } +} + +.sidebar { + background: #e3e3e3; + @include border-radius(4px 0 0 4px); + border-right: 1px solid #d3d3d3; + @include box-shadow( inset 0 0 0 1px #f6f6f6); + @include box-sizing(border-box); + display: table-cell; + font-family: $body-font-family; + position: relative; + text-shadow: 0 1px 0 #f1f1f1; + vertical-align: top; + width: flex-grid(3); + + h1, h2 { + font-size: 18px; + font-weight: bold; + letter-spacing: 0; + text-transform: none; + } + + a { + font-style: normal; + border: none; + } + + .bottom-border { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + } + + @media print { + display: none; + } + + h3 { + border: none; + border-bottom: 1px solid #d3d3d3; + @extend .bottom-border; + background: none; + color: #000; + font-weight: normal; + margin: 0; + overflow: hidden; + + a { + color: lighten($text-color, 10%); + display: block; + font-size: $body-font-size; + padding: 7px 7px 7px 30px; + text-decoration: none; + @include transition(); + + &:hover { + background: #efefef; + @include box-shadow(0 1px 0 #fff); + } + } + + span.ui-icon { + background-image: url(images/ui-icons_454545_256x240.png); + } + + &.active { + background: none; + border: 0; + border-bottom: 1px solid #bbb; + @include box-shadow(none); + color: #000; + font-weight: bold; + + a { + color: #000; + } + } + } + + header#open_close_accordion { + border-bottom: 1px solid #d3d3d3; + @include box-shadow(0 1px 0 #eee); + padding: lh(.5) lh(); + position: relative; + + h2 { + padding-right: 20px; + margin: 0; + } + + a { + background: #eee url('/static/images/slide-left-icon.png') center center no-repeat; + border: 1px solid #D3D3D3; + @include border-radius(3px 0 0 3px); + height: 16px; + padding: 8px; + position: absolute; + right: -1px; + text-indent: -9999px; + top: 6px; + width: 16px; + + &:hover { + background-color: white; + } + } + } + + a.button { + text-decoration: none; + } +} + +.topbar { + @extend .clearfix; + background: $cream; + border-bottom: 1px solid darken($cream, 10%); + @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff); + font-size: 12px; + margin: (-$body-line-height) (-$body-line-height) $body-line-height; + text-shadow: 0 1px 0 #fff; + line-height: 46px; + height:46px; + + @media print { + display: none; + } + + a { + border-bottom: 0; + color: darken($cream, 80%); + + &:hover { + color: darken($cream, 60%); + text-decoration: none; + } + + &.block-link { + background: darken($cream, 5%); + border-left: 1px solid darken($cream, 20%); + @include box-shadow(inset 1px 0 0 lighten($cream, 5%)); + display: block; + text-transform: uppercase; + + &:hover { + background: none; + } + } + } +} + +.tran { + @include transition( all, .2s, $ease-in-out-quad); +} + +p.ie-warning { + display: block !important; + line-height: 1.3em; + background: yellow; + padding: lh(); + text-align: left; + margin-bottom: 0; +} diff --git a/templates/sass/base/_font-face.scss b/templates/sass/base/_font-face.scss new file mode 100644 index 0000000000..33162954b8 --- /dev/null +++ b/templates/sass/base/_font-face.scss @@ -0,0 +1,125 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */ + + +// Not used in UI +// @font-face { +// font-family: 'Open Sans'; +// src: url('/static/fonts/OpenSans-Light-webfont.eot'); +// src: url('/static/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), +// url('/static/fonts/OpenSans-Light-webfont.woff') format('woff'), +// url('/static/fonts/OpenSans-Light-webfont.ttf') format('truetype'), +// url('/static/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg'); +// font-weight: 300; +// font-style: normal; + +// } + +// @font-face { +// font-family: 'Open Sans'; +// src: url('/static/fonts/OpenSans-LightItalic-webfont.eot'); +// src: url('/static/fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), +// url('/static/fonts/OpenSans-LightItalic-webfont.woff') format('woff'), +// url('/static/fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'), +// url('/static/fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg'); +// font-weight: 300; +// font-style: italic; + +// } + +@font-face { + font-family: 'Open Sans'; + src: url('/static/fonts/OpenSans-Regular-webfont.eot'); + src: url('/static/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('/static/fonts/OpenSans-Regular-webfont.woff') format('woff'), + url('/static/fonts/OpenSans-Regular-webfont.ttf') format('truetype'), + url('/static/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg'); + font-weight: 600; + font-style: normal; + +} + +@font-face { + font-family: 'Open Sans'; + src: url('/static/fonts/OpenSans-Italic-webfont.eot'); + src: url('/static/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('/static/fonts/OpenSans-Italic-webfont.woff') format('woff'), + url('/static/fonts/OpenSans-Italic-webfont.ttf') format('truetype'), + url('/static/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg'); + font-weight: 400; + font-style: italic; + +} + +// Not used in UI +// @font-face { +// font-family: 'Open Sans'; +// src: url('/static/fonts/OpenSans-Semibold-webfont.eot'); +// src: url('/static/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), +// url('/static/fonts/OpenSans-Semibold-webfont.woff') format('woff'), +// url('/static/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'), +// url('/static/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg'); +// font-weight: 600; +// font-style: normal; + +// } + +// @font-face { +// font-family: 'Open Sans'; +// src: url('/static/fonts/OpenSans-SemiboldItalic-webfont.eot'); +// src: url('/static/fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), +// url('/static/fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'), +// url('/static/fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), +// url('/static/fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg'); +// font-weight: 600; +// font-style: italic; + +// } + +@font-face { + font-family: 'Open Sans'; + src: url('/static/fonts/OpenSans-Bold-webfont.eot'); + src: url('/static/fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('/static/fonts/OpenSans-Bold-webfont.woff') format('woff'), + url('/static/fonts/OpenSans-Bold-webfont.ttf') format('truetype'), + url('/static/fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); + font-weight: 700; + font-style: normal; + +} + +@font-face { + font-family: 'Open Sans'; + src: url('/static/fonts/OpenSans-BoldItalic-webfont.eot'); + src: url('/static/fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('/static/fonts/OpenSans-BoldItalic-webfont.woff') format('woff'), + url('/static/fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'), + url('/static/fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg'); + font-weight: 700; + font-style: italic; + +} + +@font-face { + font-family: 'Open Sans'; + src: url('/static/fonts/OpenSans-ExtraBold-webfont.eot'); + src: url('/static/fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), + url('/static/fonts/OpenSans-ExtraBold-webfont.woff') format('woff'), + url('/static/fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'), + url('/static/fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg'); + font-weight: 800; + font-style: normal; + +} + +@font-face { + font-family: 'Open Sans'; + src: url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot'); + src: url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), + url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), + url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg'); + font-weight: 800; + font-style: italic; + +} + diff --git a/templates/sass/base/_functions.scss b/templates/sass/base/_functions.scss new file mode 100644 index 0000000000..2c4195d41b --- /dev/null +++ b/templates/sass/base/_functions.scss @@ -0,0 +1,22 @@ +// 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; +} diff --git a/templates/sass/base/_reset.scss b/templates/sass/base/_reset.scss new file mode 100644 index 0000000000..3cf4758c7b --- /dev/null +++ b/templates/sass/base/_reset.scss @@ -0,0 +1,102 @@ +/* +html5doctor.com Reset Stylesheet +v1.6.1 +Last Updated: 2010-09-17 +Author: Richard Clark - http://richclarkdesign.com +Twitter: @rich_clark +*/ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, var, +b, i, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} + +body { + line-height:1; +} + +article,aside,details,figcaption,figure, +footer,header,hgroup,menu,nav,section { + display:block; +} + +nav ul { + list-style:none; +} + +blockquote, q { + quotes:none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content:''; + content:none; +} + +a { + margin:0; + padding:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} + +/* change colours to suit your needs */ +ins { + background-color:#ff9; + color:#000; + text-decoration:none; +} + +/* change colours to suit your needs */ +mark { + background-color:#ff9; + color:#000; + font-style:italic; + font-weight:bold; +} + +del { + text-decoration: line-through; +} + +abbr[title], dfn[title] { + border-bottom:1px dotted; + cursor:help; +} + +table { + border-collapse:collapse; + border-spacing:0; +} + +/* change border colour to suit your needs */ +hr { + display:block; + height:1px; + border:0; + border-top:1px solid #cccccc; + margin:1em 0; + padding:0; +} + +input, select { + vertical-align:middle; +} diff --git a/templates/sass/base/_variables.scss b/templates/sass/base/_variables.scss new file mode 100644 index 0000000000..60dd764872 --- /dev/null +++ b/templates/sass/base/_variables.scss @@ -0,0 +1,32 @@ +// Variables +// ---------------------------------------- // + +// fonts +$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;; +$body-font-size: 14px; + +// grid +$columns: 12; +$column-width: 80px; +$gutter-width: 25px; +$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width); + +$gw-column: perc($column-width); +$gw-gutter: perc($gutter-width); +$body-line-height: golden-ratio($body-font-size, 1); + +//Flexible grid +$fg-column: $column-width; +$fg-gutter: $gutter-width; +$fg-max-columns: $columns; +$fg-max-width: 1400px; +$fg-min-width: 810px; + +// color +$light-gray: #ddd; +$dark-gray: #333; +$mit-red: #993333; +$cream: #F6EFD4; + +$text-color: $dark-gray; +$border-color: $light-gray; diff --git a/templates/sass/bourbon/_bourbon.scss b/templates/sass/bourbon/_bourbon.scss new file mode 100644 index 0000000000..447167c5ab --- /dev/null +++ b/templates/sass/bourbon/_bourbon.scss @@ -0,0 +1,29 @@ +// Custom Functions +@import "functions/deprecated-webkit-gradient"; +@import "functions/grid-width"; +@import "functions/modular-scale"; +@import "functions/tint-shade"; + +// CSS3 Mixins +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/background-image"; +@import "css3/background-size"; +@import "css3/border-image"; +@import "css3/border-radius"; +@import "css3/box-shadow"; +@import "css3/box-sizing"; +@import "css3/columns"; +@import "css3/flex-box"; +@import "css3/inline-block"; +@import "css3/linear-gradient"; +@import "css3/radial-gradient"; +@import "css3/transform"; +@import "css3/transition"; + +// Addons & other mixins +@import "addons/button"; +@import "addons/font-family"; +@import "addons/html5-input-types"; +@import "addons/position"; +@import "addons/timing-functions"; diff --git a/templates/sass/bourbon/addons/_button.scss b/templates/sass/bourbon/addons/_button.scss new file mode 100644 index 0000000000..1d32125140 --- /dev/null +++ b/templates/sass/bourbon/addons/_button.scss @@ -0,0 +1,267 @@ +@mixin button ($style: simple, $base-color: #4294f0) { + + @if type-of($style) == color { + $base-color: $style; + $style: simple; + } + + // 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); + } + } + + // Colored button + @else { + @if $style == simple { + @include simple($base-color); + } + + @else if $style == shiny { + @include shiny($base-color); + } + + @else if $style == pill { + @include pill($base-color); + } + } +} + + +// 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%); + $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); + color: $color; + display: inline; + font-size: 11px; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: 6px 18px 7px; + text-shadow: 0 1px 0 $text-shadow; + -webkit-background-clip: padding-box; + + &:hover { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $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; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + } + + &:active { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @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); + } +} + + +// 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); + $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%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @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); + @include box-shadow(inset 0 1px 0 0 $inset-shadow); + color: $color; + 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-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); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @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); + } +} + + +// 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%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @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); + @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3); + color: $color; + display: inline; + font-size: 11px; + font-weight: normal; + line-height: 1; + @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%); + $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); + } + + 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%); + + @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; + border-bottom: 1px solid $border-bottom-active; + @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff); + text-shadow: 0 -1px 1px $text-shadow-active; + } +} + diff --git a/templates/sass/bourbon/addons/_font-family.scss b/templates/sass/bourbon/addons/_font-family.scss new file mode 100644 index 0000000000..df8a80ddfc --- /dev/null +++ b/templates/sass/bourbon/addons/_font-family.scss @@ -0,0 +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; diff --git a/templates/sass/bourbon/addons/_html5-input-types.scss b/templates/sass/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000000..9d86fbb4d4 --- /dev/null +++ b/templates/sass/bourbon/addons/_html5-input-types.scss @@ -0,0 +1,36 @@ +//************************************************************************// +// Generate a variable ($all-text-inputs) with a list of all html5 +// input types that have a text-based input, excluding textarea. +// http://diveintohtml5.org/forms.html +//************************************************************************// +$inputs-list: 'input[type="email"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="url"]', + + // Webkit & Gecko may change the display of these in the future + 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="time"]', + 'input[type="week"]'; + +$unquoted-inputs-list: (); + +@each $input-type in $inputs-list { + $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); +} + +$all-text-inputs: $unquoted-inputs-list; + +// You must use interpolation on the variable: +// #{$all-text-inputs} +//************************************************************************// +// #{$all-text-inputs}, textarea { +// border: 1px solid red; +// } diff --git a/templates/sass/bourbon/addons/_position.scss b/templates/sass/bourbon/addons/_position.scss new file mode 100644 index 0000000000..6ad330f1df --- /dev/null +++ b/templates/sass/bourbon/addons/_position.scss @@ -0,0 +1,30 @@ +@mixin position ($position: relative, $coordinates: 0 0 0 0) { + + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + position: $position; + + @if not(unitless($top)) { + top: $top; + } + + @if not(unitless($right)) { + right: $right; + } + + @if not(unitless($bottom)) { + bottom: $bottom; + } + + @if not(unitless($left)) { + left: $left; + } +} diff --git a/templates/sass/bourbon/addons/_timing-functions.scss b/templates/sass/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000000..51b2410914 --- /dev/null +++ b/templates/sass/bourbon/addons/_timing-functions.scss @@ -0,0 +1,32 @@ +// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html + +// EASE IN +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +// EASE OUT +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +// EASE IN OUT +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/templates/sass/bourbon/css3/_animation.scss b/templates/sass/bourbon/css3/_animation.scss new file mode 100644 index 0000000000..f99e06eb6f --- /dev/null +++ b/templates/sass/bourbon/css3/_animation.scss @@ -0,0 +1,171 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +// Official animation shorthand property. +@mixin animation ($animation-1, + $animation-2: false, $animation-3: false, + $animation-4: false, $animation-5: false, + $animation-6: false, $animation-7: false, + $animation-8: false, $animation-9: false) + { + $full: compact($animation-1, $animation-2, $animation-3, $animation-4, + $animation-5, $animation-6, $animation-7, $animation-8, $animation-9); + + -webkit-animation: $full; + -moz-animation: $full; + animation: $full; +} + +// Individual Animation Properties +@mixin animation-name ($name-1, + $name-2: false, $name-3: false, + $name-4: false, $name-5: false, + $name-6: false, $name-7: false, + $name-8: false, $name-9: false) + { + $full: compact($name-1, $name-2, $name-3, $name-4, + $name-5, $name-6, $name-7, $name-8, $name-9); + + -webkit-animation-name: $full; + -moz-animation-name: $full; + animation-name: $full; +} + + +@mixin animation-duration ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, + $time-5, $time-6, $time-7, $time-8, $time-9); + + -webkit-animation-duration: $full; + -moz-animation-duration: $full; + animation-duration: $full; +} + + +@mixin animation-timing-function ($motion-1: ease, +// ease | linear | ease-in | ease-out | ease-in-out + $motion-2: false, $motion-3: false, + $motion-4: false, $motion-5: false, + $motion-6: false, $motion-7: false, + $motion-8: false, $motion-9: false) + { + $full: compact($motion-1, $motion-2, $motion-3, $motion-4, + $motion-5, $motion-6, $motion-7, $motion-8, $motion-9); + + -webkit-animation-timing-function: $full; + -moz-animation-timing-function: $full; + animation-timing-function: $full; +} + + +@mixin animation-iteration-count ($value-1: 1, +// infinite | + $value-2: false, $value-3: false, + $value-4: false, $value-5: false, + $value-6: false, $value-7: false, + $value-8: false, $value-9: false) + { + $full: compact($value-1, $value-2, $value-3, $value-4, + $value-5, $value-6, $value-7, $value-8, $value-9); + + -webkit-animation-iteration-count: $full; + -moz-animation-iteration-count: $full; + animation-iteration-count: $full; +} + + +@mixin animation-direction ($direction-1: normal, +// normal | alternate + $direction-2: false, $direction-3: false, + $direction-4: false, $direction-5: false, + $direction-6: false, $direction-7: false, + $direction-8: false, $direction-9: false) + { + $full: compact($direction-1, $direction-2, $direction-3, $direction-4, + $direction-5, $direction-6, $direction-7, $direction-8, $direction-9); + + -webkit-animation-direction: $full; + -moz-animation-direction: $full; + animation-direction: $full; +} + + +@mixin animation-play-state ($state-1: running, +// running | paused + $state-2: false, $state-3: false, + $state-4: false, $state-5: false, + $state-6: false, $state-7: false, + $state-8: false, $state-9: false) + { + $full: compact($state-1, $state-2, $state-3, $state-4, + $state-5, $state-6, $state-7, $state-8, $state-9); + + -webkit-animation-play-state: $full; + -moz-animation-play-state: $full; + animation-play-state: $full; +} + + +@mixin animation-delay ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, + $time-5, $time-6, $time-7, $time-8, $time-9); + + -webkit-animation-delay: $full; + -moz-animation-delay: $full; + animation-delay: $full; +} + + +@mixin animation-fill-mode ($mode-1: none, +// http://goo.gl/l6ckm +// none | forwards | backwards | both + $mode-2: false, $mode-3: false, + $mode-4: false, $mode-5: false, + $mode-6: false, $mode-7: false, + $mode-8: false, $mode-9: false) + { + $full: compact($mode-1, $mode-2, $mode-3, $mode-4, + $mode-5, $mode-6, $mode-7, $mode-8, $mode-9); + + -webkit-animation-fill-mode: $full; + -moz-animation-fill-mode: $full; + animation-fill-mode: $full; +} + + +// Deprecated +@mixin animation-basic ($name, $time: 0, $motion: ease) { + $length-of-name: length($name); + $length-of-time: length($time); + $length-of-motion: length($motion); + + @if $length-of-name > 1 { + @include animation-name(zip($name)); + } @else { + @include animation-name( $name); + } + + @if $length-of-time > 1 { + @include animation-duration(zip($time)); + } @else { + @include animation-duration( $time); + } + + @if $length-of-motion > 1 { + @include animation-timing-function(zip($motion)); + } @else { + @include animation-timing-function( $motion); + } + @warn "The animation-basic mixin is deprecated. Use the animation mixin instead."; +} + diff --git a/templates/sass/bourbon/css3/_appearance.scss b/templates/sass/bourbon/css3/_appearance.scss new file mode 100644 index 0000000000..548767e166 --- /dev/null +++ b/templates/sass/bourbon/css3/_appearance.scss @@ -0,0 +1,7 @@ +@mixin appearance ($value) { + -webkit-appearance: $value; + -moz-appearance: $value; + -ms-appearance: $value; + -o-appearance: $value; + appearance: $value; +} diff --git a/templates/sass/bourbon/css3/_background-image.scss b/templates/sass/bourbon/css3/_background-image.scss new file mode 100644 index 0000000000..b11ab3fd53 --- /dev/null +++ b/templates/sass/bourbon/css3/_background-image.scss @@ -0,0 +1,71 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// +@import "../functions/linear-gradient"; +@import "../functions/radial-gradient"; + +@mixin background-image( + $image-1 , $image-2: false, + $image-3: false, $image-4: false, + $image-5: false, $image-6: false, + $image-7: false, $image-8: false, + $image-9: false, $image-10: false +) { + $images: compact($image-1, $image-2, + $image-3, $image-4, + $image-5, $image-6, + $image-7, $image-8, + $image-9, $image-10); + + background-image: add-prefix($images, webkit); + background-image: add-prefix($images, moz); + background-image: add-prefix($images, ms); + background-image: add-prefix($images, o); + background-image: add-prefix($images); +} + + +@function add-prefix($images, $vendor: false) { + $images-prefixed: (); + + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + + $gradient: render-gradients($gradient-args, $gradient-type, $vendor); + $images-prefixed: append($images-prefixed, $gradient, comma); + } + + // If variable is a string - Image + @else if $type == string { + $images-prefixed: join($images-prefixed, nth($images, $i), comma); + } + } + @return $images-prefixed; +} + + +@function render-gradients($gradients, $gradient-type, $vendor: false) { + $vendor-gradients: false; + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients); + } + + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} + +//Examples: + //@include background-image(linear-gradient(top, orange, red)); + //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); + //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); + //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); + //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red); diff --git a/templates/sass/bourbon/css3/_background-size.scss b/templates/sass/bourbon/css3/_background-size.scss new file mode 100644 index 0000000000..4bba11027d --- /dev/null +++ b/templates/sass/bourbon/css3/_background-size.scss @@ -0,0 +1,15 @@ +@mixin background-size ($length-1, + $length-2: false, $length-3: false, + $length-4: false, $length-5: false, + $length-6: false, $length-7: false, + $length-8: false, $length-9: false) + { + $full: compact($length-1, $length-2, $length-3, $length-4, + $length-5, $length-6, $length-7, $length-8, $length-9); + + -webkit-background-size: $full; + -moz-background-size: $full; + -ms-background-size: $full; + -o-background-size: $full; + background-size: $full; +} diff --git a/templates/sass/bourbon/css3/_border-image.scss b/templates/sass/bourbon/css3/_border-image.scss new file mode 100644 index 0000000000..0373980422 --- /dev/null +++ b/templates/sass/bourbon/css3/_border-image.scss @@ -0,0 +1,7 @@ +@mixin border-image ($image) { + -webkit-border-image: $image; + -moz-border-image: $image; + -ms-border-image: $image; + -o-border-image: $image; + border-image: $image; +} diff --git a/templates/sass/bourbon/css3/_border-radius.scss b/templates/sass/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000000..f950d4dd98 --- /dev/null +++ b/templates/sass/bourbon/css3/_border-radius.scss @@ -0,0 +1,59 @@ +@mixin border-radius ($radii) { + -webkit-border-radius: $radii; + -moz-border-radius: $radii; + -ms-border-radius: $radii; + -o-border-radius: $radii; + border-radius: $radii; +} + +@mixin border-top-left-radius($radii) { + -webkit-border-top-left-radius: $radii; + -moz-border-top-left-radius: $radii; + -ms-border-top-left-radius: $radii; + -o-border-top-left-radius: $radii; + border-top-left-radius: $radii; +} + +@mixin border-top-right-radius($radii) { + -webkit-border-top-right-radius: $radii; + -moz-border-top-right-radius: $radii; + -ms-border-top-right-radius: $radii; + -o-border-top-right-radius: $radii; + border-top-right-radius: $radii; +} + +@mixin border-bottom-left-radius($radii) { + -webkit-border-bottom-left-radius: $radii; + -moz-border-bottom-left-radius: $radii; + -ms-border-bottom-left-radius: $radii; + -o-border-bottom-left-radius: $radii; + border-bottom-left-radius: $radii; +} + +@mixin border-bottom-right-radius($radii) { + -webkit-border-bottom-right-radius: $radii; + -moz-border-bottom-right-radius: $radii; + -ms-border-bottom-right-radius: $radii; + -o-border-bottom-right-radius: $radii; + border-bottom-right-radius: $radii; +} + +@mixin border-top-radius($radii) { + @include border-top-left-radius($radii); + @include border-top-right-radius($radii); +} + +@mixin border-right-radius($radii) { + @include border-top-right-radius($radii); + @include border-bottom-right-radius($radii); +} + +@mixin border-bottom-radius($radii) { + @include border-bottom-left-radius($radii); + @include border-bottom-right-radius($radii); +} + +@mixin border-left-radius($radii) { + @include border-top-left-radius($radii); + @include border-bottom-left-radius($radii); +} diff --git a/templates/sass/bourbon/css3/_box-shadow.scss b/templates/sass/bourbon/css3/_box-shadow.scss new file mode 100644 index 0000000000..ad5c24e7aa --- /dev/null +++ b/templates/sass/bourbon/css3/_box-shadow.scss @@ -0,0 +1,16 @@ +// Box-Shadow Mixin Requires Sass v3.1.1+ +@mixin box-shadow ($shadow-1, + $shadow-2: false, $shadow-3: false, + $shadow-4: false, $shadow-5: false, + $shadow-6: false, $shadow-7: false, + $shadow-8: false, $shadow-9: false) + { + $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, + $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9); + + -webkit-box-shadow: $full; + -moz-box-shadow: $full; + -ms-box-shadow: $full; + -o-box-shadow: $full; + box-shadow: $full; +} diff --git a/templates/sass/bourbon/css3/_box-sizing.scss b/templates/sass/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000000..a9c6cdb43f --- /dev/null +++ b/templates/sass/bourbon/css3/_box-sizing.scss @@ -0,0 +1,8 @@ +@mixin box-sizing ($box) { +// content-box | border-box | inherit + -webkit-box-sizing: $box; + -moz-box-sizing: $box; + -ms-box-sizing: $box; + -o-box-sizing: $box; + box-sizing: $box; +} diff --git a/templates/sass/bourbon/css3/_columns.scss b/templates/sass/bourbon/css3/_columns.scss new file mode 100644 index 0000000000..2896c91d7f --- /dev/null +++ b/templates/sass/bourbon/css3/_columns.scss @@ -0,0 +1,67 @@ +@mixin columns($arg: auto) { +// || + -webkit-columns: $arg; + -moz-columns: $arg; + columns: $arg; +} + +@mixin column-count($int: auto) { +// auto || integer + -webkit-column-count: $int; + -moz-column-count: $int; + column-count: $int; +} + +@mixin column-gap($length: normal) { +// normal || length + -webkit-column-gap: $length; + -moz-column-gap: $length; + column-gap: $length; +} + +@mixin column-fill($arg: auto) { +// auto || length + -webkit-columns-fill: $arg; + -moz-columns-fill: $arg; + columns-fill: $arg; +} + +@mixin column-rule($arg) { +// || || + -webkit-column-rule: $arg; + -moz-column-rule: $arg; + column-rule: $arg; +} + +@mixin column-rule-color($color) { + -webkit-column-rule-color: $color; + -moz-column-rule-color: $color; + column-rule-color: $color; +} + +@mixin column-rule-style($style: none) { +// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + -webkit-column-rule-style: $style; + -moz-column-rule-style: $style; + column-rule-style: $style; +} + +@mixin column-rule-width ($width: none) { + -webkit-column-rule-width: $width; + -moz-column-rule-width: $width; + column-rule-width: $width; +} + +@mixin column-span($arg: none) { +// none || all + -webkit-column-span: $arg; + -moz-column-span: $arg; + column-span: $arg; +} + +@mixin column-width($length: auto) { +// auto || length + -webkit-column-width: $length; + -moz-column-width: $length; + column-width: $length; +} diff --git a/templates/sass/bourbon/css3/_flex-box.scss b/templates/sass/bourbon/css3/_flex-box.scss new file mode 100644 index 0000000000..44c1dfd789 --- /dev/null +++ b/templates/sass/bourbon/css3/_flex-box.scss @@ -0,0 +1,67 @@ +// CSS3 Flexible Box Model and property defaults + +// Custom shorthand notation for flexbox +@mixin box($orient: inline-axis, $pack: start, $align: stretch) { + @include display-box; + @include box-orient($orient); + @include box-pack($pack); + @include box-align($align); +} + +@mixin display-box { + display: -webkit-box; + display: -moz-box; + display: box; +} + +@mixin box-orient($orient: inline-axis) { +// horizontal|vertical|inline-axis|block-axis|inherit + -webkit-box-orient: $orient; + -moz-box-orient: $orient; + box-orient: $orient; +} + +@mixin box-pack($pack: start) { +// start|end|center|justify + -webkit-box-pack: $pack; + -moz-box-pack: $pack; + box-pack: $pack; +} + +@mixin box-align($align: stretch) { +// start|end|center|baseline|stretch + -webkit-box-align: $align; + -moz-box-align: $align; + box-align: $align; +} + +@mixin box-direction($direction: normal) { +// normal|reverse|inherit + -webkit-box-direction: $direction; + -moz-box-direction: $direction; + box-direction: $direction; +} +@mixin box-lines($lines: single) { +// single|multiple + -webkit-box-lines: $lines; + -moz-box-lines: $lines; + box-lines: $lines; +} + +@mixin box-ordinal-group($integer: 1) { + -webkit-box-ordinal-group: $integer; + -moz-box-ordinal-group: $integer; + box-ordinal-group: $integer; +} + +@mixin box-flex($value: 0.0) { + -webkit-box-flex: $value; + -moz-box-flex: $value; + box-flex: $value; +} + +@mixin box-flex-group($integer: 1) { + -webkit-box-flex-group: $integer; + -moz-box-flex-group: $integer; + box-flex-group: $integer; +} diff --git a/templates/sass/bourbon/css3/_inline-block.scss b/templates/sass/bourbon/css3/_inline-block.scss new file mode 100644 index 0000000000..d79a13c851 --- /dev/null +++ b/templates/sass/bourbon/css3/_inline-block.scss @@ -0,0 +1,10 @@ +// Legacy support for inline-block in IE7 (maybe IE6) +@mixin inline-block { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; +} diff --git a/templates/sass/bourbon/css3/_linear-gradient.scss b/templates/sass/bourbon/css3/_linear-gradient.scss new file mode 100644 index 0000000000..0b68501719 --- /dev/null +++ b/templates/sass/bourbon/css3/_linear-gradient.scss @@ -0,0 +1,41 @@ +@mixin linear-gradient($pos, $G1, $G2: false, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $fallback: false) { + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + + // If $pos is missing from mixin, reassign vars and add default position + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: top; // Default position + } + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + // Set $G1 as the default fallback color + $fallback-color: nth($G1, 1); + + // If $fallback is a color use that color as the fallback color + @if type-of($fallback) == color { + $fallback-color: $fallback; + } + + background-color: $fallback-color; + background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0 + background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome + background-image: -moz-linear-gradient($pos, $full); + background-image: -ms-linear-gradient($pos, $full); + background-image: -o-linear-gradient($pos, $full); + background-image: unquote("linear-gradient(#{$pos}, #{$full})"); +} + + +// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. +// @include linear-gradient(#1e5799, #2989d8); +// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8); +// @include linear-gradient(top, #1e5799 0%, #2989d8 50%); +// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); diff --git a/templates/sass/bourbon/css3/_radial-gradient.scss b/templates/sass/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000000..fbd0a8523c --- /dev/null +++ b/templates/sass/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,22 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($pos, $shape-size, + $G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false) { + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + background-color: nth($G1, 1); + background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0 + background-image: -webkit-radial-gradient($pos, $shape-size, $full); + background-image: -moz-radial-gradient($pos, $shape-size, $full); + background-image: -ms-radial-gradient($pos, $shape-size, $full); + background-image: -o-radial-gradient($pos, $shape-size, $full); + background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})"); +} + +// Usage: Gradient position and shape-size are required. Color stops are optional. +// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef); +// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef); diff --git a/templates/sass/bourbon/css3/_transform.scss b/templates/sass/bourbon/css3/_transform.scss new file mode 100644 index 0000000000..8d19e8b88d --- /dev/null +++ b/templates/sass/bourbon/css3/_transform.scss @@ -0,0 +1,19 @@ +@mixin transform($property: none) { +// none | + -webkit-transform: $property; + -moz-transform: $property; + -ms-transform: $property; + -o-transform: $property; + transform: $property; +} + +@mixin transform-origin($axes: 50%) { +// x-axis - left | center | right | length | % +// y-axis - top | center | bottom | length | % +// z-axis - length + -webkit-transform-origin: $axes; + -moz-transform-origin: $axes; + -ms-transform-origin: $axes; + -o-transform-origin: $axes; + transform-origin: $axes; +} diff --git a/templates/sass/bourbon/css3/_transition.scss b/templates/sass/bourbon/css3/_transition.scss new file mode 100644 index 0000000000..058dbe0e33 --- /dev/null +++ b/templates/sass/bourbon/css3/_transition.scss @@ -0,0 +1,104 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all, 2.0s, ease-in-out); +// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); +// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); + +@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) { + + // Detect # of args passed into each variable + $length-of-property: length($property); + $length-of-duration: length($duration); + $length-of-timing-function: length($timing-function); + $length-of-delay: length($delay); + + @if $length-of-property > 1 { + @include transition-property(zip($property)); } + @else { + @include transition-property( $property); + } + + @if $length-of-duration > 1 { + @include transition-duration(zip($duration)); } + @else { + @include transition-duration( $duration); + } + + @if $length-of-timing-function > 1 { + @include transition-timing-function(zip($timing-function)); } + @else { + @include transition-timing-function( $timing-function); + } + + @if $length-of-delay > 1 { + @include transition-delay(zip($delay)); } + @else { + @include transition-delay( $delay); + } +} + + +@mixin transition-property ($prop-1: all, + $prop-2: false, $prop-3: false, + $prop-4: false, $prop-5: false, + $prop-6: false, $prop-7: false, + $prop-8: false, $prop-9: false) + { + $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5, + $prop-6, $prop-7, $prop-8, $prop-9); + + -webkit-transition-property: $full; + -moz-transition-property: $full; + -ms-transition-property: $full; + -o-transition-property: $full; + transition-property: $full; +} + +@mixin transition-duration ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, + $time-6, $time-7, $time-8, $time-9); + + -webkit-transition-duration: $full; + -moz-transition-duration: $full; + -ms-transition-duration: $full; + -o-transition-duration: $full; + transition-duration: $full; +} + +@mixin transition-timing-function ($motion-1: ease, + $motion-2: false, $motion-3: false, + $motion-4: false, $motion-5: false, + $motion-6: false, $motion-7: false, + $motion-8: false, $motion-9: false) + { + $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, + $motion-6, $motion-7, $motion-8, $motion-9); + +// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + -webkit-transition-timing-function: $full; + -moz-transition-timing-function: $full; + -ms-transition-timing-function: $full; + -o-transition-timing-function: $full; + transition-timing-function: $full; +} + +@mixin transition-delay ($time-1: 0, + $time-2: false, $time-3: false, + $time-4: false, $time-5: false, + $time-6: false, $time-7: false, + $time-8: false, $time-9: false) + { + $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, + $time-6, $time-7, $time-8, $time-9); + + -webkit-transition-delay: $full; + -moz-transition-delay: $full; + -ms-transition-delay: $full; + -o-transition-delay: $full; + transition-delay: $full; +} + diff --git a/templates/sass/bourbon/functions/_deprecated-webkit-gradient.scss b/templates/sass/bourbon/functions/_deprecated-webkit-gradient.scss new file mode 100644 index 0000000000..1322f6f60e --- /dev/null +++ b/templates/sass/bourbon/functions/_deprecated-webkit-gradient.scss @@ -0,0 +1,36 @@ +// Render Deprecated Webkit Gradient - Linear || Radial +//************************************************************************// +@function deprecated-webkit-gradient($type, $full) { + $gradient-list: (); + $gradient: false; + $full-length: length($full); + $percentage: false; + $gradient-type: $type; + + @for $i from 1 through $full-length { + $gradient: nth($full, $i); + + @if length($gradient) == 2 { + $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); + $gradient-list: join($gradient-list, $color-stop, comma); + } + @else { + @if $i == $full-length { + $percentage: 100%; + } + @else { + $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; + } + $color-stop: color-stop(unquote($percentage), $gradient); + $gradient-list: join($gradient-list, $color-stop, comma); + } + } + + @if $type == radial { + $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list); + } + @else if $type == linear { + $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list); + } + @return $gradient; +} diff --git a/templates/sass/bourbon/functions/_grid-width.scss b/templates/sass/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000000..8e63d83d60 --- /dev/null +++ b/templates/sass/bourbon/functions/_grid-width.scss @@ -0,0 +1,13 @@ +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. +// +// $gw-column: 100px; // Column Width +// $gw-gutter: 40px; // Gutter Width +// +// div { +// width: grid-width(4); // returns 520px; +// margin-left: $gw-gutter; // returns 40px; +// } diff --git a/templates/sass/bourbon/functions/_linear-gradient.scss b/templates/sass/bourbon/functions/_linear-gradient.scss new file mode 100644 index 0000000000..3b10ca82a6 --- /dev/null +++ b/templates/sass/bourbon/functions/_linear-gradient.scss @@ -0,0 +1,23 @@ +@function linear-gradient($pos: top, $G1: false, $G2: false, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false) { + + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + + // If $pos is missing from mixin, reassign vars and add default position + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: top; // Default position + } + + $type: linear; + $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + $type-gradient: append($type, $gradient, comma); + + @return $type-gradient; +} + diff --git a/templates/sass/bourbon/functions/_modular-scale.scss b/templates/sass/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000000..dddccb5224 --- /dev/null +++ b/templates/sass/bourbon/functions/_modular-scale.scss @@ -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 diff --git a/templates/sass/bourbon/functions/_radial-gradient.scss b/templates/sass/bourbon/functions/_radial-gradient.scss new file mode 100644 index 0000000000..3d5461ad6e --- /dev/null +++ b/templates/sass/bourbon/functions/_radial-gradient.scss @@ -0,0 +1,15 @@ +// This function is required and used by the background-image mixin. +@function radial-gradient($pos, $shape-size, + $G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false) { + + $type: radial; + $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + $type-gradient: append($type, $gradient, comma); + + @return $type-gradient; +} + diff --git a/templates/sass/bourbon/functions/_tint-shade.scss b/templates/sass/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000000..f7172004ac --- /dev/null +++ b/templates/sass/bourbon/functions/_tint-shade.scss @@ -0,0 +1,9 @@ +// Add percentage of white to a color +@function tint($color, $percent){ + @return mix(white, $color, $percent); +} + +// Add percentage of black to a color +@function shade($color, $percent){ + @return mix(black, $color, $percent); +} diff --git a/templates/sass/bourbon/lib/bourbon.rb b/templates/sass/bourbon/lib/bourbon.rb new file mode 100644 index 0000000000..1635be836d --- /dev/null +++ b/templates/sass/bourbon/lib/bourbon.rb @@ -0,0 +1,19 @@ +require "bourbon/generator" + +module Bourbon + if defined?(Rails) + class Engine < ::Rails::Engine + require 'bourbon/engine' + end + + module Rails + class Railtie < ::Rails::Railtie + rake_tasks do + load "tasks/install.rake" + end + end + end + end +end + +require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions") diff --git a/templates/sass/bourbon/lib/bourbon/sass_extensions.rb b/templates/sass/bourbon/lib/bourbon/sass_extensions.rb new file mode 100644 index 0000000000..ad567200e3 --- /dev/null +++ b/templates/sass/bourbon/lib/bourbon/sass_extensions.rb @@ -0,0 +1,6 @@ +module Bourbon::SassExtensions +end + +require "sass" + +require File.join(File.dirname(__FILE__), "/sass_extensions/functions") diff --git a/templates/sass/bourbon/lib/bourbon/sass_extensions/functions.rb b/templates/sass/bourbon/lib/bourbon/sass_extensions/functions.rb new file mode 100644 index 0000000000..daa877650e --- /dev/null +++ b/templates/sass/bourbon/lib/bourbon/sass_extensions/functions.rb @@ -0,0 +1,13 @@ +module Bourbon::SassExtensions::Functions +end + +require File.join(File.dirname(__FILE__), "/functions/compact") + +module Sass::Script::Functions + include Bourbon::SassExtensions::Functions::Compact +end + +# Wierd that this has to be re-included to pick up sub-modules. Ruby bug? +class Sass::Script::Functions::EvaluationContext + include Sass::Script::Functions +end diff --git a/templates/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/templates/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb new file mode 100644 index 0000000000..5192e921e7 --- /dev/null +++ b/templates/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb @@ -0,0 +1,13 @@ +# Compact function pulled from compass +module Bourbon::SassExtensions::Functions::Compact + + def compact(*args) + sep = :comma + if args.size == 1 && args.first.is_a?(Sass::Script::List) + args = args.first.value + sep = args.first.separator + end + Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep) + end + +end diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss new file mode 100644 index 0000000000..71af349d20 --- /dev/null +++ b/templates/sass/courseware/_amplifier.scss @@ -0,0 +1,94 @@ +// JM MOSFET AMPLIFIER +div#graph-container { + @extend .clearfix; + border-top: 1px solid #ddd; + padding-top: lh(1.0); + + canvas#graph { + width: flex-grid(4.5, 9); + float: left; + margin-right: flex-gutter(9); + } + + div.graph-controls { + width: flex-grid(4.5, 9); + float: left; + + select#musicTypeSelect { + display: block; + margin-bottom: lh(); + } + + div#graph-output { + display: block; + margin-bottom: lh(); + } + + div#graph-listen { + display: block; + margin-bottom: lh(); + } + + p { + margin-bottom: lh(.5); + } + + div#label { + display: inline-block; + } + + input#playButton { + display: block; + } + } +} + +div#schematic-container { + @extend .clearfix; + + canvas { + width: flex-grid(4.5, 9); + float: left; + margin-right: flex-gutter(9); + } + + div.schematic-sliders { + width: flex-grid(4.5, 9); + float: left; + + div.slider-label#vs { + margin-top: lh(2.0); + } + + div.slider-label { + margin-bottom: lh(0.5); + } + + div.slider { + margin-bottom: lh(1); + } + } +} +//End JM MOSFET AMPLIFIER + +// Labels +div.graph-controls, div#graph-listen { + + label { + @include border-radius(2px); + font-weight: bold; + padding: 3px; + } + + label[for="vinCheckbox"], label[for="vinRadioButton"]{ + color: desaturate(#00bfff, 50%); + } + label[for="voutCheckbox"], label[for="voutRadioButton"]{ + color: darken(#ffcf48, 20%); + } + label[for="vrCheckbox"], label[for="vrRadioButton"]{ + color: desaturate(#1df914, 40%); + } + +} + diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss new file mode 100644 index 0000000000..b36f17f165 --- /dev/null +++ b/templates/sass/courseware/_courseware.scss @@ -0,0 +1,235 @@ +div.course-wrapper { + @extend .table-wrapper; + + ul, ol { + list-style: none; + } + + section.course-content { + @extend .content; + + h1 { + @extend .top-header; + } + + p { + margin-bottom: lh(); + + &:empty { + display: none; + margin-bottom: 0; + } + } + + ul { + li { + margin-bottom: lh(.5); + } + } + + .problem-set { + position: relative; + @extend .clearfix; + + h2 { + margin-top: 0; + margin-bottom: 15px; + width: flex-grid(2, 9); + padding-right: flex-gutter(9); + border-right: 1px dashed #ddd; + @include box-sizing(border-box); + display: table-cell; + vertical-align: top; + + @media screen and (max-width:1120px) { + display: block; + width: auto; + border-right: 0; + } + + @media print { + display: block; + width: auto; + border-right: 0; + } + } + + section.problem { + display: table-cell; + width: flex-grid(7, 9); + padding-left: flex-gutter(9); + + @media screen and (max-width:1120px) { + display: block; + width: auto; + padding: 0; + } + + @media print { + display: block; + width: auto; + padding: 0; + + canvas, img { + page-break-inside: avoid; + } + } + + span { + &.unanswered, &.ui-icon-bullet { + @include inline-block(); + background: url('/static/images/unanswered-icon.png') center center no-repeat; + height: 14px; + position: relative; + top: 4px; + width: 14px; + } + + &.correct, &.ui-icon-check { + @include inline-block(); + background: url('/static/images/correct-icon.png') center center no-repeat; + height: 20px; + position: relative; + top: 6px; + width: 25px; + } + + &.incorrect, &.ui-icon-close { + @include inline-block(); + background: url('/static/images/incorrect-icon.png') center center no-repeat; + height: 20px; + width: 20px; + position: relative; + top: 6px; + } + } + } + + div { + > span { + display: block; + margin-bottom: lh(.5); + } + } + + input[type="text"] { + display: inline-block; + } + + center { + display: block; + margin: lh() 0; + border: 1px solid #ccc; + padding: lh(); + } + + section.action { + margin-top: lh(); + } + } + + section.problems-wrapper, div#seq_content { + @extend .problem-set; + } + + section.problems-wrapper { + display: table; + width: 100%; + + @media screen and (max-width:1120px) { + display: block; + width: auto; + } + } + + div#seq_content { + h1 { + background: none; + margin-bottom: lh(); + padding-bottom: 0; + border-bottom: none; + } + } + + ol.vert-mod { + > li { + @extend .clearfix; + @extend .problem-set; + border-bottom: 1px solid #ddd; + margin-bottom: 15px; + padding: 0 0 15px; + + &:last-child { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; + } + } + } + + section.tutorials { + ul { + list-style: disc outside none; + margin-left: lh(); + } + } + + div.staff_info { + white-space: pre-wrap; + border-top: 1px solid #ccc; + padding-top: lh(); + margin-top: lh(); + line-height: lh(); + font-family: Consolas, "Lucida Console", Monaco, "Courier New", Courier, monospace; + } + + div.ui-slider { + border: 1px solid #aaa; + background: #ddd; + @include box-shadow(inset 0 1px 0 #eee); + @include border-radius(0); + + a.ui-slider-handle { + @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); + background: $mit-red url(/static/images/slider-bars.png) center center no-repeat; + border: 1px solid darken($mit-red, 20%); + cursor: pointer; + + &:hover, &:focus { + background-color: lighten($mit-red, 10%); + outline: none; + } + } + } + } + + &.closed { + section.course-index { + width: flex-grid(.6); + + header#open_close_accordion { + padding: 0; + + a { + background-image: url('/static/images/slide-right-icon.png'); + } + + h2 { + visibility: hidden; + width: 10px; + padding: 0; + } + } + + div#accordion { + visibility: hidden; + width: 10px; + padding: 0; + } + } + + section.course-content { + width: flex-grid(11.5) + flex-gutter(); + } + } +} diff --git a/templates/sass/courseware/_sequence-nav.scss b/templates/sass/courseware/_sequence-nav.scss new file mode 100644 index 0000000000..056311521e --- /dev/null +++ b/templates/sass/courseware/_sequence-nav.scss @@ -0,0 +1,303 @@ +nav.sequence-nav { + @extend .topbar; + margin-bottom: $body-line-height; + + ol { + display: table-row; + float: left; + width: flex-grid(8,9) + flex-gutter(); + position: relative; + + a { + @extend .block-link; + } + + li { + display: table-cell; + + .inactive { + background-repeat: no-repeat; + + &:hover { + background-color: lighten($cream, 3%); + } + } + + .visited { + background-color: #DCCDA2; + background-repeat: no-repeat; + @include box-shadow(inset 0 0 3px darken(#dccda2, 10%)); + + &:hover { + background-color: $cream; + background-position: center center; + } + } + + .active { + @include box-shadow(0 1px 0 #fff); + background-color: #fff; + background-repeat: no-repeat; + + &:hover { + background-color: #fff; + background-position: center; + } + } + + a { + @include box-shadow(1px 0 0 #fff); + background-position: center center; + border: none; + border-right: 1px solid darken($cream, 10%); + cursor: pointer; + padding: 15px 4px 14px; + width: 28px; + height: 17px; + @include transition(all, .4s, $ease-in-out-quad); + + // @media screen and (max-width: 800px) { + // padding: 12px 8px; + // } + + //video + &.seq_video_inactive { + @extend .inactive; + background-image: url('/static/images/sequence-nav/video-icon-normal.png'); + background-position: center; + } + + &.seq_video_visited { + @extend .visited; + background-image: url('/static/images/sequence-nav/video-icon-visited.png'); + background-position: center; + } + + &.seq_video_active { + @extend .active; + background-image: url('/static/images/sequence-nav/video-icon-current.png'); + background-position: center; + } + + //other + &.seq_other_inactive { + @extend .inactive; + background-image: url('/static/images/sequence-nav/document-icon-normal.png'); + background-position: center; + } + + &.seq_other_visited { + @extend .visited; + background-image: url('/static/images/sequence-nav/document-icon-visited.png'); + background-position: center; + } + + &.seq_other_active { + @extend .active; + background-image: url('/static/images/sequence-nav/document-icon-current.png'); + background-position: center; + } + + //vertical & problems + &.seq_vertical_inactive, &.seq_problem_inactive { + @extend .inactive; + background-image: url('/static/images/sequence-nav/list-icon-normal.png'); + background-position: center; + } + + &.seq_vertical_visited, &.seq_problem_visited { + @extend .visited; + background-image: url('/static/images/sequence-nav/list-icon-visited.png'); + background-position: center; + } + + &.seq_vertical_active, &.seq_problem_active { + @extend .active; + background-image: url('/static/images/sequence-nav/list-icon-current.png'); + background-position: center; + } + } + + p { + // display: none; + // visibility: hidden; + background: #333; + color: #fff; + line-height: lh(); + margin: 0px 0 0 -5px; + opacity: 0; + padding: 6px; + position: absolute; + text-shadow: 0 -1px 0 #000; + @include transition(all, .6s, $ease-in-out-quart); + white-space: pre-wrap; + z-index: 99; + + &.shown { + opacity: 1; + margin-top: 4px; + } + + &:empty { + background: none; + + &::after { + display: none; + } + } + + &::after { + background: #333; + content: " "; + display: block; + height: 10px; + position: absolute; + top: -5px; + left: 18px; + @include transform(rotate(45deg)); + width: 10px; + } + } + } + } + + ul { + float: right; + margin-right: 1px; + width: flex-grid(1, 9); + display: table-row; + + li { + display: table-cell; + + &.prev, &.next { + + a { + @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%)); + background-color: darken($cream, 5%); + background-position: center center; + background-repeat: no-repeat; + border-left: 1px solid darken(#f6efd4, 20%); + cursor: pointer; + padding: 0 4px; + text-indent: -9999px; + width: 38px; + display: block; + + &:hover { + text-decoration: none; + color: darken($cream, 60%); + text-decoration: none; + background-color: none; + } + + &.disabled { + cursor: normal; + opacity: .4; + } + } + } + + &.prev { + a { + background-image: url('/static/images/sequence-nav/previous-icon.png'); + + &:hover { + background-color: none; + } + } + } + + &.next { + a { + background-image: url('/static/images/sequence-nav/next-icon.png'); + + &:hover { + background-color: none; + } + } + } + } + } +} + + +section.course-content { + position: relative; + + div#seq_content { + margin-bottom: 60px; + } + + nav.sequence-bottom { + position: absolute; + bottom: 0; + right: 50%; + margin-right: -53px; + + ul { + @extend .clearfix; + background-color: darken(#F6EFD4, 5%); + border: 1px solid darken(#f6efd4, 20%); + border-bottom: 0; + @include border-radius(3px 3px 0 0); + overflow: hidden; + width: 106px; + background-color: darken($cream, 5%); + @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%)); + + li { + float: left; + + &.prev, &.next { + margin-bottom: 0; + + a { + background-position: center center; + background-repeat: no-repeat; + border-bottom: none; + display: block; + padding: lh(.75) 4px; + text-indent: -9999px; + width: 45px; + display: block; + @include transition(all, .4s, $ease-in-out-quad); + + &:hover { + background-color: darken($cream, 10%); + color: darken(#F6EFD4, 60%); + color: darken($cream, 60%); + opacity: .5; + text-decoration: none; + } + + &.disabled { + background-color: lighten($cream, 10%); + opacity: .4; + } + } + } + + &.prev { + a { + background-image: url('/static/images/sequence-nav/previous-icon.png'); + + &:hover { + background-color: none; + } + } + } + + &.next { + a { + background-image: url('/static/images/sequence-nav/next-icon.png'); + + &:hover { + background-color: none; + } + } + } + } + } + } +} diff --git a/templates/sass/courseware/_sidebar.scss b/templates/sass/courseware/_sidebar.scss new file mode 100644 index 0000000000..d93e672378 --- /dev/null +++ b/templates/sass/courseware/_sidebar.scss @@ -0,0 +1,91 @@ +section.course-index { + @extend .sidebar; + @extend .tran; + + div#accordion { + + h3 { + overflow: hidden; + margin: 0; + + &:last-child { + @include box-shadow(none); + } + + &.ui-accordion-header { + color: #000; + + a { + font-size: $body-font-size; + color: lighten($text-color, 10%); + } + + &.ui-state-hover { + border: none; + border-bottom: 1px solid #d3d3d3; + } + + &.ui-state-active { + @extend .active; + } + } + } + + ul.ui-accordion-content { + @include border-radius(0); + @include box-shadow( inset -1px 0 0 #e6e6e6); + background: #dadada; + border: none; + border-bottom: 1px solid #c3c3c3; + font-size: 12px; + margin: 0; + // overflow: visible; + + li { + position: relative; + + &.active { + font-weight: bold; + + p.subtitle { + font-weight: normal; + } + + // &:after { + // content: " "; + // width: 16px; + // height: 16px; + // position: absolute; + // right: -35px; + // top: 7px; + // display: block; + // background-color: #dadada; + // border-top: 1px solid #c3c3c3; + // border-right: 1px solid #c3c3c3; + // z-index: 99; + // @include transform(rotate(45deg)); + // } + } + + a { + text-decoration: none; + margin-bottom: lh(.5); + display: block; + color: #000; + + &:hover { + color: #666; + } + + p { + margin-bottom: 0; + + &.subtitle { + color: #666; + } + } + } + } + } + } +} diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss new file mode 100644 index 0000000000..7fbb4c577d --- /dev/null +++ b/templates/sass/courseware/_video.scss @@ -0,0 +1,248 @@ +section.course-content { + div.video-subtitles { + position: relative; + + div.video-wrapper { + float: left; + width: flex-grid(6, 9); + margin-right: flex-gutter(9); + + div.video-player { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + + object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + iframe#html5_player { + border: none; + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + // ul { + // float: left; + + // li { + // margin-top: 5px; + // display: inline-block; + // cursor: pointer; + // border: 0; + // padding: 0; + + // div { + // &:empty { + // display: none; + // } + // } + // } + // } + + section.video-controls { + @extend .clearfix; + background: #333; + position: relative; + border: 1px solid #000; + color: #ccc; + + div#slider { + @extend .clearfix; + @include border-radius(0); + @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555); + background: #c2c2c2; + border: none; + border-bottom: 1px solid #000; + height: 14px; + + a.ui-slider-handle { + @include border-radius(20px); + @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); + background: $mit-red url(/static/images/slider-handle.png) center center no-repeat; + border: 1px solid darken($mit-red, 20%); + cursor: pointer; + height: 20px; + margin-left: -10px; + top: -4px; + width: 20px; + + &:focus, &:hover { + background-color: lighten($mit-red, 10%); + outline: none; + } + } + } + + ul.vcr { + float: left; + margin-right: lh(); + + li { + float: left; + margin-bottom: 0; + + a { + @include box-shadow(1px 0 0 #555); + border-bottom: none; + border-right: 1px solid #000; + display: block; + cursor: pointer; + height: 14px; + padding: lh(.75) lh(); + text-indent: -9999px; + width: 14px; + + &.play { + background: url('/static/images/play-icon.png') center center no-repeat; + + &:hover { + background-color: #444; + } + } + + &.pause { + background: url('/static/images/pause-icon.png') center center no-repeat; + + &:hover { + background-color: #444; + } + } + + } + + div#vidtime { + padding-left: lh(); + font-weight: bold; + line-height: 46px; //height of play pause buttons + -webkit-font-smoothing: antialiased; + } + } + } + + div.secondary-controls { + float: right; + + div.speeds { + border-right: 1px solid #000; + border-left: 1px solid #000; + @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); + float: left; + line-height: 46px; //height of play pause buttons + margin-right: 0; + -webkit-font-smoothing: antialiased; + opacity: .7; + @include transition(); + + h3 { + @include inline-block(); + padding: 0 lh(.5); + font-weight: normal; + } + + // fix for now + ol#video_speeds { + @include inline-block(); + padding-right: lh(.5); + + li { + cursor: pointer; + color: #fff; + @include inline-block(); + + &.active { + font-weight: bold; + } + + &:hover { + color: #aaa; + } + } + } + + &:hover { + opacity: 1; + background-color: #444; + } + } + + a.hide-subtitles { + float: left; + display: block; + padding-right: lh(.5); + margin-left: 0; + color: #797979; + padding-left: 50px; + line-height: 46px; //height of play pause buttons + font-weight: 800; + background: url('/static/images/cc.png') 16px center no-repeat; + -webkit-font-smoothing: antialiased; + @include transition(); + + &:hover { + color: #fff; + text-decoration: none; + background-color: #444; + } + } + } + } + } + + ol.subtitles { + float: left; + width: flex-grid(3, 9); + height: 530px; + overflow: hidden; + + li { + margin-bottom: 0px; + cursor: pointer; + border: 0; + padding: 0; + color: #666; + + &.current { + background-color: #f3f3f3; + color: #333; + } + + &:hover { + color: $mit-red; + } + + div { + margin-bottom: 8px; + } + + div:empty { + margin-bottom: 0px; + } + } + } + + &.closed { + @extend .trans; + + div.video-wrapper { + width: flex-grid(9,9); + } + + ol.subtitles { + width: 0px; + height: 0; + } + } + } +} diff --git a/templates/sass/discussion/_answers.scss b/templates/sass/discussion/_answers.scss new file mode 100644 index 0000000000..cc6133a12f --- /dev/null +++ b/templates/sass/discussion/_answers.scss @@ -0,0 +1,159 @@ +div.answer-controls { + @include box-sizing(border-box); + display: inline-block; + margin: 0 0 15px; + padding-left: flex-grid(1.1); + width: 100%; + + div.answer-count { + display: inline-block; + float: left; + } + + div.answer-sort { + float: right; + margin-left: flex-gutter(); + + nav { + @extend .action-link; + float: right; + margin-top: 34px; + + a { + &.on span{ + font-weight: bold; + } + + &:before { + content: '|'; + color: #ccc; + font-size: 16px; + } + } + } + } +} + +div.answer-block { + @extend div.question-header; + border-top: #ddd 1px solid; + display: inline-block; + float: left; + padding-top: 20px; + width: 100%; + + div.official-stamp { + background: $mit-red; + color: #fff; + font-size: 12px; + margin-top: 10px; + padding: 2px 5px; + text-align: center; + margin-left: -1px; + } + + img.answer-img-accept { + margin: 10px 0px 10px 16px; + } + div.answer-container { + @extend div.question-container; + + div.answer-content { + @extend div.question-content; + + div.answer-body { + @extend div.question-body; + } + } + } + + div.meta-bar { + div.answer-actions { + @extend div.question-actions; + } + } + + div.answered-by-owner { + p { + font-style: italic; + color: #656565; + } + + div.comments-container { + color: #555; + } + } + + div.accepted-answer { + p { + color:#000; + } + } + + div.deleted { + p { + color: $mit-red; + } + } + + img.answer-img-accept { + opacity: 0.7; + } +} + +div.paginator { + @extend div.answer-block; + text-align: center; + padding: 20px 0; + + span { + @include border-radius(3px); + background: #eee; + margin: 0 5px; + padding: 4px 10px; + + &.curr { + background: none; + color: $mit-red; + font-weight: bold; + } + + &.next, &.prev { + @extend .light-button; + } + + a { + color: #555; + text-decoration: none; + border-bottom: none; + } + } +} + +div.answer-own { + border-top: 1px solid #eee; + overflow:hidden; + padding-left: flex-grid(1.2); + padding-top: 10px; +} + +div.answer-actions { + margin: 0; + padding:8px 8px 8px 0; + text-align: right; + border-top: 1px solid #efefef; + + span.sep { + color: #EDDFAA; + } + + a { + cursor: pointer; + text-decoration: none; + + &.question-delete { + // color: $mit-red; + } + } +} + diff --git a/templates/sass/discussion/_askbot-original.scss b/templates/sass/discussion/_askbot-original.scss new file mode 100644 index 0000000000..66b59855e1 --- /dev/null +++ b/templates/sass/discussion/_askbot-original.scss @@ -0,0 +1,2711 @@ +// original styles + +// body { +// background: #fff; +// font-size: 14px; +// line-height: 150%; +// margin: 0; +// padding: 0; +// color: #000; +// font-family: arial; } + +// div { +// margin: 0 auto; +// padding: 0; } + +// h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form, img, p { +// margin: 0; +// padding: 0; +// border: none; } + +// label { +// vertical-align: middle; } + +// hr { +// border: none; +// border-top: 1px dashed #ccccce; } + +// input, select { +// vertical-align: middle; +// font-family: trebuchet ms,"segoe ui",helvetica,tahoma,verdana,mingliu,pmingliu,arial,sans-serif; +// margin-left: 0px; } + +// textarea:focus, input:focus { +// outline: none; } + +// iframe { +// border: none; } + +// p { +// font-size: 14px; +// line-height: 140%; +// margin-bottom: 6px; } + +// a { +// color: #1b79bd; +// text-decoration: none; +// cursor: pointer; } + +// h2 { +// font-size: 21px; +// padding: 3px 0 3px 5px; } + +// h3 { +// font-size: 19px; +// padding: 3px 0 3px 5px; } + +// ul { +// list-style: disc; +// margin-left: 20px; +// padding-left: 0px; +// margin-bottom: 1em; } + +// ol { +// list-style: decimal; +// margin-left: 30px; +// margin-bottom: 1em; +// padding-left: 0px; } + +// td ul { +// vertical-align: middle; } + +// li input { +// margin: 3px 3px 4px 3px; } + +// pre { +// font-family: consolas, monaco, liberation mono, lucida console, monospace; +// font-size: 100%; +// margin-bottom: 10px; +// background-color: #f5f5f5; +// padding-left: 5px; +// padding-top: 5px; +// padding-bottom: 20px; } + +// code { +// font-family: consolas, monaco, liberation mono, lucida console, monospace; +// font-size: 100%; } + +// blockquote { +// margin-bottom: 10px; +// margin-right: 15px; +// padding: 10px 0px 1px 10px; +// background-color: #f5f5f5; } + +// * html { +// .clearfix, .paginator { +// height: 1; +// overflow: visible; } } + +// +html { +// .clearfix, .paginator { +// min-height: 1%; } } + +// .clearfix:after, .paginator:after { +// clear: both; +// content: "."; +// display: block; +// height: 0; +// visibility: hidden; } + +// .badges a { +// color: #763333; +// text-decoration: underline; } + +// a:hover { +// text-decoration: underline; } + +.badge-context-toggle.active { + cursor: pointer; + text-decoration: underline; } + +// h1 { +// font-size: 24px; +// padding: 10px 0 5px 0px; } + +body.user-messages { + margin-top: 2.4em; } + +// .left { +// float: left; } + +// .right { +// float: right; } + +// .clean { +// clear: both; } + +// .center { +// margin: 0 auto; +// padding: 0; } + +.notify { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + z-index: 100; + padding: 0; + text-align: center; + background-color: #f5dd69; + border-top: #fff 1px solid; + font-family: 'yanone kaffeesatz',sans-serif; + p.notification { + margin-top: 6px; + margin-bottom: 6px; + font-size: 16px; + color: #424242; } } + +#closenotify { + position: absolute; + right: 5px; + top: 7px; + color: #735005; + text-decoration: none; + line-height: 18px; + background: -6px -5px url(../images/sprites.png) no-repeat; + cursor: pointer; + width: 20px; + height: 20px; + &:hover { + background: -26px -5px url(../images/sprites.png) no-repeat; } } + +#header { + margin-top: 0px; + background: #16160f; + font-family: 'yanone kaffeesatz',sans-serif; } + +/*.content-wrapper { + width: 960px; + margin: auto; + position: relative; }*/ + +#logo img { + padding: 5px 0px 5px 0px; + height: 75px; + width: auto; + float: left; } + +#usertoolsnav { + height: 20px; + padding-bottom: 5px; + a { + height: 35px; + text-align: right; + margin-left: 20px; + text-decoration: underline; + color: #d0e296; + font-size: 16px; + &:first-child { + margin-left: 0; } + &#ab-responses { + margin-left: 3px; } } + .user-info, .user-micro-info { + color: #b5b593; } + a img { + vertical-align: middle; + margin-bottom: 2px; } + .user-info a { + margin: 0; + text-decoration: none; } } + +#metanav { + float: right; + a { + color: #e2e2ae; + padding: 0px 0px 0px 35px; + height: 25px; + line-height: 30px; + margin: 5px 0px 0px 10px; + font-size: 18px; + font-weight: 100; + text-decoration: none; + display: block; + float: left; + &:hover { + text-decoration: underline; } + &.on { + font-weight: bold; + color: #fff; + text-decoration: none; } + &.special { + font-size: 18px; + color: #b02b2c; + font-weight: bold; + text-decoration: none; + &:hover { + text-decoration: underline; } } } + #navtags { + background: -50px -5px url(../images/sprites.png) no-repeat; } + #navusers { + background: -125px -5px url(../images/sprites.png) no-repeat; } + #navbadges { + background: -210px -5px url(../images/sprites.png) no-repeat; } } + +// #header { +// &.with-logo #usertoolsnav { +// position: absolute; +// bottom: 0; +// right: 0px; } +// &.without-logo { +// #usertoolsnav { +// float: left; +// margin-top: 7px; } +// #metanav { +// margin-bottom: 7px; } } } + +// #secondaryheader { +// height: 55px; +// background: #e9e9e1; +// border-bottom: #d3d3c2 1px solid; +// border-top: #fcfcfc 1px solid; +// margin-bottom: 10px; +// font-family: 'yanone kaffeesatz',sans-serif; +// #homebutton { +// border-right: #afaf9e 1px solid; +// background: -6px -36px url(../images/sprites.png) no-repeat; +// height: 55px; +// width: 43px; +// display: block; +// float: left; +// &:hover { +// background: -51px -36px url(../images/sprites.png) no-repeat; } } +// #scopewrapper { +// width: 688px; +// float: left; +// a { +// display: block; +// float: left; } +// .scope-selector { +// font-size: 21px; +// color: #5a5a4b; +// height: 55px; +// line-height: 55px; +// margin-left: 24px; } +// .on { +// background: url(../images/scopearrow.png) no-repeat center bottom; } +// .ask-message { +// font-size: 24px; } } } + +#searchbar { + display: inline-block; + background-color: #fff; + width: 412px; + border: 1px solid #c9c9b5; + float: right; + height: 42px; + margin: 6px 0px 0px 15px; + .searchinput, .searchinputcancelable { + font-size: 30px; + height: 40px; + font-weight: 300; + background: #fff; + border: 0px; + color: #484848; + padding-left: 10px; + font-family: arial; + vertical-align: middle; } + .searchinput { + width: 352px; } + .searchinputcancelable { + width: 317px; } + .logoutsearch { + width: 337px; } + .searchbtn { + font-size: 10px; + color: #666; + background-color: #eee; + height: 42px; + border: #fff 1px solid; + line-height: 22px; + text-align: center; + float: right; + margin: 0px; + width: 48px; + background: -98px -36px url(../images/sprites.png) no-repeat; + cursor: pointer; + &:hover { + background: -146px -36px url(../images/sprites.png) no-repeat; } } + .cancelsearchbtn { + font-size: 30px; + color: #ce8888; + background: #fff; + height: 42px; + border: 0px; + border-left: #deded0 1px solid; + text-align: center; + width: 35px; + cursor: pointer; + &:hover { + color: #d84040; } } } + +body.anon #searchbar { + width: 500px; + .searchinput { + width: 440px; } + .searchinputcancelable { + width: 405px; } } + +#askbutton { + background: url(../images/bigbutton.png) repeat-x bottom; + line-height: 44px; + text-align: center; + width: 200px; + height: 42px; + font-size: 23px; + color: #4a757f; + margin-top: 7px; + float: right; + text-transform: uppercase; + border-radius: 5px; + -ms-border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + -webkit-box-shadow: 1px 1px 2px #636363; + -moz-box-shadow: 1px 1px 2px #636363; + box-shadow: 1px 1px 2px #636363; + &:hover { + text-decoration: none; + background: url(../images/bigbutton.png) repeat-x top; + text-shadow: 0px 1px 0px #c6d9dd; + -moz-text-shadow: 0px 1px 0px #c6d9dd; + -webkit-text-shadow: 0px 1px 0px #c6d9dd; } } + +/*#contentleft { + width: 730px; + float: left; + position: relative; + padding-bottom: 10px; } + +#contentright { + width: 200px; + float: right; + padding: 0 0px 10px 0px; }*/ + +#contentfull { + float: left; + width: 960px; } + +.box { + /*background: #fff;*/ + /*padding: 4px 0px 10px 0px;*/ + /*width: 200px;*/ + p { + margin-bottom: 4px; + &.info-box-follow-up-links { + text-align: right; + margin: 0; } } + h2 { + // padding-left: 0; + // /*background: #eceeeb;*/ + // height: 30px; + // line-height: 30px; + // /*text-align: right;*/ + // /*font-size: 18px !important;*/ + // // font-weight: normal; + // // color: #656565; + // /*padding-right: 10px;*/ + // /*margin-bottom: 10px;*/ + // /*font-family: 'yanone kaffeesatz',sans-serif;*/ + } + // h3 { + // /*color: #4a757f;*/ + // /*font-size: 18px;*/ + // text-align: left; + // font-weight: normal; + // /*font-family: 'yanone kaffeesatz',sans-serif;*/ + // padding-left: 0px; } + // .contributorback { + // background: #eceeeb url(../images/contributorsback.png) no-repeat center left; } + // label { + // color: #707070; + // font-size: 15px; + // display: block; + // float: right; + // text-align: left; + // font-family: 'yanone kaffeesatz',sans-serif; + // width: 80px; + // margin-right: 18px; } + // #displaytagfiltercontrol label { + // width: 160px; } + // ul { + // margin-left: 22px; } + // li { + // list-style-type: disc; + // font-size: 13px; + // line-height: 20px; + // margin-bottom: 10px; + // color: #707070; } + // ul.tags { + // list-style: none; + // margin: 0; + // padding: 0; + // line-height: 170%; + // display: block; } + // #displaytagfiltercontrol p label { + // color: #707070; + // font-size: 15px; } + /*.inputs { + #interestingtaginput, #ignoredtaginput { + width: 153px; + padding-left: 5px; + border: #c9c9b5 1px solid; + height: 25px; } + #interestingtagadd, #ignoredtagadd { + background: url(../images/small-button-blue.png) repeat-x top; + border: 0; + color: #4a757f; + font-weight: bold; + font-size: 12px; + width: 30px; + height: 27px; + margin-top: -2px; + cursor: pointer; + border-radius: 4px; + -ms-border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + text-shadow: 0px 1px 0px #e6f6fa; + -moz-text-shadow: 0px 1px 0px #e6f6fa; + -webkit-text-shadow: 0px 1px 0px #e6f6fa; + -webkit-box-shadow: 1px 1px 2px #808080; + -moz-box-shadow: 1px 1px 2px #808080; + box-shadow: 1px 1px 2px #808080; } + #interestingtagadd:hover, #ignoredtagadd:hover { + background: url(../images/small-button-blue.png) repeat-x bottom; } }*/ + // img.gravatar { + // margin: 1px; } + // a { + // &.followed, &.follow { + // background: url(../images/medium-button.png) top repeat-x; + // height: 34px; + // line-height: 34px; + // text-align: center; + // border: 0; + // font-family: 'yanone kaffeesatz',sans-serif; + // color: #4a757f; + // font-weight: normal; + // font-size: 21px; + // margin-top: 3px; + // display: block; + // width: 120px; + // text-decoration: none; + // border-radius: 4px; + // -ms-border-radius: 4px; + // -moz-border-radius: 4px; + // -webkit-border-radius: 4px; + // -khtml-border-radius: 4px; + // -webkit-box-shadow: 1px 1px 2px #636363; + // -moz-box-shadow: 1px 1px 2px #636363; + // box-shadow: 1px 1px 2px #636363; + // margin: 0 auto; + // padding: 0; } + // &.followed:hover, &.follow:hover { + // text-decoration: none; + // background: url(../images/medium-button.png) bottom repeat-x; + // text-shadow: 0px 1px 0px #c6d9dd; + // -moz-text-shadow: 0px 1px 0px #c6d9dd; + // -webkit-text-shadow: 0px 1px 0px #c6d9dd; } + // &.followed { + // div.unfollow { + // display: none; } + // &:hover div { + // display: none; + // &.unfollow { + // display: inline; + // color: #a05736; } } } } + // .favorite-number { + // padding: 5px 0 0 5px; + // font-size: 100%; + // font-family: arial; + // font-weight: bold; + // color: #777; + // text-align: center; } + // .notify-sidebar #question-subscribe-sidebar { + // margin: 7px 0 0 3px; } + } + +//.statswidget p { + // color: #707070; + // font-size: 16px; + // border-bottom: #cccccc 1px solid; + // font-size: 13px; + // strong { + // float: right; + // padding-right: 10px; } } + +// .questions-related { +// word-wrap: break-word; +// p { +// line-height: 20px; +// padding: 4px 0px 4px 0px; +// font-size: 16px; +// font-weight: normal; +// border-bottom: #cccccc 1px solid; } +// a { +// font-size: 13px; } } + +// #tips { +// li { +// color: #707070; +// font-size: 13px; +// list-style-image: url(../images/tips.png); } +// a { +// font-size: 16px; } } + +// #markdownhelp { +// li { +// color: #707070; +// font-size: 13px; } +// a { +// font-size: 16px; } } + +// .tabbar { + // background-color: #eff5f6; + // height: 30px; + // margin-bottom: 3px; + // margin-top: 3px; + // float: right; + // font-family: georgia,serif; + // font-size: 16px; + // border-radius: 5px; + // -ms-border-radius: 5px; + // -moz-border-radius: 5px; + // -webkit-border-radius: 5px; + // -khtml-border-radius: 5px; + // h2 { + // float: left; } } + +// .tabsa, .tabsc { + // float: right; + // position: relative; + // display: block; + // height: 20px; } + +// .tabsa { + // float: right; } + +// .tabsc { + // float: left; } + +// .tabsa a, .tabsc a { + // border-left: 1px solid #d0e1e4; + // color: #7ea9b3; + // display: block; + // float: left; + // height: 20px; + // line-height: 20px; + // padding: 4px 7px 4px 7px; + // text-decoration: none; } + +// .tabsa a.on, .tabsc a.on, .tabsa a:hover, .tabsc a:hover { + // color: #4a757f; } + +// .tabsa .label, .tabsc .label { + // float: left; + // color: #646464; + // margin-top: 4px; + // margin-right: 5px; } + +// .main-page .tabsa .label { + // margin-left: 8px; } + +// .tabsb a { + // background: #eee; + // border: 1px solid #eee; + // color: #777; + // display: block; + // float: left; + // height: 22px; + // line-height: 28px; + // margin: 5px 0px 0 4px; + // padding: 0 11px 0 11px; + // text-decoration: none; } + +// .tabsc .first { + // border: none; } + +// .rss { + // float: right; + // font-size: 16px; + // color: #f57900; + // margin: 5px 0px 3px 7px; + // width: 52px; + // padding-left: 2px; + // padding-top: 3px; + // background: white url(../images/feed-icon-small.png) no-repeat center right; + // float: right; + // font-family: georgia,serif; + // font-size: 16px; + // &:hover { + // color: #f4a731 !important; } } + +// #questioncount { +// font-weight: bold; +// font-size: 23px; +// color: #7ea9b3; +// width: 200px; +// float: left; +// margin-bottom: 8px; +// 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; } + +// ul#searchtags { +// margin-left: 10px; +// float: right; +// padding-top: 2px; } + +// .search-tips { +// font-size: 16px; +// line-height: 17px; +// color: #707070; +// margin: 5px 0 10px 0; +// padding: 0px; +// float: left; +// font-family: 'yanone kaffeesatz',sans-serif; +// a { +// text-decoration: underline; +// color: #1b79bd; } } + +// #question-list { +// float: left; +// position: relative; +// background-color: #fff; +// padding: 0; +// width: 100%; } + +// .short-summary { +// position: relative; +// filter: inherit; +// padding: 10px; +// border-bottom: 1px solid #dddbce; +// margin-bottom: 1px; +// overflow: hidden; +// width: 710px; +// float: left; +// background: url(../images/summary-background.png) repeat-x; +// h2 { +// font-size: 24px; +// font-weight: normal; +// line-height: 26px; +// padding-left: 0; +// margin-bottom: 6px; +// display: block; +// font-family: 'yanone kaffeesatz',sans-serif; } +// a { +// color: #464646; } +// .userinfo { +// text-align: right; +// line-height: 16px; +// font-family: arial; +// padding-right: 4px; +// .relativetime { +// font-size: 11px; +// clear: both; +// font-weight: normal; +// color: #555; } } +// span.anonymous { +// font-size: 11px; +// clear: both; +// font-weight: normal; +// color: #555; } +// .userinfo a { +// font-weight: bold; +// font-size: 11px; } +// .counts { +// float: right; +// margin: 4px 0 0 5px; +// font-family: 'yanone kaffeesatz',sans-serif; +// .item-count { +// padding: 0px 5px 0px 5px; +// font-size: 25px; +// font-family: 'yanone kaffeesatz',sans-serif; } +// .votes div, .views div, .answers div, .favorites div { +// margin-top: 3px; +// font-size: 14px; +// line-height: 14px; +// color: #646464; } } +// .tags { +// margin-top: 0; } +// .votes, .answers, .favorites, .views { +// text-align: center; +// margin: 0 3px; +// padding: 8px 2px 0px 2px; +// width: 51px; +// float: right; +// height: 44px; +// border: #dbdbd4 1px solid; } +// .votes { +// background: url(../images/vote-background.png) repeat-x; } +// .answers { +// background: url(../images/answers-background.png) repeat-x; } +// .views { +// background: url(../images/view-background.png) repeat-x; } +// .no-votes .item-count { +// color: #b1b5b6; } +// .some-votes .item-count { +// color: #4a757f; } +// .no-answers .item-count { +// color: #b1b5b6; } +// .some-answers .item-count { +// color: #eab243; } +// .no-views .item-count { +// color: #b1b5b6; } +// .some-views .item-count { +// color: #d33f00; } +// .accepted .item-count { +// background: url(../images/accept.png) no-repeat top right; +// display: block; +// text-align: center; +// width: 40px; +// color: #eab243; } +// .some-favorites .item-count { +// background: #338333; +// color: #d0f5a9; } +// .no-favorites .item-count { +// background: #eab243; +// color: yellow; } } + +// .evenmore { +// font-size: 13px; +// color: #707070; +// padding: 15px 0px 10px 0px; +// clear: both; +// a { +// text-decoration: underline; +// color: #1b79bd; } } + +.pager { + margin-top: 10px; + margin-bottom: 16px; } + +.pagesize { + margin-top: 10px; + margin-bottom: 16px; + float: right; } + +// .paginator { +// padding: 5px 0 10px 0; +// font-size: 13px; +// margin-bottom: 10px; +// .prev a, .next a { +// background-color: #fff; +// color: #777; +// padding: 2px 4px 3px 4px; +// &:visited { +// background-color: #fff; +// color: #777; +// padding: 2px 4px 3px 4px; } } +// a { +// color: #7ea9b3; } +// .prev { +// margin-right: .5em; } +// .next { +// margin-left: .5em; } +// .page a { +// padding: .25em; +// background-color: #fff; +// margin: 0em .25em; +// color: #ff; +// &:visited { +// padding: .25em; +// background-color: #fff; +// margin: 0em .25em; +// color: #ff; } } +// .curr { +// padding: .25em; +// background-color: #fff; +// margin: 0em .25em; +// color: #ff; +// background-color: #8ebcc7; +// color: #fff; +// font-weight: bold; } +// .next a, .prev a { +// color: #7ea9b3; } +// .page a:hover, .curr a:hover, .prev a:hover, .next a:hover { +// color: #8c8c8c; +// background-color: #e1e1e1; +// text-decoration: none; } +// .text { +// color: #777; +// padding: .3em; } +// .paginator-container-left { +// padding: 5px 0 10px 0; } } + +// .tag-size-1 { +// font-size: 12px; } + +// .tag-size-2 { +// font-size: 13px; } + +// .tag-size-3 { +// font-size: 14px; } + +// .tag-size-4 { +// font-size: 15px; } + +// .tag-size-5 { +// font-size: 16px; } + +// .tag-size-6 { +// font-size: 17px; } + +// .tag-size-7 { +// font-size: 18px; } + +// .tag-size-8 { +// font-size: 19px; } + +// .tag-size-9 { +// font-size: 20px; } + +// .tag-size-10 { +// font-size: 21px; } + +// ul { +// &.tags { +// list-style: none; +// margin: 0; +// padding: 0; +// line-height: 170%; +// display: block; +// &.marked-tags { +// list-style: none; +// margin: 0; +// padding: 0; +// line-height: 170%; +// display: block; } } +// &#related-tags { +// list-style: none; +// margin: 0; +// padding: 0; +// line-height: 170%; +// display: block; } +// &.tags li { +// float: left; +// display: block; +// margin: 0 8px 0 0; +// padding: 0; +// height: 20px; } } + +// .wildcard-tags { +// clear: both; } + +// ul.tags.marked-tags li, .wildcard-tags ul.tags li { +// margin-bottom: 5px; } + +// #tagselector div.inputs { +// clear: both; +// float: none; +// margin-bottom: 10px; } + +// .tags-page ul.tags li { +// width: 160px; +// margin: 5px; } + +// ul { +// &#ab-user-tags li { +// width: 160px; +// margin: 5px; } +// &#related-tags li { +// margin: 0 5px 8px 0; +// float: left; +// clear: left; } } + +// .tag-left { +// cursor: pointer; +// display: block; +// float: left; +// height: 17px; +// margin: 0 5px 0 0; +// padding: 0; +// -webkit-box-shadow: 0px 0px 5px #d3d6d7; +// -moz-box-shadow: 0px 0px 5px #d3d6d7; +// box-shadow: 0px 0px 5px #d3d6d7; } + +// .tag-right { +// background: #f3f6f6; +// border: #fff 1px solid; +// border-top: #fff 2px solid; +// outline: #cfdbdb 1px solid; +// display: block; +// float: left; +// height: 17px; +// line-height: 17px; +// font-weight: normal; +// font-size: 11px; +// padding: 0px 8px 0px 8px; +// text-decoration: none; +// text-align: center; +// white-space: nowrap; +// vertical-align: middle; +// font-family: arial; +// color: #717179; } + +// .deletable-tag { +// margin-right: 3px; +// white-space: nowrap; +// border-top-right-radius: 4px; +// border-bottom-right-radius: 4px; +// -moz-border-radius-topright: 4px; +// -moz-border-radius-bottomright: 4px; +// -webkit-border-bottom-right-radius: 4px; +// -webkit-border-top-right-radius: 4px; } + +// .tags { +// a.tag-right, span.tag-right { +// color: #585858; +// text-decoration: none; } +// a:hover { +// color: #1a1a1a; } } + +// .users-page h1, .tags-page h1 { +// float: left; } + +// .main-page h1 { +// margin-right: 5px; } + +// .delete-icon { +// margin-top: -1px; +// float: left; +// height: 21px; +// width: 18px; +// display: block; +// line-height: 20px; +// text-align: center; +// background: #bbcdcd; +// cursor: default; +// color: #fff; +// border-top: #cfdbdb 1px solid; +// font-family: arial; +// border-top-right-radius: 4px; +// border-bottom-right-radius: 4px; +// -moz-border-radius-topright: 4px; +// -moz-border-radius-bottomright: 4px; +// -webkit-border-bottom-right-radius: 4px; +// -webkit-border-top-right-radius: 4px; +// text-shadow: 0px 1px 0px #7ea0a0; +// -moz-text-shadow: 0px 1px 0px #7ea0a0; +// -webkit-text-shadow: 0px 1px 0px #7ea0a0; +// &:hover { +// background: #b32f2f; } } + +// .tag-number { +// font-weight: normal; +// float: left; +// font-size: 16px; +// color: #5d5d5d; } + +// .badges .tag-number { +// float: none; +// display: inline; +// padding-right: 15px; } + +// .section-title { +// color: #7ea9b3; +// font-family: 'yanone kaffeesatz',sans-serif; +// font-weight: bold; +// font-size: 24px; } + +// #fmask { +// margin-bottom: 30px; +// width: 100%; } + +// #askformbar { +// display: inline-block; +// padding: 4px 7px 5px 0px; +// margin-top: 0px; +// p { +// margin: 0 0 5px 0; +// font-size: 14px; +// color: #525252; +// line-height: 1.4; } +// .questiontitleinput { +// font-size: 24px; +// line-height: 24px; +// height: 36px; +// margin: 0px; +// padding: 0px 0 0 5px; +// border: #cce6ec 3px solid; +// width: 725px; } } + +// .ask-page div#question-list, .edit-question-page div#question-list { +// float: none; +// border-bottom: #f0f0ec 1px solid; +// float: left; +// margin-bottom: 10px; } + +// .ask-page div#question-list a, .edit-question-page div#question-list a { +// line-height: 30px; } + +// .ask-page div#question-list h2, .edit-question-page div#question-list h2 { +// font-size: 13px; +// padding-bottom: 0; +// color: #1b79bd; +// border-top: #f0f0ec 1px solid; +// border-left: #f0f0ec 1px solid; +// height: 30px; +// line-height: 30px; +// font-weight: normal; } + +// .ask-page div#question-list span, .edit-question-page div#question-list span { +// width: 28px; +// height: 26px; +// line-height: 26px; +// text-align: center; +// margin-right: 10px; +// float: left; +// display: block; +// color: #fff; +// background: #b8d0d5; +// border-radius: 3px; +// -ms-border-radius: 3px; +// -moz-border-radius: 3px; +// -webkit-border-radius: 3px; +// -khtml-border-radius: 3px; } + +// .ask-page label, .edit-question-page label { +// color: #525252; +// font-size: 13px; } + +// .ask-page #id_tags, .edit-question-page #id_tags { +// border: #cce6ec 3px solid; +// height: 25px; +// padding-left: 5px; +// width: 395px; +// font-size: 14px; } + +// .title-desc { +// color: #707070; +// font-size: 13px; } + +// #fmanswer input.submit, .ask-page input.submit, .edit-question-page input.submit { +// float: left; +// background: url(../images/medium-button.png) top repeat-x; +// height: 34px; +// border: 0; +// font-family: 'yanone kaffeesatz',sans-serif; +// color: #4a757f; +// font-weight: normal; +// font-size: 21px; +// margin-top: 3px; +// border-radius: 4px; +// -ms-border-radius: 4px; +// -moz-border-radius: 4px; +// -webkit-border-radius: 4px; +// -khtml-border-radius: 4px; +// -webkit-box-shadow: 1px 1px 2px #636363; +// -moz-box-shadow: 1px 1px 2px #636363; +// box-shadow: 1px 1px 2px #636363; +// margin-right: 7px; } + +// #fmanswer input.submit:hover, .ask-page input.submit:hover, .edit-question-page input.submit:hover { +// text-decoration: none; +// background: url(../images/medium-button.png) bottom repeat-x; +// text-shadow: 0px 1px 0px #c6d9dd; +// -moz-text-shadow: 0px 1px 0px #c6d9dd; +// -webkit-text-shadow: 0px 1px 0px #c6d9dd; } + +// #editor { +// font-size: 100%; +// min-height: 200px; +// line-height: 18px; +// margin: 0; +// border-left: #cce6ec 3px solid; +// border-bottom: #cce6ec 3px solid; +// border-right: #cce6ec 3px solid; +// border-top: 0; +// padding: 10px; +// margin-bottom: 10px; +// width: 710px; } + +// #id_title { +// width: 100%; } + +// .wmd-preview { +// margin: 3px 0 5px 0; +// padding: 6px; +// background-color: #f5f5f5; +// min-height: 20px; +// overflow: auto; +// font-size: 13px; +// font-family: arial; +// p { +// margin-bottom: 14px; +// line-height: 1.4; +// font-size: 14px; } +// pre { +// background-color: #e7f1f8; } +// blockquote { +// background-color: #eee; } +// img { +// max-width: 600px; } } + +// .preview-toggle { +// width: 100%; +// color: #b6a475; +// text-align: left; +// span:hover { +// cursor: pointer; } } + +// .after-editor { +// margin-top: 15px; +// margin-bottom: 15px; } + +.checkbox { + margin-left: 5px; + font-weight: normal; + cursor: help; } + +// .question-options { +// margin-top: 1px; +// color: #666; +// line-height: 13px; +// margin-bottom: 5px; +// label { +// vertical-align: text-bottom; } } + +// .edit-content-html { +// border-top: 1px dotted #d8d2a9; +// border-bottom: 1px dotted #d8d2a9; +// margin: 5px 0 5px 0; } + +// .edit-question-page, #fmedit, .wmd-preview { +// color: #525252; } + +// .edit-question-page #id_revision, #fmedit #id_revision, .wmd-preview #id_revision { +// font-size: 14px; +// margin-top: 5px; +// margin-bottom: 5px; } + +// .edit-question-page #id_title, #fmedit #id_title, .wmd-preview #id_title { +// font-size: 24px; +// line-height: 24px; +// height: 36px; +// margin: 0px; +// padding: 0px 0 0 5px; +// border: #cce6ec 3px solid; +// width: 725px; +// margin-bottom: 10px; } + +// .edit-question-page #id_summary, #fmedit #id_summary, .wmd-preview #id_summary { +// border: #cce6ec 3px solid; +// height: 25px; +// padding-left: 5px; +// width: 395px; +// font-size: 14px; } + +// .edit-question-page .title-desc, #fmedit .title-desc, .wmd-preview .title-desc { +// margin-bottom: 10px; } + +// .question-page { +// h1 { +// padding-top: 0px; +// font-family: 'yanone kaffeesatz',sans-serif; +// a { +// color: #464646; +// font-size: 30px; +// font-weight: normal; +// line-height: 1; } } +// p.rss { +// float: none; +// clear: both; +// padding: 3px 0 0 23px; +// font-size: 15px; +// width: 110px; +// background-position: center left; +// margin-left: 0px !important; +// a { +// font-family: 'yanone kaffeesatz',sans-serif; +// vertical-align: top; } } +// .question-content { +// float: right; +// width: 682px; +// margin-bottom: 10px; } +// #question-table { +// float: left; +// border-top: #f0f0f0 1px solid; +// margin: 6px 0 6px 0; +// border-spacing: 0px; +// width: 670px; +// padding-right: 10px; } +// .answer-table { +// margin: 6px 0 6px 0; +// border-spacing: 0px; +// width: 670px; +// padding-right: 10px; +// margin-top: 0px; +// border-bottom: 1px solid #d4d4d4; +// float: right; +// td { +// width: 20px; +// vertical-align: top; } } +// #question-table td { +// width: 20px; +// vertical-align: top; } +// .question-body, .answer-body { +// overflow: auto; +// margin-top: 10px; +// font-family: arial; +// color: #4b4b4b; } +// .question-body p, .answer-body p { +// margin-bottom: 14px; +// line-height: 1.4; +// font-size: 14px; +// padding: 0px 5px 5px 0px; } +// .question-body a, .answer-body a { +// color: #1b79bd; } +// .question-body li, .answer-body li { +// margin-bottom: 7px; } +// .question-body img, .answer-body img { +// max-width: 600px; } +// .post-update-info-container { +// float: right; +// width: 175px; } +// .post-update-info { +// background: white url(../images/background-user-info.png) repeat-x bottom; +// float: right; +// font-size: 9px; +// font-family: arial; +// width: 158px; +// padding: 4px; +// margin: 0px 0px 5px 5px; +// line-height: 14px; +// border-radius: 4px; +// -ms-border-radius: 4px; +// -moz-border-radius: 4px; +// -webkit-border-radius: 4px; +// -khtml-border-radius: 4px; +// -webkit-box-shadow: 0px 2px 1px #bfbfbf; +// -moz-box-shadow: 0px 2px 1px #bfbfbf; +// box-shadow: 0px 2px 1px #bfbfbf; +// p { +// line-height: 13px; +// font-size: 11px; +// margin: 0 0 2px 1px; +// padding: 0; } +// a { +// color: #444; } +// .gravatar { +// float: left; +// margin-right: 4px; } +// p.tip { +// color: #444; +// line-height: 13px; +// font-size: 10px; } } +// .post-controls { +// font-size: 11px; +// line-height: 12px; +// min-width: 200px; +// padding-left: 5px; +// text-align: right; +// clear: left; +// float: right; +// margin-top: 10px; +// margin-bottom: 8px; +// a { +// color: #777; +// padding: 0px 3px 3px 22px; +// cursor: pointer; +// border: none; +// font-size: 12px; +// font-family: arial; +// text-decoration: none; +// height: 18px; +// display: block; +// float: right; +// line-height: 18px; +// margin-top: -2px; +// margin-left: 4px; +// &:hover { +// background-color: #f5f0c9; +// border-radius: 3px; +// -ms-border-radius: 3px; +// -moz-border-radius: 3px; +// -webkit-border-radius: 3px; +// -khtml-border-radius: 3px; } } +// .sep { +// color: #ccc; +// float: right; +// height: 18px; +// font-size: 18px; } +// .question-delete { +// background: url(../images/delete.png) no-repeat center left; +// padding-left: 16px; } } +// .answer-controls .question-delete { +// background: url(../images/delete.png) no-repeat center left; +// padding-left: 16px; } +// .post-controls .question-flag, .answer-controls .question-flag { +// background: url(../images/flag.png) no-repeat center left; } +// .post-controls .question-edit, .answer-controls .question-edit { +// background: url(../images/edit2.png) no-repeat center left; } +// .post-controls .question-retag, .answer-controls .question-retag { +// background: url(../images/retag.png) no-repeat center left; } +// .post-controls .question-close, .answer-controls .question-close { +// background: url(../images/close.png) no-repeat center left; } +// .post-controls .permant-link, .answer-controls .permant-link { +// background: url(../images/link.png) no-repeat center left; } +// .tabbar { +// width: 100%; } +// #questioncount { +// float: left; +// font-family: 'yanone kaffeesatz',sans-serif; +// line-height: 15px; } +// .question-img-upvote, .question-img-downvote, .answer-img-upvote, .answer-img-downvote { +// width: 25px; +// height: 20px; +// cursor: pointer; } +// .question-img-upvote, .answer-img-upvote { +// background: url(../images/vote-arrow-up-new.png) no-repeat; } +// .question-img-downvote, .answer-img-downvote { +// background: url(../images/vote-arrow-down-new.png) no-repeat; } +// .question-img-upvote { +// &:hover, &.on { +// background: url(../images/vote-arrow-up-on-new.png) no-repeat; } } +// .answer-img-upvote { +// &:hover, &.on { +// background: url(../images/vote-arrow-up-on-new.png) no-repeat; } } +// .question-img-downvote { +// &:hover, &.on { +// background: url(../images/vote-arrow-down-on-new.png) no-repeat; } } +// .answer-img-downvote { +// &:hover, &.on { +// background: url(../images/vote-arrow-down-on-new.png) no-repeat; } } +// #fmanswer_button { +// margin: 8px 0px; } +// .question-img-favorite:hover { +// background: url(../images/vote-favorite-on.png); } +// div.comments { +// padding: 0; } +// #comment-title { +// font-weight: bold; +// font-size: 23px; +// color: #7ea9b3; +// width: 200px; +// float: left; +// font-family: 'yanone kaffeesatz',sans-serif; } +// .comments { +// font-size: 12px; +// clear: both; +// div.controls { +// clear: both; +// float: left; +// width: 100%; +// margin: 3px 0 20px 5px; } +// .controls a { +// color: #988e4c; +// padding: 0 3px 2px 22px; +// font-family: arial; +// font-size: 13px; +// background: url(../images/comment.png) no-repeat center left; +// &:hover { +// background-color: #f5f0c9; +// text-decoration: none; } } +// .button { +// color: #988e4c; +// font-size: 11px; +// padding: 3px; +// cursor: pointer; } +// a { +// background-color: inherit; +// color: #1b79bd; +// padding: 0; } +// form.post-comments { +// margin: 3px 26px 0 42px; +// textarea { +// font-size: 13px; +// line-height: 1.3; } } +// textarea { +// height: 42px; +// width: 100%; +// margin: 7px 0 5px 1px; +// font-family: arial; +// outline: none; +// overflow: auto; +// font-size: 12px; +// line-height: 140%; +// padding-left: 2px; +// padding-top: 3px; +// border: #cce6ec 3px solid; } +// input { +// margin-left: 10px; +// margin-top: 1px; +// vertical-align: top; +// width: 100px; } +// button { +// background: url(../images/small-button-blue.png) repeat-x top; +// border: 0; +// color: #4a757f; +// font-family: arial; +// font-size: 13px; +// width: 100px; +// font-weight: bold; +// height: 27px; +// line-height: 25px; +// margin-bottom: 5px; +// cursor: pointer; +// border-radius: 4px; +// -ms-border-radius: 4px; +// -moz-border-radius: 4px; +// -webkit-border-radius: 4px; +// -khtml-border-radius: 4px; +// text-shadow: 0px 1px 0px #e6f6fa; +// -moz-text-shadow: 0px 1px 0px #e6f6fa; +// -webkit-text-shadow: 0px 1px 0px #e6f6fa; +// -webkit-box-shadow: 1px 1px 2px #808080; +// -moz-box-shadow: 1px 1px 2px #808080; +// box-shadow: 1px 1px 2px #808080; +// &:hover { +// background: url(../images/small-button-blue.png) bottom repeat-x; +// text-shadow: 0px 1px 0px #c6d9dd; +// -moz-text-shadow: 0px 1px 0px #c6d9dd; +// -webkit-text-shadow: 0px 1px 0px #c6d9dd; } } +// .counter { +// display: inline-block; +// width: 245px; +// float: right; +// color: #b6a475 !important; +// vertical-align: top; +// font-family: arial; +// float: right; +// text-align: right; } +// .comment { +// border-bottom: 1px solid #edeeeb; +// clear: both; +// margin: 0; +// margin-top: 8px; +// padding-bottom: 4px; +// overflow: auto; +// font-family: arial; +// font-size: 11px; +// min-height: 25px; +// background: white url(../images/comment-background.png) bottom repeat-x; +// border-radius: 5px; +// -ms-border-radius: 5px; +// -moz-border-radius: 5px; +// -webkit-border-radius: 5px; +// -khtml-border-radius: 5px; } +// div.comment:hover { +// background-color: #efefef; } +// a.author { +// background-color: inherit; +// color: #1b79bd; +// padding: 0; +// &:hover { +// text-decoration: underline; } } +// span.delete-icon { +// background: url(../images/close-small.png) no-repeat; +// border: 0; +// width: 14px; +// height: 14px; +// &:hover { +// border: #bc564b 2px solid; +// border-radius: 10px; +// -ms-border-radius: 10px; +// -moz-border-radius: 10px; +// -webkit-border-radius: 10px; +// -khtml-border-radius: 10px; +// margin: -3px 0px 0px -2px; } } +// .content { +// margin-bottom: 7px; } +// .comment-votes { +// float: left; +// width: 37px; +// line-height: 130%; +// padding: 6px 5px 6px 3px; } +// .comment-body { +// line-height: 1.3; +// margin: 3px 26px 0 46px; +// padding: 5px 3px; +// color: #666; +// font-size: 13px; +// .edit { +// padding-left: 6px; } +// p { +// font-size: 13px; +// line-height: 1.3; +// margin-bottom: 3px; +// padding: 0; } } +// .comment-delete { +// float: right; +// width: 14px; +// line-height: 130%; +// padding: 8px 6px; } +// .upvote { +// margin: 0px; +// padding-right: 17px; +// padding-top: 2px; +// text-align: right; +// height: 20px; +// font-size: 13px; +// font-weight: bold; +// color: #777; +// &.upvoted { +// color: #d64000; } +// &.hover { +// background: url(../images/go-up-grey.png) no-repeat; +// background-position: right 1px; } +// &:hover { +// background: url(../images/go-up-orange.png) no-repeat; +// background-position: right 1px; } } +// .help-text { +// float: right; +// text-align: right; +// color: gray; +// margin-bottom: 0px; +// margin-top: 0px; +// line-height: 50%; } } +// #questiontools { +// font-size: 22px; +// margin-top: 11px; +// text-align: left; } +// .question-status { +// margin-top: 10px; +// margin-bottom: 15px; +// padding: 20px; +// background-color: #fef7cc; +// text-align: center; +// border: #e1c04a 1px solid; +// h3 { +// font-size: 20px; +// color: #707070; +// font-weight: normal; } } +// .vote-buttons { +// // float: left; +// // text-align: center; +// // padding-top: 2px; +// // margin: 10px 10px 0px 3px; +// img { +// cursor: pointer; } } +// .vote-number { +// font-family: 'yanone kaffeesatz',sans-serif; +// padding: 0px 0 5px 0; +// font-size: 25px; +// font-weight: bold; +// color: #777; } +// .vote-buttons .notify-sidebar { +// // text-align: left; +// // width: 120px; +// label { +// vertical-align: top; } } +// .tabbar-answer { +// margin-bottom: 15px; +// padding-left: 7px; +// width: 723px; +// margin-top: 10px; } +// .answer .vote-buttons { +// // float: left; +// } +// .accepted-answer { +// background-color: #f7fecc; +// border-bottom-color: #9bd59b; +// // .vote-buttons { +// // width: 27px; +// // margin-right: 10px; +// // margin-top: 10px; } +// } +// .answer .post-update-info a { +// color: #444444; } +// .answered { +// background: #ccc; +// color: #999; } +// .answered-accepted { +// background: #dcdcdc; +// color: #763333; +// strong { +// color: #e1e818; } } +// .answered-by-owner { +// background: #f1f1ff; +// .comments { +// .button { +// background-color: #e6ecff; } +// background-color: #e6ecff; } +// // .vote-buttons { +// // margin-right: 10px; } +// } +// .answer-img-accept:hover { +// background: url(../images/vote-accepted-on.png); } +// .answer-body { +// a { +// color: #1b79bd; } +// li { +// margin-bottom: 0.7em; } } +// #fmanswer { +// color: #707070; +// line-height: 1.2; +// margin-top: 10px; +// h2 { +// font-family: 'yanone kaffeesatz',sans-serif; +// color: #7ea9b3; +// font-size: 24px; } +// label { +// font-size: 13px; } } +// .message { +// padding: 5px; +// margin: 0px 0 10px 0; } } + +// @media screen and (-webkit-min-device-pixel-ratio:0) { +// textarea { +// padding-left: 3px !important; } } + +// .facebook-share.icon, .twitter-share.icon, .linkedin-share.icon, .identica-share.icon { +// background: url(../images/socialsprite.png) no-repeat; +// display: block; +// text-indent: -100em; +// height: 25px; +// width: 25px; +// margin-bottom: 3px; } + +// .facebook-share.icon:hover, .twitter-share.icon:hover, .linkedin-share.icon:hover, .identica-share.icon:hover { +// opacity: 0.8; +// filter: alpha(opacity = 80); } + +// .facebook-share.icon { +// background-position: -26px 0px; } + +// .identica-share.icon { +// background-position: -78px 0px; } + +// .twitter-share.icon { +// margin-top: 10px; +// background-position: 0px 0px; } + +// .linkedin-share.icon { +// background-position: -52px 0px; } + +// .openid-signin, .meta, .users-page, .user-profile-edit-page { +// font-size: 13px; +// line-height: 1.3; +// color: #525252; } + +// .openid-signin p, .meta p, .users-page p, .user-profile-edit-page p { +// font-size: 13px; +// color: #707070; +// line-height: 1.3; +// font-family: arial; +// color: #525252; +// margin-bottom: 12px; } + +// .openid-signin h2, .meta h2, .users-page h2, .user-profile-edit-page h2 { +// color: #525252; +// padding-left: 0px; +// font-size: 16px; } + +// .openid-signin form, .meta form, .users-page form, .user-profile-edit-page form, .user-profile-page form { +// margin-bottom: 15px; } + +// .openid-signin input[type="text"], .meta input[type="text"], .users-page input[type="text"], .user-profile-edit-page input[type="text"], .user-profile-page input[type="text"], .openid-signin input[type="password"], .meta input[type="password"], .users-page input[type="password"], .user-profile-edit-page input[type="password"], .user-profile-page input[type="password"], .openid-signin select, .meta select, .users-page select, .user-profile-edit-page select, .user-profile-page select { +// border: #cce6ec 3px solid; +// height: 25px; +// padding-left: 5px; +// width: 395px; +// font-size: 14px; } + +// .openid-signin select, .meta select, .users-page select, .user-profile-edit-page select, .user-profile-page select { +// width: 405px; +// height: 30px; } + +// .openid-signin textarea, .meta textarea, .users-page textarea, .user-profile-edit-page textarea, .user-profile-page textarea { +// border: #cce6ec 3px solid; +// padding-left: 5px; +// padding-top: 5px; +// width: 395px; +// font-size: 14px; } + +// .openid-signin input.submit, .meta input.submit, .users-page input.submit, .user-profile-edit-page input.submit, .user-profile-page input.submit { +// background: url(../images/small-button-blue.png) repeat-x top; +// border: 0; +// color: #4a757f; +// font-weight: bold; +// font-size: 13px; +// font-family: arial; +// height: 26px; +// margin: 5px 0px; +// width: 100px; +// cursor: pointer; +// border-radius: 4px; +// -ms-border-radius: 4px; +// -moz-border-radius: 4px; +// -webkit-border-radius: 4px; +// -khtml-border-radius: 4px; +// text-shadow: 0px 1px 0px #e6f6fa; +// -moz-text-shadow: 0px 1px 0px #e6f6fa; +// -webkit-text-shadow: 0px 1px 0px #e6f6fa; +// -webkit-box-shadow: 1px 1px 2px #808080; +// -moz-box-shadow: 1px 1px 2px #808080; +// box-shadow: 1px 1px 2px #808080; } + +// .openid-signin input.submit:hover, .meta input.submit:hover, .users-page input.submit:hover, .user-profile-edit-page input.submit:hover, .user-profile-page input.submit:hover { +// background: url(../images/small-button-blue.png) repeat-x bottom; +// text-decoration: none; } + +.openid-signin .cancel, .meta .cancel, .users-page .cancel, .user-profile-edit-page .cancel, .user-profile-page .cancel { + background: url(../images/small-button-cancel.png) repeat-x top !important; + color: #525252 !important; } + +.openid-signin .cancel:hover, .meta .cancel:hover, .users-page .cancel:hover, .user-profile-edit-page .cancel:hover, .user-profile-page .cancel:hover { + background: url(../images/small-button-cancel.png) repeat-x bottom !important; } + +#email-input-fs, #local_login_buttons, #password-fs, #openid-fs { + margin-top: 10px; } + +#email-input-fs #id_email, #local_login_buttons #id_email, #password-fs #id_email, #openid-fs #id_email, #email-input-fs #id_username, #local_login_buttons #id_username, #password-fs #id_username, #openid-fs #id_username, #email-input-fs #id_password, #local_login_buttons #id_password, #password-fs #id_password, #openid-fs #id_password { + font-size: 12px; + line-height: 20px; + height: 20px; + margin: 0px; + padding: 0px 0 0 5px; + border: #cce6ec 3px solid; + width: 200px; } + +#email-input-fs .submit-b, #local_login_buttons .submit-b, #password-fs .submit-b, #openid-fs .submit-b { + background: url(../images/small-button-blue.png) repeat-x top; + border: 0; + color: #4a757f; + font-weight: bold; + font-size: 13px; + font-family: arial; + height: 24px; + margin-top: -2px; + padding-left: 10px; + padding-right: 10px; + cursor: pointer; + border-radius: 4px; + -ms-border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + text-shadow: 0px 1px 0px #e6f6fa; + -moz-text-shadow: 0px 1px 0px #e6f6fa; + -webkit-text-shadow: 0px 1px 0px #e6f6fa; + -webkit-box-shadow: 1px 1px 2px #808080; + -moz-box-shadow: 1px 1px 2px #808080; + box-shadow: 1px 1px 2px #808080; } + +#email-input-fs .submit-b:hover, #local_login_buttons .submit-b:hover, #password-fs .submit-b:hover, #openid-fs .submit-b:hover { + background: url(../images/small-button-blue.png) repeat-x bottom; } + +.openid-input { + background: url(../images/openid.gif) no-repeat; + padding-left: 15px; + cursor: pointer; } + +.openid-login-input { + background-position: center left; + background: url(../images/openid.gif) no-repeat 0% 50%; + padding: 5px 5px 5px 15px; + cursor: pointer; + font-family: trebuchet ms; + font-weight: 300; + font-size: 150%; + width: 500px; } + +.openid-login-submit { + height: 40px; + width: 80px; + line-height: 40px; + cursor: pointer; + border: 1px solid #777; + font-weight: bold; + font-size: 120%; } + +.tabbar-user { + width: 375px; } + +.user { + padding: 5px; + line-height: 140%; + width: 166px; + border: #eee 1px solid; + margin-bottom: 5px; + border-radius: 3px; + -ms-border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + .user-micro-info { + color: #525252; } + ul { + margin: 0; + list-style-type: none; } + .thumb { + clear: both; + float: left; + margin-right: 4px; + display: inline; } } + +// .tabbar-tags { +// width: 270px; +// margin-bottom: 15px; } + +// a { +// &.medal { +// font-size: 17px; +// line-height: 250%; +// margin-right: 5px; +// color: #333; +// text-decoration: none; +// background: url(../images/medala.gif) no-repeat; +// border-left: 1px solid #eee; +// border-top: 1px solid #eee; +// border-bottom: 1px solid #ccc; +// border-right: 1px solid #ccc; +// padding: 4px 12px 4px 6px; } +// &:hover.medal { +// color: #333; +// text-decoration: none; +// background: url(../images/medala_on.gif) no-repeat; +// border-left: 1px solid #e7e296; +// border-top: 1px solid #e7e296; +// border-bottom: 1px solid #d1ca3d; +// border-right: 1px solid #d1ca3d; } } + +#award-list .user { + float: left; + margin: 5px; } + +.tabbar-profile { + width: 100%; + margin-bottom: 15px; + float: left; } + +// .user-profile-page { +// font-size: 13px; +// color: #525252; +// p { +// font-size: 13px; +// line-height: 1.3; +// color: #525252; } +// .avatar img { +// border: #eee 1px solid; +// padding: 5px; } +// h2 { +// padding: 10px 0px 10px 0px; +// font-family: 'yanone kaffeesatz',sans-serif; } } + +.user-details { + font-size: 13px; + h3 { + font-size: 16px; } } + +.user-about { + background-color: #eeeeee; + height: 200px; + line-height: 20px; + overflow: auto; + padding: 10px; + width: 90%; + p { + font-size: 13px; } } + +// .follow-toggle, .submit { +// border: 0 !important; +// color: #4a757f; +// font-weight: bold; +// font-size: 12px; +// height: 26px; +// line-height: 26px; +// margin-top: -2px; +// font-size: 15px; +// cursor: pointer; +// font-family: 'yanone kaffeesatz',sans-serif; +// background: url(../images/small-button-blue.png) repeat-x top; +// border-radius: 4px; +// -ms-border-radius: 4px; +// -moz-border-radius: 4px; +// -webkit-border-radius: 4px; +// -khtml-border-radius: 4px; +// text-shadow: 0px 1px 0px #e6f6fa; +// -moz-text-shadow: 0px 1px 0px #e6f6fa; +// -webkit-text-shadow: 0px 1px 0px #e6f6fa; +// -webkit-box-shadow: 1px 1px 2px #808080; +// -moz-box-shadow: 1px 1px 2px #808080; +// box-shadow: 1px 1px 2px #808080; } + +// .follow-toggle:hover, .submit:hover { +// background: url(../images/small-button-blue.png) repeat-x bottom; +// text-decoration: none !important; } + +// .follow-toggle { +// .follow { +// font-color: #000; +// font-style: normal; } +// .unfollow { +// div.unfollow-red { +// display: none; } +// &:hover div { +// &.unfollow-red { +// display: inline; +// color: #fff; +// font-weight: bold; +// color: #a05736; } +// &.unfollow-green { +// display: none; } } } } + +.count { + font-family: 'yanone kaffeesatz',sans-serif; + font-size: 200%; + font-weight: 700; + color: #777777; } + +.scorenumber { + font-family: 'yanone kaffeesatz',sans-serif; + font-size: 35px; + font-weight: 800; + color: #777; + line-height: 40px; + margin-top: 3px; } + +.vote-count { + font-family: arial; + font-size: 160%; + font-weight: 700; + color: #777; } + +// .answer-summary { +// display: block; +// clear: both; +// padding: 3px; } + +.answer-votes { + background-color: #eeeeee; + color: #555555; + float: left; + font-family: arial; + font-size: 15px; + font-weight: bold; + height: 17px; + padding: 2px 4px 5px; + text-align: center; + text-decoration: none; + width: 20px; + margin-right: 10px; + border-radius: 4px; + -ms-border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; } + +.karma-summary { + padding: 5px; + font-size: 13px; + h3 { + text-align: center; + font-weight: bold; + padding: 5px; } } + +.karma-diagram { + width: 477px; + height: 300px; + float: left; + margin-right: 10px; } + +.karma-details { + float: right; + width: 450px; + height: 250px; + overflow-y: auto; + word-wrap: break-word; + p { + margin-bottom: 10px; } } + +.karma-gained { + font-weight: bold; + background: #eee; + width: 25px; + margin-right: 5px; + color: green; + padding: 3px; + display: block; + float: left; + text-align: center; + border-radius: 3px; + -ms-border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; } + +.karma-lost { + font-weight: bold; + background: #eee; + width: 25px; + color: red; + padding: 3px; + display: block; + margin-right: 5px; + float: left; + text-align: center; + border-radius: 3px; + -ms-border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; } + +.submit-row { + margin-bottom: 10px; } + +.revision { + margin: 10px 0 10px 0; + font-size: 13px; + color: #525252; + p { + font-size: 13px; + line-height: 1.3; + color: #525252; } + h3 { + font-family: 'yanone kaffeesatz',sans-serif; + font-size: 21px; + padding-left: 0px; } + .header { + background-color: #f5f5f5; + padding: 5px; + cursor: pointer; } + .author { + background-color: #e9f3f5; } + .summary { + padding: 5px 0 10px 0; + span { + background-color: #fde785; + padding: 6px; + border-radius: 4px; + -ms-border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + display: inline; + -webkit-box-shadow: 1px 1px 4px #cfb852; + -moz-box-shadow: 1px 1px 4px #cfb852; + box-shadow: 1px 1px 4px #cfb852; } } + .answerbody { + padding: 10px 0 5px 10px; } + .revision-mark { + width: 150px; + text-align: left; + display: inline-block; + font-size: 11px; + overflow: hidden; + .gravatar { + float: left; + margin-right: 4px; + padding-top: 5px; } } + .revision-number { + font-size: 300%; + font-weight: bold; + font-family: sans-serif; } } + +// del { +// color: #c34719; +// .post-tag { +// color: #c34719; } } + +ins { + .post-tag, p { + background-color: #e6f0a2; } + background-color: #e6f0a2; } + +// .vote-notification { +// z-index: 1; +// cursor: pointer; +// display: none; +// position: absolute; +// font-family: arial; +// font-size: 14px; +// font-weight: normal; +// color: white; +// background-color: #8e0000; +// text-align: center; +// padding-bottom: 10px; +// -webkit-box-shadow: 0px 2px 4px #370000; +// -moz-box-shadow: 0px 2px 4px #370000; +// box-shadow: 0px 2px 4px #370000; +// border-radius: 4px; +// -ms-border-radius: 4px; +// -moz-border-radius: 4px; +// -webkit-border-radius: 4px; +// -khtml-border-radius: 4px; +// h3 { +// background: url(../images/notification.png) repeat-x top; +// padding: 10px 10px 10px 10px; +// font-size: 13px; +// margin-bottom: 5px; +// border-top: #8e0000 1px solid; +// color: #fff; +// font-weight: normal; +// border-top-right-radius: 4px; +// border-top-left-radius: 4px; +// -moz-border-radius-topright: 4px; +// -moz-border-radius-topleft: 4px; +// -webkit-border-top-left-radius: 4px; +// -webkit-border-top-right-radius: 4px; } +// a { +// color: #fb7321; +// text-decoration: underline; +// font-weight: bold; } } + +// #ground { +// width: 100%; +// clear: both; +// border-top: 1px solid #000; +// padding: 6px 0 0 0; +// background: #16160f; +// font-size: 16px; +// font-family: 'yanone kaffeesatz',sans-serif; +// p { +// margin-bottom: 0; } } + +.footer-links { + color: #eee; + text-align: left; + width: 500px; + float: left; + a { + color: #e7e8a8; } } + +.powered-link { + width: 500px; + float: left; + text-align: left; + a { + color: #8ebcc7; } } + +.copyright { + color: #616161; + width: 450px; + float: right; + text-align: right; + a { + color: #8ebcc7; } + img.license-logo { + margin: 6px 0px 20px 10px; + float: right; } } + +.notify-me { + float: left; } + +span { + &.text-counter { + margin-right: 20px; } + // &.form-error { + // color: #990000; + // font-weight: normal; + // margin-left: 5px; } + } + +p.form-item { + margin: 0px; } + +// .deleted { +// background: #f4e7e7 none repeat scroll 0 0; } + +.form-row { + line-height: 25px; } + +table { + &.form-as-table { + margin-top: 5px; + ul { + list-style-type: none; + display: inline; } + li { + display: inline; } + td { + text-align: right; } + th { + text-align: left; + font-weight: normal; } } + &.ab-subscr-form, &.ab-tag-filter-form { + width: 45em; } } + +.submit-row { + line-height: 30px; + padding-top: 10px; + display: block; + clear: both; } + +.errors { + line-height: 20px; + color: red; } + +.error { + color: darkred; + margin: 0; + font-size: 10px; } + +label.retag-error { + color: darkred; + padding-left: 5px; + font-size: 10px; } + +.fieldset { + border: none; + margin-top: 10px; + padding: 10px; } + +// span.form-error { +// color: #990000; +// font-size: 90%; +// font-weight: normal; +// margin-left: 5px; } + +.favorites-empty { + width: 32px; + height: 45px; + float: left; } + +.user-info-table { + margin-bottom: 10px; + border-spacing: 0; } + +.user-stats-table .narrow { + width: 660px; } + +.narrow .summary h3 { + padding: 0px; + margin: 0px; } + +.relativetime { + font-weight: bold; + text-decoration: none; } + +// .narrow .tags { +// float: left; } + +.user-action-1 { + font-weight: bold; + color: #333; } + +.user-action-2 { + font-weight: bold; + color: #ccc; } + +.user-action-3, .user-action-4 { + color: #333; } + +.user-action-5, .user-action-6 { + color: darkred; } + +.user-action-7 { + color: #333; } + +.user-action-8 { + padding: 3px; + font-weight: bold; + background-color: #ccc; + color: #763333; } + +.revision-summary { + background-color: #fffe9b; + padding: 2px; } + +.question-title-link a { + font-weight: bold; + color: #0077cc; } + +.answer-title-link a { + color: #333; } + +.post-type-1 a, .post-type-3 a, .post-type-5 a { + font-weight: bold; } + +.post-type-2 a, .post-type-4 a, .post-type-6 a, .post-type-8 a { + color: #333; } + +.hilite, .hilite1 { + background-color: #ff0; } + +.hilite2 { + background-color: #f0f; } + +.hilite3 { + background-color: #0ff; } + +// .gold, .badge1 { +// color: #ffcc00; } + +// .silver, .badge2 { +// color: #cccccc; } + +// .bronze, .badge3 { +// color: #cc9933; } + +.score { + font-weight: 800; + color: #333; } + +a { + &.comment { + background: #eee; + color: #993300; + padding: 5px; } + &.offensive { + color: #999; } } + +.message { + h1 { + padding-top: 0px; + font-size: 15px; } + p { + margin-bottom: 0px; } } + +p.space-above { + margin-top: 10px; } + +.warning { + color: red; } + +button::-moz-focus-inner { + padding: 0; + border: none; } + +// .submit { +// cursor: pointer; +// background-color: #d4d0c8; +// height: 30px; +// border: 1px solid #777777; +// font-weight: bold; +// font-size: 120%; +// &:hover { +// text-decoration: underline; } +// &.small { +// margin-right: 5px; +// height: 20px; +// font-weight: normal; +// font-size: 12px; +// padding: 1px 5px; +// &:hover { +// text-decoration: none; } } } + +.question-page a.submit { + display: -moz-inline-stack; + display: inline-block; + line-height: 30px; + padding: 0 5px; + *display: inline; } + +.noscript { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + z-index: 100; + padding: 5px 0; + text-align: center; + font-family: sans-serif; + font-size: 120%; + font-weight: bold; + color: #ffffff; + background-color: #ae0000; } + +.big { + font-size: 14px; } + +.strong { + font-weight: bold; } + +.orange { + color: #d64000; + font-weight: bold; } + +.grey { + color: #808080; } + +.about div { + padding: 10px 5px 10px 5px; + border-top: 1px dashed #aaaaaa; } + +.highlight { + background-color: #fff8c6; } + +.nomargin { + margin: 0; } + +.margin-bottom { + margin-bottom: 10px; } + +.margin-top { + margin-top: 10px; } + +.inline-block { + display: inline-block; } + +.action-status { + margin: 0; + border: none; + text-align: center; + line-height: 10px; + font-size: 12px; + padding: 0; + span { + padding: 3px 5px 3px 5px; + background-color: #fff380; + font-weight: normal; + -moz-border-radius: 5px; + -khtml-border-radius: 5px; + -webkit-border-radius: 5px; } } + +.list-table td { + vertical-align: top; } + +table.form-as-table { + .errorlist { + display: block; + margin: 0; + padding: 0 0 0 5px; + text-align: left; + font-size: 10px; + color: darkred; } + input { + display: inline; + margin-left: 4px; } + th { + vertical-align: bottom; + padding-bottom: 4px; } } + +.form-row-vertical { + margin-top: 8px; + display: block; + label { + margin-bottom: 3px; + display: block; } } + +.text-align-right { + text-align: center; } + +ul.form-horizontal-rows { + list-style: none; + margin: 0; + li { + position: relative; + height: 40px; } + label { + display: inline-block; } + ul.errorlist { + list-style: none; + color: darkred; + font-size: 10px; + line-height: 10px; + position: absolute; + top: 2px; + left: 180px; + text-align: left; + margin: 0; + li { + height: 10px; } } + label { + position: absolute; + left: 0px; + bottom: 6px; + margin: 0px; + line-height: 12px; + font-size: 12px; } + li input { + position: absolute; + bottom: 0px; + left: 180px; + margin: 0px; } } + +.narrow .summary { + float: left; } + +.user-profile-tool-links { + font-weight: bold; + vertical-align: top; } + +// ul { +// &.post-tags { +// margin-left: 3px; +// li { +// margin-top: 4px; +// margin-bottom: 3px; } } +// &.post-retag { +// margin-bottom: 0px; +// margin-left: 5px; } } + +// #question-controls .tags { +// margin: 0 0 3px 0; } + +// #tagselector { +// padding-bottom: 2px; +// margin-bottom: 0; } + +// #related-tags { +// padding-left: 3px; } + +#hideignoredtagscontrol { + margin: 5px 0 0 0; + label { + font-size: 12px; + color: #666; } } + +#hideignoredtagscb { + margin: 0 2px 0 1px; } + +#recaptcha_widget_div { + width: 318px; + float: left; + clear: both; } + +p.signup_p { + margin: 20px 0px 0px 0px; } + +.simple-subscribe-options ul { + list-style: none; + list-style-position: outside; + margin: 0; } + +.wmd-preview { + a { + color: #1b79bd; } + li { + margin-bottom: 7px; + font-size: 14px; } } + +// .search-result-summary { +// font-weight: bold; +// font-size: 18px; +// line-height: 22px; +// margin: 0px 0px 0px 0px; +// padding: 2px 0 0 0; +// float: left; } + +.faq-rep-item { + text-align: right; + padding-right: 5px; } + +.user-info-table .gravatar { + margin: 0; } + +#responses { + clear: both; + line-height: 18px; + margin-bottom: 15px; + div.face { + float: left; + text-align: center; + width: 54px; + padding: 3px; + overflow: hidden; } } + +.response-parent { + margin-top: 18px; + strong { + font-size: 20px; } } + +.re { + min-height: 57px; + clear: both; + margin-top: 10px; } + +#responses input { + float: left; } + +#re_tools { + margin-bottom: 10px; } + +#re_sections { + margin-bottom: 6px; + .on { + font-weight: bold; } } + +.avatar-page { + ul { + list-style: none; } + li { + display: inline; } } + +// .user-profile-page { +// .avatar p { +// margin-bottom: 0px; } +// .tabbar a#stats { +// margin-left: 0; } +// img.gravatar { +// margin: 2px 0 3px 0; } +// h3 { +// padding: 0; +// margin-top: -3px; } } + +.userlist { + font-size: 13px; } + +img.flag { + border: 1px solid #eee; + vertical-align: text-top; } + +.main-page img.flag { + vertical-align: text-bottom; } + +a.edit { + padding-left: 3px; + color: #145bff; } + +.str { + color: #080; } + +.kwd { + color: #008; } + +.com { + color: #800; } + +.typ { + color: #606; } + +.lit { + color: #066; } + +.pun { + color: #660; } + +.pln { + color: #000; } + +// .tag { +// color: #008; } + +.atn { + color: #606; } + +.atv { + color: #080; } + +.dec { + color: #606; } + +pre.prettyprint { + clear: both; + padding: 3px; + border: 0px solid #888; } + +// @media print { +// .str { +// color: #060; } +// .kwd { +// color: #006; +// font-weight: bold; } +// .com { +// color: #600; +// font-style: italic; } +// .typ { +// color: #404; +// font-weight: bold; } +// .lit { +// color: #044; } +// .pun { +// color: #440; } +// .pln { +// color: #000; } +// .tag { +// color: #006; +// font-weight: bold; } +// .atn { +// color: #404; } +// .atv { +// color: #060; } } diff --git a/templates/sass/discussion/_badges.scss b/templates/sass/discussion/_badges.scss new file mode 100644 index 0000000000..2b809327ed --- /dev/null +++ b/templates/sass/discussion/_badges.scss @@ -0,0 +1,79 @@ +div.badges-intro { + margin: 20px 0; +} + +div.badge-intro { + @extend .badges-intro; + + .badge1, .badge2, .badge3 { + font-size: 20px; + } + + +} + +div#award-list{ + li.username { + font-size: 20px; + margin-bottom: 8px; + } +} + +ul.badge-list { + li.badge { + border-bottom: 1px solid #eee; + @extend .clearfix; + list-style: none; + padding: 10px 0; + + &:last-child { + border-bottom: 0; + } + + div.check { + float:right; + min-width:flex-grid(1,9); + text-align:right; + + span { + font-size:19px; + padding-right:5px; + color:green; + } + } + div.badge-name { + float:left; + width:flex-grid(3,9); + + span { + font-size: 20px; + } + } + + p { + margin: 0; + float:left; + } + } +} + +.gold, .badge1 { + color: #ffcc00; +} + +.silver, .badge2 { + color: #cccccc; +} + +.bronze, .badge3 { + color: #cc9933; +} +div.badge-desc { + > div { + margin-bottom: 20px; + span { + font-size: 18px; + @include border-radius(10px); + } + } +} diff --git a/templates/sass/discussion/_discussion.scss b/templates/sass/discussion/_discussion.scss new file mode 100644 index 0000000000..42d8350fef --- /dev/null +++ b/templates/sass/discussion/_discussion.scss @@ -0,0 +1,113 @@ +// Base extends (Merge with main stylesheet later) +.light-button, a.light-button { + @include box-shadow(inset 0 1px 0 #fff); + @include linear-gradient(#fff, lighten(#888, 40%)); + @include border-radius(3px); + border: 1px solid #ccc; + padding: 4px 8px; + color: #666; + font: normal $body-font-size $body-font-family; + text-decoration: none; + cursor: pointer; + -webkit-font-smoothing: antialiased; + + &:hover, &:focus { + @include linear-gradient(#fff, lighten(#888, 37%)); + border: 1px solid #ccc; + text-decoration: none; + } + +} +.action-link { + a { + color: $mit-red; + + &:hover { + text-decoration: none; + color: darken($mit-red, 20%); + } + } +} + +// Layout +body.askbot { + + section.main-content { + div.discussion-wrapper { + @extend .table-wrapper; + + div.discussion-content { + @include box-sizing(border-box); + display: table-cell; + min-width: 650px; + padding: lh(); + vertical-align: top; + width: flex-grid(9) + flex-gutter(); + + a.tabula-rasa, .tabula-rasa{ + @extend .light-button; + @include border-radius(5px); + display: block; + margin: 10px auto; + padding: 20px; + text-align: center; + width: flex-grid(5); + text-decoration: none; + color: #888; + font-weight: bold; + + &:first-child { + margin-top: 70px; + } + + &:last-child { + margin-bottom: 70px; + } + + } + } + } + } + +} + +// Autocomplete +.acInput { + width: 200px; +} +.acResults { + background-color: #fff; + border: 1px solid #ababab; + overflow: hidden; + padding: 0px; + @include box-shadow(0 2px 2px #bbb); + + ul { + list-style-position: outside; + list-style: none; + margin: 0; + padding: 0; + width: 100%; + } + + li { + cursor: pointer; + display: block; + font: menu; + margin: 0px; + overflow: hidden; + padding: 5px 10px; + text-align: left; + border-top: 1px solid #eee; + width: 100%; + } +} + +.acLoading { + background : url('../images/indicator.gif') right center no-repeat; +} + +.acSelect { + background-color: $mit-red; + color: #fff; +} diff --git a/templates/sass/discussion/_form-wmd-toolbar.scss b/templates/sass/discussion/_form-wmd-toolbar.scss new file mode 100644 index 0000000000..ecfe535c4a --- /dev/null +++ b/templates/sass/discussion/_form-wmd-toolbar.scss @@ -0,0 +1,118 @@ +.wmd-panel +{ +} + +#wmd-button-bar { + border: 1px solid #ddd; + height:36px; + float:left; + width:99%; +} + +#wmd-input { + height: 500px; + background-color: Gainsboro; + border: 1px solid DarkGray; + margin-top: -20px; +} + +#wmd-preview { + background-color: LightSkyBlue; +} + +#wmd-output { + background-color: Pink; +} + +#wmd-button-row { + position: relative; + margin-left: 5px; + margin-right: 5px; + margin-bottom: 0px; + margin-top: 10px; + padding: 0px; + height: 20px; +} + +.wmd-spacer { + width: 1px; + height: 20px; + margin-left: 14px; + position: absolute; + background-color: Silver; + display: inline-block; + list-style: none; +} + +.wmd-button { + width: 20px; + height: 20px; + margin-left: 5px; + margin-right: 5px; + position: absolute; + background-image: url(/static/images/askbot/wmd-buttons.png); + background-repeat: no-repeat; + background-position: 0px 0px; + display: inline-block; + list-style: none; +} + +.wmd-button > a { + width: 20px; + height: 20px; + margin-left: 5px; + margin-right: 5px; + position: absolute; + display: inline-block; +} + + +/* sprite button slicing style information */ +#wmd-bold-button {left: 0px; background-position: 0px 0;} +#wmd-italic-button {left: 25px; background-position: -20px 0;} +#wmd-spacer1 {left: 50px;} +#wmd-link-button {left: 75px; background-position: -40px 0;} +#wmd-quote-button {left: 100px; background-position: -60px 0;} +#wmd-code-button {left: 125px; background-position: -80px 0;} +#wmd-image-button {left: 150px; background-position: -100px 0;} +#wmd-attachment-button {left: 175px; background-position: -120px 0;} +#wmd-spacer2 {left: 200px;} +#wmd-olist-button {left: 225px; background-position: -140px 0;} +#wmd-ulist-button {left: 250px; background-position: -160px 0;} +#wmd-heading-button {left: 275px; background-position: -180px 0;} +#wmd-hr-button {left: 300px; background-position: -200px 0;} +#wmd-spacer3 {left: 325px;} +#wmd-undo-button {left: 350px; background-position: -220px 0;} +#wmd-redo-button {left: 375px; background-position: -240px 0;} +#wmd-help-button {right: 0px; background-position: -260px 0;} + + +.wmd-prompt-background +{ + background-color: Black; +} + +.wmd-prompt-dialog +{ + border: 1px solid #999999; + background-color: #F5F5F5; +} + +.wmd-prompt-dialog > div { + font-size: 1em; + font-family: arial, helvetica, sans-serif; +} + + +.wmd-prompt-dialog > form > input[type="text"] { + border: 1px solid #999999; + color: black; +} + +.wmd-prompt-dialog > form > input[type="button"]{ + border: 1px solid #888888; + font-family: trebuchet MS, helvetica, sans-serif; + font-size: 1em; + font-weight: bold; +} + diff --git a/templates/sass/discussion/_forms.scss b/templates/sass/discussion/_forms.scss new file mode 100644 index 0000000000..ab14bc1137 --- /dev/null +++ b/templates/sass/discussion/_forms.scss @@ -0,0 +1,161 @@ +form.answer-form { + @include box-sizing(border-box); + border-top: 1px solid #ddd; + overflow: hidden; + padding-left: flex-grid(1.1); + + textarea { + @include box-sizing(border-box); + margin-top: 15px; + resize: vertical; + width: 99%; + } + + div.form-item { + margin: 15px 0; + + label { + display: block; + margin-bottom: -5px; + } + + .title-desc { + @include box-sizing(border-box); + @include border-radius(4px); + background: #333; + color: #fff; + display: none; + font-size: 13px; + padding: 7px 14px; + -webkit-font-smoothing: antialiased; + } + + &:hover { + .title-desc { + display: inline-block; + position: absolute; + margin-left: 10px; + z-index: 1; + width: 200px; + + &:before { + border-color: transparent #333 transparent transparent; + border-style:solid; + border-width:12px 12px 12px 0; + content:""; + height:0; + left:-10px; + position:absolute; + top:1; + width:0; + + } + } + } + + } + + span.form-error, label.form-error { + color: #990000; + display: inline-block; + font-size: 90%; + font-weight: bold; + padding: 10px 0; + } + + div.preview-toggle{ + padding: 15px 0; + width: auto; + a { + @extend .light-button; + } + } + + .wmd-preview { + margin: 3px 0 15px 0; + padding: 10px; + background-color: #F5F5F5; + min-height: 20px; + overflow: auto; + font-size: 13px; + font-family: Arial; + + p { + margin-bottom: 14px; + line-height: 1.4; + font-size: 14px; + } + + blockquote { + margin-left: 2.5%; + padding-left: 1.5%; + border-left: 1px dashed #ddd; + color: $mit-red;; + } + + ul, ol, pre { + margin-left: 3%; + margin-bottom: 20px; + } + + + pre { + background-color: #eee; + } + + blockquote { + background-color: #eee; + } + } +} + +input.after-editor { + margin-bottom: 20px; + margin-right: 10px; +} + +form.question-form { + @extend .answer-form; + border: none; + padding: 15px 0 0 0; + + + input[type="text"] { + @include box-sizing(border-box); + width: flex-grid(6); + } + + input[type="checkbox"] { + margin-top: 10px; + } + + div#question-list { + background-color: rgba(255,255,255,0.95); + @include box-sizing(border-box); + margin-top: -15px; + max-width: 505px; + min-width: 300px; + overflow: hidden; + padding-left: 5px; + position: absolute; + width: 35%; + z-index: 9999; + + h2 { + text-transform: none; + padding: 8px 0; + border-bottom: 1px solid #eee; + margin: 0; + + span { + background: #eee; + color: #555; + padding: 2px 5px; + @include border-radius(2px); + margin-right: 5px; + } + } +} +} + + diff --git a/templates/sass/discussion/_modals.scss b/templates/sass/discussion/_modals.scss new file mode 100644 index 0000000000..fd05052a12 --- /dev/null +++ b/templates/sass/discussion/_modals.scss @@ -0,0 +1,29 @@ +.vote-notification { + background-color: darken($mit-red, 7%); + @include border-radius(4px); + @include box-shadow(0px 2px 9px #aaa); + color: white; + cursor: pointer; + display: none; + font-size: 14px; + font-weight: normal; + padding-bottom: 10px; + position: absolute; + text-align: center; + z-index: 1; + + h3 { + background: $mit-red; + padding: 10px 10px 10px 10px; + font-size: 13px; + margin-bottom: 5px; + border-bottom: darken(#8e0000, 10%) 1px solid; + @include box-shadow(0 1px 0 lighten($mit-red, 10%)); + color: #fff; + font-weight: normal; + @include border-radius(4px 4px 0 0); + } + a { + color: #fb7321; + text-decoration: underline; + font-weight: bold; } } diff --git a/templates/sass/discussion/_profile.scss b/templates/sass/discussion/_profile.scss new file mode 100644 index 0000000000..4654addb7a --- /dev/null +++ b/templates/sass/discussion/_profile.scss @@ -0,0 +1,126 @@ +body.user-profile-page { + + section.questions { + h1 { + margin: 0; + } + } + + ul.sub-info { + // border-top: 1px solid #ddd; + margin-top: lh(); + list-style: none; + + > li { + display: table-cell; + padding: (flex-gutter(9)/2); + border-right: 1px dashed #efefef; + @include box-sizing(border-box); + + &:first-child { + padding-left: 0; + } + + &:last-child { + border-right: 0; + padding-right: 0; + } + + &.votes-badges { + width: flex-grid(2,9); + + p { + margin-top: 15px; + } + + } + + &.answer-list { + width: flex-grid(4, 9); + } + + &.tags-list { + width: flex-grid(3,9); + } + + h2 { + margin-bottom: 30px; + margin-top: 0; + } + + span.tag-number { + display: none; + } + } + + ul { + list-style: none; + + &.user-stats-table { + list-style: none; + + li { + padding: 10px 0 15px; + border-top: 1px solid #eee; + } + } + + &.vote-buttons { + list-style: none; + margin-bottom: 30px; + + li { + background-color: lighten($cream, 3%); + background-position: 10px center; + background-repeat: no-repeat; + @include border-radius(4px); + display: inline-block; + height: 20px; + padding: 10px 10px 10px 40px; + + &.up { + background-color:#d1e3a8; + background-image: url(/static/images/askbot/vote-arrow-up-activate.png); + margin-right: 6px; + + span.vote-count { + color: #3f6c3e; + } + } + + &.down { + background-image: url(/static/images/askbot/vote-arrow-down-activate.png); + background-color:#eac6ad; + + span.vote-count { + color: $mit-red; + } + + } + } + } + + &.badges { + @include inline-block(); + + a { + background-color: #e3e3e3; + border: 0; + @include border-radius(4px); + color: #292309; + display: block; + font-size: 12px; + padding: 10px; + margin-bottom: 10px; + text-shadow: 0 1px 0 #fff; + text-transform: uppercase; + text-decoration: none; + + &:hover { + background-color: #cdcdcd; + } + } + } + } + } +} diff --git a/templates/sass/discussion/_question-view.scss b/templates/sass/discussion/_question-view.scss new file mode 100644 index 0000000000..a5e44d355b --- /dev/null +++ b/templates/sass/discussion/_question-view.scss @@ -0,0 +1,363 @@ +div.question-header { + div.vote-buttons { + display: inline-block; + float: left; + margin-right: flex-gutter(9); + width: flex-grid(0.7,9); + + ul { + li { + background-position: center; + background-repeat: no-repeat; + cursor: pointer; + font-weight: bold; + height: 20px; + list-style: none; + padding: 10px; + text-align: center; + width: 70%; + + &.post-vote { + @include border-radius(4px); + background-color: lighten($cream, 5%); + border: 1px solid darken( $cream, 10% ); + @include box-shadow(inset 0 1px 0px #fff); + } + + &.question-img-upvote, &.answer-img-upvote { + background-image: url(/static/images/askbot/vote-arrow-up.png); + @include box-shadow(inset 0 1px 0px rgba(255, 255, 255, 0.5)); + + &:hover, &.on { + background-color:#d1e3a8; + border-color: darken(#D1E3A8, 20%); + background-image: url(/static/images/askbot/vote-arrow-up-activate.png); + } + } + + &.question-img-downvote, &.answer-img-downvote { + background-image: url(/static/images/askbot/vote-arrow-down.png); + + &:hover, &.on { + background-color:#EAC6AD; + border-color: darken(#EAC6AD, 20%); + background-image: url(/static/images/askbot/vote-arrow-down-activate.png); + } + } + } + } + } + + div.question-container { + display: inline-block; + float: left; + width: flex-grid(8.3,9); + + h1 { + margin-top: 0; + } + + div.meta-bar { + border-bottom: 1px solid #eee; + display: block; + margin: 10px 0; + overflow: hidden; + padding: 5px 0 10px; + + div.tag-list { + display: inline-block; + float:left; + width: flex-grid(4,8); + margin-right: flex-gutter(8); + } + + div.question-actions { + display: inline-block; + float:left; + text-align: right; + width: flex-grid(4,8); + + a { + &.question-delete { + color: $mit-red; + text-decoration: none; + cursor: pointer; + } + } + + span.sep { + color: #ccc; + } + } + } + + div.question-content { + overflow: hidden; + + div.question-body { + display: inline-block; + float: left; + margin-right: flex-gutter(8); + width: flex-grid(6.2,8); + + blockquote { + margin-left: 2.5%; + padding-left: 1.5%; + border-left: 1px dashed #ddd; + color: $mit-red;; + } + + ul, ol, pre { + margin-left: 6%; + margin-bottom: 20px; + } + } + + + div.post-update-container { + display: inline-block; + float: left; + width: 20%; + border-left: 1px dashed #ddd; + + a { + border-bottom: none; + font-style: normal; + } + + div.post-update-info { + @include box-sizing(border-box); + padding: 10px; + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + + &.revision { + text-align: center; + background:lighten($cream, 7%); + + a { + color: black; + } + } + + div.change-date { + font-size: 12px; + margin-bottom: 2px; + } + + div.user-meta { + display: inline-block; + + span.username { + font-size: 20px; + margin-right: 5px; + } + + span.user-badges { + } + } + } + } + } + + div.comments-container { + @include box-sizing(border-box); + display: inline-block; + padding: 0 0 3% 0; + width: 100%; + + div.comments-content { + font-size: 13px; + background: #efefef; + + .block { + border-top: 1px solid #ddd; + padding: 15px; + display: block; + + &:first-child { + border-top: 0; + } + + &.official { + padding-top: 10px; + + span.official-comment { + background: $mit-red; + color: #fff; + display: block; + font-size: 12px; + margin: 0 0 10px -5%; + padding:2px 5px 2px 5%; + text-align: left; + width:100px; + } + } + } + + form.post-comments { + padding: 15px; + + button:last-child { + margin-left: 10px; + @extend .light-button; + } + } + + div.comment { + &:first-child { + border-top: 0; + } + + &:last-child { + margin-bottom: 20px; + } + + aside.comment-controls { + background: none; + border: none; + @include box-shadow(none); + display: inline-block; + margin-top: -8px; + padding:0 2% 0 0; + text-align: center; + width: 5%; + + div { + background: none; + opacity: 0.6; + + &:hover { + opacity: 1; + } + } + + div.comment-votes { + width: 16px; + + a.upvote { + background: url(../images/askbot/comment-vote-up.png) no-repeat 2px; + cursor: pointer; + color: green; + display: block; + margin-bottom: 6px; + margin-top: 5px; + overflow: hidden; + text-decoration: none; + text-indent: -9999px; + width: 20px; + } + + a.upvoted { + @include border-radius(3px); + background: #D1E3A8; + color: green; + font-weight: bold; + margin-top: 10px; + padding: 2px; + text-indent: 0px; + } + } + + hr { + margin: 0; + } + + div.comment-delete { + // display: inline; + color: $mit-red; + cursor: pointer; + font-size: 15px; + } + + div.comment-edit { + @include transform(rotate(50deg)); + cursor: pointer; + font-size: 16px; + a.edit-icon { + color: #555; + text-decoration: none; + } + } + } + + div.comment-body { + display: inline-block; + width: 95%; + + &#full-width { + width: 100%; + } + + div.comment-meta { + text-align: right; + + a.author { + font-weight: bold; + } + + a.edit { + @extend .button; + font-size: 12px; + padding: 2px 10px; + } + } + } + } + } + + #edit-comment-form { + margin: 10px 0; + min-height: 100px; + width: 99%; + resize: vertical; + } + .counter { + color: #888; + display: none; + float: right; + margin-top: 5px; + text-align: right; + } + + div.controls { + border-top: 1px solid #efefef; + text-align: right; + + a { + display: inline-block; + font-size: 12px; + margin: 10px 10px 10px 0; + } + } + } + } +} + +div.question-status { + background: $mit-red; + clear:both; + color: #fff; + display: block; + padding: 10px 0 10px 7.5%; + + h3 { + font-weight: normal; + } + + a { + color: #eee; + } +} + +div.share-question { + padding: 10px 0 10px 7.5%; + + p { + padding: 0; + margin: 0; + } +} diff --git a/templates/sass/discussion/_questions.scss b/templates/sass/discussion/_questions.scss new file mode 100644 index 0000000000..3a7ab2f7c1 --- /dev/null +++ b/templates/sass/discussion/_questions.scss @@ -0,0 +1,267 @@ +div.question-list-header { + display: block; + margin-bottom: 0px; + overflow: hidden; + width: flex-grid(9,9); + @extend h1.top-header; + + h1 { + margin: 0; + + > a.light-button { + float: right; + } + } + + section.question-list-meta { + display: block; + overflow: hidden; + width: 100%; + + div { + display: inline-block; + float: left; + } + + h1 { + margin: 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(); + margin-top: 6px; + + nav { + @extend .action-link; + float: right; + + a { + &.on span{ + font-weight: bold; + } + + &:before { + content: '|'; + color: #ccc; + font-size: 16px; + } + } + } + } + } + + section.question-tags-list { + display: block; + min-height: 26px; + padding-top:15px; + width: 100%; + + div { + display: inline-block; + float: left; + } + + div.back { + margin-right: 10px; + margin-top: 4px; + + a { + color: #555; + } + } + + div.tags-list { + + } + + ul.tags { + li { + background: #fff; + + &:before { + border-color: transparent #fff transparent transparent; + } + } + } + } +} + +ul.question-list, div#question-list { + width: flex-grid(9,9); + + li.single-question { + border-bottom: 1px solid #eee; + list-style: none; + padding: 10px 3%; + margin-left: -3%; + width: 100%; + + &:hover { + background: #F3F3F3; + + ul.tags li { + background: #ddd; + + &:before { + border-color: transparent #ddd transparent transparent; + } + } + } + + &:first-child { + border-top: 0; + } + + div { + display: inline-block; + + &.question-body { + @include box-sizing(border-box); + margin-right: flex-gutter(); + width: flex-grid(5.5,9); + + h2 { + font-size: 16px; + font-weight: bold; + letter-spacing: 0; + margin: 0px 0 15px 0; + text-transform: none; + } + + p.excerpt { + color: #777; + } + + + div.user-info { + display: inline-block; + vertical-align: top; + margin-bottom: 10px; + + span.relative-time { + font-weight: normal; + } + + a { + color: $mit-red; + } + } + + ul.tags { + display: inline-block; + } + + } + + &.question-meta { + float: right; + margin-top: 10px; + width: flex-grid(3.5,9); + + + ul { + text-align: right; + + li { + border: 1px solid #ddd; + @include box-shadow(0 1px 0 #fff); + display: inline-block; + height:60px; + @include linear-gradient(#fff, #f5f5f5); + margin-right: 10px; + width: 60px; + + &:last-child { + margin-right: 0px; + } + + &:hover { + span, div { + color: #555; + } + } + + &.views { + } + + &.answers { + &.accepted { + + @include linear-gradient(#fff, lighten( #c4dfbe, 12% )); + border-color: #c4dfbe; + + span, div { + color: darken(#c4dfbe, 35%); + } + } + &.no-answers { + + + span, div { + color: lighten($mit-red, 20%); + } + } + } + + &.votes { + } + + span, div { + @include box-sizing(border-box); + color: #888; + display: block; + text-align: center; + } + + span { + font-size: 16px; + font-weight: bold; + height: 35px; + padding-top: 15px; + vertical-align: middle; + } + + div { + height: 25px; + font-size: 12px; + } + } + } + } + } + + } + + div.post-own-question { + padding: 11px; + margin-top: 10px; + color: #888; + text-align: center; + + a { + font-weight: bold; + @extend .light-button; + padding: 20px; + display: block; + margin: 10px auto; + text-align: center; + width: flex-grid(5); + } + } +} + +.search-result-summary { +} diff --git a/templates/sass/discussion/_sidebar.scss b/templates/sass/discussion/_sidebar.scss new file mode 100644 index 0000000000..fb007bab3b --- /dev/null +++ b/templates/sass/discussion/_sidebar.scss @@ -0,0 +1,308 @@ +div.discussion-wrapper aside { + @extend .sidebar; + border-left: 1px solid #d3d3d3; + @include border-radius(0 4px 4px 0); + border-right: 1px solid #f6f6f6; + @include box-shadow(inset 1px 0 0 #f6f6f6); + padding: lh(); + width: flex-grid(3); + + &.main-sidebar { + min-width:200px; + } + + h1 { + @extend .bottom-border; + margin: (-(lh())) (-(lh())) 0; + padding: lh(.5) lh(); + } + + h2 { + color: #4D4D4D; + + &.first { + margin-top: 0px; + } + } + + h3 { + border-bottom: 0; + box-shadow: none; + } + + div.inputs { + input[type="submit"] { + width: 27%; + float: right; + } + + input[type="text"] { + width: 62%; + } + } + + div.box { + display: block; + margin: lh(.5) 0; + + &:last-child { + @include box-shadow(none); + border: 0; + } + + h2 { + text-transform: uppercase; + font-weight: bold; + font-size: 14px; + letter-spacing: 1px; + + &:not(.first) { + @include box-shadow(inset 0 1px 0 #eee); + border-top: 1px solid #d3d3d3; + margin: 0 (-(lh())) 0; + padding: lh(.5) lh(); + } + } + + &.contributors { + + a { + @include border-radius(3px); + border: 1px solid #aaa; + cursor: pointer; + display: inline-block; + margin-right: 6px; + position: relative; + + &:before { + @include border-radius(3px); + @include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4)); + top: 1px; left: 1px; bottom: 1px; right: 1px; + content: ''; + position: absolute; + } + + } + img.gravatar { + @include border-radius(3px); + } + } + + &.tag-selector { + ul { + margin-bottom: 10px; + display: block; + } + } + } + + div.search-box { + margin-top: lh(.5); + input { + @include box-sizing(border-box); + display: inline; + } + + input[type='submit'] { + @include box-shadow(none); + opacity: 0.5; + background: url(/static/images/askbot/search-icon.png) no-repeat center; + border: 0; + margin-left: 3px; + position: absolute; + text-indent: -9999px; + width: 24px; + + &:hover { + opacity: 0.9; + } + + &:focus { + opacity: 1; + } + } + + input#keywords { + padding-left: 30px; + padding-right: 30px; + width: 100%; + } + + input#clear { + @include box-shadow(none); + @include border-radius(15px); + border: none; + background: #bbb; + color: #fff; + display: inline; + font-size: 10px; + margin-left: -25px; + padding: 2px 5px; + } + } + + div#tagSelector { + h2 { + @include box-shadow(inset 0 1px 0 #eee); + border-top: 1px solid #d3d3d3; + margin: 0 (-(lh())) 0; + padding: lh(.5) lh(); + text-transform: uppercase; + font-weight: bold; + font-size: 14px; + letter-spacing: 1px; + } + + ul { + margin: 0; + } + + div.inputs { + margin-bottom: lh(); + } + + div#displayTagFilterControl { + p.choice { + @include inline-block(); + margin-right: lh(.5); + } + } + } + + // Question view sopecific + + div.follow-buttons { + margin-top: 20px; + display: block; + + a.button { + @include box-sizing(border-box); + display: block; + text-align: center; + width: 100%; + } + } + + + div.question-stats { + ul { + color: #777; + list-style: none; + + li { + padding: 7px 0 0; + + &:last-child { + @include box-shadow(none); + border: 0; + } + strong { + float: right; + padding-right: 10px; + } + } + } + } + + div.user-info, div.user-stats { + @extend div.question-stats; + overflow: hidden; + + div { + float: left; + display: block; + } + + div.karma { + background: #eee; + border: 1px solid #D3D3D3; + @include border-radius(3px); + @include box-sizing(border-box); + @include box-shadow(inset 0 0 0 1px #fff, 0 1px 0 #fff); + padding: lh(.4) 0; + text-align: center; + width: flex-grid(1, 3); + float: right; + + strong { + display: block; + font-style: 20px; + } + } + + div.meta { + width: flex-grid(2,3); + padding-right: flex-gutter(3)*0.5; + @include box-sizing(border-box); + + h2 { + border: 0; + @include box-shadow(none); + margin: 0 0 8px 0; + padding: 0; + } + + p { + color: #777; + font-size: 14px; + } + } + } + + div.user-stats { + overflow: visible; + + ul { + font-size: 14px; + + h2 { + margin:0 (-(lh())) 5px (-(lh())); + padding: lh(.5) lh(); + } + } + } + + div.question-tips, div.markdown { + ul { + margin-left: 8%; + } + + ol { + margin-left: 8%; + } + } + div.markdown ul li { + margin: 20px 0; + + &:first-child { + margin: 0; + } + + ol li { + margin: 0; + } + } + + div.view-profile { + h2 { + border-top: 0; + @include box-shadow(none); + } + a { + width: 100%; + @include box-sizing(border-box); + text-align: center; + padding: 10px; + display: block; + margin-top: 10px; + + &:first-child { + margin-top: 0; + } + + span { + font-weight: bold; + } + } + } +} diff --git a/templates/sass/discussion/_tags.scss b/templates/sass/discussion/_tags.scss new file mode 100644 index 0000000000..72c4e9ffc4 --- /dev/null +++ b/templates/sass/discussion/_tags.scss @@ -0,0 +1,69 @@ +ul.tags { + list-style: none; + display: inline; + + li, a { + position: relative; + } + + li { + background: #eee; + @include border-radius(4px); + @include box-shadow(0px 1px 0px #ccc); + color: #555; + display: inline-block; + font-size: 12px; + margin-bottom: 5px; + margin-left: 15px; + padding: 3px 10px 5px 5px; + + &:before { + border-color:transparent #eee transparent transparent; + border-style:solid; + border-width:12px 12px 12px 0; + content:""; + height:0; + left:-10px; + position:absolute; + top:0; + width:0; + } + + span.delete-icon, div.delete-icon { + background: #555; + @include border-radius(0 4px 4px 0); + clear: none; + color: #eee; + cursor: pointer; + display: inline; + float: none; + left: 10px; + opacity: 0.5; + padding: 4px 6px; + position: relative; + top: 1px; + + &:hover { + opacity: 1; + } + } + + a { + color: #555; + text-decoration: none; + border-bottom: none; + font-style: normal; + } + } +} + +span.tag-number { + display: none; + // @include border-radius(3px); + // background: #555; + // font-size: 10px; + // margin: 0 3px; + // padding: 2px 5px; + // color: #eee; + // opacity: 0.5; +} diff --git a/templates/sass/index/_base.scss b/templates/sass/index/_base.scss new file mode 100644 index 0000000000..c2a5b9dcc2 --- /dev/null +++ b/templates/sass/index/_base.scss @@ -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; + } + } +} diff --git a/templates/sass/index/_extends.scss b/templates/sass/index/_extends.scss new file mode 100644 index 0000000000..04bd5b83b6 --- /dev/null +++ b/templates/sass/index/_extends.scss @@ -0,0 +1,94 @@ +.wrapper { + @include box-sizing(border-box); + margin: 0 auto; + max-width: $fg-max-width; + // min-width: $fg-min-width; + padding: lh(); + width: flex-grid(12); +} + +.subpage { + @extend .clearfix; + @extend .wrapper; + + > 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 { + margin-bottom: lh(.5); + } + + h2 { + font: 18px $header-font-family; + color: #000; + margin-bottom: lh(.5); + } + + ul { + list-style: disc outside none; + + li { + list-style: disc outside none; + line-height: lh(); + } + } + + dl { + margin-bottom: lh(); + + dd { + margin-bottom: lh(.5); + } + } + } +} + +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.button { + @include border-radius(3px); + @include inline-block(); + @include transition(); + background-color: $mit-red; + border: 1px solid darken($mit-red, 10%); + color: #fff; + margin: lh() 0 lh(.5); + padding: lh(.25) lh(.5); + text-decoration: none; + font-style: normal; + @include box-shadow(inset 0 1px 0 lighten($mit-red, 8%)); + -webkit-font-smoothing: antialiased; + + &:hover { + background-color: darken($mit-red, 10%); + border-color: darken($mit-red, 20%); + } + + span { + font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; + font-style: italic; + } +} + +p.ie-warning { + display: block !important; + line-height: 1.3em; + background: yellow; + margin-bottom: lh(); + padding: lh(); +} diff --git a/templates/sass/index/_footer.scss b/templates/sass/index/_footer.scss new file mode 100644 index 0000000000..dc3747dd64 --- /dev/null +++ b/templates/sass/index/_footer.scss @@ -0,0 +1,101 @@ +footer { + @extend .wrapper; + @extend .clearfix; + padding-top: 0; + + div.footer-wrapper { + border-top: 1px solid #e5e5e5; + padding: lh() 0; + background: url('/static/images/marketing/mit-logo.png') right center no-repeat; + + @media screen and (max-width: 780px) { + background-position: left bottom; + padding-bottom: lh(3); + } + + a { + color: #888; + text-decoration: none; + @include transition(); + + &:hover, &:focus { + color: #666; + } + } + + p { + @include inline-block(); + margin-right: lh(); + } + + ul { + @include inline-block(); + + @media screen and (max-width: 780px) { + margin-top: lh(); + } + + li { + @include inline-block(); + margin-bottom: 0; + + &:after { + content: ' |'; + display: inline; + color: #ccc; + } + + &:last-child { + &:after { + content: none; + } + } + + } + + &.social { + float: right; + margin-right: 60px; + position: relative; + top: -5px; + + @media screen and (max-width: 780px) { + float: none; + } + + li { + float: left; + margin-right: lh(.5); + + &:after { + content: none; + display: none; + } + + a { + display: block; + height: 29px; + width: 28px; + text-indent: -9999px; + + &:hover { + opacity: .8; + } + } + + &.twitter a { + background: url('/static/images/marketing/twitter.png') 0 0 no-repeat; + } + + &.facebook a { + background: url('/static/images/marketing/facebook.png') 0 0 no-repeat; + } + + &.linkedin a { + background: url('/static/images/marketing/linkedin.png') 0 0 no-repeat; + } + } + } + } + } +} diff --git a/templates/sass/index/_header.scss b/templates/sass/index/_header.scss new file mode 100644 index 0000000000..4cfe1578b5 --- /dev/null +++ b/templates/sass/index/_header.scss @@ -0,0 +1,169 @@ +header.announcement { + @include background-size(cover); + background: #333; + border-bottom: 1px solid #000; + color: #fff; + -webkit-font-smoothing: antialiased; + + &.home { + background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); + + @media screen and (min-width: 1200px) { + background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); + } + + div { + padding: lh(10) lh() lh(3); + + @media screen and (max-width:780px) { + padding: lh(2.5) lh() lh(2); + } + + //hide login link for homepage + nav { + h1 { + margin-right: 0; + } + + a.login { + display: none; + } + } + } + } + + &.course { + background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); + + @media screen and (min-width: 1200px) { + background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); + } + + @media screen and (max-width: 1199px) and (min-width: 700px) { + background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); + } + + div { + padding: lh(4) lh() lh(2); + + @media screen and (max-width:780px) { + padding: lh(2.5) lh() lh(2); + } + } + + } + + div { + @extend .wrapper; + position: relative; + + nav { + position: absolute; + top: 0; + right: lh(); + @include border-radius(0 0 3px 3px); + background: #333; + background: rgba(#000, .7); + padding: lh(.5) lh(); + + h1 { + @include inline-block(); + margin-right: lh(.5); + + + a { + font: italic 800 18px $header-font-family; + color: #fff; + text-decoration: none; + + &:hover, &:focus { + color: #999; + } + } + } + + a.login { + text-decoration: none; + color: #fff; + font-size: 12px; + font-style: normal; + font-family: $header-font-family; + + &:hover, &:focus { + color: #999; + } + } + } + + section { + @extend .clearfix; + background: $mit-red; + @include inline-block(); + margin-left: flex-grid(4) + flex-gutter(); + padding: lh() lh(1.5); + + @media screen and (max-width: 780px) { + margin-left: 0; + } + + h1 { + font-family: "Open Sans"; + font-size: 30px; + font-weight: 800; + @include inline-block(); + line-height: 1.2em; + margin: 0 lh() 0 0; + } + + h2 { + font-family: "Open Sans"; + font-size: 24px; + font-weight: 400; + @include inline-block(); + line-height: 1.2em; + } + + &.course { + section { + float: left; + margin-left: 0; + margin-right: flex-gutter(8); + padding: 0; + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + float: none; + width: 100%; + margin-right: 0; + } + + a { + @extend .button; + background-color: darken($mit-red, 20%); + border-color: darken($mit-red, 30%); + @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%)); + display: block; + padding: lh(.5) lh(); + text-align: center; + + &:hover { + background-color: darken($mit-red, 10%); + border-color: darken($mit-red, 20%); + } + } + } + + p { + width: flex-grid(4, 8); + line-height: lh(); + float: left; + + @media screen and (max-width: 780px) { + float: none; + width: 100%; + } + } + } + } + } +} diff --git a/templates/sass/index/_index.scss b/templates/sass/index/_index.scss new file mode 100644 index 0000000000..3fbae44b67 --- /dev/null +++ b/templates/sass/index/_index.scss @@ -0,0 +1,323 @@ +section.index-content { + @extend .wrapper; + @extend .clearfix; + + section { + @extend .clearfix; + float: left; + + @media screen and (max-width: 780px) { + float: none; + width: auto; + margin-right: 0; + } + + h1 { + font-size: 800 24px "Open Sans"; + margin-bottom: lh(); + } + + p { + line-height: lh(); + margin-bottom: lh(); + } + + ul { + margin: 0; + } + + &.about { + @include box-sizing(border-box); + border-right: 1px solid #e5e5e5; + margin-right: flex-gutter(); + padding-right: flex-gutter() / 2; + width: flex-grid(8); + + @media screen and (max-width: 780px) { + width: 100%; + border-right: 0; + margin-right: 0; + padding-right: 0; + } + + section { + @extend .clearfix; + margin-bottom: lh(); + + p { + width: flex-grid(4, 8); + float: left; + + @media screen and (max-width: 780px) { + float: none; + width: auto; + } + + &:nth-child(odd) { + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + } + } + } + + &.intro { + section { + margin-bottom: 0; + + &.intro-text { + margin-right: flex-gutter(8); + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + margin-right: 0; + width: auto; + } + + p { + margin-right: 0; + width: auto; + float: none; + } + } + + &.intro-video { + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + width: auto; + } + + a { + display: block; + width: 100%; + + img { + width: 100%; + } + + span { + display: none; + } + } + } + } + } + + &.features { + border-top: 1px solid #E5E5E5; + padding-top: lh(); + margin-bottom: 0; + + h2 { + text-transform: uppercase; + letter-spacing: 1px; + color: #888; + margin-bottom: lh(); + font-weight: normal; + font-size: 14px; + + span { + text-transform: none; + + } + } + + p { + width: auto; + clear: both; + + strong { + font-family: "Open sans"; + font-weight: 800; + } + + a { + color: $mit-red; + text-decoration: none; + @include transition(); + + &:hover, &:focus { + color: darken($mit-red, 15%); + } + } + } + + ul { + margin-bottom: 0; + + li { + line-height: lh(); + width: flex-grid(4, 8); + float: left; + margin-bottom: lh(.5); + + @media screen and (max-width: 780px) { + width: auto; + float: none; + } + + &:nth-child(odd) { + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + } + } + } + } + } + } + } + + &.course, &.staff { + width: flex-grid(4); + + @media screen and (max-width: 780px) { + width: auto; + } + + h1 { + color: #888; + font: normal $body-font-size $body-font-family; + font-size: 14px; + letter-spacing: 1px; + margin-bottom: lh(); + text-transform: uppercase; + } + + h2 { + font: 800 24px $header-font-family; + } + + h3 { + font: 400 18px $header-font-family; + } + + a { + @extend .button; + + span.arrow { + color: rgba(#fff, .6); + font-style: normal; + @include inline-block(); + padding-left: 10px; + } + } + + ul { + list-style: none; + + li { + img { + float: left; + margin-right: lh(.5); + } + } + } + } + + &.course { + h2 { + padding-top: lh(5); + background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat; + @include background-size(contain); + + @media screen and (max-width: 998px) and (min-width: 781px){ + background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat; + } + + @media screen and (max-width: 780px) { + padding-top: lh(5); + background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat; + } + + @media screen and (min-width: 500px) and (max-width: 781px) { + padding-top: lh(8); + } + } + } + + + // index + //---------------------------------------- // + &.about-course { + @include box-sizing(border-box); + border-right: 1px solid #e5e5e5; + margin-right: flex-gutter(); + padding-right: flex-gutter() / 2; + width: flex-grid(8); + + @media screen and (max-width: 780px) { + width: auto; + border-right: 0; + margin-right: 0; + padding-right: 0; + } + + section { + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + width: auto; + } + + &.about-info { + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + } + } + + &.requirements { + clear: both; + width: 100%; + border-top: 1px solid #E5E5E5; + padding-top: lh(); + margin-bottom: 0; + + p { + float: left; + width: flex-grid(4, 8); + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + float: none; + width: auto; + } + + &:nth-child(odd) { + margin-right: 0; + } + } + } + + &.cta { + width: 100%; + text-align: center; + + a.enroll { + @extend .button; + padding: lh(.5) lh(2); + @include inline-block(); + text-align: center; + font: 800 18px $header-font-family; + } + } + } + } + + &.staff { + h1 { + margin-top: lh(1); + } + } + } +} + +section.copyright, section.tos, section.privacy-policy, section.honor-code { + @extend .subpage; +} diff --git a/templates/sass/index/_variables.scss b/templates/sass/index/_variables.scss new file mode 100644 index 0000000000..6d9730b9db --- /dev/null +++ b/templates/sass/index/_variables.scss @@ -0,0 +1,21 @@ +// Variables +//---------------------------------------- // +// // grid +$fg-column: 60px; +$fg-gutter: 25px; +$fg-max-columns: 12; +$fg-max-width: 1400px; +$fg-min-width: 781px; + +$gw-column: 60px; +$gw-gutter: 25px; + +$body-font-family: Georgia, serif; +$header-font-family: "Open Sans", Helvetica, Arial, sans-serif; + +$body-font-size: 16px; +$body-line-height: golden-ratio($body-font-size, 1); + +// Colors +$mit-red: #933; +$cream: #F6EFD4; diff --git a/templates/sass/layout/_footer.scss b/templates/sass/layout/_footer.scss new file mode 100644 index 0000000000..1669946a60 --- /dev/null +++ b/templates/sass/layout/_footer.scss @@ -0,0 +1,97 @@ +footer { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + color: #777; + margin-top: $body-line-height; + padding: 0 $body-line-height; + + @media print { + display: none; + } + + p { + float: left; + + a { + color: #444; + + &:link, &:visited { + color: #444; + } + + &:hover, &:focus { + color: #000; + } + } + } + + nav { + float: right; + + ul { + float: left; + + li { + display: inline-block; + margin-right: 20px; + + a { + color: #444; + + &:link, &:visited { + color: #444; + } + + &:hover, &:focus { + color: #000; + } + } + } + + &.social { + margin-right: 40px; + position: relative; + top: -5px; + + @media screen and (max-width: 780px) { + float: none; + } + + li { + float: left; + margin-right: lh(.5); + + &:after { + content: none; + display: none; + } + + a { + display: block; + height: 29px; + width: 28px; + text-indent: -9999px; + border-bottom: 0; + + &:hover { + opacity: .8; + } + } + + &.twitter a { + background: url('/static/images/twitter.png') 0 0 no-repeat; + } + + &.facebook a { + background: url('/static/images/facebook.png') 0 0 no-repeat; + } + + &.linkedin a { + background: url('/static/images/linkedin.png') 0 0 no-repeat; + } + } + } + } + } +} diff --git a/templates/sass/layout/_header.scss b/templates/sass/layout/_header.scss new file mode 100644 index 0000000000..1d88eac639 --- /dev/null +++ b/templates/sass/layout/_header.scss @@ -0,0 +1,183 @@ +div.header-wrapper { + background: $mit-red; + border-bottom: 1px solid #fff; + @include box-shadow(inset 0 -4px 6px darken($mit-red, 5%)); + + @media print { + display: none; + } + + header { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + padding: 0 $body-line-height; + + hgroup { + @extend .clearfix; + float: left; + min-width: flex-grid(3); + padding-top: 13px; + + h1 { + color: darken($mit-red, 25%); + font-size: 18px; + font-weight: 800; + @include inline-block(); + line-height: lh(); + margin: 0; + padding: 0 lh(.5) 0 0; + text-shadow: 0 1px 0 lighten($mit-red, 10%); + + &:after { + color: darken($mit-red, 10%); + content: "•"; + display: inline-block; + font-size: 10px; + letter-spacing: -2px; + padding-left: lh(.5); + text-shadow: 0; + } + } + + h2 { + font-size: 16px; + @include inline-block(); + letter-spacing: 0; + margin: 0; + padding: 0 lh() 0px 0; + text-shadow: 0 -1px 0 darken($mit-red, 10%); + text-transform: none; + -webkit-font-smoothing: antialiased; + + a { + color: #fff; + border: none; + + &:hover { + color: rgba(#fff, .7); + } + } + } + + + @media screen and (max-width: 900px) { + display: block; + float: none; + + h1 { + border: 0; + float: left; + } + + h2 { + border: 0; + float: left; + margin-right: 0; + } + } + } + + nav { + background: #501016; + border-bottom: 1px solid darken(#501016, 10%); + @include border-radius(3px 3px 0 0); + @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%)); + display: block; + float: left; + margin: 5px 0 0; + padding: 0; + text-shadow: 0 -1px 0 darken($mit-red, 10%); + -webkit-font-smoothing: antialiased; + + ul { + @extend .clearfix; + margin: 0; + + li { + line-height: lh(); + margin-bottom: 0; + float: left; + + a { + color: #fff; + display: block; + font-weight: bold; + padding: 10px lh() 8px; + border: none; + font-style: normal; + + @media screen and (max-width: 1020px) { + padding: 10px lh(.7) 8px; + } + + &:hover { + color: rgba(#fff, .7); + background-color: none; + } + } + } + } + + @media screen and (max-width: 900px) { + width: 100%; + float: none; + + ul { + li { + padding: auto; + display: table-cell; + width: 16.6666666667%; + text-align: center; + } + } + } + + .active { + background: #F4F4F4; + border: 1px solid darken(#501016, 10%); + border-bottom: 0; + @include border-radius(3px 3px 0 0); + @include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff); + color: #333; + text-shadow: 0 1px 0 #fff; + } + + &.courseware { + li.courseware a { + @extend .active; + } + } + + &.book { + li.book a { + @extend .active; + } + } + + &.info { + li.info a { + @extend .active; + } + } + + &.discussion { + li.discussion a { + @extend .active; + } + } + + &.wiki { + li.wiki a { + @extend .active; + } + } + + &.profile { + li.profile a { + @extend .active; + } + } + } + } +} diff --git a/templates/sass/layout/_layout.scss b/templates/sass/layout/_layout.scss new file mode 100644 index 0000000000..a2e7a355c2 --- /dev/null +++ b/templates/sass/layout/_layout.scss @@ -0,0 +1,43 @@ +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; + background: #fff; + border: 1px solid #bbb; + border-bottom: 1px solid #bbb; + @include box-shadow(0 0 4px #dfdfdf); + @include box-sizing(border-box); + margin-top: 3px; + overflow: hidden; + + @media print { + border-bottom: 0; + @include border-radius(none); + } + + @media screen and (min-width: 1400px) { + @include border-radius(4px); + margin-top: lh(.5); + } + } + + section.outside-app { + @extend .main-content; + max-width: 600px; + padding: lh(); + + #{$all-text-inputs} { + display: block; + } + } + } +} diff --git a/templates/sass/layout/_leanmodal.scss b/templates/sass/layout/_leanmodal.scss new file mode 100644 index 0000000000..b9399a39e4 --- /dev/null +++ b/templates/sass/layout/_leanmodal.scss @@ -0,0 +1,270 @@ +#lean_overlay { + position: fixed; + z-index:100; + top: 0px; + left: 0px; + height:100%; + width:100%; + background: #000; + display: none; +} + +div.leanModal_box { + background: #fff; + border: none; + @include border-radius(3px); + @include box-shadow(0 0 6px #000); + @include box-sizing(border-box); + display: none; + padding: lh(2); + + a.modal_close { + color: #aaa; + display: block; + font-style: normal; + height: 14px; + position: absolute; + right: 12px; + top: 12px; + width: 14px; + z-index: 2; + + &:hover{ + text-decoration: none; + color: $mit-red; + } + } + + h1 { + border-bottom: 1px solid #eee; + font-size: 24px; + margin-bottom: lh(); + margin-top: 0; + padding-bottom: lh(); + text-align: left; + } + + &#enroll { + max-width: 600px; + + ol { + @extend .clearfix; + padding-top: lh(); + + li { + + &.terms, &.honor-code { + width: auto; + float: none; + } + + div.tip { + display: none; + } + + &:hover { + div.tip { + background: #333; + color: #fff; + display: block; + font-size: 16px; + line-height: lh(); + margin: 0 0 0 -10px; + padding: 10px; + position: absolute; + -webkit-font-smoothing: antialiased; + width: 500px; + } + } + } + } + } + + form { + text-align: left; + + div#enroll_error, div#login_error, div#pwd_error { + $error-color: #333; + background-color: $error-color; + border: darken($error-color, 20%); + color: #fff; + font-family: "Open sans"; + font-weight: bold; + letter-spacing: 1px; + margin: (-(lh())) (-(lh())) lh(); + padding: lh(.5); + text-shadow: 0 1px 0 darken($error-color, 10%); + -webkit-font-smoothing: antialiased; + + &:empty { + padding: 0; + } + } + + ol { + list-style: none; + margin-bottom: lh(); + + li { + margin-bottom: lh(.5); + + &.terms, &.remember { + border-top: 1px solid #eee; + clear: both; + float: none; + padding-top: lh(); + width: auto; + } + + &.honor-code { + width: auto; + float: none; + } + + label { + display: block; + font-weight: bold; + } + + #{$all-text-inputs}, textarea { + width: 100%; + @include box-sizing(border-box); + } + + input[type="checkbox"] { + margin-right: 10px; + } + + ul { + list-style: disc outside none; + margin: lh(.5) 0 lh() lh(); + + li { + color: #666; + float: none; + font-size: 14px; + list-style: disc outside none; + margin-bottom: lh(.5); + } + } + } + } + + input[type="button"], input[type="submit"] { + @include button($mit-red); + font-size: 18px; + padding: lh(.5); + } + } +} + +div#login { + min-width: 400px; + + header { + border-bottom: 1px solid #ddd; + margin-bottom: lh(); + padding-bottom: lh(); + + h1 { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: lh(.25); + } + } + + ol { + li { + width: auto; + float: none; + } + } +} + +div.lost-password { + text-align: left; + margin-top: lh(); + + a { + color: #999; + + &:hover { + color: #444; + } + } +} + +div#pwd_reset { + p { + margin-bottom: lh(); + } + + input[type="email"] { + margin-bottom: lh(); + } +} + +div#feedback_div{ + form{ + ol { + li { + float: none; + width: 100%; + + textarea#feedback_message { + height: 100px; + } + } + } + } +} + +div#calculator_div { + max-width: 500px; + + form { + padding-bottom: lh(); + margin-bottom: lh(); + border-bottom: 1px solid #ddd; + + input#calculator_input { + width: 400px; + } + + input#calculator_button { + background: 0; + color: $mit-red; + border: 0; + @include box-shadow(none); + padding: 0; + text-shadow: none; + + &:hover { + color: #333; + } + } + + input#calculator_output { + border: 0; + background: none; + padding: lh(.35); + font-size: 24px; + width: 378px; + font-weight: bold; + margin-top: 4px; + } + } + + dl { + dt { + float: left; + clear: both; + padding-right: lh(.5); + font-weight: bold; + } + + dd { + float: left; + } + } +} diff --git a/templates/sass/marketing-ie.scss b/templates/sass/marketing-ie.scss new file mode 100644 index 0000000000..c92fd2f7fb --- /dev/null +++ b/templates/sass/marketing-ie.scss @@ -0,0 +1,15 @@ +body { + margin: 0; + padding: 0; +} + +.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer { + margin: 0; + overflow: hidden; +} + +div#enroll { + form { + display: none; + } +} diff --git a/templates/sass/marketing.scss b/templates/sass/marketing.scss new file mode 100644 index 0000000000..7b93c36a3b --- /dev/null +++ b/templates/sass/marketing.scss @@ -0,0 +1,6 @@ +@import "bourbon/bourbon"; +@import "base/reset", "base/font-face", "base/functions"; + +// pages +@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index"; +@import "layout/leanmodal"; diff --git a/templates/sass/plugins/_jquery-ui-1.8.16.custom.scss b/templates/sass/plugins/_jquery-ui-1.8.16.custom.scss new file mode 100644 index 0000000000..d03e1ca7a2 --- /dev/null +++ b/templates/sass/plugins/_jquery-ui-1.8.16.custom.scss @@ -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%; } \ No newline at end of file diff --git a/templates/sass/print.scss b/templates/sass/print.scss new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/templates/sass/print.scss @@ -0,0 +1 @@ + diff --git a/templates/sass/wiki/_basic-html.scss b/templates/sass/wiki/_basic-html.scss new file mode 100644 index 0000000000..935c92baa7 --- /dev/null +++ b/templates/sass/wiki/_basic-html.scss @@ -0,0 +1,137 @@ +section.wiki-body { + h1 { + font-weight: bold; + font-size: 2em; + margin-bottom: 25px; + } + + div#wiki_article { + html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { + display: block; + unicode-bidi: embed + } + + li { + display: list-item + } + + head { + display: none + } + + table { + display: table + } + + tr { + display: table-row + } + + thead { + display: table-header-group + } + + tbody { + display: table-row-group + } + + tfoot { + display: table-footer-group + } + + col { display: table-column } + + colgroup { display: table-column-group } + + td, th { display: table-cell } + + caption { + display: table-caption + } + + th { + font-weight: bolder; + text-align: center + } + + caption { + text-align: center + } + + h1 { + font-size: 1.6em; + margin: .67em 0; + letter-spacing: 0px; + } + + h2 { + text-transform: none; + font-size: 1.4em; + margin: .75em 0; + letter-spacing: 0px; + } + + h3 { + font-size: 1.2em; + margin: .83em 0; + } + + h4 { + font-size: 1.1em; + } + + h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } + + h5 { font-size: 1em; margin: 1.5em 0 } + + h6 { font-size: 0.5em; margin: 1.67em 0 } + + b, strong { font-weight: bolder } + + blockquote { + padding: 10px 20px; + background: #e3e3e3; + border-left: 4px solid; + } + + i, cite, em, var, address { font-style: italic } + + pre, tt, code, kbd, samp { + font-family: monospace; + } + + pre { white-space: pre } + + button, textarea, input, select { display: inline-block } + + big { font-size: 1.17em } + + small, sub, sup { font-size: .83em } + + sub { vertical-align: sub } + + sup { vertical-align: super } + + table { border-spacing: 2px; } + + thead, tbody, tfoot { vertical-align: middle } + + td, th, tr { vertical-align: inherit } + + s, strike, del { text-decoration: line-through } + + hr { height: 1px; background: #999; border: none;} + + ol, ul, dir, menu, dd { margin-left: 40px } + + ol { list-style-type: decimal } + + ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } + + u, ins { text-decoration: underline } + + br:before { content: "\A"; white-space: pre-line } + + center { text-align: center } + } +} diff --git a/templates/sass/wiki/_create.scss b/templates/sass/wiki/_create.scss new file mode 100644 index 0000000000..e4aad2d4ba --- /dev/null +++ b/templates/sass/wiki/_create.scss @@ -0,0 +1,62 @@ +form#wiki_revision { + float: left; + width: flex-grid(6, 9); + margin-right: flex-gutter(9); + + label { + display: block; + margin-bottom: 7px ; + } + + textarea { + @include box-sizing(border-box); + margin-bottom: 20px; + min-height: 450px; + width: 100%; + } + + input[type="text"] { + display: block; + width: 50%; + } + + #submit_delete { + @include box-shadow(none); + background: none; + border: none; + color: #999; + float: right; + text-decoration: underline; + font-weight: normal; + } + + input[type="submit"] { + margin-top: 20px; + } +} + +#wiki_edit_instructions { + float: left; + width: flex-grid(3, 9); + margin-top: lh(); + color: #666; + + &:hover { + color: #333; + } + + .markdown-example { + background-color: #e3e3e3; + text-shadow: 0 1px 0 #fff; + + padding: { + top: 5px; + right: 2px; + bottom: 5px; + left: 5px; + } + + margin: 5px 0 7px; + line-height: 1.0; + } +} diff --git a/templates/sass/wiki/_sidebar.scss b/templates/sass/wiki/_sidebar.scss new file mode 100644 index 0000000000..61575d811d --- /dev/null +++ b/templates/sass/wiki/_sidebar.scss @@ -0,0 +1,76 @@ +div#wiki_panel { + @extend .sidebar; + overflow: auto; + + h2 { + padding: lh(.5) lh(); + font-size: 18px; + margin: 0 ; + @extend .bottom-border; + } + + 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; + } + } + } + } +} diff --git a/templates/sass/wiki/_table.scss b/templates/sass/wiki/_table.scss new file mode 100644 index 0000000000..ffb2796906 --- /dev/null +++ b/templates/sass/wiki/_table.scss @@ -0,0 +1,48 @@ +table.wiki-history { + thead { + background: #ddd; + // border-bottom: 1px solid #ddd; + + tr { + height: 40px; + + th { + padding-top: 10px; + padding-left: 15px; + + &#revision { + width: 5%; + } + + &#comment { + width: 15%; + } + + &#diff { + width: 60%; + } + + &#modified { + width:20%; + } + } + } + } + tbody { + tr td { + padding: 8px 15px; + } + } + + tr.dark { + background-color: #efefef; + } +} + +div.history-controls { + margin-top: 20px; + + input[type="submit"] { + @extend .light-button; + } +} diff --git a/templates/sass/wiki/_wiki.scss b/templates/sass/wiki/_wiki.scss new file mode 100644 index 0000000000..043d9c84b5 --- /dev/null +++ b/templates/sass/wiki/_wiki.scss @@ -0,0 +1,160 @@ +div.wiki-wrapper { + display: table; + width: 100%; + + section.wiki-body { + @extend .clearfix; + @extend .content; + position: relative; + + + header { + @extend .topbar; + height:46px; + @include box-shadow(inset 0 1px 0 white); + + &:empty { + display: none !important; + border-bottom: 0; + } + + a { + @extend .block-link; + } + + p { + float: left; + margin-bottom: 0; + color: darken($cream, 55%); + line-height: 46px; + padding-left: lh(); + } + + ul { + float: right; + list-style: none; + + li { + float: left; + + input[type="button"] { + @extend .block-link; + background-color: darken($cream, 5%); + background-position: 12px center; + background-repeat: no-repeat; + border: 0; + border-left: 1px solid darken(#f6efd4, 20%); + @include border-radius(0); + @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%)); + color: darken($cream, 80%); + display: block; + font-weight: normal; + font-size: 12px; + letter-spacing: 1px; + line-height: 46px; + margin: 0; + padding: 0 lh() 0 38px; + text-shadow: none; + text-transform: uppercase; + @include transition(); + + &.view { + background-image: url('/static/images/sequence-nav/view.png'); + } + + &.history { + background-image: url('/static/images/sequence-nav/history.png'); + } + + &.edit { + background-image: url('/static/images/sequence-nav/edit.png'); + } + + &:hover { + background-color: transparent; + } + } + } + } + } + + h2.wiki-title { + @include box-sizing(border-box); + display: inline-block; + float: left; + margin-bottom: 15px; + margin-top: 0; + padding-right: flex-gutter(9); + vertical-align: top; + width: flex-grid(2.5, 9); + + @media screen and (max-width:900px) { + display: block; + width: auto; + border-right: 0; + } + + @media print { + display: block; + width: auto; + border-right: 0; + } + } + + p { + line-height: 1.6em; + } + + section.results { + @include box-sizing(border-box); + display: inline-block; + border-left: 1px dashed #ddd; + float: left; + padding-left: 10px; + width: flex-grid(6.5, 9); + + @media screen and (max-width:900px) { + border: 0; + display: block; + padding-left: 0; + width: 100%; + width: auto; + } + + @media print { + display: block; + width: auto; + padding: 0; + + canvas, img { + page-break-inside: avoid; + } + } + + ul.article-list { + margin-left: 15px; + width: 100%; + + @media screen and (max-width:900px) { + margin-left: 0px; + } + + li { + list-style: none; + margin: 0; + padding: 10px 0; + border-bottom: 1px solid #eee; + + &:last-child { + border-bottom: 0; + } + h3 { + font-size: 18px; + font-weight: normal; + } + } + } + } + + } +} diff --git a/templates/schematicinput.html b/templates/schematicinput.html new file mode 100644 index 0000000000..f79dc66d24 --- /dev/null +++ b/templates/schematicinput.html @@ -0,0 +1,25 @@ + + + + + + + + + + + % if state == 'unsubmitted': + + % elif state == 'correct': + + % elif state == 'incorrect': + + % elif state == 'incomplete': + + % endif + + diff --git a/templates/seq_module.html b/templates/seq_module.html new file mode 100644 index 0000000000..f71a371e22 --- /dev/null +++ b/templates/seq_module.html @@ -0,0 +1,22 @@ + + +
    + + + diff --git a/templates/seq_module.js b/templates/seq_module.js new file mode 100644 index 0000000000..b4f92db8a1 --- /dev/null +++ b/templates/seq_module.js @@ -0,0 +1,118 @@ +// IMPORTANT TODO: Namespace + +var ${ id }contents=["", + %for t in items: + ${t['content']} , + %endfor + "" + ]; + +var ${ id }types=["", + %for t in items: + "${t['type']}" , + %endfor + "" + ]; + +var ${ id }init_functions=["", + %for t in items: + function(){ ${t['init_js']} }, + %endfor + ""]; + +var ${ id }titles=${titles}; + +var ${ id }destroy_functions=["", + %for t in items: + function(){ ${t['destroy_js']} }, + %endfor + ""]; + +var ${ id }loc = -1; +function disablePrev() { + var i=${ id }loc-1; + log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'}); + if (i < 1 ) { + $('.${ id }prev a').addClass('disabled'); + } else { + $('.${ id }prev a').removeClass('disabled'); + }; + } + + function disableNext() { + var i=${ id }loc+1; + log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'}); + + if(i > ${ len(items) } ) { + $('.${ id }next a').addClass('disabled'); + } else { + $('.${ id }next a').removeClass('disabled'); + }; +} + +function ${ id }goto(i) { + log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'}); + + postJSON('/modx/sequential/${ id }/goto_position', + {'position' : i }); + + if (${ id }loc!=-1) + ${ id }destroy_functions[ ${ id }loc ](); + $('#seq_content').html(${ id }contents[i]); + ${ id }init_functions[i]() + //$('#tt_'+${ id }loc).attr("style", "background-color:gray"); + $('#tt_'+${ id }loc).removeClass(); + $('#tt_'+${ id }loc).addClass("seq_"+${ id }types[${ id }loc]+"_visited"); + ${ id }loc=i; + //$('#tt_'+i).attr("style", "background-color:red"); + $('#tt_'+i).removeClass(); + $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active"); + + MathJax.Hub.Queue(["Typeset",MathJax.Hub]); + + disableNext(); + disablePrev(); +} + +function ${ id }setup_click(i) { + $('#tt_'+i).click(function(eo) { ${ id }goto(i);}); + $('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive"); + $('#tt_'+i).parent().append("

    " + ${ id }titles[i-1] + "

    "); + +} + +function ${ id }next() { + var i=${ id }loc+1; + log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'}); + if(i > ${ len(items) } ) { + i = ${ len(items) }; + } else { + ${ id }goto(i); + }; +} + + +function ${ id }prev() { + var i=${ id }loc-1; + log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'}); + if (i < 1 ) { + i = 1; + } else { + ${ id }goto(i); + }; +} + + + +$(function() { + var i; + for(i=1; i<${ len(items)+1 }; i++) { + ${ id }setup_click(i); + } + + + $('.${ id }next a').click(function(eo) { ${ id }next(); return false;}); + $('.${ id }prev a').click(function(eo) { ${ id }prev(); return false;}); + ${ id }goto( ${ position } ); + +}); diff --git a/templates/server-down.html b/templates/server-down.html new file mode 100644 index 0000000000..0faed814db --- /dev/null +++ b/templates/server-down.html @@ -0,0 +1,6 @@ +<%inherit file="main.html" /> + +
    +

    Currently the MITx servers are down

    +

    Our staff is currently working to get the site back up as soon as possible. Please email us at technical@mitx.mit.edu to report any problems or downtime.

    +
    diff --git a/templates/server-error.html b/templates/server-error.html new file mode 100644 index 0000000000..d41fdde47b --- /dev/null +++ b/templates/server-error.html @@ -0,0 +1,6 @@ +<%inherit file="main.html" /> + +
    +

    There has been an error on the MITx servers

    +

    Our staff is currently working to get the site back up as soon as possible. Please email us at technical@mitx.mit.edu to report any problems or downtime.

    +
    diff --git a/templates/server-overloaded.html b/templates/server-overloaded.html new file mode 100644 index 0000000000..f5859d0e70 --- /dev/null +++ b/templates/server-overloaded.html @@ -0,0 +1,6 @@ +<%inherit file="main.html" /> + +
    +

    Currently the MITx servers are overloaded

    +

    Our staff is currently working to get the site back up as soon as possible. Please email us at technical@mitx.mit.edu to report any problems or downtime.

    +
    diff --git a/templates/show_circuit.html b/templates/show_circuit.html new file mode 100644 index 0000000000..69a66f9a03 --- /dev/null +++ b/templates/show_circuit.html @@ -0,0 +1,2 @@ +
    +
    diff --git a/templates/simplewiki_base.html b/templates/simplewiki_base.html new file mode 100644 index 0000000000..0f08d612c8 --- /dev/null +++ b/templates/simplewiki_base.html @@ -0,0 +1,172 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="main.html"/> + +<%block name="headextra"> + + + + + + + <%! + from django.core.urlresolvers import reverse + %> + + + + + + <%block name="wiki_head"/> + + + +<%block name="bodyextra"> + +<%include file="navigation.html" args="active_page='wiki'" /> + +
    +
    + <%block name="wiki_panel"> +
    +

    Course Wiki

    + <% + if (wiki_article is not UNDEFINED): + baseURL = reverse("wiki_view", args=[wiki_article.get_url()]) + else: + baseURL = reverse("wiki_view", args=["/"]) + %> +
      +
    • + +
    • + +
    • +

      + Create Article +

      + +
      + <% + theaction = "this.wiki_article_name.value.replace(/([^a-zA-Z0-9\-])/g, '')" + baseURL = reverse("wiki_create", args=["/"]) + %> + +
      + +
      + +
      + + +
      + +
        + +
      • + +
      • + +
      +
      +
      +
    • + + +
    + +
    + + +
    + %if wiki_article is not UNDEFINED: +
    + %if wiki_article.locked: +

    This article has been locked

    + %endif +

    Last modified: ${wiki_article.modified_on.strftime("%b %d, %Y, %I:%M %p")}

    + %endif + + %if wiki_article is not UNDEFINED: +
      + +
    • + +
    • + +
    • + +
    • + +
    • + +
    • +
    +
    + %endif + + <%block name="wiki_page_title"/> + <%block name="wiki_body"/> +
    +
    +
    + + diff --git a/templates/simplewiki_create.html b/templates/simplewiki_create.html new file mode 100644 index 0000000000..42b6bdc2cb --- /dev/null +++ b/templates/simplewiki_create.html @@ -0,0 +1,24 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="simplewiki_base.html"/> + +<%block name="title">Wiki – Create Article – MITx 6.002x + +<%block name="wiki_page_title"> +

    Create article

    + + +<%block name="wiki_body"> +
    +
    + +
    + + ${ wiki_form } + + +
    + +<%include file="simplewiki_instructions.html"/> + + diff --git a/templates/simplewiki_edit.html b/templates/simplewiki_edit.html new file mode 100644 index 0000000000..435870071d --- /dev/null +++ b/templates/simplewiki_edit.html @@ -0,0 +1,44 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="simplewiki_base.html"/> + +<%block name="title">${"Edit " + wiki_title + " - " if wiki_title is not UNDEFINED else ""}MITx 6.002x Wiki + +<%block name="wiki_page_title"> +

    ${ wiki_article.title }

    + + +<%block name="wiki_head"> + + + + +<%block name="wiki_body"> +
    +
    + +
    + ${wiki_form} + + +
    + +<%include file="simplewiki_instructions.html"/> + + diff --git a/templates/simplewiki_error.html b/templates/simplewiki_error.html new file mode 100644 index 0000000000..6244b99dcf --- /dev/null +++ b/templates/simplewiki_error.html @@ -0,0 +1,94 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="simplewiki_base.html"/> + +<%! + from django.core.urlresolvers import reverse +%> + +<%block name="title">Wiki Error – MITx 6.002x + + +<%block name="wiki_page_title"> +

    Oops...

    + + + +<%block name="wiki_body"> +
    +%if wiki_error is not UNDEFINED: +${wiki_error} +%endif + +%if wiki_err_notfound is not UNDEFINED: + %if wiki_url is not UNDEFINED: +

    + The page you requested could not be found. + Click here to create it. +

    + %else: +

    + Or maybe rather: Congratulations! It seems that there's no root + article, which is probably because you just installed simple-wiki + and your installation is working. Now you can create the root article. + Click here to create it. +

    + %endif +%else: +%if wiki_err_noparent is not UNDEFINED: +

    + You cannot create this page, because its parent + does not exist. Click here + to create it. +

    +%else: +%if wiki_err_keyword is not UNDEFINED and wiki_err_keyword: +

    + The page you're trying to create ${wiki_url} starts with _, which is reserved for internal use. +

    +%elif wiki_err_locked is not UNDEFINED and wiki_err_locked: +

    + The article you are trying to modify is locked. +

    +%elif wiki_err_noread is not UNDEFINED and wiki_err_noread: +

    + You do not have access to read this article. +

    +%elif wiki_err_nowrite is not UNDEFINED and wiki_err_nowrite: +

    + You do not have access to edit this article. +

    +%elif wiki_err_noanon is not UNDEFINED and wiki_err_noanon: +

    + Anonymous attachments are not allowed. Try logging in. +

    +%elif wiki_err_create is not UNDEFINED and wiki_err_create: +

    + You do not have access to create this article. +

    +%elif wiki_err_encode is not UNDEFINED and wiki_err_encode: +

    + The url you requested could not be handled by the wiki. + Probably you used a bad character in the URL. + Only use digits, English letters, underscore and dash. For instance + /wiki/An_Article-1 +

    +%elif wiki_err_deleted is not UNDEFINED and wiki_err_deleted: +

    + The article you tried to access has been deleted. You may be able to restore it to an earlier version in its history, or create a new version. +

    +%elif wiki_err_norevision is not UNDEFINED: +

    + This article does not contain revision ${wiki_err_norevision | h}. +

    +%else: +

    + An error has occured. +

    +%endif +%endif +%endif + +
    + + diff --git a/templates/simplewiki_history.html b/templates/simplewiki_history.html new file mode 100644 index 0000000000..65f9e71a33 --- /dev/null +++ b/templates/simplewiki_history.html @@ -0,0 +1,91 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="simplewiki_base.html"/> + +<%block name="title">${"Revision history of " + wiki_title + " - " if wiki_title is not UNDEFINED else ""}Wiki – MITx 6.002x + +<%! + from django.core.urlresolvers import reverse +%> + +<%block name="wiki_page_title"> +

    +${ wiki_article.title } +

    + + +<%block name="wiki_body"> +
    +
    + +
    + + + + + + + + + + + <% loopCount = 0 %> + %for revision in wiki_history: + %if revision.deleted < 2 or show_delete_revision: + <% loopCount += 1 %> + + + + + + + %endif + %endfor + + %if wiki_prev_page or wiki_next_page: + + + + + + %endif +
    RevisionCommentDiffModified
    + + + + ${ revision.revision_text if revision.revision_text else "None" } + %for x in revision.get_diff(): + ${x|h}
    + %endfor
    ${revision.get_user()} +
    + ${revision.revision_date.strftime("%b %d, %Y, %I:%M %p")} +
    + %if wiki_prev_page: + Previous page + %endif + %if wiki_next_page: + Next page + %endif +
    +
    + + %if show_delete_revision: + + + + + %endif +
    +
    + diff --git a/templates/simplewiki_instructions.html b/templates/simplewiki_instructions.html new file mode 100644 index 0000000000..8b579feda2 --- /dev/null +++ b/templates/simplewiki_instructions.html @@ -0,0 +1,22 @@ +
    + This wiki uses Markdown for styling. There are several useful guides online. +
    +
    MITx Additions: +

    circuit:basic

    +

    $LaTeX Math Expression$

    + To create a new wiki article, create a link to it. Clicking the link gives you the creation page. +

    [Article Name](wiki:ArticleName)

    + Other useful examples:
    +

    [Link](http://google.com)

    +

    Huge Header +
    ====

    +

    Smaller Header +
    -------

    +

    *emphasis* or _emphasis_

    +

    **strong** or __strong__

    +

    - Unordered List +
      - Sub Item 1 +
      - Sub Item 2

    +

    1. Ordered +
    2. List

    +
    diff --git a/templates/simplewiki_revision_feed.html b/templates/simplewiki_revision_feed.html new file mode 100644 index 0000000000..b9efd77b45 --- /dev/null +++ b/templates/simplewiki_revision_feed.html @@ -0,0 +1,63 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="simplewiki_base.html"/> + +<%block name="title">Wiki - Revision feed - MITx 6.002x + +<%! + from django.core.urlresolvers import reverse +%> + +<%block name="wiki_page_title"> +

    Revision Feed - Page ${wiki_page}

    + + +<%block name="wiki_body"> + + + + + + + + + + + <% loopCount = 0 %> + %for revision in wiki_history: + %if revision.deleted < 2 or show_delete_revision: + <% loopCount += 1 %> + + + + + + + %endif + %endfor + + %if wiki_prev_page or wiki_next_page: + + + + + + %endif +
    RevisionCommentDiffModified
    + ${revision.article.title} - ${revision} + + ${ revision.revision_text if revision.revision_text else "None" } + %for x in revision.get_diff(): + ${x|h}
    + %endfor
    ${revision.get_user()} +
    + ${revision.revision_date.strftime("%b %d, %Y, %I:%M %p")} +
    + %if wiki_prev_page: + Previous page + %endif + %if wiki_next_page: + Next page + %endif +
    + diff --git a/templates/simplewiki_searchresults.html b/templates/simplewiki_searchresults.html new file mode 100644 index 0000000000..f9866b3fae --- /dev/null +++ b/templates/simplewiki_searchresults.html @@ -0,0 +1,34 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="simplewiki_base.html"/> + +<%block name="title">Wiki - Search Results - MITx 6.002x + +<%! +from django.core.urlresolvers import reverse +%> + +<%block name="wiki_page_title"> +

    +%if wiki_search_query: +Search results for ${wiki_search_query | h} +%else: +Displaying all articles +%endif +

    + + +<%block name="wiki_body"> +
    +
      +%for article in wiki_search_results: +<% article_deleted = not article.current_revision.deleted == 0 %> +
    • ${article.title} ${'(Deleted)' if article_deleted else ''}

    • +%endfor + +%if not wiki_search_results: +No articles matching ${wiki_search_query if wiki_search_query is not UNDEFINED else ""} ! +%endif +
    +
    + diff --git a/templates/simplewiki_updateprogressbar.html b/templates/simplewiki_updateprogressbar.html new file mode 100644 index 0000000000..a7739d6bf1 --- /dev/null +++ b/templates/simplewiki_updateprogressbar.html @@ -0,0 +1,37 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license +##This file has been converted to Mako, but not tested. It is because uploads are disabled for the wiki. If they are reenabled, this may contain bugs. +<%! + from django.template.defaultfilters import filesizeformat +%> + + +%if started: + +%else: +%if finished: + +%else: +%if overwrite_warning: + +%else: +%if too_big: + +%else: + +%endif +%endif +%endif +%endif diff --git a/templates/simplewiki_view.html b/templates/simplewiki_view.html new file mode 100644 index 0000000000..53f0030eaf --- /dev/null +++ b/templates/simplewiki_view.html @@ -0,0 +1,15 @@ +##This file is based on the template from the SimpleWiki source which carries the GPL license + +<%inherit file="simplewiki_base.html"/> + +<%block name="title">${wiki_title + " - " if wiki_title is not UNDEFINED else ""}Wiki – MITx 6.002x + +<%block name="wiki_page_title"> +

    ${ wiki_article.title } ${'- Deleted Revision!' if wiki_current_revision_deleted else ''}

    + + +<%block name="wiki_body"> +
    + ${ wiki_article_revision.contents_parsed| n} +
    + diff --git a/templates/staff_problem_info.html b/templates/staff_problem_info.html new file mode 100644 index 0000000000..e617584a17 --- /dev/null +++ b/templates/staff_problem_info.html @@ -0,0 +1,3 @@ +
    +${xml | h} +
    diff --git a/templates/staticbook.html b/templates/staticbook.html new file mode 100644 index 0000000000..29553c9423 --- /dev/null +++ b/templates/staticbook.html @@ -0,0 +1,101 @@ +<%inherit file="main.html" /> +<%block name="title">Textbook – MITx 6.002x + +<%block name="js_extra"> + + + +<%include file="navigation.html" args="active_page='book'" /> + +
    +
    + +
    +
    +

    Table of Contents

    + close +
    + +
      + <%include file="book_toc.html" /> +
    +
    + +
    +
    + + + + + +
    +
    +
    +
    diff --git a/templates/tab_module.html b/templates/tab_module.html new file mode 100644 index 0000000000..b2f2e3280e --- /dev/null +++ b/templates/tab_module.html @@ -0,0 +1,13 @@ +
    +
      + % for t in items: +
    • ${t[0]} + % endfor +
    + +% for t in items: +
    +
    +% endfor + +
    diff --git a/templates/tab_module.js b/templates/tab_module.js new file mode 100644 index 0000000000..e8e5adc7e7 --- /dev/null +++ b/templates/tab_module.js @@ -0,0 +1,44 @@ +// IMPORTANT TODO: Namespace + +var ${ id }contents=["", + %for t in items: + ${t[1]['content']} , + %endfor + "" + ]; + +var ${ id }init_functions=["", + %for t in items: + function(){ ${t[1]['init_js']} }, + %endfor + ""]; + +var ${ id }destroy_functions=["", + %for t in items: + function(){ ${t[1]['destroy_js']} }, + %endfor + ""]; + +var ${ id }loc = -1; + +function ${ id }goto(i) { + if (${ id }loc!=-1) + ${ id }destroy_functions[ ${ id }loc ](); + $('#tabs-'+(i-1)).html(${ id }contents[i]); + ${ id }init_functions[i]() + $('#tt_'+${ id }loc).attr("style", "background-color:grey"); + ${ id }loc=i; + $('#tt_'+i).attr("style", "background-color:red"); + MathJax.Hub.Queue(["Typeset",MathJax.Hub]); +} + +$("#tabs").tabs({select:function(event, ui){ + //global=ui; + return true; + }, + show:function(event,ui){ + //global=ui; + ${ id }goto(ui.index+1); + return true; + }, + }); diff --git a/templates/textbook.html b/templates/textbook.html new file mode 100644 index 0000000000..5dd32db353 --- /dev/null +++ b/templates/textbook.html @@ -0,0 +1,10 @@ +<%inherit file="main.html" /> +<%block name="title">Textbook – MITx 6.002x + +
    + <%include file="navigation.html" /> + +
    + ${ text } +
    +
    diff --git a/templates/textinput.html b/templates/textinput.html new file mode 100644 index 0000000000..1473eadbf2 --- /dev/null +++ b/templates/textinput.html @@ -0,0 +1,15 @@ +
    + + + + + % if state == 'unsubmitted': + + % elif state == 'correct': + + % elif state == 'incorrect': + + % elif state == 'incomplete': + + % endif +
    diff --git a/templates/tos.html b/templates/tos.html new file mode 100644 index 0000000000..c76dd13143 --- /dev/null +++ b/templates/tos.html @@ -0,0 +1,305 @@ +<%inherit file="marketing.html" /> + +
    +
    + +

    MITx Terms of Service

    + +

    Welcome to MITx. You must read and agree to these Terms of Service +("TOS"), MITx’s Privacy +Policy, and Honor Code prior to +registering for this site or using any portion of this site +(“Site”), including accessing any course materials, chat +room, mailing list, or other electronic service. These TOS, the +Privacy Policy and the Honor Code are agreements (the +“Agreements”) between you and the Massachusetts Institute +of Technology (“MIT”). If you do not understand or do not +agree to be bound by the terms of the Agreements, please immediately +exit this site.

    + +

    MITx reserves the right to modify these TOS at any time and +will publish notice of any such modifications online on this page for +a reasonable period of time following such modifications, and by +changing the effective date of these TOS. By continuing to access the +Site after notice of such changes have been posted, you signify your +agreement to be bound by them. Be sure to return to this page +periodically to ensure familiarity with the most current version of +these TOS.

    + +

    Description of MITx

    + +

    MITx offers online courses that include opportunities for +professor-to-student and student-to-student interactivity, individual +assessment of a student's work, and for students who demonstrate their +mastery of subjects, a certificate or credential.

    + +

    Rules for Online Conduct

    + +

    You agree that you are responsible for your own use of the Site and +for your User Postings. “User Postings” include all +content submitted, posted, published or distributed on the Site by you +or other users of the Site, including but not limited to all forum +posts, wiki edits, notes, questions, comments, videos, and file +uploads. You agree that you will use the Site in compliance with these +TOS, the Honor Code, and all applicable +local, state, national, and international laws, rules and regulations, +including copyright laws and any laws regarding the transmission of +technical data exported from your country of residence and all United +States export control laws. + +

    As a condition of your use of the Services, you will not use the +Site in any manner intended to damage, disable, overburden, or impair +any MITx server, or the network(s) connected to any MITx +server, or interfere with any other party's use and enjoyment of the +Site. You may not attempt to gain unauthorized access to the Site, +other accounts, computer systems or networks connected to +any MITx server through hacking, password mining or any other +means. You may not obtain or attempt to obtain any materials or +information stored on the Site, its servers, or associated computers +through any means not intentionally made available through the +Site.

    + +

    The following list of items is strictly prohibited on the Site:

    +
      +
    1. Content that defames, harasses, or threatens others +
    2. Content that discusses illegal activities with the intent to commit them. +
    3. Content that infringes another's intellectual property, +including, but not limited to, copyrights, or trademarks +
    4. Any inappropriate, profane, pornographic, obscene, indecent, or +unlawful content +
    5. Advertising or any form of commercial solicitation +
    6. Political content or content related to partisan political +activities +
    7. Viruses, trojan horses, worms, time bombs, corrupted files, +malware, spyware, or any other similar software that may damage the +operation of another’s computer or property +
    8. Content that contains intentional inaccurate information with the +intent of misleading others. +
    9. You, furthermore, agree not to scrape, or otherwise download in +bulk, user-contributed content, a list or directory of users on the +system, or other material including but not limited to on-line +textbooks, User Postings, or user information. +You agree to not misrepresent or attempt to misrepresent your +identity while using the Sites (although you are welcome and +encouraged to use an anonymous username in the forums). +
    + +

    User Accounts and Authority

    + +

    In order to participate in Site activities, you must provide an +email address ("Email Address") and a user password +("User Password") in order to create a user account +(“User Account”). You agree that you will never divulge or +share access or access information to your User Account with any third +party for any reason. In setting up your User Account, you may be +prompted or required to enter additional information, including your +name. You understand and agree that all information provided by you is +accurate and current. You agree to maintain and update your +information to keep it accurate and current.

    + +

    We care about the confidentiality and security of your personal +information. Please see our Privacy +Policy for more information about what information about +you MITx collects and how MITx uses that +information.

    + +

    Your Right to Use Content on the Site

    + +

    Unless indicated as being in the public domain, all content on the +Site is protected by United States copyright. The texts, exams and +other instructional materials provided with the courses offered on +this Site are for your personal use in connection with those courses +only. MIT is planning to make MITx course content and software +infrastructure available under open source licenses that will help +create a vibrant ecosystem of contributors and further MIT’s +goal of making education accessible and affordable to the world.

    + +

    Certain reference documents, digital textbooks, articles and other +information on the Site are used with the permission of third parties +and use of that information is subject to certain rules and +conditions, which will be posted along with the information. By using +this Site you agree to abide by all such rules and conditions. Due to +privacy concerns, User Postings shall be licensed to MITx with +the terms discussed below. Please +see MITx's Copyright Page for +more information.

    + +

    User Postings

    + +

    User Postings Representations and Warranties. By +submitting or distributing your User Postings, you affirm, represent, +and warrant that you are the creator and owner of or have the +necessary licenses, rights, consents, and permissions to reproduce and +publish the posted information, and to authorize MIT and MITx's +Users to reproduce, modify, publish, and otherwise use that infomation +and distribute your User Postings as necessary to exercise the +licenses granted by you below. You, and not MITx, are solely +responsible for your User Postings and the consequences of posting or +publishing them.

    + +

    Limited License Grant to MIT. By submitting or +distributing User Postings to the Site, you hereby grant to MIT a +worldwide, non-exclusive, transferable, assignable, fully paid-up, +royalty-free, perpetual, irrevocable right and license to host, +transfer, display, perform, reproduce, modify, distribute and +re-distribute, relicense, and otherwise exploit your User Postings, in +whole or in part, in any form, and in any media formats and through +any media channels (now known or hereafter developed).

    + +

    Limited License Grant to MITx Users. By +submitting or distributing User Postings to the Site, you hereby grant +to each User of the Site a non-exclusive license to access and use +your User Postings in connection with their use of the Site for their +own personal purposes.

    + +

    Use of MITx and MIT Names, Trademarks and Service Marks

    + +

    MITx,” "MIT", "Massachusetts Institute +of Technology", and its logos and seal are trademarks of the +Massachusetts Institute of Technology. You may not use MIT’s +names or logos, or any variations thereof, without prior written +consent of MIT. You may not use the MIT name in any of its forms nor +MIT seals or logos for promotional purposes, or in any way that +deliberately or inadvertently claims, suggests, or in MIT's sole +judgment gives the appearance or impression of a relationship with or +endorsement by MIT. + +

    All Trademarks not owned by MIT that appear on the Site or on or +through the services made available on or through the Site, if any, +are the property of their respective owners. Nothing contained +on the Site should be construed as granting, by implication, estoppel, +or otherwise, any license or right to use any such Trademark displayed +on the Site without the written permission of the third party that may +own the applicable Trademark. + + +

    Digital Millennium Copyright Act

    + +

    Copyright owners who believe their material has been infringed on +the Site should contact MITx's designated copyright agent at +dcma-agent@mit.edu or at 77 Massachusetts Avenue, Cambridge, MA +02138-4307 Attention: MIT DCMA Agent, W92-263A. + +

    Notification must +include: +

      +
    • Identification of the copyrighted work, or, in the case of +multiple works at the same location, a representative list of such +works at that site. +
    • Identification of the material that is claimed to be infringing +or to be the subject of infringing activity. You must include +sufficient information for us to locate the material (e.g., url, ip +address, computer name). +
    • Information for us to be able to contact the complaining party +(e.g., email address, phone number). +
    • A statement that the complaining party believes that the use of +the material has not been authorized by the copyright owner or an +authorized agent. +
    • A statement that the information in the notification is accurate +and that the complaining party is authorized to act on behalf of the +copyright owner. +
    + +

    Disclaimer of Warranty / Indemnification/Limitation of Liabilities

    + +

    THE SITE IS PROVIDED "AS IS" AND "AS AVAILABLE" +WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING +WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS +FOR USE FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. MIT does not +warrant the Site will operate in an uninterrupted or error-free manner +or that the Site is free of viruses or other harmful components. Use +of information obtained from or through this Site is at your own +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. We may close or +limit enrollment for pedagogical or technological reasons.

    + +

    User Postings Disclaimer. You understand that when +using the Site you will be exposed to User Postings from a variety of +sources, and that MIT is not responsible for the accuracy, usefulness, +reliability, or intellectual property rights of or relating to such +User Postings. You further understand and acknowledge that you may be +exposed to User Postings that are inaccurate, offensive, defamatory, +indecent or objectionable, and you agree to waive, and hereby do +waive, any legal or equitable rights or remedies you have or may have +against MIT with respect thereto. MIT does not endorse any User +Postings or any opinion, recommendation or advice expressed +therein. MITx has no obligation to monitor any User Postings or +any other user communications through the Site. However, MITx reserves +the right to review User Postings and to edit or remove, in whole or +in part, such User Postings in its sole discretion. If notified by a +User or a content owner of a User Posting that allegedly does not +conform to the TOS, MIT may investigate the allegation and determine +in its sole discretion whether to remove the User Posting, which it +reserves the right to do at any time and without notice.

    + +

    Links to Other Sites. The Site may include +hyperlinks to sites maintained or controlled by others. MIT is not +responsible for and does not routinely screen, approve, review or +endorse the contents of or use of any of the products or services that +may be offered at these sites. If you decide to access linked third +party web sites, you do so at your own risk.

    + + +

    YOU AGREE THAT MIT WILL NOT BE LIABLE TO YOU FOR ANY LOSS OR +DAMAGES, EITHER ACTUAL OR CONSEQUENTIAL, ARISING OUT OF OR RELATING TO +THESE TERMS OF SERVICE, OR TO YOUR (OR ANY THIRD PARTY'S) USE OR +INABILITY TO USE THE SITE, OR TO YOUR PLACEMENT OF CONTENT ON THE +SITE, OR TO YOUR RELIANCE UPON INFORMATION OBTAINED FROM OR THROUGH +THE SITE WHETHER BASED IN CONTRACT, TORT, STATUTORY OR OTHER LAW, +EXCEPT ONLY IN THE CASE OF DEATH OR PERSONAL INJURY WHERE AND ONLY TO +THE EXTENT THAT APPLICABLE LAW REQUIRES SUCH LIABILITY.

    + +

    IN PARTICULAR, MIT WILL HAVE NO LIABILTY FOR ANY CONSEQUENTIAL, +INDIRECT, PUNITIVE, SPECIAL, EXEMPLARY OR INCIDENTAL DAMAGES, WHETHER +FORESEEABLE OR UNFORESEEABLE, (INCLUDING, BUT NOT LIMITED TO, CLAIMS +FOR DEFAMATION, ERRORS, LOSS OF DATA, OR INTERRUPTION IN AVAILABILITY +OF DATA).

    +
    + +

    Indemnification

    + +

    You agree to defend, hold harmless and indemnify MIT, and its +subsidiaries, affiliates, officers, agents, and employees from and +against any third-party claims, actions or demands arising out of, +resulting from or in any way related to your use of the Site, +including any liability or expense arising from any and all claims, +losses, damages (actual and consequential), suits, judgments, +litigation costs and attorneys' fees, of every kind and nature. In +such a case, MIT will provide you with written notice of such claim, +suit or action.

    + +

    Miscellaneous

    + +

    Termination Rights. You agree that MIT, in its sole +discretion, may terminate your use of the Site or your participation +in it thereof, for any reason or no reason. If you no longer desire to +participate in the Site, you may terminate your participation therein +upon notice to MIT.

    + +

    Entire Agreement. This Agreement constitutes the entire agreement +between you and MIT with respect to your use of the Site, superseding +any prior agreements between you and MIT regarding your use of the +Site.

    + +

    Waiver and Severability of TOS. The failure of MIT to exercise or +enforce any right or provision of the TOS of Site shall not constitute +a waiver of such right or provision. If any provision of the TOS is +found by a court of competent jurisdiction to be invalid, the parties +nevertheless agree that the court should endeavor to give effect to +the parties' intentions as reflected in the provision, and the +other provisions of the TOS remain in full force and effect.

    + +

    Choice of Law/Forum Selection. You agree that any dispute +arising out of or relating to these Terms or any content posted to a +Site will be governed by the laws of the Commonwealth of +Massachusetts, excluding its conflicts of law provisions. You further +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.

    + +

    Effective Date: February 20, 2012

    +
    +
    diff --git a/templates/using.html b/templates/using.html new file mode 100644 index 0000000000..6decbf98ad --- /dev/null +++ b/templates/using.html @@ -0,0 +1,15 @@ +

    Using the system

    + +
      +
    • +

      During video playback, use the subtitles and the scroll bar to navigate. Clicking the subtitles is a fast way to skip forwards and backwards by small amounts.

      +
    • + +
    • +

      If you are on a low-resolution display, the left navigation bar can be hidden by clicking on the set of three left arrows next to it.

      +
    • + +
    • +

      If you need bigger or smaller fonts, use your browsers settings to scale them up or down. Under Google Chrome, this is done by pressing ctrl-plus, or ctrl-minus at the same time.

      +
    • +
    diff --git a/templates/vert_module.html b/templates/vert_module.html new file mode 100644 index 0000000000..c68f4ae60e --- /dev/null +++ b/templates/vert_module.html @@ -0,0 +1,7 @@ +
      +% for t in items: +
    1. + ${t[1]['content']} +
    2. +% endfor +
    diff --git a/templates/video.html b/templates/video.html new file mode 100644 index 0000000000..dd7f2e559b --- /dev/null +++ b/templates/video.html @@ -0,0 +1,74 @@ +% if name is not UNDEFINED and name != None: +

    ${name}

    +% endif + +
    + +
    +
    +
    +
    + + +
    + +
    +
    + +
    +
      +
    • Pause
    • + +
    • +
      0:00 / 0:00
      +
    • +
    + + +
    +
    +

    Speed

    +
      +
      + + turn off +
      +
      +
      +
      + +
        + +
      1. +
      2. +
      3. +
      4. +
      5. +
      6. +
      7. +
      8. +
      9. +
      10. +
      11. +
      12. +
      13. +
      14. + +
      + +
      + +<%block name="js_extra"> + + diff --git a/templates/video_init.js b/templates/video_init.js new file mode 100644 index 0000000000..dc94763be3 --- /dev/null +++ b/templates/video_init.js @@ -0,0 +1,113 @@ +var streams=${ streams } +var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "transparent", allowFullScreen: "true" }; +var atts = { id: "myytplayer" }; + +// If the user doesn't have flash, use the HTML5 Video instead. YouTube's +// iFrame API which supports HTML5 is still developmental so it is not default +if (swfobject.hasFlashPlayerVersion("10.1")){ + swfobject.embedSWF(document.location.protocol + "//www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer?wmode=transparent", + "ytapiplayer", "640", "385", "8", null, null, params, atts); +} else { + + //end of this URL may need &origin=http://..... once pushed to production to prevent XSS + $("#html5_player").attr("src", document.location.protocol + "//www.youtube.com/embed/" + streams["1.0"] + "?enablejsapi=1&controls=0"); + $("#html5_player").show(); + + var tag = document.createElement('script'); + tag.src = document.location.protocol + "//www.youtube.com/player_api"; + var firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + // Make sure the callback is called once API ready, YT seems to be buggy + loadHTML5Video(); +} +var captions=0; +$("#slider").slider({slide:function(event,ui){seek_slide('slide',event.originalEvent,ui.value);}, + stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}}); + +function good() { + window['console'].log(ytplayer.getCurrentTime()); +} + +ajax_video=good; + +// load the same video speed your last video was at in a sequence +// if the last speed played on video doesn't exist on another video just use 1.0 as default + +function add_speed(key, stream) { + var id = 'speed_' + stream; + + if (key == video_speed) { + $("#video_speeds").append('
    1. '+key+'x
    2. '); + } else { + $("#video_speeds").append('
    3. '+key+'x
    4. '); + } + + $("#"+id).click(function(){ + change_video_speed(key, stream); + $(this).siblings().removeClass("active"); + $(this).addClass("active"); + }); +} + +var l=[] +for (var key in streams) { + l.push(key); +} + +function sort_by_value(a,b) { + var x=parseFloat(a); + var y=parseFloat(b); + var r=((x < y) ? -1 : ((x > y) ? 1 : 0)); + return r; +} + +l.sort(sort_by_value); + +$(document).ready(function() { + video_speed = $.cookie("video_speed"); + + //ugly hack to account for different formats in vid speed in the XML (.75 vs 0.75, 1.5 vs 1.50); + if (( !video_speed ) || ( !streams[video_speed] && !streams[video_speed + "0"]) && !streams[video_speed.slice(0,-1)] && !streams[video_speed.slice(1)] && !streams["0" + video_speed]) { + video_speed = "1.0"; + } + + if (streams[video_speed + "0"]){ + video_speed = video_speed + "0"; + } else if (streams[video_speed.slice(0, -1)]){ + video_speed = video_speed.slice(0, -1); + } else if (streams[video_speed.slice(1)]) { + video_speed = video_speed.slice(1); + } else if (streams["0" + video_speed]) { + video_speed = "0" + video_speed; + } + + loadNewVideo(streams["1.0"], streams[video_speed], ${ position }); + + for(var i=0; i