01/01: website: home: Fix contrast issue in video boxes.

[Florian Pelz]

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

commit da44f0e0ba9a223c8d0c7a6cafa721fcdbbd5daf
Author: sirgazil <address@hidden>
Date:   Thu Oct 31 14:11:50 2019 -0500

    website: home: Fix contrast issue in video boxes.
    
    This commit changes the white text on yellow background when hovering
    over the featured video boxes to conform to WCAG 2.0 Level AA
    guidelines. Instead, only the title of the video is changed to yellow
    on hover.
    
    * website/static/media/css/video-preview.css: New style sheet.
    * website/static/base/css/elements.css (video): New rule set.
    * website/static/base/css/index.css:
      (.video-preview): Move to the new video preview style sheet.
    * website/apps/base/templates/home.scm:
      (home-t): Use the new video and video preview styles.
    * website/apps/media/templates/components.scm:
      (video-preview): Use new video preview style.
      (video->shtml): Use the new video style instead of the style defined
      for the .video-preview class.
    
    Signed-off-by: Florian Pelz <address@hidden>
---
 website/apps/base/templates/home.scm        |  6 ++---
 website/apps/media/templates/components.scm | 11 +++++-----
 website/static/base/css/elements.css        | 10 ++++++++-
 website/static/base/css/index.css           |  8 -------
 website/static/media/css/video-preview.css  | 34 +++++++++++++++++++++++++++++
 5 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/website/apps/base/templates/home.scm 
b/website/apps/base/templates/home.scm
index 2aaac7a..8b81b82 100644
--- a/website/apps/base/templates/home.scm
+++ b/website/apps/base/templates/home.scm
@@ -29,7 +29,8 @@
    #:active-menu-item "Overview"
    #:css (list
          (guix-url "static/base/css/item-preview.css")
-         (guix-url "static/base/css/index.css"))
+         (guix-url "static/base/css/index.css")
+          (guix-url "static/media/css/video-preview.css"))
    #:content
    `(main
      ;; Featured content.
@@ -182,8 +183,7 @@
       (div
        (@ (class "info-box"))
        (video
-       (@ (class "video-preview")
-          (src 
"https://audio-video.gnu.org/video/misc/2016-07__GNU_Guix_Demo_2.webm";)
+       (@ (src 
"https://audio-video.gnu.org/video/misc/2016-07__GNU_Guix_Demo_2.webm";)
           (poster ,(guix-url "static/media/img/guix-demo.png"))
           (controls "controls"))
        (p
diff --git a/website/apps/media/templates/components.scm 
b/website/apps/media/templates/components.scm
index 598ede8..945b9db 100644
--- a/website/apps/media/templates/components.scm
+++ b/website/apps/media/templates/components.scm
@@ -61,8 +61,7 @@ top."
    VIDEO (<video>)
      A video object as defined in (apps media types)."
   `(video
-     (@ (class "video-preview")
-        (src ,(video-url video))
+     (@ (src ,(video-url video))
         (poster ,(video-poster video))
         (controls "controls"))
       ;; TODO: Insert missing video-tracks.
@@ -80,11 +79,11 @@ object.
    VIDEO (<video>)
      A video object as defined in (apps media types)."
   `(div
-    (@ (class "item-preview"))
+    (@ (class "video-preview"))
     ,(video->shtml video)
-    ,(link-light
-      #:label (video-title video)
-      #:url (guix-url (video->url video)))))
+    (a
+     (@ (class "video-link") (href ,(guix-url (video->url video))))
+     ,(video-title video))))
 
 
 (define (video-content video)
diff --git a/website/static/base/css/elements.css 
b/website/static/base/css/elements.css
index 42e99ca..27127fd 100644
--- a/website/static/base/css/elements.css
+++ b/website/static/base/css/elements.css
@@ -87,4 +87,12 @@ td {
 
 th {
     background-color: #F5F5F5;
-}
\ No newline at end of file
+}
+
+video {
+    border-color: black;
+    border-style: solid;
+    border-width: thin;
+    box-shadow: 0 0 4px black;
+    max-width: 100%;
+}
diff --git a/website/static/base/css/index.css 
b/website/static/base/css/index.css
index e029e2d..ea52a6d 100644
--- a/website/static/base/css/index.css
+++ b/website/static/base/css/index.css
@@ -110,14 +110,6 @@ h3 {
     vertical-align: top;
 }
 
-.video-preview {
-    border-color: black;
-    border-style: solid;
-    border-width: thin;
-    box-shadow: 0 0 4px black;
-    width: 100%;
-}
-
 .contact-box {
     background-color: #F5F5F5;
     background-image: url("../img/h-separator-dark.png"),
diff --git a/website/static/media/css/video-preview.css 
b/website/static/media/css/video-preview.css
new file mode 100644
index 0000000..9848a54
--- /dev/null
+++ b/website/static/media/css/video-preview.css
@@ -0,0 +1,34 @@
+/* Public domain 2019. All rights waived */
+
+.video-preview {
+    color: white;
+    display: block;
+    padding: 10px 15px;
+    text-align: center;
+}
+
+.video-link:link,
+.video-link:visited {
+    display: block;
+    border-style: none;
+    color: white;
+    margin-top: 0.5em;
+}
+
+.video-link:active,
+.video-link:focus,
+.video-link:hover {
+    border-style: none;
+    color: #F4BB15;
+}
+
+
+
+@media screen and (min-width: 1024px) {
+    .video-preview {
+        display: inline-block;
+        margin: 10px 0px 15px 0px;
+        vertical-align: top;
+        width: 270px;
+    }
+}