Adapt paradigm shift to 60/40 layout
This commit is contained in:
101
assets/sass/components/_actions.scss
Normal file
101
assets/sass/components/_actions.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Actions */
|
||||
|
||||
ul.actions {
|
||||
@include vendor('display', 'flex');
|
||||
cursor: default;
|
||||
list-style: none;
|
||||
margin-left: (_size(element-margin) * -0.5);
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding: 0 0 0 (_size(element-margin) * 0.5);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.special {
|
||||
@include vendor('justify-content', 'center');
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.stacked {
|
||||
@include vendor('flex-direction', 'column');
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
padding: (_size(element-margin) * 0.65) 0 0 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fit {
|
||||
width: calc(100% + #{_size(element-margin) * 0.5});
|
||||
|
||||
li {
|
||||
@include vendor('flex-grow', '1');
|
||||
@include vendor('flex-shrink', '1');
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.stacked {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
&:not(.fixed) {
|
||||
@include vendor('flex-direction', 'column');
|
||||
margin-left: 0;
|
||||
width: 100% !important;
|
||||
|
||||
li {
|
||||
@include vendor('flex-grow', '1');
|
||||
@include vendor('flex-shrink', '1');
|
||||
padding: (_size(element-margin) * 0.5) 0 0 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button,
|
||||
.button {
|
||||
width: 100%;
|
||||
|
||||
&.icon {
|
||||
&:before {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
31
assets/sass/components/_arrow.scss
Normal file
31
assets/sass/components/_arrow.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Arrow */
|
||||
|
||||
a.arrow {
|
||||
border-bottom: 0;
|
||||
display: inline-block;
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
width: 6rem;
|
||||
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512"><path d="M442.53,346.28L293.65,495.16c-0.33,0.33-0.7,0.62-1.05,0.94c-9.16,9.77-22.15,15.9-36.6,15.9 c-14.44,0-27.43-6.13-36.59-15.88c-0.35-0.33-0.72-0.62-1.06-0.96L69.47,346.28c-19.62-19.62-19.62-51.44,0-71.05 c19.62-19.62,51.43-19.62,71.06,0l65.23,65.23V50.24C205.76,22.5,228.25,0,256,0s50.24,22.5,50.24,50.24v290.21l65.23-65.23 c19.62-19.62,51.43-19.62,71.05,0C462.15,294.84,462.15,326.66,442.53,346.28z" fill="#{_palette(fg-bold)}" /></svg>');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
24
assets/sass/components/_box.scss
Normal file
24
assets/sass/components/_box.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Box */
|
||||
|
||||
.box {
|
||||
border: solid 2px _palette(border);
|
||||
border-radius: _size(border-radius);
|
||||
margin-bottom: _size(element-margin);
|
||||
padding: 1.5rem;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.alt {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
115
assets/sass/components/_button.scss
Normal file
115
assets/sass/components/_button.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Button */
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button,
|
||||
.button {
|
||||
@include vendor('appearance', 'none');
|
||||
@include vendor('transition', (
|
||||
'background-color #{_duration(transition)} ease-in-out',
|
||||
'box-shadow #{_duration(transition)} ease-in-out',
|
||||
'color #{_duration(transition)} ease-in-out'
|
||||
));
|
||||
background-color: transparent;
|
||||
border-radius: _size(border-radius);
|
||||
border: 0;
|
||||
box-shadow: inset 0 0 0 2px _palette(border);
|
||||
color: _palette(fg-bold) !important;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: _font(family-heading);
|
||||
font-size: 0.6rem;
|
||||
font-weight: _font(weight-heading-light);
|
||||
height: (_size(element-height) * 1);
|
||||
letter-spacing: _font(kerning-heading);
|
||||
line-height: (_size(element-height) * 1);
|
||||
padding: 0 2rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 2px _palette(accent-alt);
|
||||
color: _palette(accent-alt) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: _palette(accent-bg);
|
||||
box-shadow: inset 0 0 0 2px _palette(accent-alt);
|
||||
color: _palette(accent-alt) !important;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 0.5rem;
|
||||
height: _size(element-height) * 0.75;
|
||||
line-height: _size(element-height) * 0.75;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: 0.7rem;
|
||||
height: _size(element-height) * 1.0875;
|
||||
line-height: _size(element-height) * 1.0875;
|
||||
padding: 0 3.25rem;
|
||||
}
|
||||
|
||||
&.wide {
|
||||
min-width: 13rem;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
&:before {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.fit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
@include vendor('pointer-events', 'none');
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: _palette(accent);
|
||||
box-shadow: none;
|
||||
color: _palette(fg-bold) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: saturate(lighten(_palette(accent), 15), 10);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: desaturate(darken(_palette(accent), 3), 10);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
font-size: 0.7rem;
|
||||
height: (_size(element-height) * 1.1);
|
||||
line-height: (_size(element-height) * 1.1);
|
||||
|
||||
&.large {
|
||||
font-size: 0.8rem;
|
||||
height: _size(element-height) * 1.25;
|
||||
line-height: _size(element-height) * 1.25;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 0.6rem;
|
||||
height: (_size(element-height) * 1);
|
||||
line-height: (_size(element-height) * 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
60
assets/sass/components/_feature-icons.scss
Normal file
60
assets/sass/components/_feature-icons.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Feature Icons */
|
||||
|
||||
ul.feature-icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: (_size(element-margin) * 1.5) 0;
|
||||
padding-left: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: (_size(element-margin) * 1.25) 0 0 0;
|
||||
padding: 0.5rem 0 0 4.5rem;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
|
||||
&:before {
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512"><path d="M256,0l221.7,128v256L256,512L34.3,384V128L256,0z" fill="#{_palette(border-bg)}" /></svg>');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
color: _palette(fg-bold);
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
height: 3.25rem;
|
||||
left: 0;
|
||||
line-height: 3.25rem;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 3.25rem;
|
||||
}
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
margin: 0 0 (_size(element-margin) * 1.5) 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: (_size(element-margin) * 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
269
assets/sass/components/_form.scss
Normal file
269
assets/sass/components/_form.scss
Normal file
@@ -0,0 +1,269 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Form */
|
||||
|
||||
form {
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> .fields {
|
||||
$gutter: _size(form-gutter);
|
||||
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
|
||||
width: calc(100% + #{$gutter * 2});
|
||||
|
||||
> .field {
|
||||
@include vendor('flex-grow', '0');
|
||||
@include vendor('flex-shrink', '0');
|
||||
padding: $gutter 0 0 $gutter;
|
||||
width: calc(100% - #{$gutter * 1});
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.half {
|
||||
width: calc(50% - #{$gutter * 0.5});
|
||||
}
|
||||
|
||||
&.third {
|
||||
width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
|
||||
}
|
||||
|
||||
&.quarter {
|
||||
width: calc(25% - #{$gutter * 0.25});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
> .fields {
|
||||
$gutter: (_size(element-margin) * 0.75);
|
||||
|
||||
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
|
||||
width: calc(100% + #{$gutter * 2});
|
||||
|
||||
> .field {
|
||||
padding: $gutter 0 0 $gutter;
|
||||
width: calc(100% - #{$gutter * 1});
|
||||
|
||||
&.half {
|
||||
width: calc(100% - #{$gutter * 1});
|
||||
}
|
||||
|
||||
&.third {
|
||||
width: calc(100% - #{$gutter * 1});
|
||||
}
|
||||
|
||||
&.quarter {
|
||||
width: calc(100% - #{$gutter * 1});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
select,
|
||||
textarea {
|
||||
@include vendor('appearance', 'none');
|
||||
border-radius: _size(border-radius);
|
||||
border: solid 2px _palette(border);
|
||||
color: inherit;
|
||||
display: block;
|
||||
outline: 0;
|
||||
padding: 0 1rem;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
&:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: _palette(accent-alt);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: _palette(fg-bold);
|
||||
display: block;
|
||||
font-family: _font(family-heading);
|
||||
font-size: 0.75rem;
|
||||
font-weight: _font(weight-heading-light);
|
||||
letter-spacing: _font(kerning-heading);
|
||||
line-height: 1.75;
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="url"] {
|
||||
height: _size(element-height);
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
|
||||
background-position: calc(100% - 1rem) center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.25rem;
|
||||
height: _size(element-height);
|
||||
padding-right: _size(element-height);
|
||||
text-overflow: ellipsis;
|
||||
|
||||
option {
|
||||
background-color: _palette(bg);
|
||||
color: _palette(fg);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::-ms-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"], {
|
||||
@include vendor('appearance', 'none');
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: -2rem;
|
||||
opacity: 0;
|
||||
width: 1rem;
|
||||
z-index: -1;
|
||||
|
||||
& + label {
|
||||
@include icon(false, solid);
|
||||
color: _palette(fg);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: _font(family);
|
||||
font-size: 1rem;
|
||||
font-weight: _font(weight);
|
||||
letter-spacing: _font(kerning);
|
||||
padding-left: (_size(element-height) * 0.6) + 0.875rem;
|
||||
padding-right: 0.875rem;
|
||||
position: relative;
|
||||
text-transform: none;
|
||||
|
||||
&:before {
|
||||
border-radius: _size(border-radius);
|
||||
border: solid 2px _palette(border);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
height: (_size(element-height) * 0.75);
|
||||
left: 0;
|
||||
line-height: (_size(element-height) * 0.75);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: (_size(element-height) * -0.05);
|
||||
width: (_size(element-height) * 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
&:before {
|
||||
content: '\f00c';
|
||||
background-color: _palette(accent);
|
||||
border-color: _palette(accent);
|
||||
color: _palette(bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus + label {
|
||||
&:before {
|
||||
border-color: _palette(accent);
|
||||
box-shadow: 0 0 0 1px _palette(accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
& + label {
|
||||
&:before {
|
||||
border-radius: _size(border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
& + label {
|
||||
&:before {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1.0;
|
||||
color: _palette(fg-light) !important;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
opacity: 1.0;
|
||||
color: _palette(fg-light) !important;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
opacity: 1.0;
|
||||
color: _palette(fg-light) !important;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
opacity: 1.0;
|
||||
color: _palette(fg-light) !important;
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
label {
|
||||
font-size: 0.675rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
& + label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xxsmall') {
|
||||
label {
|
||||
font-size: 0.675rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
& + label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
236
assets/sass/components/_gallery.scss
Normal file
236
assets/sass/components/_gallery.scss
Normal file
@@ -0,0 +1,236 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Gallery */
|
||||
|
||||
@include keyframes('gallery-modal-spinner') {
|
||||
0% {
|
||||
@include vendor('transform', 'rotate(0deg)');
|
||||
}
|
||||
|
||||
100% {
|
||||
@include vendor('transform', 'rotate(360deg)');
|
||||
}
|
||||
}
|
||||
|
||||
.gallery {
|
||||
$gutter: _size(gallery-gutter);
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: ($gutter * -1) 0 0 ($gutter * -1);
|
||||
width: calc(100% + #{$gutter});
|
||||
|
||||
a {
|
||||
border-bottom: 0;
|
||||
display: block;
|
||||
margin: $gutter 0 0 $gutter;
|
||||
outline: 0;
|
||||
position: relative;
|
||||
width: calc(50% - #{$gutter});
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 25vw;
|
||||
min-height: 18rem;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.landscape {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
height: 30vw;
|
||||
}
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
img {
|
||||
height: 30vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('justify-content', 'center');
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('user-select', 'none');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(gallery-lightbox-fadein)} ease',
|
||||
'visibility #{_duration(gallery-lightbox-fadein)}',
|
||||
'z-index #{_duration(gallery-lightbox-fadein)}'
|
||||
));
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity));
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
visibility: none;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
|
||||
&:before {
|
||||
@include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
|
||||
@include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease');
|
||||
@include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}');
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(fg-bold)}; stroke-width: 2px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 4rem;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 4rem;
|
||||
left: 50%;
|
||||
margin: -2rem 0 0 -2rem;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(fg-bold)};stroke-width: 2px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 3rem;
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 0.5rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.inner {
|
||||
@include vendor('transform', 'translateY(0.75rem)');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease',
|
||||
'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease'
|
||||
));
|
||||
opacity: 0;
|
||||
|
||||
img {
|
||||
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
|
||||
display: block;
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
@include vendor('pointer-events', 'auto');
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: _misc(z-index-base) + 1000;
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
.inner {
|
||||
@include vendor('transform', 'translateY(0)');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(gallery-lightbox-fadein)} ease',
|
||||
'transform #{_duration(gallery-lightbox-fadein)} ease'
|
||||
));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('transition-delay', '0s');
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
a {
|
||||
img {
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
&.landscape {
|
||||
img {
|
||||
height: 25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
img {
|
||||
height: 25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.inner {
|
||||
img {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
$gutter: (_size(gallery-gutter) * 0.5);
|
||||
|
||||
margin: ($gutter * -1) 0 0 ($gutter * -1);
|
||||
width: calc(100% + #{$gutter});
|
||||
|
||||
a {
|
||||
margin: $gutter 0 0 $gutter;
|
||||
width: calc(50% - #{$gutter});
|
||||
|
||||
img {
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
&.landscape {
|
||||
img {
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
img {
|
||||
height: 30rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
a {
|
||||
img {
|
||||
height: 12rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
&.landscape {
|
||||
img {
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
img {
|
||||
height: 14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
assets/sass/components/_icon.scss
Normal file
29
assets/sass/components/_icon.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Icon */
|
||||
|
||||
.icon {
|
||||
@include icon;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
|
||||
> .label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.solid {
|
||||
&:before {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
&.brands {
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
}
|
||||
}
|
||||
}
|
||||
39
assets/sass/components/_icons.scss
Normal file
39
assets/sass/components/_icons.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Icons */
|
||||
|
||||
ul.icons {
|
||||
cursor: default;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
text-align: center;
|
||||
line-height: 2.25rem;
|
||||
border-radius: 2.25rem;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: _palette(border-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
170
assets/sass/components/_image.scss
Normal file
170
assets/sass/components/_image.scss
Normal file
@@ -0,0 +1,170 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Image */
|
||||
|
||||
.image {
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&[data-position] {
|
||||
img {
|
||||
@include vendor('object-fit', 'cover');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="top left"] {
|
||||
img {
|
||||
@include vendor('object-position', 'top left');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="top"] {
|
||||
img {
|
||||
@include vendor('object-position', 'top');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="top right"] {
|
||||
img {
|
||||
@include vendor('object-position', 'top right');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="right"] {
|
||||
img {
|
||||
@include vendor('object-position', 'right');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="bottom right"] {
|
||||
img {
|
||||
@include vendor('object-position', 'bottom right');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="bottom"] {
|
||||
img {
|
||||
@include vendor('object-position', 'bottom');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="bottom left"] {
|
||||
img {
|
||||
@include vendor('object-position', 'bottom left');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="left"] {
|
||||
img {
|
||||
@include vendor('object-position', 'left');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="center"] {
|
||||
img {
|
||||
@include vendor('object-position', 'center');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="25% 25%"] {
|
||||
img {
|
||||
@include vendor('object-position', '25% 25%');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="75% 25%"] {
|
||||
img {
|
||||
@include vendor('object-position', '75% 25%');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="75% 75%"] {
|
||||
img {
|
||||
@include vendor('object-position', '75% 75%');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-position="25% 75%"] {
|
||||
img {
|
||||
@include vendor('object-position', '25% 75%');
|
||||
}
|
||||
}
|
||||
|
||||
&.left,
|
||||
&.right {
|
||||
max-width: 40%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
margin: 0 2rem 2rem 0;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
margin: 0 0 2rem 2rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
&.fit {
|
||||
display: block;
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.main {
|
||||
display: block;
|
||||
margin: (_size(element-margin) * 1.5) 0;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.fill {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
//@include vendor('object-fit', 'cover');
|
||||
//@include vendor('object-position', 'center');
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
90
assets/sass/components/_list.scss
Normal file
90
assets/sass/components/_list.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* List */
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
padding-left: 1.25rem;
|
||||
|
||||
li {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
padding-left: 1rem;
|
||||
|
||||
li {
|
||||
padding-left: 0.325rem;
|
||||
}
|
||||
|
||||
&.alt {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
> li {
|
||||
border-top: solid 1px _palette(border);
|
||||
padding: 0.75rem 0;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.items {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
> li {
|
||||
padding-left: 0;
|
||||
margin: 0 0 (_size(element-margin) * 1.5) 0;
|
||||
|
||||
> h3 {
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
&.items {
|
||||
> li {
|
||||
margin: 0 0 (_size(element-margin) * 1) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
|
||||
dt {
|
||||
display: block;
|
||||
font-weight: _font(weight-bold);
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: (_size(element-margin) * 0.75);
|
||||
}
|
||||
}
|
||||
31
assets/sass/components/_row.scss
Normal file
31
assets/sass/components/_row.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Row */
|
||||
|
||||
.row {
|
||||
@include html-grid(2rem);
|
||||
|
||||
@include breakpoint('<=xlarge') {
|
||||
@include html-grid(2rem, 'xlarge');
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
@include html-grid(1.5rem, 'large');
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
@include html-grid(1.5rem, 'medium');
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
@include html-grid(1.25rem, 'small');
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include html-grid(1.25rem, 'xsmall');
|
||||
}
|
||||
}
|
||||
81
assets/sass/components/_table.scss
Normal file
81
assets/sass/components/_table.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
///
|
||||
/// Paradigm Shift by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Table */
|
||||
|
||||
.table-wrapper {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
width: 100%;
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border: solid 1px _palette(border);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: _palette(border-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.75rem 0.75rem;
|
||||
}
|
||||
|
||||
th {
|
||||
color: _palette(fg-bold);
|
||||
font-size: 0.9rem;
|
||||
font-weight: _font(weight-bold);
|
||||
padding: 0 0.75rem 0.75rem 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: solid 2px _palette(border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: solid 2px _palette(border);
|
||||
}
|
||||
|
||||
&.alt {
|
||||
border-collapse: separate;
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
border: solid 1px _palette(border);
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
|
||||
&:first-child {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
td {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user