FSF support banner on web page

FSF support banner on web page

[Ludovic Courtès]

[-- Attachment #1: Type: text/plain, Size: 208 bytes --]

Hello,

It was suggested that we should support the FSF’s fundraising on our web
page, which I think is a good idea.  The best I could do so far is the
attached patch, which borrows a bit from Guix.


[-- Attachment #2: screenshot --]
[-- Type: image/png, Size: 38597 bytes --]

[-- Attachment #3: Type: text/plain, Size: 268 bytes --]


I’ll be away for a few days, but it’d be great if someone could polish
and deploy the thing; even if it’s not perfect, it’s better than
nothing.  See <http://www.gnu.org/software/guile-rpc/> or similar for
the standard banner.

TIA.  :-)

Ludo’.


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #4: Type: text/x-patch, Size: 3374 bytes --]

diff --git a/website/apps/base/components.scm b/website/apps/base/components.scm
index 2c72f22..8320fbf 100644
--- a/website/apps/base/components.scm
+++ b/website/apps/base/components.scm
@@ -38,24 +38,36 @@
 
 (define* (site-menu #:key (active-link "About"))
   "Return an SXML representation of the Web site's main menu bar."
-  `(header
-    (@ (id "site-menu"))
-    (h1
-     (a (@ (id "branding") (href ,(site-url)))
-	(span "GNU Guile")))
-    (nav
-     (@ (id "pages-box"))
-     (h2 "Menu: ")
-     (a (@ (class ,(get-page-link-class "Download" active-link))
-	   (href ,(site-url "download/"))) "Download" " ")
-     (a (@ (class ,(get-page-link-class "Learn" active-link))
-	   (href ,(site-url "learn/"))) "Learn" " ")
-     (a (@ (class ,(get-page-link-class "Libraries" active-link))
-	   (href ,(site-url "libraries/"))) "Libraries" " ")
-     (a (@ (class ,(get-page-link-class "Contribute" active-link))
-	   (href ,(site-url "contribute/"))) "Contribute" " ")
-     (a (@ (class ,(get-page-link-class "About" active-link))
-	   (href ,(site-url))) "About"))))
+  `(div
+    (div (@ (class "message-box msg-info"))
+            (p " For thirty years, the Free Software Foundation has been seen
+as a guiding light for the free software movement, fighting for user
+freedom.")
+            (p (a (@ (href "http://www.fsf.org/appeal/")) "Help keep our
+light burning brightly")
+               " by donating to push us towards our goal of raising $450,000
+by January 31st.")
+            ;; (div (@ (class "button-red")) "donate")
+            )
+
+    (header
+     (@ (id "site-menu"))
+     (h1
+      (a (@ (id "branding") (href ,(site-url)))
+         (span "GNU Guile")))
+     (nav
+      (@ (id "pages-box"))
+      (h2 "Menu: ")
+      (a (@ (class ,(get-page-link-class "Download" active-link))
+            (href ,(site-url "download/"))) "Download" " ")
+      (a (@ (class ,(get-page-link-class "Learn" active-link))
+            (href ,(site-url "learn/"))) "Learn" " ")
+      (a (@ (class ,(get-page-link-class "Libraries" active-link))
+            (href ,(site-url "libraries/"))) "Libraries" " ")
+      (a (@ (class ,(get-page-link-class "Contribute" active-link))
+            (href ,(site-url "contribute/"))) "Contribute" " ")
+      (a (@ (class ,(get-page-link-class "About" active-link))
+            (href ,(site-url))) "About")))))
 
 (define (get-page-link-class link-name active-link)
   "Return the appropriate class for LINK-NAME depending on ACTIVE-LINK."
@@ -111,3 +123,4 @@
       (li (a (@ (href ,(site-url "contribute/#bugs"))) "Report bugs"))
       (li (a (@ (href "https://savannah.gnu.org/git/?group=guile"))
 	     "Source code"))))))
+
diff --git a/website/static/base/css/site-menu.css b/website/static/base/css/site-menu.css
index f244b88..c34ba13 100644
--- a/website/static/base/css/site-menu.css
+++ b/website/static/base/css/site-menu.css
@@ -1,5 +1,23 @@
 /* Public domain 2015. All rights waived */
 
+.message-box {
+    color: white;
+    font-size: 12px;
+    padding: 20px;
+}
+
+.message-box > a:link, .message-box > a:visited {
+    border-color: white;
+    border-style: none none dotted none;
+    border-width: thin;
+    color: white;
+    text-decoration: none;
+}
+
+.msg-info {
+    background-color: #5FBCD3;
+}
+
 #site-menu {
     background-color: white;
     box-shadow: 0 0 5px #888;