playing with subheaders again, trying to standardize things

diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css
index c17725fbc7bcfae55dff97ee7e6789a0e6f3dd22..1d7cf0501272ba54e7d660c1fac6c1593fe4f306 100755 (executable)
--- a/public/assets/css/screen.css
+++ b/public/assets/css/screen.css
@@ -99,7 +99,7 @@ Please have a look around, I hope you enjoy your stay.
   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, .info, .error, .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, .form-header h4, #pg_home h1 {
   font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-weight: 500;
   -webkit-font-smoothing: antialiased; }
@@ -436,10 +436,11 @@ body {
     color: #bbb; }
 
 .subheader {
-  padding: 1.5em 0 2.25em;
-  margin-bottom: 1.5em;
+  padding: 2.25em 0 3em;
+  margin-bottom: 2.25em;
   border-top: 1px solid #fff;
-  border-bottom: 1px solid #f7f7f7;
+  border-bottom: 1px solid #fbf7eb;
+  border-bottom: 1px solid rgba(255, 205, 88, 0.1);
   background-color: #fbfbfb; }
   .subheader h1, .subheader h3 {
     margin: 0; }
@@ -506,6 +507,12 @@ input.text {
     border: 1px solid #aaa;
     outline: 0; }
 
+.form-header h4 {
+  color: #e8a200; }
+
+.form-section {
+  margin-bottom: 3em; }
+
 form .row {
   margin-bottom: 0.75em; }
   form .row button {

diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss
index 5f8c16886e19ca0e758b08009001fafa84c4b684..4f9599e13bb25092db1aa8ba06f410cd780cd594 100755 (executable)
--- a/public/assets/css/scss/screen.scss
+++ b/public/assets/css/scss/screen.scss
@@ -327,13 +327,17 @@ body {
        }
 }
 
+$rgba-gold: rgba(255, 205, 88, 0.1);
+
 .subheader {
     @extend .grid-8;
-    padding: $base 0 $base*1.5;
-               margin-bottom: $base;
+    padding: $base*1.5 0 $base*2;
+               margin-bottom: $base*1.5;
                border-top: 1px solid #fff;
-               border-bottom: 1px solid #f7f7f7;
+               border-bottom: 1px solid #fbf7eb;
+               border-bottom: 1px solid $rgba-gold;
                background-color: #fbfbfb;
+               // @include dotted-x-gold( bottom );
 
     h1, h3 {
         margin: 0;
@@ -440,11 +444,20 @@ input.text {
 
 .form-header {
 
+       h4 {
+               color: $mustard;
+               @extend .futura;
+       }
+
        p {
                @extend .small;
        }
 }
 
+.form-section {
+       margin-bottom: $base*2;
+}
+
 form {
 
        .row {

diff --git a/public/index.html b/public/index.html
index 05178d415796f0a9c45e6856040e8cc8fadeccd7..34bb49dcb29741f053009b16807f245f54fbfbad 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -474,102 +474,108 @@
                 </div>
           <!--================================================================= -->
           <div class="page" id="pg_profile">
-            <h1>User Profile</h1>
-            <form id="form_profile" action="/profile" method="POST">
-              <h2>Account Information</h2>
-              <div class="area">
-                <div class="row">
-                  <div class="label">
-                    <span>Email</span>
-                  </div>
-                  <div class="field">
-                    <span class="email"></span>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="label">
-                    <label for="affiliation">Affiliation</label>
-                  </div>
-                  <div class="field">
-                    <select id="affiliation" name="affiliation">
-                      <option value="Student">Student</option>
-                      <option value="Teachers Assistant">Teachers Assistant</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-              <h2>Profile Information</h2>
-              <div class="area">
-                <div class="row">
-                  <div class="label">
-                    <label for="name">User Name</label>
-                  </div>
-                  <div class="field">
-                    <input id="name" type="text" name="name" value="">
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="label">
-                    <label>&nbsp;</label>
-                  </div>
-                  <div class="field">
-                    <input style="width: auto;" id="showName" type="checkbox" name="showName">
-                    Display your real name in contributions
-                  </div>
-                </div>
-                  <!--
-                <div class="row">
-                  <div class="label">
-                    <label for="major">Major</label>
-                  </div>
-                  <div class="field">
-                    <input id="major" type="text" name="major" value="">
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="label">
-                    <label for="bio">Bio</label>
-                  </div>
-                  <div class="field">
-                    <input id="bio" type="text" name="bio" value="">
-                  </div>
-                </div>
-                -->
-              </div>
-              <h2>Change Password</h2>
-              <div class="area">
-                <div class="row">
-                  <div class="label">
-                    <label for="existingPassword">Old Password</label>
-                  </div>
-                  <div class="field">
-                    <input id="existingPassword" type="password" name="existingPassword">
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="label">
-                    <label for="newPassword">New Password</label>
-                  </div>
-                  <div class="field">
-                    <input id="newPassword" type="password" name="newPassword">
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="label">
-                    <label for="newPasswordConfirm">Confirm Password</label>
-                  </div>
-                  <div class="field">
-                    <input id="newPasswordConfirm" type="password" name="newPasswordConfirm">
-                  </div>
-                </div>
-              </div>
-              <div class="row">
-                <div class="label">&nbsp;</div>
-                <div class="field">
-                  <button>Submit</button>
-                </div>
-              </div>
-            </form>
+                                               <header class="subheader">
+                                                       <h1>User Profile</h1>
+                                               </header>
+                                               <div class="main-content">
+                                                       <form id="form_profile" action="/profile" method="POST">
+                                                               <section class="form-section">
+                                                                       <h4>Account Information</h4>
+                                                                       <div class="area">
+                                                                               <div class="row">
+                                                                                       <div class="label">
+                                                                                               <span>Email</span>
+                                                                                       </div>
+                                                                                       <div class="field">
+                                                                                               <span class="email"></span>
+                                                                                       </div>
+                                                                               </div>
+                                                                               <div class="row">
+                                                                                       <div class="label">
+                                                                                               <label for="affiliation">Affiliation</label>
+                                                                                       </div>
+                                                                                       <div class="field">
+                                                                                               <select id="affiliation" name="affiliation">
+                                                                                                       <option value="Student">Student</option>
+                                                                                                       <option value="Teachers Assistant">Teachers Assistant</option>
+                                                                                               </select>
+                                                                                       </div>
+                                                                               </div>
+                                                                       </div>
+                                                               </section>
+                                                               <section class="form-section">
+                                                                       <h4>Profile Information</h4>
+                                                                       <div class="area">
+                                                                               <div class="row">
+                                                                                       <div class="label">
+                                                                                               <label for="name">User Name</label>
+                                                                                       </div>
+                                                                                       <div class="field">
+                                                                                               <input id="name" type="text" class="text" name="name" value="">
+                                                                                       </div>
+                                                                               </div>
+                                                                               <div class="row">
+                                                                                       <div class="field">
+                                                                                               <input style="width: auto;" id="showName" type="checkbox" name="showName">
+                                                                                               Display your real name in contributions
+                                                                                       </div>
+                                                                               </div>
+                                                                               <!--
+                                                                       <div class="row">
+                                                                               <div class="label">
+                                                                                       <label for="major">Major</label>
+                                                                               </div>
+                                                                               <div class="field">
+                                                                                       <input id="major" type="text" name="major" value="">
+                                                                               </div>
+                                                                       </div>
+                                                                       <div class="row">
+                                                                               <div class="label">
+                                                                                       <label for="bio">Bio</label>
+                                                                               </div>
+                                                                               <div class="field">
+                                                                                       <input id="bio" type="text" name="bio" value="">
+                                                                               </div>
+                                                                       </div>
+                                                                       -->
+                                                                       </div>
+                                                               </section>
+                                                               <section class="form-section">
+                                                                       <h4>Change Password</h4>
+                                                                       <div class="area">
+                                                                               <div class="row">
+                                                                                       <div class="label">
+                                                                                               <label for="existingPassword">Old Password</label>
+                                                                                       </div>
+                                                                                       <div class="field">
+                                                                                               <input id="existingPassword" type="password" class="text" name="existingPassword">
+                                                                                       </div>
+                                                                               </div>
+                                                                               <div class="row">
+                                                                                       <div class="label">
+                                                                                               <label for="newPassword">New Password</label>
+                                                                                       </div>
+                                                                                       <div class="field">
+                                                                                               <input id="newPassword" type="password" class="text" name="newPassword">
+                                                                                       </div>
+                                                                               </div>
+                                                                               <div class="row">
+                                                                                       <div class="label">
+                                                                                               <label for="newPasswordConfirm">Confirm Password</label>
+                                                                                       </div>
+                                                                                       <div class="field">
+                                                                                               <input id="newPasswordConfirm" type="password" class="text" name="newPasswordConfirm">
+                                                                                       </div>
+                                                                               </div>
+                                                                       </div>
+                                                                       <div class="row">
+                                                                               <div class="field">
+                                                                                       <button>Submit</button>
+                                                                               </div>
+                                                                       </div>
+                                                               </section>
+                                                       </form>
+                                               </div>
           </div>
           <!--================================================================= -->
                 <div class=page id=pg_login>