@import “theme”;
{%- if site.texture.showPicker -%}
texture-picker {
position: fixed; {%- if site.texture.showNav -%} top: 100px; right: 5vw; {%- else -%} top: 20px; right: 20px; {%- endif -%} background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 8px 12px; p { margin: 0; @include fluidType(14px, 15px); } .info { background-color: rgba(#ffd68d, 0.7); border-radius: 4px; font-size: 13px; // color: #999; padding: 10px; margin-top: 10px; max-width: 200px; line-height: 1.3em; } .texture-colors { display: flex; > div { width: 30px; height: 30px; margin: 4px; border: 1px solid #eee; border-radius: 4px; &:hover { cursor: pointer; } } } #red {background-color: orangered;} #blue { background-color: lightblue; } #black { background-color: #111; } #purple { background-color: rebeccapurple; } #green { background-color: mediumseagreen; }
} {%- endif -%} // Textures .texture-black {
background-image: url('{{ site.baseurl }}/assets/textures/black.jpg'); h2 { color: #999; }
}
.texture-blue {
background-image: url('{{ site.baseurl }}/assets/textures/blue.jpg'); h2 { color: #ddd; } .social i:hover { color: #eee; } .post-date { color: #ccc; }
}
.texture-red {
background-image: url('{{ site.baseurl }}/assets/textures/red.jpg');
}
.texture-purple {
background-image: url('{{ site.baseurl }}/assets/textures/purple.jpg');
}
.texture-green {
background-image: url('{{ site.baseurl }}/assets/textures/green.jpg'); .post-date { color: #ccc; }
}
.texture-red, .texture-purple {
h2 { color: #ccc; } .social i { color: #ddd; &:hover { color: lighten(#ddd, 7%); } } .post-date { color: #ddd; }
}