jekyll-theme-eva 0.1.0

data/_plugins/values.rb

@@ -0,0 +1,14 @@
+module Jekyll
+  module ValuesFilter
+    def values(input)
+      case
+        when input.instance_of?(Hash)
+          input.values
+        else
+          input
+      end
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::ValuesFilter) 

data/_plugins/webpack.rb

@@ -0,0 +1,24 @@
+Jekyll::Hooks.register :site, :after_init do |site|
+  unless (File.file?("package.json") and File.directory?("node_modules"))
+    p "-- Eva: Initializing Node package…"
+
+    system("npm init --yes")
+    system("npm install webpack webpack-cli jquery")
+  end
+end
+
+Jekyll::Hooks.register :site, :post_write do |site|
+  p "-- Eva: Building assets with Webpack…"
+
+  if site.theme or site.config["theme_root"]
+    theme_dir = site.config["theme_root"] || site.theme.root
+  else
+    theme_dir = site.source
+  end
+
+  out_assets_dir = File.join(site.config["destination"], 'assets')
+  cfg_path = site.config["webpack_config"] || File.join(theme_dir, 'webpack.config.js')
+  system("npx webpack --config #{cfg_path} --context #{theme_dir} --output-path #{out_assets_dir}")
+
+  p "-- Eva: Build complete"
+end

data/_sass/buorg.scss

@@ -0,0 +1,47 @@
+.buorg-icon {width: 22px; height: 16px; vertical-align: middle; position: relative; top: -0.05em; display: inline-block; background: no-repeat 0px center;}
+.buorg {position:absolute;position:fixed;z-index:111111; width:100%; top:0px; left:0px; border-bottom:1px solid #A29330; text-align:center; cursor:pointer;   color:#000;     background-color: #fff8ea;    font: 18px Calibri,Helvetica,Arial,sans-serif;    box-shadow: 0 0 5px rgba(0,0,0,0.2);}.buorg-pad { padding: 9px;  line-height: 1.7em; }.buorg-buttons { display: block; text-align: center; }.buorg div a { color: #fff; text-decoration: none; box-shadow: 0 0 2px rgba(0,0,0,0.4); padding: 1px 10px; border-radius: 4px; font-weight: normal; background: #5ab400;    white-space: nowrap;    margin: 0 2px; display: inline-block;}#buorgig { background-color: #edbc68; position: relative;}@media only screen and (max-width: 700px){.buorg div { padding:5px 12px 5px 9px; line-height: 1.3em;}}@keyframes buorgfly {from {opacity:0;transform:translateY(-50px)} to {opacity:1;transform:translateY(0px)}}.buorg { animation: 1s ease-out 0s buorgfly} .buorg-fadeout {transition: visibility 0s 8.5s, opacity 8s ease-out .5s;}
+
+.buorg {
+    background-position: 8px 17px; 
+    position:absolute;
+    position:fixed;
+    z-index:111111;    
+    width:100%; 
+    top:0px; 
+    left:0px;    
+    border-bottom:1px solid #A29330;    
+    text-align:left; 
+    cursor:pointer;        
+    background-color: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,0.2);
+}
+.buorg div { 
+    padding: 11px 12px 11px 30px;  
+    line-height: 1.7em; 
+}
+.buorg div a,.buorg div a:visited { 
+    text-indent: 0; 
+    color: #fff;    
+    text-decoration: none;    
+    box-shadow: 0 0 2px rgba(0,0,0,0.4);    
+    padding: 1px 10px;    
+    border-radius: 4px;    
+    font-weight: normal;    
+    background: #5ab400;    
+    white-space: nowrap;   
+    margin: 0 2px; display: inline-block;
+}
+
+#buorgig{ 
+    background-color: #edbc68;
+}
+
+@media only screen and (max-width: 700px){
+.buorg div { 
+    padding:5px 12px 5px 9px; 
+    text-indent: 22px;
+    line-height: 1.3em;
+}
+.buorg {
+    background-position: 9px 8px;}
+}

data/_sass/jekyll-theme-eva.scss

