@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; height: 86px; left: calc(50% - 260px/2 + 30px); bottom: 0; right: 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: 10px; 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; position: relative; align-content: flex-start; // Below ensures offset from the bottom edge of the viewport. // margin-bottom with height: auto works for Chrome, // while Firefox and Safari require height set explicitly. // This height accounts for fixed number of two albums. height: auto; margin-bottom: 150px; height: 700px; } > 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; } } }
}