consistent panel sizes

3 files changed, 69 insertions, 42 deletions

diff --git a/static/img/twitter-icon.png b/static/img/twitter-icon.png
new file mode 100644
index 0000000..1cda2f7
--- /dev/null
+++ b/static/img/twitter-icon.png
diff --git a/static/style/archive3k.css b/static/style/archive3k.css
index b69f679..1924835 100644
--- a/static/style/archive3k.css
+++ b/static/style/archive3k.css
@@ -83,12 +83,14 @@ footer h5 {
   padding-left: 2em;
   padding-right: 2em;
 }
-.top-info-col > img {
+.top-info-col img {
   width: 100%;
+  margin-bottom: 0.5em;
 }
 
 .panel-body > img {
   width: 100%;
+  margin-bottom: 0.8em;
 }
 
 .navbar-nav > li > a, .navbar-brand {
@@ -99,6 +101,10 @@ footer h5 {
 .navbar {
   min-height: 2.5em !important;
 }
+h1 {
+  margin-top: 1.5em;
+  margin-bottom: 1em;
+}
 
 
 /* Change font */
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 66fb90a..65883d1 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -170,42 +170,53 @@
 
   <div class="col-md-4 top-info-col">
   <h4>Featured Content: September 2017</h4>
-  <img src="/static/img/78rpm-label.jpg" alt="Headquarters Photo">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  <a href="https://archive.org/details/78_sugar-foot-stomp_connies-inn-orchestra-armstrong-oliver-rex-stewart-russell-smith_gbia0001054a">
+    <img src="/static/img/78rpm-label.jpg" alt="Headquarters Photo">
+  </a>
+  <p>This month's featured content is the Jazz track "Sugar Foot Stomp", as performed by Russel Procope in 1931.
+  Recently digitized as part of <a href="http://great78.archive.org/">Great 78</a> collaboration with <a href="#">George Blood</a>, in which we are making hundreds of thousands of 78rpm records of 20th Century American folk music available online.
+  <p><b><a href="https://archive.org/details/78_sugar-foot-stomp_connies-inn-orchestra-armstrong-oliver-rex-stewart-russell-smith_gbia0001054a">Stream or Download &raquo;</a></b>
   </div>
 
   <div class="col-md-4 top-info-col">
   <h4>Upcoming Events at Headquarters</h4>
   <img src="/static/img/internet_archive_hq_photo.jpg" alt="Headquarters Photo">
   <p>300 Funston Ave, Inner Richmond
-  <p>San Franscisco, CA, USA
+  <br>San Franscisco, CA, USA
   <ul>
-    <li>October 11th: Annual Event
-    <li>More Film Screenings on Sundays
-    <li>Free Lunch every Friday
+    <li><a href="#">October 11th: Annual Event</a>
+    <li><a href="#">More Film Screenings on Sundays</a>
+    <li><a href="#">Public Tours and Free Lunch starting at noon every Friday</a>
   </ul>
   </div>
 
   <div class="col-md-4 top-info-col">
   <h4>Keep in Touch!</h4>
-  <p>From the Blog
-  <ul>
-    <li>The world is flooding and we won't forget
-    <li>Why the largest democracy in the world blocked our domain
-    <li>What we're doing with robots.txt these days
-  </ul>
 
-  <p>Twitter (inevitably)
+  <div class="input-group"> 
+    <input type="email" class="form-control" placeholder="email@domain.net"></input>
+    <span class="input-group-btn">
+      <button class="btn btn-default" type="button">Subscribe!</button>
+    </span>
+  </div>
+  <p><i>Our Newsletter is Lovely and we'll try not to spam you.</i>
+
+  <p>Latest from the blog...
+  <p><a href="#">The world is flooding and we won't forget.</a> Archive-It has hurricane-specific collections being crawled.
+  <p><a href="#">Why the largest democracy in the world blocked our domain.</a> Hint: all of our services blocked over one or two items.
+  <p><a href="#">What we're doing with robots.txt these days?</a> Touchy subject for webmasters; our policy has evolved over decades.
+
+  <p><a href="#">
+    <img src="/static/img/twitter-icon.png" style="display: inline; width: 16px; height: 16px;"> Twitter</a>:
+    it's unavoidable
 
-  <p>Subscribe to Newsletter:
-  <br><input placeholder="email@domain.net"></input><button>Submit</button>
   </ul>
 
   </div>
 
 </div> <!-- row -->
 
-<h2>What Does Internet Archive Do?</h2>
+<h1>What Does Internet Archive Do?</h1>
 <div class="row">
 
   <div class="col-md-4">
@@ -214,8 +225,9 @@
         <h3 class="panel-title">Scan Lots of Books</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/bookscanning.jpg" alt="">
-        <p>We built our own scanning hardware and digital workflow. Have dozens of workers in centers world-wide. Work with partners, have XYZ books so far.
+        <img src="/static/img/bookscanning.jpg" alt="" height="200px">
+        <p>We built our own scanning hardware and digital workflow, probably second largest effort ever. Have dozens of workers in centers world-wide. Work with partners like <a href="#">DPLA</a>, have XYZ books so far, all of which are available in <a href="#">Open Library</a> for lending.
+        <p><b><a href="#">Browse our holdings &raquo;</a></b>
       </div>
     </div>
   </div>
@@ -226,8 +238,9 @@
         <h3 class="panel-title">Record The News</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/trump-cable-news.jpg" alt="">
-        <p>News is important. Who said what? We have been recording since 2009 and have a lot of it, Search by captions, see what you can find, hold everybody accountable! Check <a href="#">these examples</a>.
+        <img src="/static/img/trump-cable-news.jpg" alt="" height="200px">
+        <p>News is important. Who said what? We have been recording for years and have a lot of it, Search by captions, see what you can find, hold everybody accountable! Check <a href="#">these examples</a>.
+        <p><b><a href="#">Search transcripts since 2009 &raquo;</a></b>
       </div>
     </div>
   </div>
@@ -238,12 +251,9 @@
         <h3 class="panel-title">Crawl The Web</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/webcrawl-mess.jpeg" alt="">
-        <p>Web is flux-y, always disapearing, big 20th/21st century cultural heritige. We use Heritrix to crawl the web a whole bunch, get big numbers of pages and petabytes.
-        <p>Some partners submit data or pay, some use Archive-It.
-        <p>All results available via Wayback Machine.
-        <p>Archive a page now:
-        <br><input placeholder="https://url.net/home.html"></input><button>Save Page</button>
+        <img src="/static/img/webcrawl-mess.jpeg" alt="" height="200px">
+        <p>Web is flux-y, always disapearing, big 20th/21st century cultural heritige. We use <a href="#">Heritrix</a> to crawl the web a whole bunch. Some pay for <a href="#">Archive-It</a>, all results available via <a href="#">Wayback Machine</a>.
+        <p><input placeholder="https://url.net/home.html"></input><button>Save Page</button>
       </div>
     </div>
   </div>
@@ -257,8 +267,9 @@
         <h3 class="panel-title">Petabox Datacenter</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/petabox-datacenter.jpg" alt="">
-        <p>We are pretty in to storing data for a very long time. Own our own real-estate, hardware, etc instead of using cloud storages. Save money, waste heat building, have a couple sites, lots of disks, great good, some <a href="#">details</a>.
+        <img src="/static/img/petabox-datacenter.jpg" alt="" height="200px">
+        <p>We are pretty in to storing data for a very long time. Own our own real-estate, hardware, etc instead of using cloud storages. Save money, waste heat building, have a couple sites, lots of disks, great good.
+        <p><b><a href="#">Read about technology &raquo;</a></b>
       </div>
     </div>
   </div>
@@ -269,8 +280,10 @@
         <h3 class="panel-title">Physical Archives</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/physical-archives.jpg" alt="">
+        <img src="/static/img/physical-archives.jpg" alt="" height="200px">
         <p>Physical artifacts are cool as well, so we have a bunch of that over in the east bay. XYZ tons! Neato!
+        Fork-lifts, long-term thinking, minimizing costs, redundancy, earthquake risk.
+        <p><b><a href="#">Blog post about new locations &raquo;</a></b>
       </div>
     </div>
   </div>
@@ -283,12 +296,12 @@
   <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="panel-title">Archive-It Partners</h3>
+        <h3 class="panel-title">Archive-It</h3>
       </div>
       <div class="panel-body">
         <img src="/static/img/archive-it_logo.png" alt="">
-        <p>We can't decide everything to crawl, so partner with universities, libraries, other organizations, who provide funding and lists of what to crawl, then we go and do it, archive forever, usually provide as part of wayback. 
-        <p>Over a petabyte so far, thousands of partners.
+        <p>We can't decide everything to crawl, so partner with universities, libraries, other organizations, who provide funding and lists of what to crawl, then we go and do it, archive forever. Over a petabyte so far, thousands of partners.
+        <p><b><a href="#">Plans and Sign-Up &raquo;</a></b>
       </div>
     </div>
   </div>
@@ -300,7 +313,8 @@
       </div>
       <div class="panel-body">
         <img src="/static/img/archive-time.png" alt="">
-        <p>Have a great and unique relationship with the radical self-organized Archive Team group, which goes out and saves the web. Horray! Eg, 301works, URLteam,
+        <p>Have a great and unique relationship with the radical self-organized Archive Team group, which goes out and saves the web. Horray! Eg, <a href="#">Geocities</a>, <a href="#">URLteam</a>, <a href="#">MySpace</a>,
+        <p><b><a href="#">Check Their Wiki &raquo;</a></b>
       </div>
     </div>
   </div>
@@ -317,6 +331,8 @@
     </div>
   </div>
 
+</div><div class="row">
+
   <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">
@@ -354,14 +370,18 @@
     </div>
   </div>
 
+</div><div class="row">
+
   <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="panel-title">Researchers</h3>
+        <h3 class="panel-title">Contributors Like You!</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/the_cyber.gif" alt="">
-        <p>Want to use our huge set of data in a research context? Great. Contact us.
+        <img src="/static/img/creative-commons.png" alt="">
+        <p>You can volunteer, or just start uploading random furry convention photos from your laptop <i>right now!</i>. Or download and make copies, use our APIs, whatever!
+        <p><a href="#">Create an account</a>
+        <p>Please read our <a href="#">terms</a>, don't get us sued or raided, don't melt our servers or consume thousands of dollars of disk without asking first.
       </div>
     </div>
   </div>
@@ -388,20 +408,21 @@
         <img src="/static/img/donation-box.jpg" alt="">
         <p>Funded by viewers like you!
         <p>Also accept some equipment, and you can volunteer.
+        <p><button type="button" class="btn btn-primary btn-lg" style="width: 100%;">Make a Donation</a>
       </div>
     </div>
   </div>
 
+</div><div class="row">
+
   <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="panel-title">Contributors Like You!</h3>
+        <h3 class="panel-title">Researchers</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/creative-commons.png" alt="">
-        <p>You can volunteer, or just start uploading random furry convention photos from your laptop <i>right now!</i>. Or download and make copies, use our APIs, whatever!
-        <p><a href="#">Create an account</a>
-        <p>Please read our <a href="#">terms</a>, don't get us sued or raided, don't melt our servers or consume thousands of dollars of disk without asking first.
+        <img src="/static/img/the_cyber.gif" alt="">
+        <p>Want to use our huge set of data in a research context? Great. Contact us.
       </div>
     </div>
   </div>