@@ -0,0 +1,534 @@
+@import "buorg";
+
+$color-primary: #555 !default;
+$color-primary-darker: darken($color-primary, 15%) !default;
+$color-primary-album-bg: desaturate(darken($color-primary, 20%), 35%) !default;
+
+// Media query screen size breakpoints (bp), width (w) and height (h)
+$h-bp: 794px;
+$h-bp2: 1024px;
+$w-bp: 873px;
+
+
+@keyframes fade-in {
+    10% { opacity: 0; }
+    100% { opacity: 1; }
+}
+@keyframes fade-in-2 {
+    10% { opacity: 0; }
+    100% { opacity: 1; }
+}
+@keyframes fade-out {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@keyframes nav-hide-on-selection {
+    0% { opacity: 1; display: block }
+    90% { opacity: 0; display: block }
+    100% { opacity: 0; display: none; }
+}
+@keyframes nav-enlarge-selected {
+    0% { transform: scale(1) translateY(0); }
+    100% { transform: scale(1.5) translateY(-30px); }
+}
+@keyframes enlarge {
+    0% { transform: scale(0.9); }
+    100% { transform: scale(1); }
+}
+
+h1, h2, h3, h4, p {
+    margin: 0;
+    padding: 0;
+}
+
+a, a:link, a:hover, a:visited {
+    color: #FFFFFF;
+    text-decoration: none;
+}
+
+html {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+}
+body {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+
+    background: linear-gradient(180deg, rgba($color-primary, 0.67) -12.01%, $color-primary 104.49%);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    color: #fff;
+
+    font-family: "Barlow Condensed", "PT Sans Narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
+}
+body > main {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    min-height: 640px;
+
+    transition: background 6s ease-in-out;
+}
+
+
+.footer {
+    position: absolute;
+    width: 260px;
+    height: 86px;
+    left: calc(50% - 260px/2 + 30px);
+    bottom: 0;
+
+    opacity: 0;
+    animation: fade-in 1s both;
+    animation-delay: .5s;
+
+    body.layout-album & {
+        left: 86px;
+        opacity: 0;
+        animation: fade-in-2 1s forwards;
+        animation-delay: 2s;
+    }
+    body.out & {
+        animation: fade-out .3s forwards;
+    }
+
+    @media screen and (max-width: $w-bp) {
+        position: fixed;
+    }
+
+    > .social {
+        position: absolute;
+        left: 0%;
+        right: 33.85%;
+        top: 0%;
+        bottom: 61.63%;
+
+        > .ico {
+            width: 33px;
+            height: 33px;
+            display: inline-block;
+
+            .fa-layers {
+                > .fa-circle {
+                    color: rgba(255, 255, 255, 0.7);
+                }
+                > :not(.fa-circle) {
+                    color: $color-primary-darker;
+                }
+            }
+        }
+    }
+
+    > .legal {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 56.98%;
+        bottom: 0%;
+
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        font-size: 16px;
+
+        color: rgba(255, 255, 255, 0.5);
+    }
+}
+
+
+/* HOME */
+
+.home__header {
+    position: absolute;
+    height: 282px;
+    left: calc(50% - 199px/2 - 0.5px);
+    top: calc(50% - 282px/2 - 164px);
+    display: block;
+
+    @media screen and (max-height: $h-bp) {
+        top: calc(50% - 282px/2 - 104px);
+        height: 90px;
+    }
+
+    > .name {
+        height: 90px;
+        left: 0px;
+        right: 0px;
+        top: 0px;
+
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        font-size: 75px;
+
+        color: #F2F2F2;
+    }
+
+    > .tagline {
+        position: relative;
+        left: 17px;
+        top: 30px;
+        width: 83px;
+        height: 161px;
+
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        font-size: 28px;
+
+        color: #FFFFFF;
+
+        word-spacing: 83px; /* Wrap after every word */
+
+        @media screen and (max-height: $h-bp) {
+            word-spacing: unset;
+            width: auto;
+            height: auto;
+            top: 101px;
+            left: 0;
+        }
+    }
+
+    // Gets hidden when transitioning to album
+    body.out & {
+        animation: fade-out .3s forwards;
+    }
+}
+img.home__shadowything {
+    position: absolute;
+    width: 187px;
+    height: 542px;
+    left: calc(50% - 187px/2 - 244.5px);
+    top: calc(50% - 542px/2 - 118px);
+
+    mix-blend-mode: luminosity;
+
+    body.out & {
+        animation: fade-out 1s;
+    }
+
+    opacity: 0;
+    animation: fade-in-2 1s forwards;
+    animation-delay: .3s;
+}
+
+
+.home__nav {
+    position: absolute;
+    height: 255px;
+    left: calc(50% - 432px/2 + 116px);
+    top: calc(50% - 255px/2 + 139.5px);
+    transform-origin: top left;
+
+    display: flex;
+    flex-flow: row nowrap;
+
+    @media screen and (max-height: $h-bp) {
+        top: calc(50% - 255px/2 + 139.5px - 81px);
+    }
+    @media screen and (max-width: $w-bp) {
+        flex-flow: row wrap;
+        width: 250px;
+        height: auto;
+        position: relative;
+
+        margin-bottom: 150px;
+    }
+
+
+    > a.nav-item {
+        margin-right: 20px;
+        position: relative;
+        width: 211px;
+        height: 255px;
+
+        @media screen and (max-width: $w-bp) {
+            margin-bottom: 20px;
+        }
+
+        body.out &:not(.selected) {
+            animation: fade-out .2s forwards;
+        }
+        body.out &.selected {
+            animation: nav-enlarge-selected 1s ease-in-out, fade-out .6s forwards;
+        }
+
+        > .label {
+            position: absolute;
+            left: 0%;
+            right: 71.09%;
+            top: 88.63%;
+            bottom: 0%;
+
+            font-style: normal;
+            font-weight: normal;
+            line-height: normal;
+            font-size: 24px;
+
+            color: #FFFFFF;
+        }
+
+        > .icon {
+            mix-blend-mode: luminosity;
+            transition: mix-blend-mode .3s linear;
+        }
+
+        &.full-bleed {
+            > .backdrop {
+                position: absolute;
+                left: 0%;
+                right: 0%;
+                top: 0%;
+                bottom: 17.25%;
+
+                background: $color-primary-darker;
+            }
+            > .icon {
+                position: absolute;
+                left: 0%;
+                right: 0%;
+                top: 0%;
+                bottom: 17.25%;
+                width: 211px;
+                height: 211px;
+
+                mix-blend-mode: luminosity;
+            }
+        }
+
+        &.inset {
+            > .backdrop {
+                position: absolute;
+                left: 0%;
+                right: 0%;
+                top: 0%;
+                bottom: 17.25%;
+
+                background: $color-primary-darker;
+                box-shadow: inset 0px 4px 94px rgba(0, 0, 0, 0.15);
+            }
+            > .icon {
+                position: absolute;
+                width: 163px;
+                height: 161px;
+                left: 26px;
+                top: 27px;
+            }
+        }
+    }
+
+    > .nav-item:hover {
+        > .icon {
+            mix-blend-mode: normal;
+        }
+    }
+}
+
+
+/* ALBUM */
+
+body.layout-album {
+    overflow-y: hidden;
+}
+
+.album__artwork {
+    position: absolute;
+    left: calc(50% - 187px/2 - 244.5px + 187px);
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+
+    background: $color-primary-album-bg;
+    box-shadow: 0px 4.8px 120px rgba(0, 0, 0, 0.15);
+
+    min-width: 449px;
+    overflow-y: auto;
+
+    display: flex;
+
+    opacity: 0;
+
+    animation: fade-in .3s forwards, enlarge .3s forwards;
+    animation-delay: .4s;
+
+    @media screen and (max-width: $w-bp) {
+        position: relative;
+        left: 0;
+        right: 0;
+        top: 400px;
+        align-items: center;
+        width: auto;
+        min-width: 0;
+        padding: 20px 0;
+
+        margin-bottom: 150px;
+    }
+
+    body.out & {
+        animation: fade-out .3s forwards;
+    }
+
+    > .item {
+        display: inline-block;
+
+        opacity: 0;
+        animation: fade-in .3s both, enlarge .3s forwards;
+        animation-delay: .7s;
+    }
+
+    // Styles
+    &.full-bleed {
+        > .item img {
+            max-width: 100%;
+            margin: 0;
+            display: block;
+        }
+    }
+    &.inset {
+        padding: 139px 96px 119px 116px;
+    }
+    &.one-column {
+        flex-flow: column nowrap;
+        justify-content: flex-start;
+    }
+    &.multi-column {
+        flex-flow: row wrap;
+        justify-content: center;
+
+        > .item {
+            width: 211px;
+            height: 211px;
+            padding: 10px;
+            margin-right: 20px;
+            margin-bottom: 20px;
+            display: inline-block;
+
+            img {
+                max-width: 201px;
+                max-height: 201px;
+                width: auto;
+                height: auto;
+                display: block;
+            }
+        }
+    }
+}
+
+.album__header {
+
+    > .shadowything-top {
+        position: absolute;
+        width: 280px;
+        height: 167px;
+        left: 50px;
+        top: 20px;
+
+        mix-blend-mode: luminosity;
+
+        @media screen and (min-height: $h-bp2) {
+            top: calc(50% - 167px/2 - 408.5px);
+        }
+
+        opacity: 0;
+        animation: fade-in-2 .5s forwards;
+        animation-delay: .2s;
+
+        body.out & {
+            animation: fade-out .4s forwards;
+        }
+    }
+
+    > .brand {
+        position: absolute;
+        width: 242px;
+        height: 212px;
+        left: 88px;
+        top: 208px;
+
+        @media screen and (min-height: $h-bp2) {
+            top: calc(50% - 212px/2 - 198px);
+        }
+
+        > .author {
+            position: absolute;
+            width: 61.82px;
+            height: 119.91px;
+            left: 13.39px;
+            top: 0px;
+
+            font-style: normal;
+            font-weight: normal;
+            line-height: normal;
+            font-size: 20.8538px;
+
+            color: #FFFFFF;
+
+            z-index: 2;
+
+            a {
+                background-image: linear-gradient(to right, white 33%, rgba(255, 255, 255, 0) 0%);
+                background-position: bottom;
+                background-size: 3px 1px;
+                background-repeat: repeat-x;
+                padding-bottom: 2px;
+            }
+        }
+
+        > .album-title {
+            position: absolute;
+            width: 240px;
+            height: 68px;
+            left: 1px;
+            top: 10px;
+
+            font-style: normal;
+            font-weight: normal;
+            line-height: normal;
+            font-size: 56px;
+
+            color: #FFFFFF;
+
+            body.out & {
+                animation: fade-out .4s forwards;
+            }
+        }
+
+        > .album-desc {
+            position: absolute;
+            width: 236px;
+            height: 47px;
+            left: 13px;
+            top: 110px;
+
+            font-style: normal;
+            font-weight: normal;
+            line-height: normal;
+            font-size: 18px;
+
+            color: #FFFFFF;
+
+            body.out & {
+                animation: fade-out .4s forwards;
+            }
+        }
+    }
+}