diff options
Diffstat (limited to 'plugins/jetpack/modules/related-posts/related-posts.css')
| -rw-r--r-- | plugins/jetpack/modules/related-posts/related-posts.css | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/related-posts/related-posts.css b/plugins/jetpack/modules/related-posts/related-posts.css new file mode 100644 index 00000000..e0ba3ac2 --- /dev/null +++ b/plugins/jetpack/modules/related-posts/related-posts.css @@ -0,0 +1,199 @@ +/** + * Styles for Jetpack related posts + */ + +/* Container */ + +div#jp-relatedposts { + display: none; + padding-top: 1em; + margin: 1em 0; + position: relative; +} + +div.jp-relatedposts:after { + content: ''; + display: block; + clear: both; +} + +/* Headline above related posts section, labeled "Related" */ + +div#jp-relatedposts h3.jp-relatedposts-headline { + margin: 0 0 1em 0; + display: inline-block; + float: left; + font-size: 9pt; + font-weight: bold; + font-family: inherit; +} + +div#jp-relatedposts h3.jp-relatedposts-headline em:before { + content: ""; + display: block; + width: 100%; + min-width: 30px; + border-top: 1px solid #ddd; + border-top: 1px solid rgba(0,0,0,.2); + margin-bottom: 1em; +} + +div#jp-relatedposts h3.jp-relatedposts-headline em { + font-style: normal; + font-weight: bold; +} + +/* Related posts items (wrapping items) */ + +div#jp-relatedposts div.jp-relatedposts-items { + clear: left; +} + +div#jp-relatedposts div.jp-relatedposts-items-visual { + margin-right: -20px; +} + +/* Related posts item */ + +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post { + float: left; + width: 33%; + margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */ + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} + +div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post { + padding-right: 20px; + /*cursor: pointer;*/ + filter: alpha(opacity=80); + -moz-opacity: .8; + opacity: .8; +} + +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), +div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) { + clear: both; +} + +div#jp-relatedposts div.jp-relatedposts-items div.jp-relatedposts-post:hover .jp-relatedposts-post-title a { + text-decoration: underline; +} + +div#jp-relatedposts div.jp-relatedposts-items div.jp-relatedposts-post:hover { + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} + +/* Related posts item content */ + +div#jp-relatedposts div.jp-relatedposts-items-visual h4.jp-relatedposts-post-title, +div#jp-relatedposts div.jp-relatedposts-items p { + font-size: 14px; + line-height: 20px; + margin: 0; +} +div#jp-relatedposts div.jp-relatedposts-items-visual div.jp-relatedposts-post-nothumbs { + position:relative; +} +div#jp-relatedposts div.jp-relatedposts-items-visual div.jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay { + position:absolute; + top:0; + bottom:0; + left:0; + right:0; + display:block; +} + +div#jp-relatedposts div.jp-relatedposts-items p { + margin-bottom: 0; +} + +div#jp-relatedposts div.jp-relatedposts-items-visual h4.jp-relatedposts-post-title { + text-transform: none; + margin: 0; + font-family: inherit; + display: block; + max-width: 100%; +} + +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a { + font-size: inherit; + font-weight: normal; + text-decoration: none; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} + +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover { + text-decoration: underline; +} + +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img, +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post span { + display: block; + max-width: 90%; + overflow: hidden; + text-overflow: ellipsis; +} + +div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img, +div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post span { + max-width: 100%; +} + +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date, +div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context { + opacity: .6; +} + +/* Hide the date by default, but leave the element there if a theme wants to use css to make it visible. */ +.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date { + display: none; +} + +/* Behavior when there are thumbnails in visual mode */ +div#jp-relatedposts div.jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt { + display: none; +} + +/* Behavior when there are no thumbnails in visual mode */ +div#jp-relatedposts div.jp-relatedposts-items-visual div.jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt { + overflow: hidden; +} +div#jp-relatedposts div.jp-relatedposts-items-visual div.jp-relatedposts-post-nothumbs span { + margin-bottom: 1em; +} + +/** + * Responsive + */ + +@media only screen and (max-width: 640px) { + + div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post { + width: 50%; + } + + div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) { + clear: left; + } + + div#jp-relatedposts div.jp-relatedposts-items-visual { + margin-right: 20px; + } + +} + +@media only screen and (max-width: 320px) { + + div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post { + width: 100%; + clear: both; + margin: 0 0 1em; + } + +} |