From 98c0f823e1ca67c683ba23f0d136d4bda5fe9fc0 Mon Sep 17 00:00:00 2001 From: Scott Smith Date: Wed, 5 Mar 2014 23:41:15 -0600 Subject: [PATCH 1/3] Add Gallery Styles Patch for #425 --- style.css | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 106 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index afffe0a4..bdd230ae 100644 --- a/style.css +++ b/style.css @@ -42,6 +42,7 @@ and Blueprint http://www.blueprintcss.org/ 10.3 - Comments 11.0 - Infinite scroll 12.0 - Media + 12.1 - Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- @@ -627,21 +628,118 @@ a:active { .site-main .gallery { margin-bottom: 1.5em; } +/*-------------------------------------------------------------- +12.1 Galleries +--------------------------------------------------------------*/ +.gallery { + margin: auto; +} +.gallery-item { + float: left; + text-align: center; + margin: 0 4px 4px 0; + overflow: hidden; + position: relative; + width: 100%; +} +.gallery-columns-1 .gallery-item { + max-width: 100%; +} +.gallery-columns-2 .gallery-item { + max-width: 48%; + max-width: -webkit-calc(25% - 4px); + max-width: calc(50% - 4px); +} +.gallery-columns-3 .gallery-item { + max-width: 32%; + max-width: -webkit-calc(33.3% - 4px); + max-width: calc(33.3% - 4px); +} + +.gallery-columns-4 .gallery-item { + max-width: 23%; + max-width: -webkit-calc(25% - 4px); + max-width: calc(25% - 4px); +} +.gallery-columns-5 .gallery-item { + max-width: 19%; + max-width: -webkit-calc(20% - 4px); + max-width: calc(20% - 4px); +} +.gallery-columns-6 .gallery-item { + max-width: 15%; + max-width: -webkit-calc(16.7% - 4px); + max-width: calc(16.7% - 4px); +} +.gallery-columns-7 .gallery-item { + max-width: 13%; + max-width: -webkit-calc(14.28% - 4px); + max-width: calc(14.28% - 4px); +} +.gallery-columns-8 .gallery-item { + max-width: 11%; + max-width: -webkit-calc(12.5% - 4px); + max-width: calc(12.5% - 4px); +} +.gallery-columns-9 .gallery-item { + max-width: 9%; + max-width: -webkit-calc(11.1% - 4px); + max-width: calc(11.1% - 4px); +} +.gallery-columns-1 .gallery-item:nth-of-type(1n), +.gallery-columns-2 .gallery-item:nth-of-type(2n), +.gallery-columns-3 .gallery-item:nth-of-type(3n), +.gallery-columns-4 .gallery-item:nth-of-type(4n), +.gallery-columns-5 .gallery-item:nth-of-type(5n), +.gallery-columns-6 .gallery-item:nth-of-type(6n), +.gallery-columns-7 .gallery-item:nth-of-type(7n), +.gallery-columns-8 .gallery-item:nth-of-type(8n), +.gallery-columns-9 .gallery-item:nth-of-type(9n) { + margin-right: 0; +} .gallery-caption { + -webkit-transition: opacity 0.4s ease; + transition: opacity 0.4s ease; + background-color: rgba(0, 0, 0, 0.7); + box-sizing: border-box; + color: #fff; + font-size: 0.9em; + line-height: 1.3; + margin: 0; + max-height: 50%; + opacity: 0; + padding: 6px 8px; + position: absolute; + bottom: 0; + left: 0; + text-align: left; + width: 100%; +} +.gallery-caption:before { + content: ""; + height: 100%; + min-height: 49px; + position: absolute; + top: 0; + left: 0; + width: 100%; +} +.gallery-item:hover .gallery-caption { + opacity: 1; +} +.gallery-columns-7 .gallery-caption, +.gallery-columns-8 .gallery-caption, +.gallery-columns-9 .gallery-caption { + display: none; +} +.site-main .gallery { + margin-bottom: 1.5em; } .site-main .gallery a img { border: none; height: auto; max-width: 90%; } -.site-main .gallery dd, -.site-main .gallery figcaption { - margin: 0; -} -.site-main .gallery-columns-4 .gallery-item { -} -.site-main .gallery-columns-4 .gallery-item img { -} /* Make sure embeds and iframes fit their containers */ embed, iframe, From adb609bfdeca9aa7fbaf4e140d2f611288b2d79e Mon Sep 17 00:00:00 2001 From: Scott Smith Date: Fri, 7 Mar 2014 15:22:06 -0600 Subject: [PATCH 2/3] Cleaned up gallery styles, per PR review --- style.css | 91 +++++++------------------------------------------------ 1 file changed, 11 insertions(+), 80 deletions(-) diff --git a/style.css b/style.css index bdd230ae..984b3af7 100644 --- a/style.css +++ b/style.css @@ -632,114 +632,45 @@ a:active { 12.1 Galleries --------------------------------------------------------------*/ .gallery { - margin: auto; + margin: auto auto 1.5em; } .gallery-item { float: left; text-align: center; - margin: 0 4px 4px 0; overflow: hidden; position: relative; width: 100%; } -.gallery-columns-1 .gallery-item { - max-width: 100%; -} .gallery-columns-2 .gallery-item { - max-width: 48%; - max-width: -webkit-calc(25% - 4px); - max-width: calc(50% - 4px); + max-width: 50%; } .gallery-columns-3 .gallery-item { - max-width: 32%; - max-width: -webkit-calc(33.3% - 4px); - max-width: calc(33.3% - 4px); + max-width: 33.33%; } - .gallery-columns-4 .gallery-item { - max-width: 23%; - max-width: -webkit-calc(25% - 4px); - max-width: calc(25% - 4px); + max-width: 25%; } .gallery-columns-5 .gallery-item { - max-width: 19%; - max-width: -webkit-calc(20% - 4px); - max-width: calc(20% - 4px); + max-width: 20%; } .gallery-columns-6 .gallery-item { - max-width: 15%; - max-width: -webkit-calc(16.7% - 4px); - max-width: calc(16.7% - 4px); + max-width: 16.66%; } .gallery-columns-7 .gallery-item { - max-width: 13%; - max-width: -webkit-calc(14.28% - 4px); - max-width: calc(14.28% - 4px); + max-width: 14%; } .gallery-columns-8 .gallery-item { - max-width: 11%; - max-width: -webkit-calc(12.5% - 4px); - max-width: calc(12.5% - 4px); + max-width: 12.5%; } .gallery-columns-9 .gallery-item { - max-width: 9%; - max-width: -webkit-calc(11.1% - 4px); - max-width: calc(11.1% - 4px); + max-width: 11.11%; } -.gallery-columns-1 .gallery-item:nth-of-type(1n), -.gallery-columns-2 .gallery-item:nth-of-type(2n), -.gallery-columns-3 .gallery-item:nth-of-type(3n), -.gallery-columns-4 .gallery-item:nth-of-type(4n), -.gallery-columns-5 .gallery-item:nth-of-type(5n), -.gallery-columns-6 .gallery-item:nth-of-type(6n), -.gallery-columns-7 .gallery-item:nth-of-type(7n), -.gallery-columns-8 .gallery-item:nth-of-type(8n), -.gallery-columns-9 .gallery-item:nth-of-type(9n) { - margin-right: 0; -} -.gallery-caption { - -webkit-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; - background-color: rgba(0, 0, 0, 0.7); - box-sizing: border-box; - color: #fff; - font-size: 0.9em; - line-height: 1.3; - margin: 0; - max-height: 50%; - opacity: 0; - padding: 6px 8px; - position: absolute; - bottom: 0; - left: 0; - text-align: left; - width: 100%; -} -.gallery-caption:before { - content: ""; - height: 100%; - min-height: 49px; - position: absolute; - top: 0; - left: 0; - width: 100%; -} -.gallery-item:hover .gallery-caption { - opacity: 1; -} -.gallery-columns-7 .gallery-caption, -.gallery-columns-8 .gallery-caption, -.gallery-columns-9 .gallery-caption { - display: none; -} -.site-main .gallery { - margin-bottom: 1.5em; -} -.site-main .gallery a img { +.gallery a img { border: none; height: auto; max-width: 90%; } +.gallery-caption {} /* Make sure embeds and iframes fit their containers */ embed, iframe, From 4dd7a16f3661a5745831432ea4254b8dad66ed1d Mon Sep 17 00:00:00 2001 From: Konstantin Obenland Date: Fri, 11 Apr 2014 13:24:38 -0700 Subject: [PATCH 3/3] _s: Simplify gallery styles. It consolidates the duplicate `.gallery` selectors, and removes image styles that needlessly override their earlier defined styles. Also switches to use inline-block over floats, and adds documentation for caption styles, to be coherent with documentation for gallery styles. --- style.css | 39 ++++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/style.css b/style.css index 984b3af7..3020d9ff 100644 --- a/style.css +++ b/style.css @@ -42,7 +42,8 @@ and Blueprint http://www.blueprintcss.org/ 10.3 - Comments 11.0 - Infinite scroll 12.0 - Media - 12.1 - Galleries + 12.1 - Captions + 12.2 - Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- @@ -609,6 +610,16 @@ a:active { margin-top: 0; padding: 0; } +/* Make sure embeds and iframes fit their containers */ +embed, +iframe, +object { + max-width: 100%; +} + +/*-------------------------------------------------------------- +12.1 Captions +--------------------------------------------------------------*/ .wp-caption { border: 1px solid #ccc; margin-bottom: 1.5em; @@ -625,20 +636,17 @@ a:active { .wp-caption .wp-caption-text { margin: 0.8075em 0; } -.site-main .gallery { - margin-bottom: 1.5em; -} + /*-------------------------------------------------------------- -12.1 Galleries +12.2 Galleries --------------------------------------------------------------*/ .gallery { - margin: auto auto 1.5em; + margin-bottom: 1.5em; } .gallery-item { - float: left; + display: inline-block; text-align: center; - overflow: hidden; - position: relative; + vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { @@ -657,7 +665,7 @@ a:active { max-width: 16.66%; } .gallery-columns-7 .gallery-item { - max-width: 14%; + max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; @@ -665,15 +673,4 @@ a:active { .gallery-columns-9 .gallery-item { max-width: 11.11%; } -.gallery a img { - border: none; - height: auto; - max-width: 90%; -} .gallery-caption {} -/* Make sure embeds and iframes fit their containers */ -embed, -iframe, -object { - max-width: 100%; -}