redeyed-jekyll-theme 0.1.0 → 0.1.1

data/_sass/addon/mixins.scss

@@ -1,11 +1,10 @@
 /*
-    SCSS Modules
-*/
+ * SCSS MODULES & MIXINS
+ */
 
 %heading {
-    color: var(--heading-color);
-    font-weight: 400;
     font-family: 'Cormorant Unicase', serif;
+    font-weight: 600;
 }
 
 %section {
@@ -14,20 +13,20 @@
         margin-bottom: 1.25rem;
 
         &:focus {
-            outline: none;
+            outline: none; /* avoid outline in Safari */
         }
     }
 }
 
 %anchor {
     .anchor {
-        font-size: 80%;
+        font-size: 0.8rem;
     }
 
     @media (hover: hover) {
         .anchor {
             visibility: hidden;
-            opacity: 1;
+            opacity: 0;
             transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
         }
 
@@ -42,25 +41,26 @@
 }
 
 %tag-hover {
-    background: var(--tag-hover);
-    transition: background 0.35s ease-in-out;
+    background: var(--tag-hover-bg);
+    border-color: var(--tag-hover-border);
+    transition: border-color 0.35s ease-in-out, background 0.35s ease-in-out;
 }
 
 %table-cell {
     padding: 0.4rem 1rem;
-    font-size: 95%;
+    font-size: 0.95rem;
     white-space: nowrap;
 }
 
 %link-hover {
-    color: var(--link-hover);
-    border-bottom: 1px solid var(--link-hover-underline);
+    color: var(--link-hover) !important;
+    border-bottom: 1px solid var(--link-hover);
     text-decoration: none;
 }
 
 %link-color { color: var(--link-color); }
 
-%link-underline { border-bottom: 1px solid var(--link-underline-color); }
+%link-underline { border-bottom: 1px solid var(--link-color); }
 
 %clickable-transition { transition: color 0.35s ease-in-out; }
 
@@ -72,25 +72,28 @@
 
 %normal-font-style { font-style: normal; }
 
-%text-color { color: var(--text-color); }
-
 %img-caption {
     + em {
         display: block;
         text-align: center;
         font-style: normal;
-        font-size: 80%;
+        font-size: 0.8rem;
         padding: 0;
-        color: #6d6c6c;
+        color: var(--text-color);
     }
 }
 
 %sidebar-links {
-    color: var(--sidebar-link-color);
+    color: var(--sidebar-link);
     user-select: none;
 }
 
-/* ---------- SCSS MIXIN ---------- */
+%alert {
+    display: flex;
+    border-left: 0;
+    border-radius: 6px;
+    padding: 0.75rem 1.2rem;
+}
 
 @mixin no-text-decoration { text-decoration: none; }
 
@@ -99,9 +102,9 @@
     margin-right: $value;
 }
 
-@mixin pl-pr($val) {
-    padding-left: $val;
-    padding-right: $val;
+@mixin pl-pr($value) {
+    padding-left: $value;
+    padding-right: $value;
 }
 
 @mixin input-placeholder { opacity: 0.6; }
@@ -120,25 +123,15 @@
     transform: translateX(-50%);
 }
 
