added simple default styling to buttons, moved 'create a new course' form to the...

diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css
index cad05e399c778a63079c3ff5e54af9c0143d3466..07819b950ca8f1f09f604526ce9703b155552696 100755 (executable)
--- a/public/assets/css/screen.css
+++ b/public/assets/css/screen.css
@@ -14,26 +14,26 @@ Please have a look around, I hope you enjoy your stay.
 
 [Table of contents] - a map of our grounds.
 
-    0.General
-        a.elements
-        b.classes
+       0.General
+               a.elements
+               b.classes
 
-    1.Layout
-        a.header
-        b.content
-        c.footer
+       1.Layout
+               a.header
+               b.content
+               c.footer
 
-    2.Extensible Classes
+       2.Forms
+       3.Extensible Classes
 
-
-    *.Pages, modules, sprites and media queries imported at end
+       *.Pages, modules, sprites and media queries imported at end
 
 ----------------------------------------------------------------
 
 [Prefixes] - some patterns that you may observe.
 
-    g: global
-    s: state
+       g: global
+       s: state
 
 ---------------------------------------------------------------- */
 /* 0.`General
@@ -50,7 +50,7 @@ Please have a look around, I hope you enjoy your stay.
   margin-left: 1.705%;
   margin-right: 1.705%; }
 
-.grid-2 {
+.grid-2, #pg_courses .sidebar {
   float: left;
   width: 21.591%;
   padding: 0;
@@ -132,7 +132,7 @@ body {
   font-size: 0.75em;
   line-height: 1em; }
 
-.small, #g-nav-user, #intro-schools li, .link-bar a {
+.small, #g-nav-user, .form-header p, #intro-schools li, .link-bar a {
   /* 14px / 18px */
   font-size: 0.875em;
   line-height: 1.286em; }
