style tweaks

3 files changed, 52 insertions, 28 deletions

diff --git a/static/style/archive3k.css b/static/style/archive3k.css
index 5ffec63..a765e9f 100644
--- a/static/style/archive3k.css
+++ b/static/style/archive3k.css
@@ -57,6 +57,7 @@ footer h5 {
 }
 .postnav-content label {
   font-weight: normal;
+  font-style: italic;
 }
 .nav-tabs,
 .nav-tabs > li > a,
@@ -73,6 +74,17 @@ footer h5 {
   color: white;
   font-weight: bold;
 }
+.top-info-col {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+.top-info-col > img {
+  width: 100%;
+}
+
+.panel-body > img {
+  width: 100%;
+}
 
 /* Change font */
 body,
diff --git a/theme/templates/base.html b/theme/templates/base.html
index eb26bc6..f8598dc 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -45,11 +45,23 @@
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="https://archive.org/donate/">Donate!</a></li>
-<!--
-        <li><a href="../navbar/">Default</a></li>
-        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
-        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
--->
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EN<span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li class="dropdown-header">Site Language</li>
+            <li><a href="#">English</a></li>
+            <li><a href="#">Chinese (simplified)</a></li>
+            <li><a href="#">Spanish</a></li>
+            <li><a href="#">French</a></li>
+            <li class="dropdown-header">Google Translate</li>
+            <li><a href="#">Thai</a></li>
+            <li><a href="#">German</a></li>
+            <li><a href="#">Portugese</a></li>
+            <li><a href="#">Chinese (traditional)</a></li>
+            <li><a href="#">Hindi</a></li>
+            <li><a href="#">More...</a></li>
+          </ul>
+      </li>
       </ul>
     </div><!--/.nav-collapse -->
   </div>
diff --git a/theme/templates/index.html b/theme/templates/index.html
index ba3b46d..66fb90a 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -15,8 +15,8 @@
 <div class="row">
   <div class="col-md-4">
     <br>
-    <p style="font-size: 1.5em;"><b>Internet Archive</b> is a non-profit library of millions of free books, movies, software, music, websites, and more.
-    <p style="font-size: 1.5em;">Since 1996 our mission has been to provide <b>Universal Access to All Knowledge</b>.
+    <p style="font-size: 1.5em;"><b>Internet Archive</b> is a non-profit library holding millions of books, websites, recordings, and other digitized works.
+    <p style="font-size: 1.5em;">Since 1996 our mission has been to ensure <b>Universal Access to All Knowledge</b>.
   </div>
   <div class="col-md-8">
     <!-- Nav tabs -->
@@ -111,7 +111,7 @@
         <div class="media">
           <div class="media-left media-middle">
             <a href="https://archive.org/video/details/">
-            <img class="media-object" src="/static/img/film-icon.jpg" alt="" width="200px">
+            <img class="media-object" src="/static/img/film-icon.png" alt="" width="200px">
             </a>
           </div>
           <div class="media-body">
@@ -168,15 +168,15 @@
 
 <div class="row">
 
-  <div class="col-md-4">
+  <div class="col-md-4 top-info-col">
   <h4>Featured Content: September 2017</h4>
-  <img src="/static/img/78rpm-label.jpg" alt="Headquarters Photo" width="300px;">
+  <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.
   </div>
 
-  <div class="col-md-4">
+  <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" width="300px;">
+  <img src="/static/img/internet_archive_hq_photo.jpg" alt="Headquarters Photo">
   <p>300 Funston Ave, Inner Richmond
   <p>San Franscisco, CA, USA
   <ul>
@@ -186,7 +186,7 @@
   </ul>
   </div>
 
-  <div class="col-md-4">
+  <div class="col-md-4 top-info-col">
   <h4>Keep in Touch!</h4>
   <p>From the Blog
   <ul>
@@ -214,7 +214,7 @@
         <h3 class="panel-title">Scan Lots of Books</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/bookscanning.jpg" alt="" width="300px;">
+        <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.
       </div>
     </div>
@@ -226,7 +226,7 @@
         <h3 class="panel-title">Record The News</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/trump-cable-news.jpg" alt="" width="300px;">
+        <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>.
       </div>
     </div>
@@ -238,7 +238,7 @@
         <h3 class="panel-title">Crawl The Web</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/webcrawl-mess.jpeg" alt="" width="300px;">
+        <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.
@@ -257,7 +257,7 @@
         <h3 class="panel-title">Petabox Datacenter</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/petabox-datacenter.jpg" alt="" width="300px;">
+        <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>.
       </div>
     </div>
@@ -269,7 +269,7 @@
         <h3 class="panel-title">Physical Archives</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/physical-archives.jpg" alt="" width="300px;">
+        <img src="/static/img/physical-archives.jpg" alt="">
         <p>Physical artifacts are cool as well, so we have a bunch of that over in the east bay. XYZ tons! Neato!
       </div>
     </div>
@@ -286,7 +286,7 @@
         <h3 class="panel-title">Archive-It Partners</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/archive-it_logo.png" alt="" width="300px;">
+        <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.
       </div>
@@ -299,7 +299,7 @@
         <h3 class="panel-title">ArchiveTeam</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/archive-time.png" alt="" width="300px;">
+        <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,
       </div>
     </div>
@@ -311,7 +311,7 @@
         <h3 class="panel-title">Archival Organizations</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/film-digitization.jpg" alt="" width="300px;">
+        <img src="/static/img/film-digitization.jpg" alt="">
         <p>Sometimes other archives (like Prelinger, George Blood, etc) work with us to do digitization and physical archiving. Great content, big win!
       </div>
     </div>
@@ -323,7 +323,7 @@
         <h3 class="panel-title">Alexa Search Engine</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/alexa-logo.jpg" alt="" width="300px;">
+        <img src="/static/img/alexa-logo.jpg" alt="">
         <p>We go way back (get it?) with the Alexa search engine. In the early days they were most of our content, and still provide a bunch. Thanks!
       </div>
     </div>
@@ -335,7 +335,7 @@
         <h3 class="panel-title">Governments</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/library-of-congress.jpg" alt="" width="300px;">
+        <img src="/static/img/library-of-congress.jpg" alt="">
         <p>We're in the USA and have done some crawling with Library of Congress and National Records (NARA).
         <p>Also work with national libraries and governments from around the world!
       </div>
@@ -348,7 +348,7 @@
         <h3 class="panel-title">Foundation Grants</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/grant-money.jpeg" alt="" width="300px;">
+        <img src="/static/img/grant-money.jpeg" alt="">
         <p>Here is where we name-drop the big private foundations that often fund feature development and high-impact projects. Thanks!
       </div>
     </div>
@@ -360,7 +360,7 @@
         <h3 class="panel-title">Researchers</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/the_cyber.gif" alt="" width="300px;">
+        <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>
@@ -372,7 +372,7 @@
         <h3 class="panel-title">Online Communities</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/online_communities.png" alt="" width="300px;">
+        <img src="/static/img/online_communities.png" alt="">
         <p>It's great when we find online communities which have already organized content. Sometimes a big collection, sometimes user-generated like stack overflow or reddit.
         <p>"Lock it open"!
       </div>
@@ -385,7 +385,7 @@
         <h3 class="panel-title">Donations</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/donation-box.jpg" alt="" width="300px;">
+        <img src="/static/img/donation-box.jpg" alt="">
         <p>Funded by viewers like you!
         <p>Also accept some equipment, and you can volunteer.
       </div>
@@ -398,7 +398,7 @@
         <h3 class="panel-title">Contributors Like You!</h3>
       </div>
       <div class="panel-body">
-        <img src="/static/img/creative-commons.png" alt="" width="300px;">
+        <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.