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