redeyed-jekyll-theme 0.1.0 → 0.1.3

data/_sass/theme/common.scss

@@ -0,0 +1,98 @@
+//==================================================================
+// COMMON STYLES
+//==================================================================
+
+/* SOCIALS */
+$social-colors: (
+    facebook: rgb(59, 89, 152),
+    twitter: rgb(85, 172, 238),
+    instagram: rgb(172, 43, 172),
+    linkedin: rgb(0, 130, 202),
+    pinterest: rgb(198, 17, 24),
+    youtube: rgb(237, 48, 47),
+    github: rgb(51, 51, 51),
+    reddit: rgb(255, 69, 0),
+    slack: rgb(72, 20, 73),
+    dribble: rgb(236, 74, 137),
+    whatsapp: rgb(37, 211, 102),
+    tumblr: rgb(53, 70, 92)
+);
+
+body {
+    background: var(--primary-bg);
+    color: var(--text-color);
+    -webkit-font-smoothing: antialiased;
+    font-family: $font-family-base;
+    font-weight: $font-weight-base;
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+}
+
+
+//blockquote {
+//    border-left: 5px solid var(--blockquote-highlight);
+//    padding-left: 1rem;
+//    color: var(--blockquote-color);
+//
+//    &[class^="alert-"] {
+//        @extend %alert;
+//
+//        &::before {
+//            margin-right: 1rem;
+//            font-family: "Font Awesome 5 Free";
+//            text-align: center;
+//            width: 1.25rem;
+//        }
+//
+//        p:last-child { margin-bottom: 0; }
+//    }
+//
+//    @include alert("primary", "", 400);
+//
+//    @include alert("secondary", "");
+//
+//    @include alert("success", "");
+//
+//    @include alert("danger", "");
+//
+//    @include alert("warning", "");
+//
+//    @include alert("info", "");
+//
+//    @include alert("light", "");
+//
+//    @include alert("dark", "");
+//}
+//
+//mjx-container {
+//    overflow-x: auto;
+//    overflow-y: hidden;
+//}
+//
+//footer {
+//    @include pl-pr(1.5rem);
+//
+//    font-size: 0.8rem;
+//
+//    > div.d-flex {
+//        height: $footer-height;
+//        line-height: 1.2rem;
+//        padding-bottom: 1rem;
+//        border-top: 1px solid var(--main-border-color);
+//
+//        > div { width: 350px; }
+//    }
+//    a {
+//        @extend %text-color;
+//
+//        &:link { @include no-text-decoration; }
+//
+//        &:hover {
+//            @extend %link-hover;
+//            @include no-text-decoration;
+//        }
+//    }
+//
+//    .footer-right { text-align: right; }
+//}
+//

data/_sass/theme/mixins.scss

@@ -0,0 +1,103 @@
+//==================================================================
+// CUSTOM SCSS MODULES & MIXINS
+//==================================================================
+
+@import "../includes/components/mixins";
+
+//%tag-hover {
+//    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: 0.95rem;
+//    white-space: nowrap;
+//}
+//
+//%no-bottom-border { border-bottom: none; }
+//
+//%normal-font-style { font-style: normal; }
+//
+//
+//%sidebar-links {
+//    color: var(--sidebar-link);
+//    user-select: none;
+//}
+//
+//%alert {
+//    display: flex;
+//    border-left: 0;
+//    border-radius: 6px;
+//    padding: 0.75rem 1.2rem;
+//}
+//
+
+//@mixin align-center {
+//    position: relative;
+//    left: 50%;
+//    -webkit-transform: translateX(-50%);
+//    -ms-transform: translateX(-50%);
+//    transform: translateX(-50%);
+//}
+
+%clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+%clickable-transition { transition: color 0.35s ease-in-out; }
+
+%cursor { cursor: pointer; }
+
+%d-inline { display: inline !important; }
+%d-inline-block { display: inline-block !important; }
+%d-block { display: block !important; }
+%d-grid { display: grid !important; }
+%d-table { display: table !important; }
+%d-table-row { display: table-row !important; }
+%d-table-cell { display: table-cell !important; }
+%d-flex { display: flex !important; }
+%d-inline-flex { display: inline-flex !important; }
+%d-none { display: none !important; }
+
+%justify-content-start { justify-content: flex-start !important; }
+%justify-content-end { justify-content: flex-end !important; }
+%justify-content-center { justify-content: center !important; }
+%justify-content-between { justify-content: space-between !important; }
+%justify-content-around { justify-content: space-around !important; }
+%justify-content-evenly { justify-content: space-evenly !important; }
+
+%no-cursor { user-select: none; }
+
+%no-text-decoration { text-decoration: none; }
+
+%overflow-auto { overflow: auto !important; }
+%overflow-hidden { overflow: hidden !important; }
+%overflow-visible { overflow: visible !important; }
+%overflow-scroll { overflow: scroll !important; }
+
+@mixin mt-mb($value) {
+    margin-top: $value;
+    margin-bottom: $value;
+}
+
+@mixin ml-mr($value) {
+    margin-left: $value;
+    margin-right: $value;
+}
+
+@mixin pt-pb($value) {
+    padding-top: $value;
+    padding-bottom: $value;
+}
+
+@mixin pl-pr($value) {
+    padding-left: $value;
+    padding-right: $value;
+}
+
+@mixin relative-font-size($ratio) { font-size: $font-size-base * $ratio; }
+

