[PATCH] website: home: Fix contrast issue in video boxes.

DoneSubmitted by sirgazil.
Details
2 participants
  • pelzflorian (Florian Pelz)
  • sirgazil
Owner
unassigned
Severity
normal
S
S
sirgazil wrote on 31 Oct 2019 20:11
(address . guix-patches@gnu.org)(name . sirgazil)(address . sirgazil@zoho.com)
20191031191150.4587-1-sirgazil@zoho.com
This commit changes the white text on yellow background when hoveringover the featured video boxes to conform to WCAG 2.0 Level AAguidelines. Instead, only the title of the video is changed to yellowon 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.--- 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(-) create mode 100644 website/static/media/css/video-preview.css
Toggle diff (134 lines)diff --git a/website/apps/base/templates/home.scm b/website/apps/base/templates/home.scmindex 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")) (pdiff --git a/website/apps/media/templates/components.scm b/website/apps/media/templates/components.scmindex 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.cssindex 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.cssindex 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.cssnew file mode 100644index 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;+ }+}-- 2.23.0
P
P
pelzflorian (Florian Pelz) wrote on 1 Nov 2019 08:19
(name . sirgazil)(address . sirgazil@zoho.com)(address . 38008-done@debbugs.gnu.org)
20191101071908.wrbp42bxbye3ddfp@pelzflorian.localdomain
On Thu, Oct 31, 2019 at 02:11:50PM -0500, sirgazil via Guix-patches via wrote:
Toggle quote (16 lines)> 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.
Pushed. It is much prettier. Thank you!
Perhaps the link-light I added should be deleted now that there is avideo-link CSS rule, but I’m not sure. Shall I delete it?
Regards,Florian
Closed
S
S
sirgazil wrote on 1 Nov 2019 14:59
(name . pelzflorian (Florian Pelz))(address . pelzflorian@pelzflorian.de)(name . 38008-done)(address . 38008-done@debbugs.gnu.org)
16e2743b209.f616b0fc109029.6243145044122168340@zoho.com
Toggle quote (1 lines)> Perhaps the link-light I added should be deleted now that there is a
> video-link CSS rule, but I’m not sure. Shall I delete it?
I think it's ok to delete it.
Closed
P
P
pelzflorian (Florian Pelz) wrote on 1 Nov 2019 16:42
(name . sirgazil)(address . sirgazil@zoho.com)(name . 38008-done)(address . 38008-done@debbugs.gnu.org)
20191101154227.wvjom2mwsb3iilsc@pelzflorian.localdomain
On Fri, Nov 01, 2019 at 08:59:38AM -0500, sirgazil wrote:
Toggle quote (6 lines)> > Perhaps the link-light I added should be deleted now that there is a > > video-link CSS rule, but I’m not sure. Shall I delete it? > > I think it's ok to delete it.>
Done. Thank you; I feel more secure with your confirmation.
Regards,Florian
Closed
?
Your comment

This issue is archived.

To comment on this conversation send email to 38008@debbugs.gnu.org