Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="module">
<h1 class="module-heading">Heading 1</h1>
<p class="module-text">Lorem ipsum <a href="#" class="module-link">dolor</a> sit amet, consectetur adipisicing elit. Aspernatur, sunt, nesciunt, repudiandae accusantium nihil obcaecati beatae amet ipsam perspiciatis repellat inventore fugit impedit eaque velit voluptatum atque unde sequi minus.</p>
<p class="module-text">Impedit, <a href="#" class="module-link">eveniet</a>, cum, fugiat reiciendis molestias iusto magni laboriosam saepe ut vel quia illo labore animi quidem repellat sunt enim itaque eos corrupti hic! Ea esse nihil nam rerum deserunt?</p>
<p class="module-text"><a href="#" class="module-link">Accusamus</a>, aperiam, nisi autem facere veritatis dignissimos cumque iste illum velit minus tempora numquam libero blanditiis atque ducimus adipisci omnis ex provident tenetur aliquam non expedita suscipit pariatur deserunt soluta.</p>
</div>
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----
$hopbush: #c69;
$patina: #699;
$pale-sky: #6b717f;
$nebula: #d2e1dd;
$font-head: "PT Sans Caption", Helvetica, sans-serif;
$font-text: "PT Serif", Georgia, serif;
$context-width: 600px;
@mixin box-sizing($box) {
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
box-sizing: $box;
}
%heading1 { font-size: 3,75em; }
%paragraph { font-size: 1.3125em; }
body {
font-size: 60%;
line-height: 1.618;
color: darken($pale-sky, 15%);
@media screen and (min-width: 480px) {
font-size: 75%;
}
@media screen and (min-width: 640px) {
font-size: 100%;
}
}
.module {
background: lighten($patina, 40%);
max-width: $context-width;
margin: auto;
padding: .5em 1em;
border: 1px solid $patina;
@include box-sizing(border-box);
border-radius: 3px;
border: 1px solid $patina;
&-heading {
@extend %heading1;
font-family: $font-head;
font-weight: 400;
color: $patina;
}
&-text {
@extend %paragraph;
font-family: $font-text;
}
&-link {
text-decoration: none;
color: $hopbush;
&:hover {
text-decoration: underline;
}
}
}
.module-heading {
font-size: 3,75em;
}
.module-text {
font-size: 1.3125em;
}
body {
font-size: 60%;
line-height: 1.618;
color: #484c55;
}
@media screen and (min-width: 480px) {
body {
font-size: 75%;
}
}
@media screen and (min-width: 640px) {
body {
font-size: 100%;
}
}
.module {
background: #e0ebeb;
max-width: 600px;
margin: auto;
padding: .5em 1em;
border: 1px solid #669999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #669999;
}
.module-heading {
font-family: "PT Sans Caption", Helvetica, sans-serif;
font-weight: 400;
color: #669999;
}
.module-text {
font-family: "PT Serif", Georgia, serif;
}
.module-link {
text-decoration: none;
color: #cc6699;
}
.module-link:hover {
text-decoration: underline;
}
<div class="module">
<h1 class="module-heading">Heading 1</h1>
<p class="module-text">Lorem ipsum <a href="#" class="module-link">dolor</a> sit amet, consectetur adipisicing elit. Aspernatur, sunt, nesciunt, repudiandae accusantium nihil obcaecati beatae amet ipsam perspiciatis repellat inventore fugit impedit eaque velit voluptatum atque unde sequi minus.</p>
<p class="module-text">Impedit, <a href="#" class="module-link">eveniet</a>, cum, fugiat reiciendis molestias iusto magni laboriosam saepe ut vel quia illo labore animi quidem repellat sunt enim itaque eos corrupti hic! Ea esse nihil nam rerum deserunt?</p>
<p class="module-text"><a href="#" class="module-link">Accusamus</a>, aperiam, nisi autem facere veritatis dignissimos cumque iste illum velit minus tempora numquam libero blanditiis atque ducimus adipisci omnis ex provident tenetur aliquam non expedita suscipit pariatur deserunt soluta.</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.