Added fold pairs to Sass

This commit is contained in:
2019-02-02 23:35:55 -05:00
parent d2a2ac9e2a
commit b2be2a6bf1
3 changed files with 100 additions and 74 deletions

View File

@@ -1,6 +1,6 @@
/* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
$max-page-width: 52em;
// base colors {{{ //
$base-red: #f2777a;
$base-orange: #f99157;
@@ -28,7 +28,40 @@ $base-dark-orange: #d27b53;
.base0e { color: $base-violet; }
.base0f { color: $base-dark-orange; }
/* General Page Layout */
// }}} base colors //
// mixins {{{ //
$max-page-width: 52em;
@mixin side-padding-rem($n) {
padding-left: $n * 1rem;
padding-right: $n * 1rem;
}
@mixin vert-padding-rem($n) {
padding-top: $n * 1rem;
padding-bottom: $n * 1rem;
}
@mixin auto-center() {
margin-left: auto;
margin-right: auto;
}
@mixin article-body() {
/* background-color: #e6e6fa; */
background-color: #cbbeb5;
color: #2d2d2d;
@include side-padding-rem(8);
@include vert-padding-rem(1);
/* min-height: 50%; */
/* min-height: 30em; */
@media (max-width: $max-page-width) {
@include side-padding-rem(2);
}
}
@mixin a-color($color) {
a {
@@ -42,6 +75,10 @@ $base-dark-orange: #d27b53;
}
}
// }}} mixins //
// general elements {{{ //
body {
margin: 0;
background-color: #2d2d2d;
@@ -76,35 +113,6 @@ div {
}
}
@mixin side-padding-rem($n) {
padding-left: $n * 1rem;
padding-right: $n * 1rem;
}
@mixin vert-padding-rem($n) {
padding-top: $n * 1rem;
padding-bottom: $n * 1rem;
}
@mixin auto-center() {
margin-left: auto;
margin-right: auto;
}
@mixin article-body() {
/* background-color: #e6e6fa; */
background-color: #cbbeb5;
color: #2d2d2d;
@include side-padding-rem(8);
@include vert-padding-rem(1);
/* min-height: 50%; */
/* min-height: 30em; */
@media (max-width: $max-page-width) {
@include side-padding-rem(2);
}
}
article {
.single {
section {
@@ -180,7 +188,9 @@ pre, code {
font-size: inherit;
}
/* Header Layout */
// }}} general elements //
// header {{{ //
header {
a {
@@ -196,13 +206,17 @@ header {
}
}
/* Footer Layout */
// }}} header //
// footer {{{ //
footer {
@include a-color(#747369);
}
/* 404 Page Layout */
// }}} footer //
// 404 {{{ //
.page-not-found {
h1 {
@@ -228,16 +242,50 @@ footer {
}
}
// TODO: converted up to here
// }}} 404 //
/* Homepage Layout */
// homepage {{{ //
@media (max-width: $max-page-width) {
.homepage {
.homepage {
h1 {
.headline {
font-size: 3em;
color: #ffcc66;
@media (max-width: $max-page-width) {
@include side-padding-rem(2);
}
}
}
@media (max-width: $max-page-width) {
margin-bottom: 2rem;
}
}
/* .homepage section.categories,
.homepage section.tags {
padding-left: 2rem;
padding-right: 2rem;
}
.homepage .category,
.homepage .category a,
.homepage .tag,
.homepage .tag a {
color: #cc99cc;
}
.homepage .tag {
margin-right: 2em;
} */
// }}} homepage //
// TODO: converted up to here
// hero {{{ //
h1.site-title {
text-align: center;
/* font-size: 3.5em; */
@@ -253,39 +301,10 @@ h1.site-title {
}
}
.homepage h1.headline {
font-size: 3em;
color: #ffcc66;
}
@media (max-width: $max-page-width) {
.homepage h1.headline {
padding-left: 2rem;
padding-right: 2rem;
}
}
.homepage .hero-logo img {
.hero-logo img {
width: 100%;
}
.homepage section.categories,
.homepage section.tags {
padding-left: 2rem;
padding-right: 2rem;
}
.homepage .category,
.homepage .category a,
.homepage .tag,
.homepage .tag a {
color: #cc99cc;
}
.homepage .tag {
margin-right: 2em;
}
.nav-bar {
margin-left: .5em;
margin-bottom: 1em;
@@ -297,7 +316,9 @@ h1.site-title {
text-align: center;
}
/* Post List Layout */
// }}} hero //
// article-list {{{ //
.article-list h1.list-title {
font-size: 3em;
@@ -331,8 +352,9 @@ h1.site-title {
.article-list article section.summary a { color: #d27b53; }
// }}} article-list //
/* Single Post Layout */
// article.single {{{ //
article.single .meta {
font-size: 0.9em;
@@ -491,7 +513,9 @@ article.single hr {
border-bottom-color: #a09f93;
}
/* Pygments template by Jan T. Sott (https://github.com/idleberg) */
// }}} article.single //
// Pygments {{{ //
pre { background: #2d2d2d; color: #f2f0ec }
@@ -561,3 +585,5 @@ pre { background: #2d2d2d; color: #f2f0ec }
.highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */
/*# sourceMappingURL=style.css.map */
// }}} Pygments //