Skip to content

1173 caption max width #1843

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Draft

1173 caption max width #1843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a3197a7
Keep caption widths on single-column template within the width of par…
benlk Jan 9, 2020
7a98075
pause
benlk Jan 9, 2020
0d90b91
Only modify image size as opposed to entire image group
Feb 7, 2020
96fc6a4
Updates to .alignwide captions
Feb 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 64 additions & 1 deletion css/gutenberg.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/gutenberg.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 7 additions & 1 deletion css/style.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/style.min.css
View file
Open in desktop

Large diffs are not rendered by default.

77 changes: 77 additions & 0 deletions less/inc/blocks.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,83 @@
box-sizing: border-box;
}
}
&.alignwide {
&:not(.navis-slideshow) {
.classic & {
figcaption {
@media ( min-width: 1229px ) {
margin-left: ~"calc( 0.5 * ( 100vw - 1170px ) )"; // the left margin on #page, as a negative.
transform: none;
}
@media ( max-width: 1228px ) {
margin-left: 2.5vw; // the left margin on #page, as a negative.
transform: none;
}
@media ( max-width: 768px ) {
margin-left: 2.5vw;
margin-right: 2.5vw;
}
}
}
figcaption {
margin-right: calc(0.5 * (95vw * 0.17021276594) );
margin-left: calc(0.5 * (95vw * 0.17021276594) );
@media (max-width: 979px) {
margin-left: calc(0.5 * (2.5vw + 6.38297872%) );
margin-right: calc(0.5 * (2.5vw + 6.38297872%) );
}
}
}
}
&.alignfull {
width: 100%;
margin-left: 0%;
transform: unset;
max-width: 100%;
&:not(.navis-slideshow) {
.classic & {
img {

// because #page does not have box-sizing: border-box but does have padding 0 2.5%
// 1170px * 1.05 = 1228.5px
//
// 1170px: the max-width of #page;
// 2.5vw: padding-left and padding-right on #page when #page is whole width of viewport
// 24px: padding-left on #sidebar.widget
// 2.12765957%: margin-left on #sidebar since it is a .span4
// 1170px * 2.12765957%: acceptable bleed from #content into the gutter of the sidebar, at that viewport width
// 95vw * 2.12765957%: acceptable bleed, below that viewport width
@media ( min-width: 1229px ) {
width: ~"calc( 100% + ( 0.5 * ( 100vw - 1170px ) ) + ( 1170px * 0.0212765957 ) )"; // the column width plus the left margin on #page, plus the bleed figure
margin-left: ~"calc( -0.5 * ( 100vw - 1170px ) )"; // the left margin on #page, as a negative.
transform: none;
}
@media ( max-width: 1228px ) {
width: ~"calc( 100% + 2.5vw + ( 95vw * 0.0212765957 ) )"; // the column width plus the left margin on #page, plus the bleed figure
margin-left: -2.5vw; // the left margin on #page, as a negative.
transform: none;
}
@media ( max-width: 768px ) {
width: 100vw;
}
}
}
img {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
max-width: none;
}
}
}
&.alignwide,
&.alignfull {
&.navis-slideshow {
figcaption {
width: 100%;
}
}
}
}
.wp-block-gallery {
// standard block display
Expand Down
9 changes: 8 additions & 1 deletion less/inc/wp-responsive-media.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,18 @@ img[class*="wp-image-"] {
}
@media @tabletDown {
.alignwide {
// these values match the padding on #page, plus the padding on #entry-content, halved
// these values match the padding on #page, plus the padding on .entry-content, halved
margin-left: ~"calc(-0.5 * (2.5vw + 6.38297872%) )";
margin-right: ~"calc(-0.5 * (2.5vw + 6.38297872%) )";
}
}
@media @mobile {
.alignwide {
// these values match the padding on #page. .entry-content has no padding.
margin-left: ~"calc(-0.5 * 2.5vw )";
margin-right: ~"calc(-0.5 * 2.5vw )";
}
}

// classic layout alignment CSS
.classic {
Expand Down