data/_sass/theme/scheme-brew.scss

@@ -0,0 +1,3 @@
+//==================================================================
+// HOMEBREW SCHEME
+//==================================================================

data/_sass/theme/scheme-dark.scss

@@ -0,0 +1,244 @@
+//==================================================================
+// DARK MODE SCHEME
+//==================================================================
+
+@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: #8d8d8d;
+    --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: #960000;
+    --secondary: #D26900;
+    --success: #2D9600;
+    --info: #1D58A5;
+    --warning: #D29600;
+    --danger: #D20000;
+    --light: #AAB2BD;
+    --dark: #12151E;
+    --bright: #FFFFFF;
+    --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: linear-gradient(180deg, rgba(210,0,0,0.75) 0%, rgba(150,0,0,0.75) 100%);
+    --alert-primary-icon: var(--red);
+    --alert-primary-text: var(--smoke);
+    --alert-primary-border: var(--primary);
+
+    --alert-secondary-bg:  linear-gradient(180deg, rgba(210,105,0,0.75) 0%, rgba(105,53,0,0.75) 100%);
+    --alert-secondary-icon: var(--yellow);
+    --alert-secondary-text: var(--smoke);
+    --alert-secondary-border: var(--secondary);
+
+    --alert-success-bg: linear-gradient(180deg, rgba(60,210,0,0.75) 0%, rgba(30,105,0,0.75) 100%);
+    --alert-success-icon: var(--green);
+    --alert-success-text: var(--smoke);
+    --alert-success-border: var(--success);
+
+    --alert-danger-bg: linear-gradient(180deg, rgba(210,0,0,0.75) 0%, rgba(105,0,0,0.75) 100%);
+    --alert-danger-icon: var(--red);
+    --alert-danger-text: var(--smoke);
+    --alert-danger-border: var(--danger);
+
+    --alert-warning-bg: linear-gradient(180deg, rgba(210,180,0,0.75) 0%, rgba(105,90,0,0.75) 100%);
+    --alert-warning-icon: var(--yellow);
+    --alert-warning-text: var(--smoke);
+    --alert-warning-border: var(--warning);
+
+    --alert-info-bg: linear-gradient(180deg, rgba(29,88,165,0.75) 0%, rgba(15,44,83,0.75) 100%);
+    --alert-info-icon: var(--blue);
+    --alert-info-text: var(--smoke);
+    --alert-info-border: var(--info);
+
+    --alert-light-bg: linear-gradient(180deg, rgba(170,178,189,0.75) 0%, rgba(85,89,95,0.75) 100%);
+    --alert-light-icon: var(--dark);
+    --alert-light-text: var(--primary-bg);
+    --alert-light-border: var(--light);
+
+    --alert-dark-bg: linear-gradient(180deg, rgba(18,21,30,0.75) 0%, rgba(9,11,15,0.75) 100%);
+    --alert-dark-icon: var(--light);
+    --alert-dark-text: var(--smoke);
+    --alert-dark-border: var(--dark);
+
+    /* 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);
+
+    /* COMPONENTS */
+
+    --component-active-color: var(--orange);
+    --component-active-bg: var(--primary-bg);
+
+    /* 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-brand-color: var(--smoke);
+    --navbar-brand-hover: var(--red);
+    --navbar-toggler-color: var(--smoke);
+    --navbar-toggler-border: var(--secondary-bg);
+
+    /* 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: var(--tertiary-bg);
+    --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 */

data/_sass/theme/scheme-light.scss

@@ -0,0 +1,225 @@
+//==================================================================
+// LIGHT MODE SCHEME
+//==================================================================
+
+@mixin light-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);
+
+    /* COMPONENTS */
+
+    --component-active-color: var(--orange);
+    --component-active-bg: var(--primary-bg);
+
+    /* 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 */