Skip to content

Instantly share code, notes, and snippets.

@kdooley89
Created July 21, 2014 17:51
Show Gist options
  • Save kdooley89/0610116e6f520bbf9b04 to your computer and use it in GitHub Desktop.
Save kdooley89/0610116e6f520bbf9b04 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<body>
<h1>Some text here</h1>
<h2>Subheader text</h2>
<a href="#" class="ghost-button">WAOHHHHH ghost button</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa.</li>
<li>Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis,
sem.</li>
<li>Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt.</li>
</ul>
</body>
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
//partials
$blue: #3498db;
$green: #27ae60;
$grey: #ecf0f1;
$default: 'Source Sans Pro',arial, san-serif;
$large: 3em;
$med: 2em;
$smll: 1.15em;
$body-color: #7f8c8d;
@mixin thin{
font-weight:100;
letter-spacing:-2px;
}
body{
background:$grey;
font-family: $default;
margin-left: 15%;
margin-right: 15%;
color: $body-color;
}
h1,h2,h3,h4,h5,h6{
font-family: $default;
line-height: inherit;
text-align: left;
}
h1{
font-size:$large;
@include thin;
color:$blue;
}
h2{
font-size:$med;
@include thin;
color: $blue;
}
//list styles
ul{
margin-left:35px;
li{
max-width: 80%;
padding-bottom:15px;
}
}
//buttons
.ghost-button{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
border: 1px solid $blue;
background-color: transparent;
min-width: 150px;
outline: none;
font-size: $smll;
color: $blue;
text-decoration: none;
}
.ghost-button:hover{
color:white;
background-color:$blue;
}
body {
background: #ecf0f1;
font-family: "Source Sans Pro", arial, san-serif;
margin-left: 15%;
margin-right: 15%;
color: #7f8c8d;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Source Sans Pro", arial, san-serif;
line-height: inherit;
text-align: left;
}
h1 {
font-size: 3em;
font-weight: 100;
letter-spacing: -2px;
color: #3498db;
}
h2 {
font-size: 2em;
font-weight: 100;
letter-spacing: -2px;
color: #3498db;
}
ul {
margin-left: 35px;
}
ul li {
max-width: 80%;
padding-bottom: 15px;
}
.ghost-button {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
border: 1px solid #3498db;
background-color: transparent;
min-width: 150px;
outline: none;
font-size: 1.15em;
color: #3498db;
text-decoration: none;
}
.ghost-button:hover {
color: white;
background-color: #3498db;
}
<body>
<h1>Some text here</h1>
<h2>Subheader text</h2>
<a href="#" class="ghost-button">WAOHHHHH ghost button</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa.</li>
<li>Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis,
sem.</li>
<li>Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt.</li>
</ul>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment