Web Docs

Layout: Emphasized item 

<section>
    <p>And yet here was Matthew Cuthbert, at half-past three on the afternoon of a busy day, placidly driving over the hollow and up the hill; moreover, he wore a white collar and his best suit of clothes, which was plain proof that he was going out of Avonlea;
        and he had the buggy and the sorrel mare, which betokened that he was going a considerable distance. Now, where was Matthew Cuthbert going and why was he going there?</p>
    <image class="emphasis" src="/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg"
    />
    <p>Had it been any other man in Avonlea, Mrs. Rachel, deftly putting this and that together, might have given a pretty good guess as to both questions. But Matthew so rarely went from home that it must be something pressing and unusual which was taking
        him; he was the shyest man alive and hated to have to go among strangers or to any place where he might have to talk. Matthew, dressed up with a white collar and driving in a buggy, was something that didn’t happen often. Mrs. Rachel, ponder as
        she might, could make nothing of it and her afternoon’s enjoyment was spoiled.</p>
    </div>
</section>
 
{{{ markup }}}
  • Content: 
    $columnWidth: 42em
$emphasisWidth: 52.5em
$featureWidth: 60em

$emphasisPercent: ( $emphasisWidth / $columnWidth ) * 100%
$emphasisMargin: ( ($emphasisPercent - 100) / 2 ) * -1
$featurePercent: ( $featureWidth / $columnWidth ) * 100%
$featuremargin: ( ($featurePercent - 100) / 2 ) * -1

=emphasis()
	max-width: $emphasisPercent
	margin-left: $emphasisMargin
	margin-right: $emphasisMargin

=feature()
	max-width: $featurePercent
	margin-left: $featuremargin
	margin-right: $featuremargin



article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section
	display: block


section, .column
	margin: 0 5%
	transition: margin 200ms ease

	@media( min-width: $breakMdSm )
		margin: 0 10%

	@media( min-width: $breakMd )
		margin: 0 15%

	@media( min-width: $breakMdLg )
		margin: 0 auto
		width: 42em


section .emphasis
	max-width: 111.11%
	margin: 1.5em -5.555%
	@media( min-width: $breakMdSm )
		+emphasis()

section .feature
	max-width: 111.11%
	margin: 1.5em -5.555%
	@media( min-width: $breakMdSm )
		+feature()


section.full
	margin: 0
	width: 100%
  • URL: /components/raw/layout/layout.sass
  • Filesystem Path: src/components/layout/layout.sass
  • Size: 1.1 KB 
{
  "markup": "<section><p>And yet here was Matthew Cuthbert, at half-past three on the afternoon of a busy day, placidly driving over the hollow and up the hill; moreover, he wore a white collar and his best suit of clothes, which was plain proof that he was going out of Avonlea; and he had the buggy and the sorrel mare, which betokened that he was going a considerable distance. Now, where was Matthew Cuthbert going and why was he going there?</p><image class=\"emphasis\" src=\"/components/raw/layout/1701-03-contemporary-dance-poster-0094.jpg\" /><p>Had it been any other man in Avonlea, Mrs. Rachel, deftly putting this and that together, might have given a pretty good guess as to both questions. But Matthew so rarely went from home that it must be something pressing and unusual which was taking him; he was the shyest man alive and hated to have to go among strangers or to any place where he might have to talk. Matthew, dressed up with a white collar and driving in a buggy, was something that didn’t happen often. Mrs. Rachel, ponder as she might, could make nothing of it and her afternoon’s enjoyment was spoiled.</p></div></section>"
}