-@mixin prompt($type, $fw-icon, $icon-weight: 900) {
-    &.prompt-#{$type} {
-        background-color: var(--prompt-#{$type}-bg);
-
+@mixin alert($type, $fw-icon, $icon-weight: 900) {
+    &.alert-#{$type} {
+        background-color: var(--alert-#{$type}-bg);
+        border: 1px solid var(--alert-#{$type}-border);
+        box-shadow: 3px 3px var(--blockquote-shadow);
         &::before {
             content: $fw-icon;
-            color: var(--prompt-#{$type}-icon-color);
+            color: var(--alert-#{$type}-text);
             font-weight: $icon-weight;
         }
     }
 }
-
-@mixin slide($append: null) {
-    $basic: transform 0.4s ease;
-    @if $append {
-        -webkit-transition: $basic, $append;
-        transition: $basic, $append;
-    } @else {
-        -webkit-transition: $basic;
-        transition: $basic;
-    }
-}

data/_sass/addon/syntax.scss

@@ -0,0 +1,246 @@
+/*
+ * SYNTAX HIGHLIGHTER
+ */
+
+@import "../theme/syntax-light";
+@import "../theme/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/layout/_base.scss

@@ -0,0 +1,16 @@
+/*
+ * LAYOUT BASE STYLES
+ */
+
+/* reset some basic elements */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+    margin: 0;
+    padding: 0;
+}
+
+/* basic layout styles */
+body {
+
+}

data/_sass/redeyed-jekyll-theme.scss

@@ -6,21 +6,36 @@
  * MIT Licensed
  */
 
+// -----------------------------------------------------------------
+// IMPORT BOOTSTRAP FUNCTIONS & VARIABLES
+// -----------------------------------------------------------------
+@import "../assets/lib/bootstrap-5.0.2/scss/functions";
+@import "../assets/lib/bootstrap-5.0.2/scss/variables";
+
+// -----------------------------------------------------------------
+// IMPORT THEME COLORS
+// -----------------------------------------------------------------
 @import
-    "colors/light-scheme",
-    "colors/light-syntax",
-    "colors/dark-scheme",
-    "colors/dark-syntax",
+    "theme/scheme-brew",
+    "theme/scheme-dark",
+    "theme/scheme-light";
 
-    "addon/mixins",
-    "addon/variables",
-    "variables-hook",
-    "addon/syntax",
-    "addon/common",
+// -----------------------------------------------------------------
+// IMPORT THEME MIXINS & VARIABLES
+// -----------------------------------------------------------------
+@import "addon/mixins";
+@import "theme/variables";
+
+// -----------------------------------------------------------------
+// IMPORT MAIN BOOTSTRAP SCSS
+// -----------------------------------------------------------------
+@import "../assets/lib/bootstrap-5.0.2/scss/bootstrap";
 
-    "layout/page",
-    "layout/panel-both",
-    "layout/panel-left",
-    "layout/panel-none",
-    "layout/panel-right",
-    "layout/post";
+// -----------------------------------------------------------------
+// IMPORT REMAINING THEME FILES
+// -----------------------------------------------------------------
+@import
+    "variables-hook",
+    "layout/base",
+    "addon/alerts",
+    "addon/typography";

data/_sass/theme/scheme-dark.scss

@@ -0,0 +1,220 @@
+/*
+ * DARK MODE THEME
+ */
+
+@mixin dark-scheme {
+
+    /* COMMON COLORS */
+
+    --blue: #0078D2;
+    --indigo: #3C00D2;
+    --purple: #6900D2;
+    --pink: #D200B4;
+    --red: #D20000;
+    --orange: #D26900;
+    --yellow: #D2B400;
+    --green: #3CD200;
+    --teal: #00D278;
+    --cyan: #00D2D2;
+    --violet: #D200D2;
+    --black: #000000;
+    --white: #FFFFFF;
+    --smoke: #EDDCC9;
+    --darkslategray: #2F4F4F;
+    --dodger-blue: #1E90FF;
+    --cyan-cobalt: #1D58A5;
+
+    /* FRAMEWORK */
+
+    --primary-bg: rgb(33, 37, 41);
+    --secondary-bg: rgb(56, 66, 94);
+    --tertiary-bg: rgb(25, 28, 36);
+
+    --primary: var(--red);
+    --secondary: var(--orange);
+    --success: var(--green);
+    --info: var(--blue);
+    --warning: var(--yellow);
+    --danger: #CD0202;
+    --light: #AAB2BD;
+    --dark: #12151E;
+    --bright: var(--white);
+    --subdued: #808080;
+
+    /* FONTS */
+
+    --text-color: var(--light);
+    --text-muted: var(--subdued);
+    --heading-primary: var(--white);
+    --heading-secondary: var(--red);
+    --subheading: rgb(108, 114, 147);
+
+    /* ALERTS */
+
+    --alert-primary-bg: rgb(210 0 0 / 25%);
+    --alert-primary-text: var(--red);
+    --alert-primary-border: rgb(210 0 0 / 50%);
+    --alert-secondary-bg:  rgb(210 105 0 / 25%);
+    --alert-secondary-text: var(--orange);
+    --alert-secondary-border: rgb(210 105 3 / 50%);
+    --alert-success-bg: rgb(60 210 0 / 25%);
+    --alert-success-text: var(--green);
+    --alert-success-border: rgb(60 210 0 / 50%);
+    --alert-danger-bg: rgb(205 2 2 / 25%);
+    --alert-danger-text: var(--danger);
+    --alert-danger-border: rgb(205 2 2 / 50%);
+    --alert-warning-bg: rgb(210 180 0 / 25%);
+    --alert-warning-text: var(--yellow);
+    --alert-warning-border: rgb(210 180 0 / 50%);
+    --alert-info-bg: rgb(0 120 210 / 25%);
+    --alert-info-text: var(--blue);
+    --alert-info-border: rgb(0 120 210 / 50%);
+    --alert-light-bg: rgb(170 178 189 / 25%);
+    --alert-light-text: var(--dark);
+    --alert-light-border: rgb(170 178 189 / 50%);
+    --alert-dark-bg: rgb(18 21 30 / 25%);
+    --alert-dark-text: var(--light);
+    --alert-dark-border: rgb(18 21 30 / 50%);
+
+    /* BACK-TO-TOP */
+
+    --btt-bg: var(--red);
+    --btt-text: var(--yellow);
+    --btt-border: var(--alert-danger-border);
+    --btt-radius: 1rem;
+    --btt-shadow: var(--dark);
+
+    /* BLOCKQUOTES */
+
+    --blockquote-bg: rgb(56 66 94 / 50%);
+    --blockquote-color: var(--subdued);
+    --blockquote-border: rgb(56 66 94);
+    --blockquote-radius: .45rem;
+    --blockquote-highlight: var(--yellow);
+    --blockquote-shadow: var(--dark);
+
+    /* BORDERS */
+
+    --main-border-color: var(--secondary-bg);
+
+    /* BREADCRUMBS */
+
+    --crumb-bg: var(--tertiary-bg);
+    --crumb-color: var(--subdued);
+    --crumb-active-color: var(--red);
+    --crumb-link-color: var(--orange);
+    --crumb-hover-color: var(--red);
+
+    /* BUTTONS */
+
+    --btn-bg: rgb(210 0 0 / 50%);
+    --btn-text: var(--yellow);
+    --btn-border: rgb(210 0 0 / 25%);
+    --btn-radius: .45rem;
+    --btn-shadow: var(--dark);
+
+    /* CARDS */
+
+    --card-bg1: var(--secondary-bg);
+    --card-text1: var(--light);
+    --card-border1: rgb(56 66 94 / 50%);
+    --card-bg2: var(--tertiary-bg);
+    --card-text2: var(--light);
+    --card-border2: rgb(25 28 36 / 75%);
+    --card-bg3: var(--primary-bg);
+    --card-text3: var(--smoke);
+    --card-border3: rgb(33 37 41 / 75%);
+    --card-header-bg1: rgb(210 0 0 / 50%);
+    --card-header-text1: var(--white);
+    --card-header-bg2: var(--light);
+    --card-header-text2: var(--dark);
+    --card-header-bg3: var(--secondary-bg);
+    --card-header-text3: var(--light);
+    --card-border-radius: .45rem;
+    --card-box-shadow: var(--dark);
+
+    /* HORIZONTAL RULES */
+
+    --hr1: var(--secondary-bg);
+    --hr2: var(--tertiary-bg);
+    --hr3: var(--primary-bg);
+
+    // KBD
+    --kbd-bg: var(--secondary-bg);
+    --kbd-text: var(--light);
+    --kbd-wrap: var(--light);
+
+    /* LABEL */
+    --label-color: var(--light);
+
+    /* LINKS */
+
+    --link-color: var(--white);
+    --link-hover: var(--red);
+    --link-active: var(--orange);
+    --link-disabled: var(--subdued);
+
+    /* NAVBAR */
+
+    --navbar-bg: var(--secondary-bg);
+    --navbar-text: var(--smoke);
+    --navbar-muted: rgb(237 220 201 / 50%);
+    --navbar-shadow: var(--dark);
+    --navbar-link: var(--white);
+    --navbar-hover: var(--red);
+    --navbar-active: var(--orange);
+
+    /* NAVBAR - DROPDOWN */
+
+    --navbar-dd-bg: lighten(var(--secondary-bg), 50%);
+    --navbar-dd-text: var(--smoke);
+    --navbar-dd-muted: var(--navbar-muted);
+    --navbar-dd-border: lighten(var(--secondary-bg), 75%);
+    --navbar-dd-radius: .45rem;
+    --navbar-dd-shadow: var(--dark);
+    --navbar-dd-link: var(--white);
+    --navbar-dd-hover: var(--red);
+    --navbar-dd-active: var(--orange);
+    --navbar-dd-separator: var(--secondary-bg);
+    --navbar-search-bg: var(--secondary-bg);
+    --navbar-search-border: darken(var(--secondary-bg), 50%);
+    --navbar-search-icon: var(--subdued);
+    --navbar-search-focus: var(--secondary-bg);
+    --navbar-search-focus-border: var(--orange);
+    --navbar-search-focus-text: var(--orange);
+    --navbar-search-focus-icon: var(--orange);
+    --navbar-search-holder-text: var(--subdued);
+
+    /* SIDEBAR */
+
+    --sidebar-bg: var(--secondary-bg);
+    --sidebar-text: var(--light);
+    --sidebar-muted: var(--subdued);
+    --sidebar-link: var(--white);
+    --sidebar-hover: var(--red);
+    --sidebar-active: var(--orange);
+
+    /* TABLES */
+    --table-header-bg1: var(--primary-bg);
+    --table-header-bg2: var(--secondary-bg);
+    --table-header-text1: var(--white);
+    --table-header-text2: var(--white);
+    --table-row-bg1: lighten(var(--primary-bg), 100%);
+    --table-row-bg2: var(--primary-bg);
+    --table-row-text1: var(--light);
+    --table-row-text2: var(--light);
+    --table-row-hover1: var(--secondary-bg);
+    --table-row-hover2: var(--primary-bg);
+    --table-caption: var(--subdued);
+
+    /* TAGS */
+    --tag-bg: var(--primary-bg);
+    --tag-text: var(--light);
+    --tag-hover-bg: var(--primary-bg);
+    --tag-hover-border: var(--yellow);
+    --tag-muted: var(--subdued);
+    --tag-border: var(--secondary-bg);
+    --tag-shadow: var(--dark);
+    --tag-dash: var(--red);
+
+} /* dark-scheme */