jekyll-theme-backwhite 1.0.4 → 2.1.0

data/_sass/fontawesome/brands.scss

@@ -1,23 +1,23 @@
-/*!
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-brands-400.eot');
-  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
-}
-
-.fab {
-  font-family: 'Font Awesome 5 Brands';
-  font-weight: 400;
-}
+/*!
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-brands-400.eot');
+  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
+}
+
+.fab {
+  font-family: 'Font Awesome 5 Brands';
+  font-weight: 400;
+}

data/_sass/fontawesome/fontawesome.scss

@@ -1,16 +1,16 @@
-/*!
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'larger';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';
+/*!
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+@import 'mixins';
+@import 'core';
+@import 'larger';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'animated';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';

data/_sass/fontawesome/regular.scss

@@ -1,23 +1,23 @@
-/*!
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-regular-400.eot');
-  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
-}
-
-.far {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 400;
-}
+/*!
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-regular-400.eot');
+  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
+}
+
+.far {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 400;
+}

data/_sass/fontawesome/solid.scss

@@ -1,24 +1,24 @@
-/*!
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-solid-900.eot');
-  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
-  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
-}
-
-.fa,
-.fas {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-}
+/*!
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-solid-900.eot');
+  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
+  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
+}
+
+.fa,
+.fas {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}

data/_sass/fontawesome/v4-shims.scss

@@ -1,6 +1,6 @@
-/*!
- * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@import 'variables';
-@import 'shims';
+/*!
+ * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+@import 'shims';

data/_sass/jekyll-theme-backwhite.scss

@@ -12,4 +12,6 @@ $fa-font-path: "/assets/fonts";
 @import "jekyll-theme-backwhite/base";
 @import "jekyll-theme-backwhite/form";
 @import "jekyll-theme-backwhite/misc";
-@import "jekyll-theme-backwhite/syntax-highlighting";
+@import "jekyll-theme-backwhite/syntax-highlighting";
+@import "jekyll-theme-backwhite/post-index";
+@import "jekyll-theme-backwhite/links";

data/_sass/jekyll-theme-backwhite/_back.scss

@@ -7,7 +7,7 @@
      * how it's included in the document.
      * It is exactly what it says, the
      * z-axis position of the element */
-    z-index: -1;
+    z-index: 1;
 
     /* Back panel sizing. Fill vertically from
      * top to bottom. Horizontally, start at
@@ -16,6 +16,7 @@
     left: 0%;
     bottom: 0%;
     width: $desktop-menu-size;
+    max-width: 100%;
 
     // Styling
     background-color: $back-color;
@@ -55,16 +56,6 @@
         }
     }
 
-    // Links
-    .bw-links {
-        a {
-            text-decoration: none;
-            &:hover {
-                border-bottom: 1px solid;
-            }
-        }
-    }
-
     // Backwhite footer
     .bw-footer {
         color: darken($white-color, 25%);

data/_sass/jekyll-theme-backwhite/_base.scss

@@ -1,7 +1,6 @@
 body {
     font-family: $font-family;
     font-size: $normal-font-size;
-    overflow-x: hidden;
 }
 
 a {
@@ -13,27 +12,16 @@ a {
     }
 }
 
-h1,h2,h3,h4 {
-    color: $back-color;
-    margin: $spacing-unit 0pt;
-}
-h1 {
-    display: block;
-    font-size: $large-font-size;
-}
-h2 {
-    display: block;
-    font-size: $medium-font-size;
-}
-h3 {
-    display: block;
-    font-size: $medium-font-size;
-}
-p {
+h1,h2,h3,h4,h5,h6,p {
     display: block;
     margin-top: $spacing-unit;
     margin-bottom: $spacing-unit;
 }
+h1,h2,h3,h4,h5,h6 { color: $back-color; }
+p { font-size: $normal-font-size; }
+h1 { font-size: $mega-font-size; }
+h2,h3 { font-size: $large-font-size; }
+h4,h5,h6 { font-size: $medium-font-size; }
 
 ul {
     display: block;
@@ -101,6 +89,15 @@ blockquote {
 }
 
 img {
+    display: block;
+    margin: $spacing-unit auto;
     max-width: 100%;
     box-shadow: 0px 0pt 8pt darken($white-color, 33%);
+}
+
+figure {
+    display: block;
+    margin: 0pt;
+    margin-top: $spacing-unit;
+    margin-bottom: $spacing-unit;
 }

data/_sass/jekyll-theme-backwhite/_front.scss

@@ -1,15 +1,21 @@
 .bw-front {
+    // No transition
+    transition: none;
+
     // Positioning and sizing
     position: absolute;
     top: 0%;
     left: $desktop-menu-size;
     right: 0%;
     min-height: 100%;
+    &.slided {
+        left: $desktop-menu-size;
+    }
 
     /* Setting a z-index of 0 to so that
      * this is in front of the back layer
      * with a z-index of -1 (see _back.scss) */
