Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
/*$color--primary: #b29;
$color--secondary: #19d;
@mixin btn-me($color: hotpink, $size: normal) {
border: 1px solid $color;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
@if $size == 'small' {
font-size: .8em;
} @else {
font-size: 1.2em;
}
&:hover {
color: white;
background: $color;
}
}
%btn--primary {
@include btn-me; // no arguments means it takes defaults
}
.hero__btn {
@extend %btn--primary;
}*/
$padding-TB: 1em;
$padding-RL: 1.5em;
$tablet: 768px;
$white-color: #ffffff;
$fontlight: "Elysio-Light", Helvetica, Arial, sans-serif;
$visit-color: #A1164E;
$take-part-color: #fff;
@mixin title-bar($sectionBGcolor: $visit-color) {
background-color: $sectionBGcolor;
}
%placeholder_title-bar {
padding: $padding-TB/2 $padding-RL/2;
margin-top: 0;
margin-bottom: 0;
//TODO: remove dependency on h1 and h2 element (rename to class)
h1 {
padding: 0;
color: $white-color !important;
}
p {
color: $white-color;
font-family: $fontlight;
margin: 0;
padding: 0;
}
@media screen and (min-width: $tablet) {
padding: $padding-TB $padding-RL;
p {
font-size: 1.25em;
}
}
}
.title-bar {
@extend %placeholder_title-bar;
}
.visit {
.title-bar {
@include title-bar($visit-color);
}
}
.take-part {
.title-bar {
@include title-bar($take-part-color);
}
}
/*$color--primary: #b29;
$color--secondary: #19d;
@mixin btn-me($color: hotpink, $size: normal) {
border: 1px solid $color;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
@if $size == 'small' {
font-size: .8em;
} @else {
font-size: 1.2em;
}
&:hover {
color: white;
background: $color;
}
}
%btn--primary {
@include btn-me; // no arguments means it takes defaults
}
.hero__btn {
@extend %btn--primary;
}*/
.title-bar {
padding: 0.5em 0.75em;
margin-top: 0;
margin-bottom: 0;
}
.title-bar h1 {
padding: 0;
color: #ffffff !important;
}
.title-bar p {
color: #ffffff;
font-family: "Elysio-Light", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
@media screen and (min-width: 768px) {
.title-bar {
padding: 1em 1.5em;
}
.title-bar p {
font-size: 1.25em;
}
}
.visit .title-bar {
background-color: #A1164E;
}
.take-part .title-bar {
background-color: #fff;
}
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.