_assets/stylesheets/on-inspiration.css.scss
@import '_redbat/mixins';
$primary-color: #022A41;
$secondary-color: #CCA874;
$jazz-color: #E4097F;
.site__header {
background-color: $primary-color;
border-bottom: 1px solid rgba(white, .15);
margin-bottom: 0;
a {
color: $secondary-color;
&:hover {
color: lighten($secondary-color, 10%);
}
}
}
.logo {
.bold__first,
.bold__third {
fill: white;
}
.bold__second {
fill: $secondary-color;
}
}
.site__navigation {
@media #{$small-only} {
background-color: darken($primary-color, 3%);
}
}
.header__search {
.search-input {
background-color: darken($primary-color, 3%);
&:focus {
background-color: darken($primary-color, 6%);
}
}
}
.post__header {
background-color: $primary-color;
margin-bottom: 1.5rem;
padding: 1.2rem;
width: 100%;
@media #{$large-up} {
margin-bottom: 3rem;
padding: 2.5rem;
}
}
.post__title {
color: $secondary-color;
font-size: 20vw;
line-height: 60%;
text-indent: 7vw;
}
.post__entry {
position: relative;
z-index: 1;
@media #{$medium-up} {
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
@media #{$large-up} {
max-width: 1000px;
}
@media #{$xxlarge-up} {
-webkit-column-width: 34rem;
-moz-column-width: 34rem;
column-width: 34rem;
max-width: none;
}
}
.type-post .post__entry > p {
margin-bottom: 0;
text-indent: 1.5rem;
&:first-child {
margin-bottom: 0;
text-indent: 0;
&:first-letter {
color: $jazz-color;
float: left;
font-size: 4.7rem;
font-weight: 600;
line-height: 1;
margin: 0 .7rem .3rem 0;
}
}
}
.site__footer {
background-color: $primary-color;
.footer__logo {
.bold__second {
fill: $jazz-color;
}
}
a {
color: lighten($primary-color, 20%);
&:hover,
&:focus {
color: $jazz-color;
}
}
.icon {
fill: $jazz-color;
}
}
.button--primary {
background: $jazz-color;
&:hover,
&:focus {
background: darken($jazz-color, 5%);
}
}