Add files via upload
This commit is contained in:
Gorri
@@ -0,0 +1,243 @@
|
||||
///
|
||||
/// Massively by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
@include color(alt);
|
||||
@include vendor('display', 'flex');
|
||||
background-color: _palette(alt, bg);
|
||||
color: _palette(fg-light);
|
||||
cursor: default;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: calc(100% - #{_size(padding) * 2});
|
||||
max-width: _size(wrapper);
|
||||
z-index: 2;
|
||||
|
||||
> section {
|
||||
@include vendor('flex-basis', '50%');
|
||||
@include vendor('flex-grow', '1');
|
||||
@include vendor('flex-shrink', '1');
|
||||
@include padding((_size(padding) * 2), (_size(padding) * 2));
|
||||
border-left: solid 2px _palette(alt, border);
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&.split {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
padding: 0;
|
||||
|
||||
> section {
|
||||
@include padding((_size(padding) * 2) - 1, (_size(padding) * 2));
|
||||
border-top: solid 2px _palette(alt, border);
|
||||
|
||||
&:first-child {
|
||||
@include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (_size(padding), 0, 0, 0));
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (0, 0, _size(padding), 0));
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
> section {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('align-items', 'center');
|
||||
padding: (_size(padding) * 1.575) (_size(padding) * 2);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
@include vendor('flex-shrink', '0');
|
||||
@include vendor('flex-grow', '0');
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
@include vendor('flex-shrink', '1');
|
||||
@include vendor('flex-grow', '1');
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding: (_size(padding) * 2) (_size(padding) * 2) ((_size(padding) * 2) - 1) (_size(padding) * 2);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: ((_size(padding) * 2) - 1) (_size(padding) * 2) (_size(padding) * 2) (_size(padding) * 2);
|
||||
}
|
||||
|
||||
&.alt {
|
||||
@include vendor('align-items', 'flex-start');
|
||||
|
||||
> :last-child {
|
||||
margin-top: -0.325rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form label,
|
||||
h3,
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
display: block;
|
||||
|
||||
> section {
|
||||
border-top: solid 2px _palette(alt, border);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&.split {
|
||||
> section {
|
||||
@include padding((_size(padding) * 2), (_size(padding) * 2));
|
||||
|
||||
&:first-child {
|
||||
@include padding((_size(padding) * 2), (_size(padding) * 2));
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include padding((_size(padding) * 2), (_size(padding) * 2));
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
> section {
|
||||
padding: (_size(padding) * 2);
|
||||
|
||||
&:first-child {
|
||||
padding: (_size(padding) * 2);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: (_size(padding) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form label,
|
||||
h3,
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
> section {
|
||||
@include padding((_size(padding) * 1), (_size(padding) * 1));
|
||||
|
||||
&.split {
|
||||
> section {
|
||||
@include padding((_size(padding) * 1), (_size(padding) * 1));
|
||||
|
||||
&:first-child {
|
||||
@include padding((_size(padding) * 1), (_size(padding) * 1));
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include padding((_size(padding) * 1), (_size(padding) * 1));
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
> section {
|
||||
padding: (_size(padding) * 1);
|
||||
|
||||
&:first-child {
|
||||
padding: (_size(padding) * 1);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: (_size(padding) * 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#copyright {
|
||||
@include color-typography(invert);
|
||||
position: relative;
|
||||
color: transparentize(_palette(invert, fg), 0.75);
|
||||
cursor: default;
|
||||
font-family: _font(family-heading);
|
||||
font-size: 0.8rem;
|
||||
font-weight: _font(weight-heading);
|
||||
letter-spacing: 0.075em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin: (_size(padding) * 2) auto (_size(padding) * 4) auto;
|
||||
width: calc(100% - #{_size(padding) * 2});
|
||||
max-width: _size(wrapper);
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
border-left: solid 2px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-left: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
margin: (_size(padding) * 2) auto;
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
ul {
|
||||
li {
|
||||
border-left: 0;
|
||||
margin: 1rem 0 0 0;
|
||||
padding-left: 0;
|
||||
display: block;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
///
|
||||
/// Massively by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
@include color-typography(invert);
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('justify-content', 'flex-end');
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('user-select', 'none');
|
||||
height: 20rem;
|
||||
padding-bottom: (_size(padding) * 4);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
|
||||
.logo {
|
||||
@include vendor('transition', (
|
||||
'border-color #{_duration(transition)} ease-in-out',
|
||||
'color #{_duration(transition)} ease-in-out',
|
||||
'opacity 0.5s ease',
|
||||
'transform 0.5s ease',
|
||||
'visibility 0.5s'
|
||||
));
|
||||
@include vendor('pointer-events', 'auto');
|
||||
border-style: solid;
|
||||
border-color: _palette(invert, border);
|
||||
border-width: 5px !important;
|
||||
font-family: _font(family-heading);
|
||||
font-size: 2.25rem;
|
||||
font-weight: _font(weight-heading);
|
||||
letter-spacing: 0.075em;
|
||||
line-height: 1;
|
||||
padding: 1rem 1.75rem;
|
||||
text-transform: uppercase;
|
||||
visibility: visible;
|
||||
|
||||
&:hover {
|
||||
border-color: _palette(invert, accent) !important;
|
||||
color: _palette(invert, accent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
height: 14rem;
|
||||
padding-bottom: (_size(padding) * 2);
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
padding-bottom: (_size(padding) * 1.5);
|
||||
|
||||
.logo {
|
||||
font-size: 1.75rem;
|
||||
border-width: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
///
|
||||
/// Massively by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Intro */
|
||||
|
||||
#intro {
|
||||
@include color-typography(invert);
|
||||
@include color-button(invert);
|
||||
@include padding(_size(padding) * 4, _size(padding) * 2);
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('justify-content', 'flex-end');
|
||||
@include vendor('transition', (
|
||||
'opacity 1s ease',
|
||||
'transform 1s ease'
|
||||
));
|
||||
position: relative;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
|
||||
h1 {
|
||||
font-size: 7rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
font-style: italic;
|
||||
margin-top: -0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& + #header {
|
||||
margin-top: -20rem;
|
||||
|
||||
.logo {
|
||||
@include vendor('transform', 'translateY(2rem)');
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transform', 'translateY(2rem)');
|
||||
@include vendor('transition', (
|
||||
'opacity 0.5s ease',
|
||||
'transform 0.5s ease',
|
||||
'visibility 0.5s'
|
||||
));
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
& + #header {
|
||||
.logo {
|
||||
@include vendor('transform', 'translateY(0)');
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.is-preload & {
|
||||
@include vendor('transform', 'translateY(2rem)');
|
||||
opacity: 0;
|
||||
|
||||
&:not(.hidden) {
|
||||
& + #header + #nav {
|
||||
@include vendor('transform', 'translateY(4rem)');
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
@include padding(_size(padding) * 2, _size(padding) * 2);
|
||||
min-height: 90vh;
|
||||
|
||||
p {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + #header {
|
||||
margin-top: -14rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
@include padding(_size(padding) * 1.5, _size(padding) * 1);
|
||||
min-height: 5vh;
|
||||
|
||||
h1 {
|
||||
font-size: 3.25rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: _size(element-margin) * 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0,2rem;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
///
|
||||
/// Massively by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
background-color: _palette(bg);
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: calc(100% - #{_size(padding) * 2});
|
||||
max-width: _size(wrapper);
|
||||
z-index: 2;
|
||||
|
||||
> * {
|
||||
@include padding((_size(padding) * 2), (_size(padding) * 2));
|
||||
border-top: solid 2px _palette(border);
|
||||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .post {
|
||||
@include padding((_size(padding) * 4), (_size(padding) * 4));
|
||||
|
||||
header {
|
||||
&.major {
|
||||
> .date {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
> h1, h2 {
|
||||
font-size: 4rem;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.featured {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
@include padding((_size(padding) * 3), (_size(padding) * 2));
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
@include padding((_size(padding) * 2), (_size(padding) * 1));
|
||||
|
||||
header {
|
||||
&.major {
|
||||
> .date {
|
||||
margin-top: -1rem;
|
||||
margin-bottom: _size(element-margin);
|
||||
}
|
||||
|
||||
> h1, h2 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 (_size(element-margin) * 0.75) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .posts {
|
||||
@include fixed-grid((
|
||||
columns: 2,
|
||||
gutters: (_size(padding) * 4),
|
||||
horizontal-align: center,
|
||||
vertical-align: flex-start,
|
||||
flush: false
|
||||
));
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
> article {
|
||||
border-color: _palette(border);
|
||||
border-left-width: 2px;
|
||||
border-style: solid;
|
||||
border-top-width: 2px;
|
||||
text-align: center;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2n - 1) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:nth-child(-n + 2) {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
@include fixed-grid-resize((
|
||||
columns: 2,
|
||||
gutters: (_size(padding) * 2.5),
|
||||
flush: false
|
||||
));
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
@include fixed-grid-resize((
|
||||
columns: 1,
|
||||
gutters: (_size(padding) * 2),
|
||||
prev-columns: 2,
|
||||
flush: false
|
||||
));
|
||||
|
||||
> article {
|
||||
&:nth-child(2n - 1) {
|
||||
border-left-width: 2px;
|
||||
}
|
||||
|
||||
&:nth-child(-n + 2) {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
&:nth-child(n) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:nth-child(-n + 1) {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 25rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
> * {
|
||||
@include padding((_size(padding) * 1), (_size(padding) * 1));
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
///
|
||||
/// Massively by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Nav */
|
||||
|
||||
#nav {
|
||||
@include color-list(invert);
|
||||
@include color-typography(invert);
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('transition', (
|
||||
'transform 1s ease',
|
||||
'opacity 1s ease'
|
||||
));
|
||||
background: rgba(255,255,255,0.175);
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
margin: -4rem auto 0 auto;
|
||||
overflow: hidden;
|
||||
padding: 0 2rem 0 0;
|
||||
position: relative;
|
||||
width: calc(100% - #{_size(padding) * 2});
|
||||
max-width: _size(wrapper);
|
||||
z-index: 2;
|
||||
|
||||
ul {
|
||||
&.links {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-grow', '1');
|
||||
@include vendor('flex-shrink', '1');
|
||||
font-family: _font(family-heading);
|
||||
font-weight: _font(weight-heading);
|
||||
letter-spacing: 0.075em;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
|
||||
a {
|
||||
@include vendor('transition', (
|
||||
'background-color #{_duration(transition)} ease-in-out',
|
||||
'color #{_duration(transition)} ease-in-out'
|
||||
));
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
outline: none;
|
||||
padding: 0 2rem;
|
||||
|
||||
&:hover {
|
||||
color: inherit !important;
|
||||
background-color: transparentize(_palette(invert, fg), 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: _palette(invert, fg);
|
||||
|
||||
a {
|
||||
color: _palette(invert, bg);
|
||||
|
||||
&:hover {
|
||||
color: _palette(invert, accent) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.icons {
|
||||
@include vendor('flex-grow', '0');
|
||||
@include vendor('flex-shrink', '0');
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
///
|
||||
/// Massively by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Nav Panel */
|
||||
|
||||
#navPanelToggle {
|
||||
@include icon;
|
||||
@include vendor('transition', (
|
||||
'color #{_duration(transition)} ease-in-out',
|
||||
'background-color #{_duration(transition)} ease-in-out',
|
||||
'box-shadow #{_duration(transition)} ease-in-out'
|
||||
));
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
border: 0;
|
||||
color: _palette(invert, fg-bold);
|
||||
font-family: _font(family-heading);
|
||||
font-size: 0.9rem;
|
||||
font-weight: _font(weight-heading);
|
||||
letter-spacing: 0.075em;
|
||||
padding: 0.375rem 1.25rem;
|
||||
text-transform: uppercase;
|
||||
z-index: _misc(z-index-base) + 1;
|
||||
|
||||
&:before {
|
||||
content: '\f0c9';
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.alt {
|
||||
background-color: transparentize(_palette(bg), 0.125);
|
||||
box-shadow: 0 0.125rem 0.75rem 0 transparentize(_palette(invert, bg), 0.75);
|
||||
color: _palette(fg-bold);
|
||||
|
||||
&:hover {
|
||||
background-color: _palette(bg);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#navPanel {
|
||||
@include vendor('transform', 'translateX(20rem)');
|
||||
@include vendor('transition', ('transform #{_duration(menu)} ease', 'box-shadow #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
|
||||
display: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: _palette(bg);
|
||||
box-shadow: none;
|
||||
color: _palette(fg-bold);
|
||||
height: 100%;
|
||||
max-width: 80%;
|
||||
overflow-y: auto;
|
||||
padding: 3rem 2rem;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
width: 20rem;
|
||||
z-index: _misc(z-index-base) + 2;
|
||||
|
||||
.links {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
border-top: solid 2px _palette(border);
|
||||
|
||||
a {
|
||||
border-bottom: 0;
|
||||
display: block;
|
||||
font-family: _font(family-heading);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: _font(weight-heading);
|
||||
letter-spacing: 0.075em;
|
||||
padding: 0.75rem 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
@include icon;
|
||||
@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
border: 0;
|
||||
color: _palette(fg-light);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 3.25rem;
|
||||
line-height: 3.25rem;
|
||||
padding-right: 1.25rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
vertical-align: middle;
|
||||
width: 7rem;
|
||||
|
||||
&:before {
|
||||
content: '\f00d';
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: _palette(fg-bold);
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
padding: 2.5rem 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
body.is-navPanel-visible {
|
||||
#wrapper {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#navPanel {
|
||||
@include vendor('transform', 'translateX(0)');
|
||||
box-shadow: 0 0 1.5rem 0 rgba(0,0,0,0.2);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
///
|
||||
/// Massively by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Wrapper */
|
||||
|
||||
#wrapper {
|
||||
@include vendor('transition', 'opacity #{_duration(menu)} ease');
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
>.bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: _palette(wrapper-bg);
|
||||
background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../../images/bg.jpg');
|
||||
background-size: auto, auto, 100% auto;
|
||||
background-position: center, center, top center;
|
||||
background-repeat: repeat, no-repeat, no-repeat;
|
||||
background-attachment: scroll, scroll, scroll;
|
||||
z-index: -1;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
&.fade-in {
|
||||
&:before {
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transition', 'opacity 1s ease-in-out');
|
||||
@include vendor('transition-delay', '0.75s');
|
||||
background: _palette(invert, bg);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.is-preload & {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include orientation(portrait) {
|
||||
>.bg {
|
||||
background-size: auto, auto, auto 175%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user