/* ==========================================================================
Base elements ========================================================================== */
body {
color: $text-color; background: $background-color; border-top-color: $nav-background-color;
}
a {
color: $accent-color; &:hover { color: shade($accent-color, 25%); }
}
blockquote {
background-color: mix($background-color, $accent-color, 90%); border-left-color: $accent-color;
}
/* ==========================================================================
Site-wide ========================================================================== */
.site-title {
a { color: $text-color; }
}
.copyright {
color: lighten($text-color, 35%); a { color: lighten($text-color, 35%); }
}
.taxonomy-title {
color: lighten($text-color, 60%);
}
.taxonomy-count {
color: lighten($text-color, 50%);
}
.taxonomy-index {
a { border-bottom-color: $border-color; &:hover { color: $accent-color; } }
}
.taxonomy-section {
&:not(:last-child) { border-bottom-color: $border-color; }
}
.back-to-top {
color: lighten($text-color, 50%);
}
.site-nav {
ul { color: $nav-color; background-color: $nav-background-color; } a { color: $nav-color; border-color: $nav-background-color; &:hover { border-color: $nav-color; } }
}
.site-footer {
border-top-color: $border-color;
}
.footnotes {
border-top-color: $border-color;
}
.site-logo-img {
border-color: $background-color;
}
.toc-wrapper {
border-color: mix(#fff, $border-color, 25%); h2 { color: $base05; background-color: $base00; } li { ol { background-color: $background-color; } a { &:hover, &:focus { border-bottom: 1px dotted $border-color; } } }
}
menu-toggle {
color: $nav-color;
}
menu-toggle {
background-color: $nav-background-color;
}
markdown-toc {
color: $base05;
}
.pagination {
li { a { color: mix(#000, $border-color, 25%); border-color: $border-color; &.current, &.current.disabled { @include yiq-contrasted(mix(#000, $border-color, 25%)); } &.disabled { color: $border-color; } } }
}
.search-input {
border-color: $border-color;
}
/* ==========================================================================
Page ========================================================================== */
.page-previous, .page-next {
color: $text-color;
}
/* ==========================================================================
Entries (Posts, collection documents, etc.) ========================================================================== */
.entry {
a { &:hover { color: $accent-color; } }
}
/* ==========================================================================
Tables ========================================================================== */
th, td {
border-bottom-color: $border-color;
}
/* ==========================================================================
NOTICE TEXT BLOCKS ========================================================================== */
/* Default notice */ .notice {
@include notice(lighten($base-color, 90%));
}
/* Accent notice */ .notice–accent {
@include notice(mix(#fff, $accent-color, 70%));
}
/* Primary notice */ .notice–primary {
@include notice(mix(#fff, $primary-color, 70%));
}
/* Warning notice */ .notice–warning {
@include notice(mix(#fff, $warning-color, 70%));
}
/* Success notice */ .notice–success {
@include notice(mix(#fff, $success-color, 70%));
}
/* Danger notice */ .notice–danger {
@include notice(mix(#fff, $danger-color, 70%));
}
/* Info notice */ .notice–info {
@include notice(mix(#fff, $info-color, 70%));
}
/* ==========================================================================
Accessibility Modules ========================================================================== */
/* Text meant only for screen readers */ .screen-reader-text, .screen-reader-text span, .screen-reader-shortcut {
background-color: $base-color;
}
/* ==========================================================================
BUTTONS ========================================================================== */
.btn {
/* button colors */ $buttoncolors: (primary, $primary-color), (accent, $accent-color), (inverse, #fff), (light-outline, transparent), (success, $success-color), (warning, $warning-color), (danger, $danger-color), (info, $info-color), (facebook, $facebook-color), (twitter, $twitter-color), (google-plus, $google-plus-color), (linkedin, $linkedin-color), (reddit, $reddit-color); @each $buttoncolor, $color in $buttoncolors { &--#{$buttoncolor} { @include yiq-contrasted($color); @if ($buttoncolor == inverse) { border: 1px solid $border-color; } @if ($buttoncolor == light-outline) { border: 1px solid #fff; } &:hover { @include yiq-contrasted(mix(#000, $color, 20%)); } &:visited { @include yiq-contrasted($color); } } }
}
/* ==========================================================================
Syntax highlighting ========================================================================== */
code.highlighter-rouge {
color: $base05; background-color: $base00;
}
div.highlighter-rouge, figure.highlight {
color: $base05; background-color: $base00;
}
.highlight table {
td { &.gutter { color: $base04; border-right-color: $base04; } }
}
.highlight .hll {
background-color: $base06;
}
.highlight {
.c { /* Comment */ color: $base04; } .err { /* Error */ color: $base08; } .k { /* Keyword */ color: $base0e; } .l { /* Literal */ color: $base09; } .n { /* Name */ color: $base05; } .o { /* Operator */ color: $base0c; } .p { /* Punctuation */ color: $base05; } .cm { /* Comment.Multiline */ color: $base04; } .cp { /* Comment.Preproc */ color: $base04; } .c1 { /* Comment.Single */ color: $base04; } .cs { /* Comment.Special */ color: $base04; } .gd { /* Generic.Deleted */ color: $base08; } .ge { /* Generic.Emph */ font-style: italic; } .gh { /* Generic.Heading */ color: $base05; font-weight: bold; } .gi { /* Generic.Inserted */ color: $base0b; } .gp { /* Generic.Prompt */ color: $base04; font-weight: bold; } .gs { /* Generic.Strong */ font-weight: bold; } .gu { /* Generic.Subheading */ color: $base0c; font-weight: bold; } .kc { /* Keyword.Constant */ color: $base0e; } .kd { /* Keyword.Declaration */ color: $base0e; } .kn { /* Keyword.Namespace */ color: $base0c; } .kp { /* Keyword.Pseudo */ color: $base0e; } .kr { /* Keyword.Reserved */ color: $base0e; } .kt { /* Keyword.Type */ color: $base0a; } .ld { /* Literal.Date */ color: $base0b; } .m { /* Literal.Number */ color: $base09; } .s { /* Literal.String */ color: $base0b; } .na { /* Name.Attribute */ color: $base0d; } .nb { /* Name.Builtin */ color: $base05; } .nc { /* Name.Class */ color: $base0a; } .no { /* Name.Constant */ color: $base08; } .nd { /* Name.Decorator */ color: $base0c; } .ni { /* Name.Entity */ color: $base05; } .ne { /* Name.Exception */ color: $base08; } .nf { /* Name.Function */ color: $base0d; } .nl { /* Name.Label */ color: $base05; } .nn { /* Name.Namespace */ color: $base0a; } .nx { /* Name.Other */ color: $base0d; } .py { /* Name.Property */ color: $base05; } .nt { /* Name.Tag */ color: $base0c; } .nv { /* Name.Variable */ color: $base08; } .ow { /* Operator.Word */ color: $base0c; } .w { /* Text.Whitespace */ color: $base05; } .mf { /* Literal.Number.Float */ color: $base09; } .mh { /* Literal.Number.Hex */ color: $base09; } .mi { /* Literal.Number.Integer */ color: $base09; } .mo { /* Literal.Number.Oct */ color: $base09; } .sb { /* Literal.String.Backtick */ color: $base0b; } .sc { /* Literal.String.Char */ color: $base05; } .sd { /* Literal.String.Doc */ color: $base04; } .s2 { /* Literal.String.Double */ color: $base0b; } .se { /* Literal.String.Escape */ color: $base09; } .sh { /* Literal.String.Heredoc */ color: $base0b; } .si { /* Literal.String.Interpol */ color: $base09; } .sx { /* Literal.String.Other */ color: $base0b; } .sr { /* Literal.String.Regex */ color: $base0b; } .s1 { /* Literal.String.Single */ color: $base0b; } .ss { /* Literal.String.Symbol */ color: $base0b; } .bp { /* Name.Builtin.Pseudo */ color: $base05; } .vc { /* Name.Variable.Class */ color: $base08; } .vg { /* Name.Variable.Global */ color: $base08; } .vi { /* Name.Variable.Instance */ color: $base08; } .il { /* Literal.Number.Integer.Long */ color: $base09; }
}