redeyed-jekyll-theme 0.1.2 → 0.1.5

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

@@ -1,6 +1,6 @@
-/*
- * DARK MODE THEME
- */
+//==================================================================
+// DARK MODE SCHEME
+//==================================================================
 
 @mixin dark-scheme {
 
@@ -20,7 +20,7 @@
     --black: #000000;
     --white: #FFFFFF;
     --smoke: #EDDCC9;
-    --darkslategray: #2F4F4F;
+    --darkslategray: #8d8d8d;
     --dodger-blue: #1E90FF;
     --cyan-cobalt: #1D58A5;
 
@@ -30,15 +30,15 @@
     --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;
+    --primary: #960000;
+    --secondary: #D26900;
+    --success: #2D9600;
+    --info: #1D58A5;
+    --warning: #D29600;
+    --danger: #D20000;
     --light: #AAB2BD;
     --dark: #12151E;
-    --bright: var(--white);
+    --bright: #FFFFFF;
     --subdued: #808080;
 
     /* FONTS */
@@ -51,30 +51,45 @@
 
     /* 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%);
+    --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 */
 
@@ -133,6 +148,11 @@
     --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);
@@ -163,6 +183,10 @@
     --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 */
 
@@ -199,7 +223,7 @@
     --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-bg1: var(--tertiary-bg);
     --table-row-bg2: var(--primary-bg);
     --table-row-text1: var(--light);
     --table-row-text2: var(--light);

data/_sass/theme/scheme-light.scss

@@ -1,6 +1,6 @@
-/*
- * LIGHT MODE THEME
- */
+//==================================================================
+// LIGHT MODE SCHEME
+//==================================================================
 
 @mixin light-scheme {
 
@@ -133,6 +133,11 @@
     --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);

data/_sass/theme/syntax-dark.scss

@@ -1,6 +1,6 @@
-/*
- * DARK SYNTAX HIGHLIGHTING
- */
+//==================================================================
+// DARK SYNTAX HIGHLIGHTING
+//==================================================================
 
 @mixin syntax-dark {
     /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */

data/_sass/theme/syntax-light.scss

@@ -1,6 +1,6 @@
-/*
- * The syntax light mode code snippet colors.
- */
+//==================================================================
+// LIGHT SYNTAX HIGHLIGHTING
+//==================================================================
 
 @mixin syntax-light {
     /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */

data/_sass/{addon → theme}/syntax.scss

@@ -1,9 +1,9 @@
-/*
- * SYNTAX HIGHLIGHTER
- */
+//==================================================================
+// SYNTAX HIGHLIGHTER
+//==================================================================
 
-@import "../theme/syntax-light";
-@import "../theme/syntax-dark";
+@import "syntax-light";
+@import "syntax-dark";
 
 html {
     @media (prefers-color-scheme: light) {

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; }
+}