| Message ID | 20191031191150.4587-1-sirgazil@zoho.com |
|---|---|
| State | Accepted |
| Headers | show |
| Series | [bug#38008] website: home: Fix contrast issue in video boxes. | expand |
On Thu, Oct 31, 2019 at 02:11:50PM -0500, sirgazil via Guix-patches via wrote: > 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 a video-link CSS rule, but I’m not sure. Shall I delete it? Regards, Florian
> 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.
On Fri, Nov 01, 2019 at 08:59:38AM -0500, sirgazil wrote: > > 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
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; + } +}