[bug#44715] [PATCH] website: Restyle message box

[bug#44715] [PATCH] website: Restyle message box

[Luis Felipe via Guix-patches via]

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

Hi, this is the change I proposed in #guix (https://logs.guix.gnu.org/guix/2020-11-09.log#233905).

---
Luis Felipe López Acevedo
https://luis-felipe.gitlab.io/

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-website-Restyle-message-box.patch --]
[-- Type: text/x-patch; name=0001-website-Restyle-message-box.patch, Size: 4875 bytes --]

From 764b90ff3314989a7d65777c14dbc100817e45c8 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.felipe.la@protonmail.com>
Date: Tue, 17 Nov 2020 17:16:04 -0500
Subject: [PATCH] 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.
---
 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;
-}

base-commit: de4f6efb24984c4b59d82d0fe080d37ba73de39f
-- 
2.28.0

bug#44715: [PATCH] website: Restyle message box

[Ludovic Courtès]

Hi,

Luis Felipe <luis.felipe.la@protonmail.com> skribis:

> From 764b90ff3314989a7d65777c14dbc100817e45c8 Mon Sep 17 00:00:00 2001
> From: Luis Felipe <luis.felipe.la@protonmail.com>
> Date: Tue, 17 Nov 2020 17:16:04 -0500
> Subject: [PATCH] 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.

Applied, thanks!  It should show up on-line soonish.  I like it.

Apologies for not noticing earlier.  At least next time we can reuse it.

Ludo’.