migrate about html and css to foundation4, working for iphones

diff --git a/karmaworld/assets/css/about.css b/karmaworld/assets/css/about.css
index 147b8391c153f754896a1e071f78c5e8ef3220a6..23085575c83e360b7e152cf995f0ac71841e6a2b 100644 (file)
--- a/karmaworld/assets/css/about.css
+++ b/karmaworld/assets/css/about.css
@@ -82,7 +82,6 @@
   font-family: "MuseoSlab-700";
   font-size: 40px;
   color: #3a3a3a;
-  padding-top: 28px;
 }
 
 #donate_copy_body
@@ -91,28 +90,24 @@
   font-size: 20px;
   color: #3a3a3a;
   padding-top: 10px;
-  padding-bottom: 28px;
 }
 
 #donate_button_container
 {
   height: 70px;
-  margin-top: 40px;
 }
 
 #donate_button
 {
-  height: 66px;
-  margin: 1px;
   font-family: "MuseoSlab-900";
-  font-size: 32px;
+}
+#amazon-donate-form {
+  margin: 1em 1em 0;
+}
+#donate-text {
+  margin: 1em 0;
   text-align: center;
-  color: #FFF;
-  padding-top: 14px;
-  width: 100%;
-  border: 0;
 }
-
 /* LEADERBOARD */
 
 #leaderboard_header
@@ -152,7 +147,7 @@
 {
   font-family: "MuseoSans-900";
   font-size: 14px;
-  width: 20px!important;
+  /*width: 20px!important;*/
   padding-top: 4px;
 }
 

diff --git a/karmaworld/templates/about.html b/karmaworld/templates/about.html
index 05abc157b3ce70c8321486bbb68e4365d7820ace..42dddb8ea0792d787f1b4810f556f38acd45140a 100644 (file)
--- a/karmaworld/templates/about.html
+++ b/karmaworld/templates/about.html
@@ -25,102 +25,101 @@
         </div><!-- /hero_image_caption_container -->
       </div><!-- /hero_image -->
       {% endcomment %}
-      <iframe src="http://player.vimeo.com/video/66370775" title="0" width="960" height="436" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+      <div class="small-12 columns flex-video vimeo">
+        <iframe src="http://player.vimeo.com/video/66370775" title="0" width="960" height="436" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+      </div>
 
     </div>
 
     <div class="row">
-      <div id="about_copy_header" class="ten columns offset-by-one">
+      <div id="about_copy_header" class="small-12 columns large-10 large-offset-1 ">
         Help us spread the academic wealth.
       </div>
     </div>
 
     <div class="row">
-      <div id="about_copy_body" class="ten columns offset-by-one">
+      <div id="about_copy_body" class="small-12 columns large-10 large-offset-1">
         <p>KarmaNotes empowers college students to share course notes, study guides, and other digial learning resources online. By exchanging knowledge on KarmaNotes, everyone benefits from access to a growing database of knowledge.</p>
         <p>All content on KarmaNotes is licensed Creative Commons and all code is <a href="https://github.com/FinalsClub/karmaworld">free and open source</a>. We also maintain full compliance with the Digital Millennium Copyright Act.</p>
         <p>Beyond the ivory tower, KarmaNotes is a network with the potential to digitize education, one lecture at a time.  Like a give-a-penny jar, KarmaNotes collects knowledge for the common good. Best of all, our capacity is practically limitless, and withdrawals are entirely free. </p>
         <p>KarmaNotes is improving access to learning resources thanks to support from the William and Flora Hewlett Foundation and generous scholars like you. Want to get involved or learn more? Please <a href="mailto:info@finalsclub.org?Subject=Karma%20question">contact us</a> or support our mission with a tax-deductible charitable donation to the FinalsClub Foundation.</p>
-      </div>
-    </div>
+      </div> <!--/about_copy_body-->
 
-    <div id="about_rule" class="twelve columns"></div>
 
