Skip to content

Instantly share code, notes, and snippets.

@flpwgr
Created July 26, 2015 21:35
Show Gist options
  • Save flpwgr/4599262f4b4815b69c5d to your computer and use it in GitHub Desktop.
Save flpwgr/4599262f4b4815b69c5d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<body>
<section class="first">
<img src="https://files.slack.com/files-pri/T043QCS1Y-F086ETXPH/logo.png" />
</section>
<section class="panel">
<span class="btn">Ark</span>
<span class="btn">Gym</span>
</section>
</body>
// ----
// libsass (v3.2.5)
// ----
@import url(http://fonts.googleapis.com/css?family=Roboto);
$red: red;
$brand: #7E3F99;
debug {
// outline: 1px solid $red;
};
body {
font-family: 'Roboto', sans-serif;
}
.first {
@extend debug;
padding-top: 5em;
padding-bottom: 2em;
text-align: center;
margin-bottom: 1em;
}
.panel {
@extend debug;
text-align: center;
}
.btn {
@extend debug;
line-height: 2em;
font-size: 2em;
margin-left: 1em;
margin-right: 1em;
padding: 0.3em;
cursor: pointer; cursor: hand;
background-color: $brand;
color: #fff;
border: 1px solid $brand;
&:hover {
background-color: lighten($brand,20%);
}
}
@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
}
.first {
padding-top: 5em;
padding-bottom: 2em;
text-align: center;
margin-bottom: 1em;
}
.panel {
text-align: center;
}
.btn {
line-height: 2em;
font-size: 2em;
margin-left: 1em;
margin-right: 1em;
padding: 0.3em;
cursor: pointer;
cursor: hand;
background-color: #7E3F99;
color: #fff;
border: 1px solid #7E3F99;
}
.btn:hover {
background-color: #af77c7;
}
<body>
<section class="first">
<img src="https://files.slack.com/files-pri/T043QCS1Y-F086ETXPH/logo.png" />
</section>
<section class="panel">
<span class="btn">Ark</span>
<span class="btn">Gym</span>
</section>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment