-
Notifications
You must be signed in to change notification settings - Fork 9
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.
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
D8CORE-628: Add caption option to hero banner. #517
Changes from 1 commit
b298828
3b9d620
4e82f81
22587c7
ab95b64
c76c751
e871a47
57c399a
52c5245
a222470
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -31,15 +31,24 @@ | |
@include modular-spacing(padding-bottom, 2); | ||
text-align: right; | ||
display: block; | ||
clear: both; | ||
|
||
p { | ||
@include credits; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The caption currently in this PR is larger and darker than it should be, but the credits/caption font sizes and colors are being worked on in my media component PR, so this would fix itself later after that's merged in. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm overriding the style for the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure, that makes total sense. Just want to document here that the base |
||
} | ||
} | ||
|
||
// Only allow for 60% width on large screen sizes. | ||
@include grid-media('lg') { | ||
@include padding(null null null 40%); | ||
} | ||
.su-hero__content-inner { | ||
float: right; | ||
|
||
@include grid-media("lg") { | ||
width: ceil($su-screen-lg * 0.6); | ||
} | ||
@include grid-media("xl") { | ||
width: ceil($su-screen-xl * 0.6); | ||
} | ||
@include grid-media("2xl") { | ||
width: ceil($su-screen-2xl * 0.6); | ||
Comment on lines
+44
to
+51
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Are we using fixed width container and not fluid 60%? I'm totally fine with this - looks close enough. Just want to double check because it's a little different from the request. |
||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This might be a @kerri-augenstein question. When the caption container isn't full width, it looks good with
text-align: right
, but I think it looks a bit unnatural at xs to md breakpoints when the caption takes up the full width and the text is still align to the right. Could we make the caption left-aligned or center-aligned at xs to md breakpoints?