Last active
August 29, 2015 14:19
-
-
Save starryeyez024/a872036d0d39b3240151 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="region-content"> | |
<h1>Hello World!</h1> | |
<div id="block-block-1" class="block"> | |
Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a> | |
</div> | |
<div id="block-block-5" class="block"> | |
Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a> | |
</div> | |
<div id="block-block-5" class="block"> | |
Lorem Ipsum Tres <a href="http://www.redhat.com">Click me</a> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: helvetica; | |
} | |
a { | |
text-decoration: none; | |
color: #c00; | |
} | |
.block { | |
float: left; | |
width: 30%; | |
background: #eee; | |
padding: 5px; | |
margin: 1.5%; | |
} | |
// Objective #1 Resolve syntax issues so that this code compiles to CSS. | |
// Objective #2 Fix any potential problems this CSS could cause on redhat.com. | |
// Objective #3 Make the code DRY! | |
// Bonus, fix the HTML error | |
$gray: #ccc; | |
@mixin small-title { | |
font-size: 5em; | |
font-weight: bold; | |
color: $gray; | |
} | |
@media screen and (max-width: 900px) { | |
.region-content { | |
width: 100%; | |
background: url(/images/red-bg.png) no-repeat 0 0; | |
.block { | |
background: $gray; | |
} | |
} | |
} | |
.region-content h1 { | |
@include small-title; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: helvetica; | |
} | |
a { | |
text-decoration: none; | |
color: #c00; | |
} | |
.block { | |
float: left; | |
width: 30%; | |
background: #eee; | |
padding: 5px; | |
margin: 1.5%; | |
} | |
@media screen and (max-width: 900px) { | |
.region-content { | |
width: 100%; | |
background: url(/images/red-bg.png) no-repeat 0 0; | |
} | |
.region-content .block { | |
background: #ccc; | |
} | |
} | |
.region-content h1 { | |
font-size: 5em; | |
font-weight: bold; | |
color: #ccc; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="region-content"> | |
<h1>Hello World!</h1> | |
<div id="block-block-1" class="block"> | |
Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a> | |
</div> | |
<div id="block-block-5" class="block"> | |
Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a> | |
</div> | |
<div id="block-block-5" class="block"> | |
Lorem Ipsum Tres <a href="http://www.redhat.com">Click me</a> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment