redeyed-jekyll-theme 0.1.0 → 0.1.3

data/_sass/theme/syntax-dark.scss

@@ -0,0 +1,150 @@
+//==================================================================
+// DARK SYNTAX HIGHLIGHTING
+//==================================================================
+
+@mixin syntax-dark {
+    /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
+    .highlight pre { background-color: var(--highlight-bg-color); }
+    .highlight .hll { background-color: var(--highlight-bg-color); }
+    .highlight .c { color: #75715e; }
+    /* Comment */
+    .highlight .err { color: #960050; background-color: #1e0010; }
+    /* Error */
+    .highlight .k { color: #66d9ef; }
+    /* Keyword */
+    .highlight .l { color: #ae81ff; }
+    /* Literal */
+    .highlight .n { color: #f8f8f2; }
+    /* Name */
+    .highlight .o { color: #f92672; }
+    /* Operator */
+    .highlight .p { color: #f8f8f2; }
+    /* Punctuation */
+    .highlight .cm { color: #75715e; }
+    /* Comment.Multiline */
+    .highlight .cp { color: #75715e; }
+    /* Comment.Preproc */
+    .highlight .c1 { color: #75715e; }
+    /* Comment.Single */
+    .highlight .cs { color: #75715e; }
+    /* Comment.Special */
+    .highlight .ge { color: inherit; font-style: italic; }
+    /* Generic.Emph */
+    .highlight .gs { font-weight: bold; }
+    /* Generic.Strong */
+    .highlight .kc { color: #66d9ef; }
+    /* Keyword.Constant */
+    .highlight .kd { color: #66d9ef; }
+    /* Keyword.Declaration */
+    .highlight .kn { color: #f92672; }
+    /* Keyword.Namespace */
+    .highlight .kp { color: #66d9ef; }
+    /* Keyword.Pseudo */
+    .highlight .kr { color: #66d9ef; }
+    /* Keyword.Reserved */
+    .highlight .kt { color: #66d9ef; }
+    /* Keyword.Type */
+    .highlight .ld { color: #e6db74; }
+    /* Literal.Date */
+    .highlight .m { color: #ae81ff; }
+    /* Literal.Number */
+    .highlight .s { color: #e6db74; }
+    /* Literal.String */
+    .highlight .na { color: #a6e22e; }
+    /* Name.Attribute */
+    .highlight .nb { color: #f8f8f2; }
+    /* Name.Builtin */
+    .highlight .nc { color: #a6e22e; }
+    /* Name.Class */
+    .highlight .no { color: #66d9ef; }
+    /* Name.Constant */
+    .highlight .nd { color: #a6e22e; }
+    /* Name.Decorator */
+    .highlight .ni { color: #f8f8f2; }
+    /* Name.Entity */
+    .highlight .ne { color: #a6e22e; }
+    /* Name.Exception */
+    .highlight .nf { color: #a6e22e; }
+    /* Name.Function */
+    .highlight .nl { color: #f8f8f2; }
+    /* Name.Label */
+    .highlight .nn { color: #f8f8f2; }
+    /* Name.Namespace */
+    .highlight .nx { color: #a6e22e; }
+    /* Name.Other */
+    .highlight .py { color: #f8f8f2; }
+    /* Name.Property */
+    .highlight .nt { color: #f92672; }
+    /* Name.Tag */
+    .highlight .nv { color: #f8f8f2; }
+    /* Name.Variable */
+    .highlight .ow { color: #f92672; }
+    /* Operator.Word */
+    .highlight .w { color: #f8f8f2; }
+    /* Text.Whitespace */
+    .highlight .mf { color: #ae81ff; }
+    /* Literal.Number.Float */
+    .highlight .mh { color: #ae81ff; }
+    /* Literal.Number.Hex */
+    .highlight .mi { color: #ae81ff; }
+    /* Literal.Number.Integer */
+    .highlight .mo { color: #ae81ff; }
+    /* Literal.Number.Oct */
+    .highlight .sb { color: #e6db74; }
+    /* Literal.String.Backtick */
+    .highlight .sc { color: #e6db74; }
+    /* Literal.String.Char */
+    .highlight .sd { color: #e6db74; }
+    /* Literal.String.Doc */
+    .highlight .s2 { color: #e6db74; }
+    /* Literal.String.Double */
+    .highlight .se { color: #ae81ff; }
+    /* Literal.String.Escape */
+    .highlight .sh { color: #e6db74; }
+    /* Literal.String.Heredoc */
+    .highlight .si { color: #e6db74; }
+    /* Literal.String.Interpol */
+    .highlight .sx { color: #e6db74; }
+    /* Literal.String.Other */
+    .highlight .sr { color: #e6db74; }
+    /* Literal.String.Regex */
+    .highlight .s1 { color: #e6db74; }
+    /* Literal.String.Single */
+    .highlight .ss { color: #e6db74; }
+    /* Literal.String.Symbol */
+    .highlight .bp { color: #f8f8f2; }
+    /* Name.Builtin.Pseudo */
+    .highlight .vc { color: #f8f8f2; }
+    /* Name.Variable.Class */
+    .highlight .vg { color: #f8f8f2; }
+    /* Name.Variable.Global */
+    .highlight .vi { color: #f8f8f2; }
+    /* Name.Variable.Instance */
+    .highlight .il { color: #ae81ff; }
+    /* Literal.Number.Integer.Long */
+    .highlight .gu { color: #75715e; }
+    /* Generic.Subheading & Diff Unified/Comment? */
+    .highlight .gd { color: #f92672; background-color: #561c08; }
+    /* Generic.Deleted & Diff Deleted */
+    .highlight .gi { color: #a6e22e; background-color: #0b5858; }
+    /* Generic.Inserted & Diff Inserted */
+
+    /* -----  custom styles ------ */
+
+    --highlight-bg-color: #252525;
+    --highlighter-rouge-color: #de6b18;
+    --highlight-lineno-color: #6c6c6d;
+    --inline-code-bg: #272822;
+    --code-header-text-color: #6a6a6a;
+    --code-header-muted-color: rgb(60 60 60);
+    --code-header-icon-color: rgb(86 86 86);
+    --clipboard-checked-color: #2bcc2b;
+    --filepath-text-color: #bdbdbd;
+
+    .highlight {
+        .gp { color: #818c96; }
+    }
+
+    pre { color: #bfbfbf; }
+    /* override Bootstrap */
+} /* syntax-dark */

data/_sass/{colors/light-syntax.scss → theme/syntax-light.scss}

@@ -1,8 +1,8 @@
-/*
-    Code Highlighter - Light Mode
-*/
+//==================================================================
+// LIGHT SYNTAX HIGHLIGHTING
+//==================================================================
 
-@mixin light-syntax {
+@mixin syntax-light {
     /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
     .highlight .hll { background-color: #ffffcc; }
     .highlight .c { color: #999988; font-style: italic; } /* Comment */
@@ -81,4 +81,4 @@
         --highlighter-rouge-color: rgb(82 82 82);
     }
 
-} /* light-syntax */
+} /* syntax-light */

data/_sass/theme/syntax.scss

@@ -0,0 +1,246 @@
+//==================================================================
+// SYNTAX HIGHLIGHTER
+//==================================================================
+
+@import "syntax-light";
+@import "syntax-dark";
+
+html {
+    @media (prefers-color-scheme: light) {
+        &:not([data-mode]),
+        &[data-mode=light] {
+            @include syntax-light;
+        }
+        &[data-mode=dark] {
+            @include syntax-dark;
+        }
+    }
+    @media (prefers-color-scheme: dark) {
+        &:not([data-mode]),
+        &[data-mode=dark] {
+            @include syntax-dark;
+        }
+        &[data-mode=light] {
+            @include syntax-light;
+        }
+    }
+}
+
+// CODE SNIPPETS
+
+$code-radius: 6px;
+
+%code-snippet-bg { background: var(--highlight-bg-color); }
+
+%code-snippet-radius { border-radius: $code-radius; }
+
+%code-snippet-padding {
+    padding-left: 1rem;
+    padding-right: 1.5rem;
+}
+
+.highlighter-rouge {
+    @extend %code-snippet-bg;
+    @extend %code-snippet-radius;
+    color: var(--highlighter-rouge-color);
+    margin-top: 0.5rem;
+    margin-bottom: 1.2rem;
+}
+
+.highlight {
+    @extend %code-snippet-bg;
+    @extend %code-snippet-radius;
+
+    @at-root figure#{&} { @extend %code-snippet-bg; }
+
+    overflow: auto;
+    padding-top: 0.5rem;
+    padding-bottom: 1rem;
+
+    pre {
+        margin-bottom: 0;
+        font-size: $code-font-size;
+        line-height: 1.4rem;
+        word-wrap: normal; /* fixes Safari overflow-x */
+    }
+
+    table {
+        td pre {
+            overflow: visible;  /* fixes iOS Safari overflow-x */
+            word-break: normal; /* fixes iOS Safari line nos code break */
+        }
+    }
+
+    .lineno {
+        padding-right: 0.5rem;
+        min-width: 2.2rem;
+        text-align: right;
+        color: var(--highlight-lineno-color);
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+    }
+
+    .gp { user-select: none; }  /* sets the dollar sign to be non-selectable */
+} /* .highlight */
+
+code {
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    -moz-hyphens: none;
+    hyphens: none;
+
+    &.highlighter-rouge {
+        font-size: $code-font-size;
+        padding: 3px 5px;
+        word-break: break-word;
+        border-radius: 4px;
+        background-color: var(--inline-code-bg);
+    }
+
+    &.filepath {
+        background-color: inherit;
+        color: var(--filepath-text-color);
+        font-weight: 600;
+        padding: 0;
+    }
+
+    a > &.highlighter-rouge {
+        padding-bottom: 0; /* show link's underlinke */
+        color: inherit;
+    }
+
+    a:hover > &.highlighter-rouge { border-bottom: none; }
+
+    blockquote & { color: inherit; }
+
+    .highlight > & { color: transparent; }
+}
+
+td.rouge-code {
+    @extend %code-snippet-padding;
+
+    /* prevent browser extensions from changing the URL sting of the code block */
+    a {
+        color: inherit !important;
+        border-bottom: none !important;
+        pointer-events: none;
+    }
+}
+
+/* hide line numbers for default, console, and terminal code snippets */
+div {
+    &[class^='highlighter-rouge'],
+    &.language-plaintext.highlighter-rouge,
+    &.language-console.highlighter-rouge,
+    &.language-terminal.highlighter-rouge,
+    &.nolineno {
+        pre.lineno { display: none; }
+
+        td.rouge-code { padding-left: 1.5rem; }
+    }
+}
+
+.code-header {
+    @extend %no-cursor;
+    $code-header-height: 2.25rem;
+
+    border-top-left-radius: $code-radius;
+    border-top-right-radius: $code-radius;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: $code-header-height;
+
+    &::before {
+        $dot-size: 0.75rem;
+        $dot-margin: 0.5rem;
+
+        content: "";
+        display: inline-block;
+        margin-left: 1rem;
+        width: $dot-size;
+        height: $dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow:
+                ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
+            ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
+    }
+
+    /* the label block */
+    span {
+        /* label icon */
+        i {
+            font-size: 1rem;
+            margin-right: 0.4rem;
+            color: var(--code-header-icon-color);
+
+            &.small {
+                font-size: 70%;
+            }
+        }
+
+        @at-root [file] #{&} > i {
+            position: relative;
+            top: 1px; /* center the file icon */
+        }
+
+        /* label text */
+        &::after {
+            content: attr(data-label-text);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--code-header-text-color);
+        }
+    }
+
+    /* clipboard */
+    button {
+        @extend %cursor-pointer;
+
+        border: 1px solid transparent;
+        border-radius: $code-radius;
+        height: $code-header-height;
+        width: $code-header-height;
+        padding: 0;
+        background-color: inherit;
+
+        i { color: var(--code-header-icon-color); }
+
+        &[timeout] {
+            &:hover { border-color: var(--clipboard-checked-color); }
+
+            i { color: var(--clipboard-checked-color); }
+        }
+
+        &:not([timeout]):hover {
+            background-color: rgba(128, 128, 128, 0.37);
+
+            i { color: white; }
+        }
+
+        &:focus { outline: none; }
+    }
+}
+
+@media all and (max-width: 576px) {
+    .post-content {
+        > div[class^='language-'] {
+            @include ml-mr(-1.25rem);
+
+            border-radius: 0;
+
+            .highlight { padding-left: 0.25rem; }
+
+            .code-header {
+                border-radius: 0;
+                padding-left: 0.4rem;
+                padding-right: 0.5rem;
+            }
+        }
+    }
+}

data/_sass/theme/typography.scss

@@ -0,0 +1,151 @@
+//==================================================================
+// TYPOGRAPHY
+//==================================================================
+
+//
+// CSS MODULES
+//
+
+%anchor {
+    .anchor { font-size: 0.8rem; }
+
+    @media (hover: hover) {
+        .anchor {
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
+        }
+
+        &:hover {
+            .anchor {
+                visibility: visible;
+                opacity: 1;
+                transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
+            }
+        }
+    }
+}
+
+%heading {
+    font-family: $font-family-heading;
+    font-weight: 700;
+}
+
+%img-caption {
+    + em {
+        display: block;
+        text-align: center;
+        font-style: normal;
+        font-size: 0.8rem;
+        padding: 0;
+        color: var(--text-color);
+    }
+}
+
+%link-active { color: var(--link-active) !important; }
+
+%link-color { color: var(--link-color); }
+
+%link-disabled { color: var(--link-disabled); }
+
+%link-hover { color: var(--link-hover) !important; }
+
+%link-underline { text-decoration: underline; }
+
+%link-no-decoration { text-decoration: none; }
+
+%section {
+    #core-wrapper & {
+        margin-top: 2.5rem;
+        margin-bottom: 1.25rem;
+
+        &:focus { outline: none; /* avoid outline in Safari */ }
+    }
+}
+
+//
+// HEADINGS
+//
+
+h1 {
+    @extend %heading;
+    @extend %anchor;
+    font-size: 2rem;
+}
+h2 {
+    @extend %heading;
+    @extend %section;
+    @extend %anchor;
+    font-size: 1.75rem;
+}
+h3 {
+    @extend %heading;
+    @extend %section;
+    @extend %anchor;
+    font-size: 1.5rem;
+}
+h4 {
+    @extend %heading;
+    @extend %section;
+    @extend %anchor;
+    font-size: 1.3rem;
+}
+h5 {
+    @extend %heading;
+    @extend %section;
+    @extend %anchor;
+    font-size: 1.2rem;
+}
+h6 {
+    @extend %heading;
+    @extend %anchor;
+    font-family: $font-family-heading-alt;
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+
+// ALIGNMENT
+
+.center { text-align: center; }
+.left { text-align: left; }
+.right { text-align: right; }
+.justify { text-align: justify; }
+
+// IMAGES
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+// KBD
+kbd {
+    font-family: $font-family-code;
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 1.3rem;
+    min-width: 1.75rem;
+    text-align: center;
+    margin: 0 0.3rem;
+    padding-top: 0.1rem;
+    color: var(--kbd-text);
+    background-color: var(--kbd-bg);
+    border-radius: 0.25rem;
+    border: 1px solid var(--kbd-wrap);
+    @include box-shadow( 0, -2px, 0, 0, var(--kbd-wrap), 0.80, true );
+}
+
+// LINKS
+
+a {
+    @extend %link-color;
+    @extend %link-no-decoration;
+
+    &:active { @extend %link-active; }
+    &:hover { @extend %link-hover }
+    .disabled { @extend %link-disabled; }
+}
+
+// LISTS
+ol, ul {
+    ol, ul { margin-bottom: 1px; }
+}