keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-07-02 01:47:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #172 from mankittens/master

Browse Source 
Improvement to .post-content .full-img
This commit is contained in:
John O'Nolan
2015-03-02 09:32:12 +02:00
parent e59dcaa256 a5dcaf6cd5
commit 7af816a48e
2 changed files with 17 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/screen.css
View File

@ -1052,8 +1052,9 @@ body:not(.post-template) .post-title {
border: none;
}
/* Stop .full-img from creating horizontal scroll - slight hack due to
imperfections with browser width % calculations and rounding */
/* Stop elements, such as img wider than the post content, from
creating horizontal scroll - slight hack due to imperfections
with browser width % calculations and rounding */
.post-template .content {
overflow: hidden;
}
@ -1070,21 +1071,21 @@ body:not(.post-template) .post-title {
display: none;
}
/* Keep images centred and within the bounds of the post-width */
/* Keep images centered, and allow images wider than the main
text column to break out. */
.post-content img {
display: block;
max-width: 100%;
max-width: 126%;
height: auto;
margin: 0 auto;
padding: 0.6em 0;
}
/* Break out larger images to be wider than the main text column
the class is applied with jQuery */
.post-content .full-img {
width: 126%;
max-width: none;
margin: 0 -13%;
/* Centers an image by (1) pushing its left edge to the
center of its container and (2) shifting the entire image
in the opposite direction by half its own width.
Works for images that are larger than their containers. */
position: relative;
left: 50%;
-webkit-transform: translateX(-50%); /* for Safari and iOS */
transform: translateX(-50%);
}
/* The author credit area after the post */
@ -1737,12 +1738,7 @@ body:not(.post-template) .post-title {
.post-content img {
padding: 0;
}
.post-content .full-img {
width: auto;
width: calc(100% + 32px); /* expand with to image + margins */
margin: 0 -16px; /* get rid of margins */
min-width: 0;
max-width: 112%; /* fallback when calc doesn't work */
}