From face717f69bfe59ada8a5d31b62d3107bd3d6b3b Mon Sep 17 00:00:00 2001
From: jordan <jordancooperman@gmail.com>
Date: Sun, 22 Jan 2012 14:24:40 -0500
Subject: [PATCH] playing with subheaders again, trying to standardize things

---
 public/assets/css/screen.css       |  15 ++-
 public/assets/css/scss/screen.scss |  19 ++-
 public/index.html                  | 198 +++++++++++++++--------------
 3 files changed, 129 insertions(+), 103 deletions(-)

diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css
index c17725f..1d7cf05 100755
--- 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 5f8c168..4f9599e 100755
--- 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 05178d4..34bb49d 100644
--- 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>
-- 
2.25.1