website: packages: Fix letter selector location (see bug #30580).

This change adds a new letter selector component and displays it at
the top and bottom of package lists.

* website/apps/packages/templates/components.scm (letter-selector):
  New component.
* website/apps/packages/templates/detailed-index.scm (detailed-index-t):
  Use the new component.
* website/apps/packages/templates/detailed-package-list.scm
  (detailed-package-list-t): Likewise.
* website/apps/packages/templates/index.scm (index-t): Likewise.
* website/apps/packages/templates/package-list.scm (package-list-t):
  Likewise.
* website/static/packages/css/letter-selector.css: New stylesheet.

1 files changed, 32 insertions, 0 deletions

diff --git a/website/static/packages/css/letter-selector.css b/website/static/packages/css/letter-selector.css
new file mode 100644
index 0000000..2c25fb8
--- /dev/null
+++ b/website/static/packages/css/letter-selector.css
@@ -0,0 +1,32 @@
+/* Public domain 2019. All rights waived. */
+
+.letter-selector {
+    box-sizing: border-box;
+    border-color: #999;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: thin;
+    color: #555753;
+    font-size: 0.9em;
+    margin: 1.5rem auto;
+    padding: 0px;
+    text-align: left;
+    vertical-align: top;
+}
+
+.selector-title {
+    color: #525252;
+    background-color: #F5F5F5;
+    font-size: 14px;
+    font-weight: normal;
+    margin: 0px;
+    padding: 8px;
+}
+
+.selector-title-top {
+    border-radius: 4px 4px 0px 0px;
+}
+
+.selector-box-padded {
+    padding: 10px;
+}