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

Better responsive images

Browse Source 
Closes #76
This commit is contained in:
John O'Nolan
2014-01-31 14:35:24 +07:00
parent 7546018136
commit 0efa582d77
2 changed files with 74 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
assets/css/screen.css
View File

@ -528,6 +528,12 @@ margin on the iframe, cause it breaks stuff. */
5. Single Post - When you click on an individual post
========================================================================== */
/* Stop .full-img from creating horizontal scroll - slight hack due to
imperfections with browser width % calculations and rounding */
.post-template .content {
overflow: hidden;
}
/* Tweak the .post wrapper style */
.post-template .post {
margin-top: 0;
@ -551,12 +557,21 @@ margin on the iframe, cause it breaks stuff. */
padding: 2.5rem 0;
}
/* Keep large images within the bounds of the post-width */
/* Keep images centred and within the bounds of the post-width */
.post-content img {
display: block;
max-width: 100%;
margin: 0 auto;
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%;
}
/* The author credit area after the post */
@ -946,6 +961,18 @@ margin on the iframe, cause it breaks stuff. */
padding: 30px 0;
}
.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 */
}
.post-meta {
font-size: 1.3rem;
}