@@ -208,6 +208,13 @@ p {
 img {
   max-width: 100%; }
 
+button {
+  padding: 0.375em;
+  border: 0;
+  background: none;
+  background-color: #e8a200;
+  color: #fff; }
+
 ::-moz-selection {
   background: #44a1dd;
   color: #fff;
@@ -472,7 +479,17 @@ body {
     .footer .creative_commons a {
       color: #777; }
 
-/* 7.`Extensible Classes
+/* 2.`Forms
+---------------------------------------------- */
+input.text {
+  padding: 0.375em;
+  background-color: #e5e5e5;
+  border: 1px solid transparent; }
+  input.text:focus {
+    border: 1px solid #aaa;
+    outline: 0; }
+
+/* 3.`Extensible Classes
 ---------------------------------------------- */
 .group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after {
   content: ".";

diff --git a/public/assets/css/scss/partials/_pages.scss b/public/assets/css/scss/partials/_pages.scss
index 1d05d3620f079a39d4a02fe5b9d7f3d3b1011fb9..71ebcb6d2c98e31e5a195b1cb7de480d0aeb25c3 100644 (file)
--- a/public/assets/css/scss/partials/_pages.scss
+++ b/public/assets/css/scss/partials/_pages.scss
@@ -130,6 +130,10 @@
         @extend .grid-6;
     }
 
+               .sidebar {
+                       @extend .grid-2;
+               }
+
     .course {
         position: relative;
         margin-bottom: $base/2;

diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss
index 3cd1d5b94d5fdb13baf8b3af6faf4859e4c56bf9..9f1ac72c777c0612fbfe7d610d6227ff96373ad2 100755 (executable)
--- a/public/assets/css/scss/screen.scss
+++ b/public/assets/css/scss/screen.scss
@@ -14,26 +14,26 @@ Please have a look around, I hope you enjoy your stay.
 
 [Table of contents] - a map of our grounds.
 
-    0.General
-        a.elements
-        b.classes
+       0.General
+               a.elements
+               b.classes
 
-    1.Layout
-        a.header
-        b.content
-        c.footer
+       1.Layout
+               a.header
+               b.content
+               c.footer
 
-    2.Extensible Classes
+       2.Forms
+       3.Extensible Classes
 
-
-    *.Pages, modules, sprites and media queries imported at end
+       *.Pages, modules, sprites and media queries imported at end
 
 ----------------------------------------------------------------
 
 [Prefixes] - some patterns that you may observe.
 
-    g: global
-    s: state
+       g: global
+       s: state
 
 ---------------------------------------------------------------- */
 
@@ -95,6 +95,14 @@ img {
     max-width: 100%;
 }
 
+button {
+       padding: $base/4;
+       border: 0;
+       background: none;
+       background-color: $mustard;
+       color: #fff;
+}
+
 ::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
 ::selection { background: #44a1dd; color: #fff; text-shadow: none; }
 
@@ -402,7 +410,28 @@ body {
   }
 }
 
-/* 7.`Extensible Classes
+/* 2.`Forms
+---------------------------------------------- */
+
+input.text {
+       padding: $base/4;
+       background-color: #e5e5e5;
+       border: 1px solid transparent;
+
+       &:focus {
+               border: 1px solid #aaa;
+               outline: 0;
+       }
+}
+
+.form-header {
+       p {
+               @extend .small;
+       }
+}
+
+
+/* 3.`Extensible Classes
 ---------------------------------------------- */
 
 .group {

diff --git a/public/index.html b/public/index.html
index 60b7cabae2738e25902b9f2436cd8b3da09b1211..698aa5b80a5ef10e99409febfa4ebcc1e0f47011 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -216,57 +216,64 @@
                             </aside>
                         </div>
 
-                        <form method="POST" id="form_course" style="display:none;">
-                            <h1>Create New Course</h1>
-                            <p>Use this form to create a new course. After creating the course, you can create a lecture within it.</p>
-                            <div class="row">
-                                <div class="label">Course number</div>
-                                <div class="field">
-                                    <input type="text" name="number">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Course name</div>
-                                <div class="field">
-                                    <input type="text" name="name">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Course subject</div>
-                                <div class="field">
-                                    <input type="text" name="subject">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Course department</div>
-                                <div class="field">
-                                    <input type="text" name="department">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Instructor's Name</div>
-                                <div class="field">
-                                    <input type="text" name="instructorName">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Instructor's Email</div>
-                                <div class="field">
-                                    <input type="text" name="email">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">&nbsp;</div>
-                                <div class="field">
-                                    <button>Create Course</button>
-                                </div>
-                            </div>
-                        </form>
                     </div>
+                                                                               <div class="sidebar">
+                                                                                       <form method="POST" id="form_course" style="display:none;">
+                                                                                               <header class="form-header">
+                                                                                                       <h4>Create New Course</h4>
+                                                                                                       <p>Use this form to create a new course. After creating the course, you can create a lecture within it.</p>
+                                                                                               </header>
+                                                                                               <div class="row">
+                                                                                                       <div class="label">Course number</div>
+                                                                                                       <div class="field">
+                                                                                                               <input type="text" class="text" name="number">
+                                                                                                       </div>
+                                                                                               </div>
+                                                                                               <div class="row">
+                                                                                                       <div class="label">Course name</div>
+                                                                                                       <div class="field">
+                                                                                                               <input type="text" class="text" name="name">
+                                                                                                       </div>
+                                                                                               </div>
+                                                                                               <div class="row">
+                                                                                                       <div class="label">Course subject</div>
+                                                                                                       <div class="field">
+                                                                                                               <input type="text" class="text" name="subject">
+                                                                                                       </div>
+                                                                                               </div>
+                                                                                               <div class="row">
+                                                                                                       <div class="label">Course department</div>
+                                                                                                       <div class="field">
+                                                                                                               <input type="text" class="text" name="department">
+                                                                                                       </div>
+                                                                                               </div>
+                                                                                               <div class="row">
+                                                                                                       <div class="label">Instructor's Name</div>
+                                                                                                       <div class="field">
+                                                                                                               <input type="text" class="text" name="instructorName">
+                                                                                                       </div>
+                                                                                               </div>
+                                                                                               <div class="row">
+                                                                                                       <div class="label">Instructor's Email</div>
+                                                                                                       <div class="field">
+                                                                                                               <input type="text" class="text" name="email">
+                                                                                                       </div>
+                                                                                               </div>
+                                                                                               <div class="row">
+                                                                                                       <div class="label">&nbsp;</div>
+                                                                                                       <div class="field">
+                                                                                                                       <button>Create Course</button>
+                                                                                                       </div>
+                                                                                               </div>
+                                                                                       </form>
+                                                                               </div>
                 </div>
 
                 <!--================================================================= -->
                 <div class=page id=pg_lectures>
+                    <header class="breadcrumb">
+                        <a href="#"><span class="action">&#139; Back</span><span class="location">&nbsp;to to Lectures</span></a>
+                    </header>
                                                                        <header class="subheader">
                                                                                <div class="proto lectures_head" id=PROTO_lectures_head>
                                                                                        <h2>Lectures for Course __number__ : __name__</h2>
@@ -297,7 +304,7 @@
                                                                                <div class="row">
                                                                                        <div class="label">Lecture Name</div>
                                                                                        <div class="field">
-                                                                                               <input type="text" name="name">
+                                                                                               <input type="text" class="text" name="name">
                                                                                        </div>
                                                                                </div>
                                                                                <div class="row">
@@ -335,7 +342,7 @@
                 <div class="row">
                   <div class="label">Note Pad Name</div>
                   <div class="field">
-                    <input type="text" name="name">
+                    <input type="text" class="text" name="name">
                   </div>
                 </div>
                 <div class="row">
@@ -402,7 +409,7 @@
                                     <label for="email">School email*</label>
                                 </div>
                                 <div class="field">
-                                    <input type="text" name="email">
+                                    <input type="text" class="text" name="email">
                                 </div>
                             </div>
                             <div class="row">
@@ -442,7 +449,7 @@
                                     <label for="name">Site Handle</label>
                                 </div>
                                 <div class="field">
-                                    <input type="text" name="name">
+                                    <input type="text" class="text" name="name">
                                 </div>
                             </div>
                             <div class="row">
@@ -579,7 +586,7 @@
                                     <label for="email">School email</label>
                                 </div>
                                 <div class="field">
-                                    <input type="text" name="email" size="15" value="joe@sleepless.com">
+                                    <input type="text" class="text" name="email" size="15" value="joe@sleepless.com">
                                 </div>
                             </div>
                             <div class="row">
@@ -624,7 +631,7 @@
                     <label for="email">School email</label>
                   </div>
                   <div class="field">
-                    <input type="text" name="email" size="15" value="">
+                    <input type="text" class="text" name="email" size="15" value="">
                   </div>
                 </div>
                 <div class="row">