tweak frontpage styling to match design

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 762e7495d0aa58c08139a4fdb04f22c5420cf34c..382dca567718d2ec5f8ee6f4e10c9bbc90e03851 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -10,6 +10,11 @@ time
   font: 12px/2em "MuseoSlab-300";
 }
 
+input[type="text"]
+{
+  font: 22px/1em "MuseoSlab-300" #afafaf;
+}
+
 .half-padding
 {
   padding-left: 5px;
@@ -18,13 +23,13 @@ time
 
 .no-padding
 {
-  padding-left: 0px;
-  padding-right: 0px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* GLOBAL HEADER */
 
-header#global_header
+#global_header
 {
   background-color: black;
   height: 46px;
@@ -173,7 +178,7 @@ header#global_header
 
 #global_header_mycourses_list ul
 {
-  margin: 0px;
+  margin: 0;
 }
 
 #global_header_mycourses_list li
@@ -222,7 +227,7 @@ header#global_header
   background-color: #f05a28;
   font-size: 12px;
   height: 33px;
-  padding: 12px 0px;
+  padding: 12px 0;
   text-align: center;
 }
 
@@ -387,7 +392,7 @@ a.course_link, a.course_link:hover, a.school_link, a.school_link:hover, a.prof_l
 {
   font-family: "MuseoSlab-300";
   font-size: 22px;
-  line-height: .4em%;
+  line-height: .4em;
 }
 
 a.activity_actor, a.activity_actor:hover
@@ -482,14 +487,12 @@ a.activity_target:hover
   text-transform: uppercase;
 }
 
-#upload_button
+#upload_button, #add-course
 {
-  height: 66px;
   margin: 1px;
   font-family: "MuseoSlab-300";
   font-size: 30px;
   text-align: center;
-  padding-top: 20px;
   color: #f05a28;
   text-transform: uppercase;
 }
@@ -564,11 +567,21 @@ ul#course_menu li a
 div#subhead
 {
   padding: 15px;
-  text-align: center;
+  padding-left: 17px;
   font-family: "MuseoSlab-300";
   font-size: 22px;
 }
 
+#subhead img
+{
+  vertical-align: middle;
+}
+
+#subhead span
+{
+  margin-left: 2em;
+}
+
 .center
 {
   text-align: center;

diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index 9798c47863af02043a6340c3357bfe925d8097e5..b71fafe4968e65a81ba374147f2cccf25e7ecab3 100644 (file)
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -61,7 +61,8 @@ $(document).ready(function() {
     // Use out Ajax endpoing to populate the list
     //'sAjaxSource': "{% url 'api_course_list' %}" 
   });
-  $('.dataTables_filter input').attr("placeholder", "search courses");
+  $('.dataTables_filter input').attr("placeholder", "  search courses");
+  // TODO: can't prepend html to .dataTables_filter input html for fontawesome search icon
 });
 </script>
 {% endblock %}
@@ -74,8 +75,9 @@ $(document).ready(function() {
 <section id="home_content">
   <div id="page_header" class="">
     <div class="row">
-      <div id="subhead" class="">
-        Share and access a growing database of college lecture notes
+      <div id="subhead" class="ten columns offset-by-one">
+        <img src='{{ STATIC_URL }}img/noun_project_6858.svg' alt="Pieter J. Smits, from The Noun Project">
+        <span>Share and access a growing database of college lecture notes</span>
       </div>
     </div>
   </div>
@@ -113,13 +115,24 @@ $(document).ready(function() {
       </table>
     </div><!-- .ten columns -->
   </div> <!-- .row -->
+
+  <div class="row">
+    <div class="ten columns offset-by-one"> <hr/> </div>
+  </div>
+
   <div class="row">
     <div class="ten columns offset-by-one">
-      <p class="text">Can't find your course? 
-        <a href="#add-course" role="button" class="btn" data-toggle="modal">Add it now</a>
-      </p>
+      <div id="add-course">
+        <i class=icon-upload></i> add a course
+      </div>
     </div><!-- .ten columns -->
   </div> <!-- .row -->
+
+  <div class="row">
+    <div class="ten columns offset-by-one"> <hr/> </div>
+  </div>
+
+
 </section> <!-- #results_content -->
 
 {% endblock %}