-    <div id="donate_container">
-      <div class="row">
-        <div class="five columns offset-by-one">
-          <div class="row">
-            <div id="donate_copy_header" class="twelve columns">
-              Love KarmaNotes?
-            </div><!-- /donate_copy_header -->
-          </div>
-          <div class="row">
-            <div id="donate_copy_body" class="twelve columns">
-              Support free and open education.
-            </div><!-- /donate_copy_body -->
-          </div>
-        </div>
-
-        <div class="three columns offset-by-two end">
-
-          <!-- Amazon form submit for donations -->
-          <form action="https://authorize.payments.amazon.com/pba/paypipeline" method="post">
-            <input type="hidden" name="returnUrl" value="http://KarmaNotes.org" >
-            <input type="hidden" name="processImmediate" value="1" >
-            <input type="hidden" name="accessKey" value="11SEM03K88SD016FS1G2" >
-            <input type="hidden" name="signatureMethod" value="HmacSHA256" >
-            <input type="hidden" name="collectShippingAddress" value="1" >
-            <input type="hidden" name="isDonationWidget" value="1" >
-            <input type="hidden" name="amazonPaymentsAccountId" value="RLXQCTZFRUFP5TMB3RMQC4LKDXN6AKE874PGB9" >
-            <input type="hidden" name="referenceId" value="FinalsClub.org Inc" >
-            <input type="hidden" name="cobrandingStyle" value="logo" >
-            <input type="hidden" name="immediateReturn" value="1" >
-            <input type="hidden" name="description" value="Support the free exchange of student learning resources" >
-            <input type="hidden" name="abandonUrl" value="http://KarmaNotes.org" >
-            <input type="hidden" name="signatureVersion" value="2" >
-            <input type="hidden" name="signature" value="0eQB5Jxoa1rE+NuI7IupDKQUZSjfLwQeZdFnSSwFa+A=" >
-            <!-- Default donation amount -->
-            <input type="hidden" name="amount" value="USD 20" >
-
-            <!-- DONATE BUTTON -->
-            <div id="donate_button_container" class="button_bevel">
-              <button id="donate_button" class="button_interior"  type="submit">
-                DONATE
-              </button>
-            </div><!-- /donate_button_container -->
-          </form>
+    </div>
 
 
-        </div>
-
-      </div>
-    </div><!-- /donate_container -->
+    <div id="" class="row panel">
+
+      <div id="donate-text" class="small-12 small-centered columns large-6 large-uncentered">
+        <div class="row">
+          <div id="donate_copy_header" class="">Love KarmaNotes?</div>
+          <!-- /donate_copy_header -->
+        </div> <!--.row-->
+        <div class="row">
+          <div id="donate_copy_body" class="">Support free and open education.</div>
+          <!-- /donate_copy_body -->
+        </div> <!--.row-->
+      </div> <!--small-12 columns large-8-->
+
+
+      <div class="small-12 small-centered columns large-6 large-uncentered">
+        <!-- Amazon form submit for donations -->
+        <form id="amazon-donate-form" action="https://authorize.payments.amazon.com/pba/paypipeline" method="post">
+          <input type="hidden" name="returnUrl" value="http://KarmaNotes.org" >
+          <input type="hidden" name="processImmediate" value="1" >
+          <input type="hidden" name="accessKey" value="11SEM03K88SD016FS1G2" >
+          <input type="hidden" name="signatureMethod" value="HmacSHA256" >
+          <input type="hidden" name="collectShippingAddress" value="1" >
+          <input type="hidden" name="isDonationWidget" value="1" >
+          <input type="hidden" name="amazonPaymentsAccountId" value="RLXQCTZFRUFP5TMB3RMQC4LKDXN6AKE874PGB9" >
+          <input type="hidden" name="referenceId" value="FinalsClub.org Inc" >
+          <input type="hidden" name="cobrandingStyle" value="logo" >
+          <input type="hidden" name="immediateReturn" value="1" >
+          <input type="hidden" name="description" value="Support the free exchange of student learning resources" >
+          <input type="hidden" name="abandonUrl" value="http://KarmaNotes.org" >
+          <input type="hidden" name="signatureVersion" value="2" >
+          <input type="hidden" name="signature" value="0eQB5Jxoa1rE+NuI7IupDKQUZSjfLwQeZdFnSSwFa+A=" >
+          <!-- Default donation amount -->
+          <input type="hidden" name="amount" value="USD 20" >
+
+          <button id="donate_button" class="button large round expand"  type="submit">
+            DONATE
+          </button>
+        </form>
+      </div> <!--small-12 columns large-6 -->
+
+    </div> <!-- donate button container-->
 
     <div class="row">
-      <div id="leaderboard_header" class="ten columns offset-by-one">
-        University Karma Leaderboard
-      </div><!-- /leaderboard_header -->
+      <div class="small-12 columns large-10 large-offset-1">
+        <div id="leaderboard_header">
+          University Karma Leaderboard
+        </div><!-- /leaderboard_header -->
+      </div>
     </div>
 
     <div class="row">
-      <div id="leaderboard_copy" class="ten columns offset-by-one">
-        These schools are aces at sharing the academic wealth
+      <div class="small-12 columns large-10 large-offset-1">
+        <div id="leaderboard_copy">
+          These schools are aces at sharing the academic wealth
+        </div>
       </div><!-- /leaderboard_copy -->
     </div>
 
 
     <div class="row">
-      <div id="leaderboard_table" class="ten columns offset-by-one">
+      <div id="leaderboard_table" class="small-10 columns small-offset-1">
 
         {% for school in schools %}
         <div class="row leaderboard_item">
-          <div class="one column leaderboard_rank">
+          <div class="small-1 column leaderboard_rank">
             {{ forloop.counter }}
           </div>
-          <div class="eight columns leaderboard_school">
+          <div class="small-8 columns leaderboard_school">
             {{ school.name }}
           </div> <!-- /leaderboard_school -->
-          <div class="one column leaderboard_score">
+          <div class="small-1 column  leaderboard_score">
             {{ school.file_count }}
           </div> <!-- /leaderboard_score -->
         </div> <!-- /leaderboard_item -->