-    z-index: 0;
+    z-index: 2;
 
     // Only vertical scrolling
     overflow-x: hidden;
@@ -24,11 +30,17 @@
 
     // Mobile
     @include on-mobile {
-        // Positioning
+        // Animated transition
+        transition: left 0.5s ease-in-out;
+
+        // Positioning and slide handling
         top: 0%;
         left: 0%;
         right: 0%;
-        margin-left: 0%;
+        min-width: 100%;
+        &.slided {
+            left: 100%;
+        }
     };
 
     // Container

data/_sass/jekyll-theme-backwhite/_links.scss

@@ -0,0 +1,25 @@
+// Links
+.bw-links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    a {
+        text-align: center;
+        display: inline-block;
+        text-decoration: none;
+        margin: $spacing-unit;
+    }
+}
+
+// Social
+.bw-social {
+    margin: $spacing-unit 0pt;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    a {
+        flex: 1;
+        text-align: center;
+        font-size: $back-icon-size;
+    }
+}

data/_sass/jekyll-theme-backwhite/_misc.scss

@@ -1,3 +1,73 @@
+.bw-app {
+    position: absolute;
+    display: block;
+    top: 0%;
+    left: 0%;
+    max-width: 100%;
+    width: 100%;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: visible;
+}
+
+.bw-full-back {
+    // Position
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    bottom: 0%;
+    right: 0%;
+
+    // Grid Layout
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    place-items: center;
+
+    // Coloring
+    background-color: $back-color;
+    color: $white-color;
+
+    // Container
+    .bw-full-back-container {
+        // Transform and sizing
+        transform: translateY(-25%);
+        max-width: 25%;
+        margin: 0pt $spacing-unit;
+
+        @include on-mobile {
+            max-width: 75%;
+        }
+
+        // Title
+        .bw-full-back-page-title {
+            padding: $spacing-unit 0pt;
+            color: $white-color;
+            border-bottom: 1px solid $white-color;
+        }
+
+        // Content
+        .bw-full-back-page-content {
+            margin: 2*$spacing-unit 0pt;
+        }
+
+        // Link
+        .bw-full-back-page-links {
+            display: flex;
+            flex-direction: row-reverse;
+            .bw-full-back-page-link {
+                @extend .bw-border-button;
+                border-color: $white-color !important;
+                padding: $spacing-unit/2 $spacing-unit !important;
+                &:hover {
+                    background-color: $white-color;
+                    color: black;
+                }
+            }
+        }
+    }
+}
+
 // Hide on desktop, show on mobile
 .bw-show-on-mobile {
     display: none;
@@ -6,27 +76,63 @@
     }
 }
 
+// Sizing
+.bw-mega { font-size: $mega-font-size; }
+.bw-large { font-size: $large-font-size; }
+.bw-medium { font-size: $medium-font-size; }
+.bw-normal { font-size: $normal-font-size; }
+.bw-small { font-size: $small-font-size; }
+
 // Basic header with action button availability
 .bw-header {
+    // Flex systme
     display: flex;
-    align-items: center;
-    border-bottom: 1px solid;
+    flex-direction: row;
+    align-items: stretch;
+
+    // Spacing and border
     margin: $spacing-unit 0pt;
+    border-bottom: 1px solid;
 
+    // Title button
     .bw-title {
         flex: 1;
         margin: 0;
-        font-size: $large-font-size;
         color: inherit;
     }
 
+    // Action button
     .bw-action {
         flex: 0;
-        background: none;
+        background-color: inherit;
         border: none;
         color: inherit;
-        padding: $spacing-unit/2;
-        margin: $spacing-unit/2;
+        padding: $spacing-unit;
+    }
+}
+
+// Front page header
+.bw-page-header {
+    @extend .bw-header;
+    align-items: center !important;
+
+    // Front header action
+    .bw-action {
+        @include cutout;
+        padding: $spacing-unit 4*$spacing-unit/3 !important;
+        background-color: $back-color !important;
+        color: $white-color !important;
+    }
+}
+
+// Content gutters
+.bw-content-gutters {
+    display: block;
+    max-width: $gutters-width;
+    margin-left: auto;
+    margin-right: auto;
+    @include on-tablet {
+        max-width: 100%;
     }
 }
 
@@ -56,6 +162,11 @@
     color: inherit;
     padding: $spacing-unit;
 }
+.bw-border-button {
+    @extend .bw-text-button;
+    border: 1px solid;
+    border-color: $back-color;
+}
 .bw-cutout-button {
     @include cutout;
     border: none;
@@ -74,10 +185,19 @@
         box-shadow: none;
     }
 }
+.bw-emph-button {
+    @extend .bw-cutout-button;
+}
 
 // Cutout section (appears as a recessed section that uses the back color)
 .bw-cutout {
     @include block-cutout;
+    .bw-border-button {
+        border-color: $white-color;
+    }
+    .bw-emph-button {
+        @extend .bw-raised-button;
+    }
 }
 
 // Wraps an element with a horizontal scroll bar