--- /dev/null
+set tabstop=2
+set shiftwidth=2
+set softtabstop=2
+
margin-left: 1.705%;
margin-right: 1.705%; }
-.grid-3, #g-logo {
+.grid-3, .sidebar, #g-logo {
float: left;
width: 34.091%;
padding: 0;
margin-left: 1.705%;
margin-right: 1.705%; }
-.grid-5, #g-nav-main {
+.grid-5, #g-nav-main, #pg_lectures .main-content {
float: left;
width: 59.091%;
padding: 0;
margin-left: 1.705%;
margin-right: 1.705%; }
-.grid-8, #g-nav-user, #g-masthead-hr, .breadcrumb, .subheader, .main-content, #g-footer, #intro-schools {
+.grid-8, #g-nav-user, #g-masthead-hr, .breadcrumb, .subheader, .main-content, #g-footer, #messages, #intro-schools {
float: left;
width: 96.591%;
padding: 0;
margin-left: 1.705%;
margin-right: 1.705%; }
-.futura, .futura-oblique, .breadcrumb .location, #schools .number_of_courses, #schools .number_of_notes, #pg_courses .course .course-data-number, .futura-light, h1, .subheader h2, .futura-light-oblique, .futura-bold, .link-bar a, body, p, #g-masthead, #pg_home h1 {
+.futura, .futura-oblique, .breadcrumb .location, #schools .number_of_courses, #schools .number_of_notes, #pg_courses .course .course-data-number, .futura-light, h1, .subheader h2, .futura-light-oblique, .futura-bold, .info, .error, .link-bar a, body, p, #g-masthead, #pg_home h1 {
font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: 500;
-webkit-font-smoothing: antialiased; }
font-style: italic;
font-weight: 300; }
-.futura-bold, .link-bar a {
+.futura-bold, .info, .error, .link-bar a {
font-weight: 700; }
body {
line-height: 1.5em;
/* 24 */ }
-.big, p, #g-nav-main a, .breadcrumb {
+.big, h4, p, #g-nav-main a, .breadcrumb, #pg_lectures .lecture-name {
/* 18px / 24px */
font-size: 1.125em;
line-height: 1.333em; }
.centered-rt-parent {
margin: 0 auto; }
+.light {
+ color: #444; }
+
+.info {
+ color: #6bcf77; }
+
+.error {
+ color: #b7300b; }
+
/* A.Sprites
----------------------------------------------------------------
[Table of contents]
- 0.Home
- 1.Schools
- 2.Courses
- 3.Course
- 4.Legal
+ 0.General
+ 1.Home
+ 2.Schools
+ 3.Courses
+ 4.Course
----------------------------------------------------------------*/
-/* 0.`Home
+/* 0.`General
+---------------------------------------------- */
+#messages {
+ padding: 0.75em; }
+
+/* 1.`Home
---------------------------------------------- */
#pg_home .subheader {
text-align: center;
height: 2px;
background-color: #999; }
-/* 1.`Schools
+/* 2.`Schools
---------------------------------------------- */
#schools a {
display: block;
#schools .number_of_courses, #schools .number_of_notes {
color: #999; }
-/* 2.`Courses
+/* 3.`Courses
---------------------------------------------- */
#pg_courses .course {
position: relative;
#pg_courses .course .course-data-description {
margin-top: -0.5em; }
-/* 3.`Course
+/* 4.`Course
---------------------------------------------- */
+#pg_lectures .lecture {
+ padding-bottom: 0.75em;
+ margin-bottom: 1em;
+ background-image: url("../img/dotted-x.png");
+ background-position: bottom;
+ background-repeat: repeat-x; }
+
.link-bar {
margin-left: -0.375em; }
.link-bar li {
.schools em {
margin: 0 auto; }
-/* 4. Legal
----------------------------------------------- */
-
-#pg_legal .subheader {
- text-align: center;
- padding: 3em 0; }
-#pg_legal .section-home {
- margin-bottom: 1.5em; }
-
/* media queries
============================================== */
background-repeat: repeat-x;
}
+@mixin dotted-y($position: left) {
+ background-image: url('../img/dotted-y.png');
+ background-position: $position;
+ background-repeat: repeat-y;
+}
// css3
[Table of contents]
- 0.Home
- 1.Schools
- 2.Courses
- 3.Course
+ 0.General
+ 1.Home
+ 2.Schools
+ 3.Courses
+ 4.Course
----------------------------------------------------------------*/
+/* 0.`General
+---------------------------------------------- */
+
+#messages {
+ @extend .grid-8;
+ padding: $base/2;
+}
-/* 0.`Home
+/* 1.`Home
---------------------------------------------- */
#pg_home {
}
-/* 1.`Schools
+/* 2.`Schools
---------------------------------------------- */
#schools {
}
}
-/* 2.`Courses
+/* 3.`Courses
---------------------------------------------- */
#pg_courses {
}
}
-/* 3.`Course
+/* 4.`Course
---------------------------------------------- */
+
+#pg_lectures {
+
+ .main-content {
+ @extend .grid-5;
+ }
+
+ .lecture {
+ padding-bottom: $base/2;
+ margin-bottom: $base/1.5;
+ @include dotted-x( bottom );
+ }
+
+ .lecture-name {
+ @extend .big;
+ }
+}
@extend .large;
}
+h4 {
+ @extend .big;
+}
+
a {
@include transition( color );
color: $mustard;
background-position: 20% 0;
}
+.sidebar {
+ @extend .grid-3;
+}
/* a.`header
.centered { text-align: center;}
.centered-rt-parent { margin: 0 auto;}
+.light {
+ color: #444;
+}
+
+.info {
+ @extend .futura-bold;
+ color: #6bcf77;
+}
+
+.error {
+ @extend .futura-bold;
+ color: #b7300b;
+}
@import "partials/sprites"; // A
@import "partials/pages"; // B
</div>
</header>
<div id="topofcontent"></div>
- <div id="messages" class="page"><span id="PROTO_message" class="__type__">__msg__</span></div>
+ <div class="wrapper">
+ <div id="messages" class="page"><span id="PROTO_message" class="__type__">__msg__</span></div>
+ </div>
<div id="g-page">
<div class="wrapper">
<style>
</p>
<nav class="link-bar">
<ul>
- <li><a href="#">Sign Up</a></li>
+ <li><a href="/register" id="sign_up-link">Sign Up</a></li>
<li class="last"><a href="#">Learn Something</a></li>
</ul>
</nav>
<!--================================================================= -->
<div class=page id=pg_lectures>
- <div class="proto lectures_head" id=PROTO_lectures_head>
- <h1>Lectures for Course __number__ : __name__</h1>
- Subject: __subject__<br>
- Department: __department__<br>
- </div>
- <div class="proto lectures_instructor" id=PROTO_lectures_instructor>
- Instructor: __name__ <span class="instructor_email">(__email__)</span><br>
- </div>
- <div class="proto lecture" id=PROTO_lecture>
- <div class=name>
- <a href="/lecture/___id__">__name__</a><br>
- Created: __date__<br>
- </div>
- </div>
- <div>
- <span class="sub_menu" style="display:none;">
- <a href="" id="new_lecture">New Lecture</a>
- </span>
- <form method="POST" id="form_lecture" style="display:none;">
- <h1>Create New Lecture</h1>
- <p>Use this form to create a new lecture. After creating the lecture, you can then create a notes-taking session within it.</p>
- <div class="row">
- <div class="label">Lecture Name</div>
- <div class="field">
- <input type="text" name="name">
- </div>
- </div>
- <div class="row">
- <div class="label"> </div>
- <div class="field">
- <button>Create Lecture</button>
- </div>
- </div>
- </form>
- </div>
- </div>
+ <header class="subheader">
+ <div class="proto lectures_head" id=PROTO_lectures_head>
+ <h2>Lectures for Course __number__ : __name__</h2>
+ <h4>Subject:<span class="light futura"> __subject__</span></h4>
+ <h4>Department:<span class="light futura"> __department__</span></h4>
+ </div>
+ <div class="proto lectures_instructor" id=PROTO_lectures_instructor>
+ <h4>Instructor: <span class="futura light"> __name__ <a href="mailto:__email__" class="instructor_email">__email__</span></h4>
+ </div>
+ </header>
+ <div class="main-content">
+ <div class="lectures">
+ <div class="proto lecture" id=PROTO_lecture>
+ <div class=lecture-name>
+ <a href="/lecture/___id__">__name__</a><br>
+ Created: __date__<br>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="sidebar">
+ <span class="sub_menu" style="display:none;">
+ <a href="" id="new_lecture">New Lecture</a>
+ </span>
+ <form method="POST" id="form_lecture" style="display:none;">
+ <h4>Create New Lecture</h4>
+ <p>Use this form to create a new lecture. After creating the lecture, you can then create a notes-taking session within it.</p>
+ <div class="row">
+ <div class="label">Lecture Name</div>
+ <div class="field">
+ <input type="text" name="name">
+ </div>
+ </div>
+ <div class="row">
+ <div class="label"> </div>
+ <div class="field">
+ <button>Create Lecture</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
<!--================================================================= -->
<div class=page id=pg_notes>
+ <header class="subheader">
<div class="proto notes_head" id=PROTO_notes_head>
- <h1>Note pads for Course __number__ : __name__</h1>
- Subject: __subject__<br>
- Department: __department__<br>
+ <h2>Note pads for Course __number__ : __name__</h2>
+ <h4>Subject:<span class="light futura">__subject__</span></h4>
+ <h4>Department:<span class="light futura">__department__</span></h4>
</div>
<div class="proto notes_instructor" id=PROTO_notes_instructor>
- Instructor: __name__ <span class="instructor_email">(__email__)</span><br>
+ <h4> Instructor: <span class="italic futura"> __name__ <a href="mailto:__email__" class="instructor_email">(__email__)</a></span></h4>
</div>
<div class="proto note" id=PROTO_note>
<div class=name>
</div>
<!--================================================================= -->
<div class=page id=pg_login>
- <h1>Login</h1>
+ <header class="subheader">
+ <h1>Login</h1>
+ </header>
+ <div class="main-content">
<form id="form_login" action="/login" method="POST">
<div class="zarea">
<div class="row">
</div>
</form>
</div>
+ </div>
<!--================================================================= -->
<div class="page" id="pg_resetpass">
<h1>Password Reset</h1>
$('#login_link').text('Logout').attr('href', '/logout');
$('#register_link').hide();
$('#profile_link').show();
+ $('#sign_up-link').hide();
} else {
$('.username').text('Guest');
$("#login_status").hide();
$('#login_link').text('Login').attr('href', '/login');
$('#register_link').show();
$('#profile_link').hide();
+ $('#sign_up-link').show();
}
//if (asdfasdfasdf){
if (response) {