Better generated HTML pages

* admin/archive-contents.el: Better HTML generation.
* html/index.html: Improvements of the page.
* html/javascript/jquery.filtertable.min.js:
* html/layout.css: New css rules
* html/favicon.png:
* html/images/elpa-small.png:
* html/images/elpa.png:
* html/javascript/jquery.min.js:
* html/javascript/package-search.js: New files.

1 files changed, 226 insertions, 56 deletions

diff --git a/html/layout.css b/html/layout.css
index f6c1395..0744ab9 100644
--- a/html/layout.css
+++ b/html/layout.css
@@ -1,87 +1,257 @@
-/* This is heavily cut-down version of http://www.gnu.org/layout.css */
+/* Begin of reset */
 
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* End of reset */
+
+body {
+  font-family: "fira sans", sans;
+  line-height: 1.5em;
+  font-size: 1.2em;
+  color: #333;
+}
+
+html, body {
+  height: 100%;
+}
+.wrapper {
+  min-height: 100%;
+  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
+  height: 100%;
+  margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
+}
+.footer, .push {
+  height: 50px; /* .push must be the same height as .footer */
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.4em;
+}
 
-/*
-layout.css -- css stylesheet used on www.gnu.org
+h2 {
+  font-size: 1.2em;
+  margin: 1.2em 0px;
+}
 
-Copyright (C) 2006, 2007, 2008, 2009 Free Software Foundation
+a {
+  color: #c73a6c;
+  text-decoration: underline;
+}
 
-Permission is hereby granted, free of charge, to any person
-obtaining a copy of this software and associated documentation
-files (the "Software"), to deal in the Software without
-restriction, including without limitation the rights to use,
-copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the
-Software is furnished to do so, subject to the following
-conditions:
+a:hover {
+  color: white;
+  background-color: #973066;
+  text-decoration: none;
+}
 
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-*/
+tt, code {
+  background-color: rgb(238, 238, 238);
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 6px;
+  border-radius: 4px;
+}
 
-html, body{
-        padding: 0;
-        color: #35382a;
-        max-width: 58em; margin: 0 auto 0; position: relative; min-width: 902px;
-        padding-left: 10px; padding-right: 10px;
-        background-color: #fff;  padding-bottom: 1.8em;  margin-top: 0.5em; 
+p {
+  margin-bottom: 2em;
 }
 
-body{
-    font-family: sans-serif;
+p.centered {
+  text-align: center;
+  margin: 3em 0;
 }
 
-a:hover{ color: red; }
+.button {
+  border: 2px solid;
+  padding: 10px;
+  border-radius: 10px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1.2em;
+}
 
-h1 {
- background-color: #3465a4; color: white; font-size: 2em;
- margin-bottom: 0.3em; font-weight:bold; text-align: center; line-height: 1.6em; }
+.container {
+  padding: 80px 20px;
+  width: 960px;
+  margin: 0 auto;
+}
 
-h2, h3, {line-height: 1.5em;}
+.header {
+  color: white;
+  text-align: center;
+  background-color: #bb3955;
+  background:  #bb3955 linear-gradient(135deg, #c73a6c, #bb3955, #973066) repeat scroll 0% 0%;
+  border-bottom: 6px solid #691240;
+}
+
+.header p {
+  margin: 0;
+}
+
+.header a {
+  color: rgb(240, 255, 135);
+  text-decoration: none;
+}
+
+.header a:hover {
+  color: rgb(240, 255, 135);
+  text-decoration: underline;
+  background: transparent;
+}
+
+.header.small {
+  text-align: left;
+  border-width: 3px;
+}
+
+.header.small h1 {
+  display: inline;
+  font-size: 1.5em;
+  margin: 0;
+  background: url(images/elpa-small.png) center left no-repeat;
+  padding: 10px;
+  padding-left: 120px;
+}
+
+.header.small .container {
+  padding: 20px;
+}
 
-h2{ font-size: 1.6em; }
+input[type="search"] {
+  border: 3px solid #ddd;
+  padding: 10px;
+  width: 100%;
+  font-size: 1.1em;
+  background: #fcfcfc;
+}
 
-h3{ font-size: 1.3em; }
+input[type="search"]:focus {
+  border-color: #bbb;
+  background: #fafafa;
+}
 
-img{ border: 0; }
+input[type="search"][placeholder] {
+  color: #666;
+}
 
-.nocenter{ text-align: left; }
+.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
+.fitler-table .quick:hover { text-decoration: underline; }
+td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
 
-ul { list-style: square; margin-left: 1.4em; list-style-image:url(bullet.gif);  }
+td, th {
+  padding: 6px;
+}
 
-ol{ list-style: decimal; margin-left: 1.9em; }
+th {
+  text-align: left;
+  border-bottom: 2px solid #ddd;
+  background: #fafafa;
+  font-weight: bold;
+}
 
-li, dd,  p{
-    padding-bottom: 1em; line-height: 1.5em; }
+td {
+  border-bottom: 1px solid #ddd;
+}
 
-dt{ font-weight: bold;  }
+.footer {
+  border-top: 1px solid #999;
+  text-align:center;
+  font-size: 0.9em;
+  background-color: #eee;
+  color: #666;
+}
 
-pre {
-padding-left: 1.5em;
-padding-right: 1.5em;
-margin-top: 1em;
-margin-bottom: 1em;
-font-size: 0.9em;
-display: block;
-background-color: #eeeeee;
-color: #000000;
-font-family: monospace;
+.footer .container {
+  padding: 5px;
 }
 
-strong, b{ font-weight: bold; }
+.footer p {
+  margin: 5px;
+  font-size: .8em;
+}
 
-em, i, var{ font-style: italic; }
+@media screen and (max-width: 999px) {
+  .container {
+    width: 600px;
+  }
+}
 
-blockquote{ margin: 1em; font-style: italic; }
+@media screen and (max-width: 639px) {
+  body {
+    font-size: 1em;
+  }
 
-code, kbd, samp, tt{ font-family: monospace; }
+  table {
+    width: 100%;
+  }
+  
+  .container {
+    width: 90%;
+    padding: 40px 5%;
+  }
 
-.center{ text-align:center; }
+  h1 {
+    font-size: 1.4em;
+  }
 
-.big{ font-size: 130%; padding-top: 0.7em; }
+  .header img {
+    width: 300px;
+  }
 
-.inline-list li { display: inline }
+  td:last-child, th:last-child {
+    display: none;
+  }
+}
 
-.highlight{background-color: #ff6;}
+@media screen and (max-width: 439px) {
 
-h2 a{color: yellow !important;}
+  .header img {
+    width: 250px;
+  }
+  
+  h1 {
+    font-size: 1.2em;
+  }
+}