branch master updated: website: Restyle message box.

[Ludovic Courtès]

This is an automated email from the git hooks/post-receive script.

civodul pushed a commit to branch master
in repository guix-artwork.

The following commit(s) were added to refs/heads/master by this push:
     new 3ae3c8c  website: Restyle message box.
3ae3c8c is described below

commit 3ae3c8cb3e1360f5041f75955522a87890e822be
Author: Luis Felipe <luis.felipe.la@protonmail.com>
AuthorDate: Tue Nov 17 17:16:04 2020 -0500

    website: Restyle message box.
    
    This change modifies the style of the message box so that it better
    integrates with the style of the website, and fixes some contrast
    issues.
    
    * website/apps/base/templates/theme.scm (theme): Move the message box
      below the header and use the general style for messages instead of
      the specific "#confbar".
    
    * website/static/base/css/common.css (#confbar, #confbar a): Remove
      them in favor of the general purpose ".message-box".
    
    * website/static/base/css/messages.css (.message-box): Restyle, remove
      use of missing background image, inherit font size.
      (.message-box a): New rule.
      (.message-box > a:link, .message-box > a:visited): Replace with
      ".message-box a".
      (.msg-info): Use a darker blue for better contrast.
      (.msg-error): New rule.
      (.msg-warning): Use a purple background and leave red for
      ".msg-error" instead.
    
    Signed-off-by: Ludovic Courtès <ludo@gnu.org>
---
 website/apps/base/templates/theme.scm | 25 ++++++++++---------
 website/static/base/css/common.css    | 11 ---------
 website/static/base/css/messages.css  | 46 +++++++++++++++++++----------------
 3 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/website/apps/base/templates/theme.scm 
b/website/apps/base/templates/theme.scm
index 179adab..62ee6bb 100644
--- a/website/apps/base/templates/theme.scm
+++ b/website/apps/base/templates/theme.scm
@@ -118,19 +118,22 @@
             scripts))
 
      (body
-      (div (@ (id "confbar"))
-           (p ,(G_ `("Online conference November 22nd. "
-                     "Watch the "
-                     ,(G_ `(a
-                           (@ (href 
"https://xana.lepiller.eu/guix-days-2020/";))
-                           "pre-recorded talks"))
-                     ". Learn "
-                     ,(G_ `(a
-                           (@ (href ,(guix-url 
"blog/2020/online-guix-day-announce-2/")))
-                           "more"))
-                     "!"))))
       ,(navbar #:active-item active-menu-item)
 
+      ;; NOTE: Comment this message out when it is not needed anymore.
+      (div
+       (@ (class "message-box msg-info"))
+       (p ,(G_ `("Online conference November 22nd. "
+                 "Watch the "
+                 ,(G_ `(a
+                       (@ (href "https://xana.lepiller.eu/guix-days-2020/";))
+                       "pre-recorded talks"))
+                 ". Learn "
+                 ,(G_ `(a
+                       (@ (href ,(guix-url 
"blog/2020/online-guix-day-announce-2/")))
+                       "more"))
+                 "!"))))
+
       ,(if (null? crumbs) "" (breadcrumbs crumbs))
 
       ,content
diff --git a/website/static/base/css/common.css 
b/website/static/base/css/common.css
index 44e23c6..ee7a4e7 100644
--- a/website/static/base/css/common.css
+++ b/website/static/base/css/common.css
@@ -156,17 +156,6 @@
     background-repeat: repeat-x;
 }
 
-#confbar {
-    background-color: #542414;
-    color: #F5F5F5;
-    padding: 10px;
-    text-align: center;
-}
-
-#confbar a {
-    color: white;
-}
-
 
 
 @media screen and (min-width: 1280px) {
diff --git a/website/static/base/css/messages.css 
b/website/static/base/css/messages.css
index 0049c31..77f3c1b 100644
--- a/website/static/base/css/messages.css
+++ b/website/static/base/css/messages.css
@@ -1,38 +1,44 @@
 /*
     Public domain 2015 Luis Felipe López Acevedo. All rights waived.
     <felipe.lopez@openmailbox.org>
-   
+
     NOTE  The default style is targeted at screens with a width less than
           1024 pixels.
 */
 
 .message-box {
-    background-image: url("../img/msg-info-bg.png");
-    background-position: -5px -5px;
-    background-repeat: no-repeat;
-    color: white;
-    font-size: 12px;
-    padding: 20px;
+    box-shadow: inset 0px 0px 4px black;
+    color: #F5F5F5;
+    padding: 10px;
+    text-align: center;
 }
 
-.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;
+.message-box a {
+    color: inherit;
 }
 
 .msg-info {
-    background-color: #5FBCD3;
+    background-color: #144054;
+}
+
+.msg-error {
+    background-color: #993838;
+}
+
+.msg-warning {
+    background-color: #54142C;
+}
+
+.msg-label {
+    font-weight: bold;
+    padding-right: 10px;
 }
+
 .donate-info {
     background-color: #FFFFFF;
     color: #000;
 }
-.msg-warning {
-    background-color: #D35F5F;
-}
+
 .donate-button {
     background-color: #F4BB15;
     padding: 5px;
@@ -40,15 +46,13 @@
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
+
 .donate-button:hover {
     background-color: #F7CB50;
 }
+
 .donate-info > a:link, .donate-info > a:visited {
     color: #000;
     font-weight: bold;
     border: none;
 }
-.msg-label {
-    font-weight: bold;
-    padding-right: 10px;
-}