title() ?>
fields->about) : ?>fields->about; ?>
在自定义字段内添加about字段，即可编辑此内容，现有内容将自动替换。
')
.append(i.clone())
.remove()
.html()
.replace(/type="password"/i, 'type="text"')
.replace(/type=password/i, 'type=text')
);
if (i.attr('id') != '')
x.attr('id', i.attr('id') + '-polyfill-field');
if (i.attr('name') != '')
x.attr('name', i.attr('name') + '-polyfill-field');
x.addClass('polyfill-placeholder')
.val(x.attr('placeholder')).insertAfter(i);
if (i.val() == '')
i.hide();
else
x.hide();
i
.on('blur', function(event) {
event.preventDefault();
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
});
x
.on('focus', function(event) {
event.preventDefault();
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
x.hide();
i
.show()
.focus();
})
.on('keypress', function(event) {
event.preventDefault();
x.val('');
});
});
// Events.
$this
.on('submit', function() {
$this.find('input[type=text],input[type=password],textarea')
.each(function(event) {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
i.attr('name', '');
if (i.val() == i.attr('placeholder')) {
i.removeClass('polyfill-placeholder');
i.val('');
}
});
})
.on('reset', function(event) {
event.preventDefault();
$this.find('select')
.val($('option:first').val());
$this.find('input,textarea')
.each(function() {
var i = $(this),
x;
i.removeClass('polyfill-placeholder');
switch (this.type) {
case 'submit':
case 'reset':
break;
case 'password':
i.val(i.attr('defaultValue'));
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
else {
i.show();
x.hide();
}
break;
case 'checkbox':
case 'radio':
i.attr('checked', i.attr('defaultValue'));
break;
case 'text':
case 'textarea':
i.val(i.attr('defaultValue'));
if (i.val() == '') {
i.addClass('polyfill-placeholder');
i.val(i.attr('placeholder'));
}
break;
default:
i.val(i.attr('defaultValue'));
break;
}
});
});
return $this;
};
/**
* Moves elements to/from the first positions of their respective parents.
* @param {jQuery} $elements Elements (or selector) to move.
* @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
*/
$.prioritize = function($elements, condition) {
var key = '__prioritize';
// Expand $elements if it's not already a jQuery object.
if (typeof $elements != 'jQuery')
$elements = $($elements);
// Step through elements.
$elements.each(function() {
var $e = $(this), $p,
$parent = $e.parent();
// No parent? Bail.
if ($parent.length == 0)
return;
// Not moved? Move it.
if (!$e.data(key)) {
// Condition is false? Bail.
if (!condition)
return;
// Get placeholder (which will serve as our point of reference for when this element needs to move back).
$p = $e.prev();
// Couldn't find anything? Means this element's already at the top, so bail.
if ($p.length == 0)
return;
// Move element to top of parent.
$e.prependTo($parent);
// Mark element as moved.
$e.data(key, $p);
}
// Moved already?
else {
// Condition is true? Bail.
if (condition)
return;
$p = $e.data(key);
// Move element back to its original location (using our placeholder).
$e.insertAfter($p);
// Unmark element as moved.
$e.removeData(key);
}
});
};
})(jQuery);
================================================
FILE: Multiverse/sass/base/_page.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Basic */
// MSIE: Required for IEMobile.
@-ms-viewport {
width: device-width;
}
// MSIE: Prevents scrollbar from overlapping content.
body {
-ms-overflow-style: scrollbar;
}
// Ensures page width is always >=320px.
@include breakpoint('<=xsmall') {
html, body {
min-width: 320px;
}
}
// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: _palette(bg);
// Stops initial animations until page loads.
&.is-preload {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
// Prevents animations while resizing.
&.is-resizing {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
}
================================================
FILE: Multiverse/sass/base/_reset.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes: none;
&:before,
&:after {
content: '';
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
================================================
FILE: Multiverse/sass/base/_typography.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Type */
body, input, select, textarea {
color: _palette(fg);
font-family: _font(family);
font-size: 15pt;
font-weight: _font(weight);
letter-spacing: _font(kerning);
line-height: 1.65;
@include breakpoint('<=xlarge') {
font-size: 11pt;
}
}
a {
@include vendor('transition', (
'color #{_duration(transition)} ease-in-out',
'border-bottom-color #{_duration(transition)} ease-in-out'
));
border-bottom: dotted 1px;
color: _palette(accent1);
text-decoration: none;
&:hover {
border-bottom-color: transparent;
color: _palette(accent1) !important;
}
}
strong, b {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
}
h1, h2, h3, h4, h5, h6 {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
letter-spacing: _font(kerning-alt);
line-height: 1.5;
margin: 0 0 (_size(element-margin) * 0.5) 0;
text-transform: uppercase;
a {
color: inherit;
text-decoration: none;
}
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.7em;
}
@include breakpoint('<=small') {
h2 {
font-size: 1em;
}
h3 {
font-size: 0.9em;
}
h4 {
font-size: 0.8em;
}
h5 {
font-size: 0.7em;
}
h6 {
font-size: 0.7em;
}
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
blockquote {
border-left: 4px _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
}
code {
background: _palette(border-bg);
border: solid 1px _palette(border);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
line-height: 1.75;
padding: 1em 1.5em;
overflow-x: auto;
}
}
hr {
border: 0;
border-bottom: solid 1px _palette(border);
margin: _size(element-margin) 0;
&.major {
margin: (_size(element-margin) * 1.5) 0;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
================================================
FILE: Multiverse/sass/components/_actions.scss
================================================
///
/// Multiverse 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;
}
}
}
}
}
}
}
================================================
FILE: Multiverse/sass/components/_button.scss
================================================
///
/// Multiverse 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: 0;
border-radius: 0;
box-shadow: inset 0 0 0 2px _palette(border);
color: _palette(fg-bold) !important;
cursor: pointer;
display: inline-block;
font-size: 0.9em;
font-weight: _font(weight-bold);
height: _size(element-height) * (1 / 0.9);
letter-spacing: _font(kerning-alt);
line-height: _size(element-height) * (1 / 0.9);
padding: 0 2.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
&:hover {
box-shadow: inset 0 0 0 2px _palette(accent1);
color: _palette(accent1) !important;
&:active {
background-color: transparentize(_palette(accent1), 0.85);
color: _palette(accent1) !important;
}
}
&.icon {
padding-left: 1.35em;
&:before {
margin-right: 0.5em;
}
}
&.fit {
width: 100%;
}
&.small {
font-size: 0.8em;
}
&.large {
font-size: 1.35em;
}
&.primary {
background-color: _palette(accent1);
box-shadow: none;
&:hover {
background-color: lighten(_palette(accent1), 10);
color: _palette(fg-bold) !important;
&:active {
background-color: darken(_palette(accent1), 10);
}
}
}
&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
opacity: 0.35;
}
}
================================================
FILE: Multiverse/sass/components/_form.scss
================================================
///
/// Multiverse 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(element-margin) * 0.75);
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
width: calc(100% + #{$gutter * 2});
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
> .field {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
padding: $gutter 0 0 $gutter;
width: calc(100% - #{$gutter * 1});
&.half {
width: calc(50% - #{$gutter * 0.5});
}
&.third {
width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
}
&.quarter {
width: calc(25% - #{$gutter * 0.25});
}
}
}
@include breakpoint('<=small') {
> .fields {
$gutter: (_size(element-margin) * 0.75);
width: calc(100% + #{$gutter * 2});
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
> .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});
}
}
}
}
}
label {
color: _palette(fg-bold);
display: block;
font-size: 0.9em;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
@include vendor('appearance', 'none');
background: _palette(border-bg);
border: 0;
border-radius: 0;
color: _palette(fg);
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
}
&:focus {
box-shadow: inset 0 0 0 2px _palette(accent1);
}
}
select {
background-image: svg-url("");
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
height: _size(element-height);
padding-right: _size(element-height);
text-overflow: ellipsis;
option {
color: _palette(fg-bold);
background: _palette(bg);
}
&:focus {
&::-ms-value {
background-color: transparent;
}
}
&::-ms-expand {
display: none;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
height: _size(element-height);
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"], {
@include vendor('appearance', 'none');
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
& + label {
@include icon(false, solid);
color: _palette(fg);
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: _font(weight);
padding-left: (_size(element-height) * 0.6) + 0.75em;
padding-right: 0.75em;
position: relative;
&:before {
background: _palette(border-bg);
content: '';
display: inline-block;
font-size: 0.8em;
height: (_size(element-height) * 0.75);
left: 0;
line-height: (_size(element-height) * 0.75);
position: absolute;
text-align: center;
top: 0;
width: (_size(element-height) * 0.75);
}
}
&:checked + label {
&:before {
background: _palette(accent1);
border-color: _palette(accent1);
color: _palette(fg-bold);
content: '\f00c';
}
}
&:focus + label {
&:before {
box-shadow: 0 0 0 2px _palette(accent1);
}
}
}
input[type="checkbox"] {
& + label {
&:before {
}
}
}
input[type="radio"] {
& + label {
&:before {
border-radius: 100%;
}
}
}
::-webkit-input-placeholder {
color: _palette(fg-medium) !important;
opacity: 1.0;
}
:-moz-placeholder {
color: _palette(fg-medium) !important;
opacity: 1.0;
}
::-moz-placeholder {
color: _palette(fg-medium) !important;
opacity: 1.0;
}
:-ms-input-placeholder {
color: _palette(fg-medium) !important;
opacity: 1.0;
}
================================================
FILE: Multiverse/sass/components/_icon.scss
================================================
///
/// Multiverse 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;
}
&:before {
line-height: inherit;
}
&.solid {
&:before {
font-weight: 900;
}
}
&.brands {
&:before {
font-family: 'Font Awesome 5 Brands';
}
}
}
================================================
FILE: Multiverse/sass/components/_icons.scss
================================================
///
/// Multiverse 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;
padding: 0 1em 0 0;
&:last-child {
padding-right: 0;
}
.icon {
color: _palette(fg-light);
&:before {
font-size: 1.5em;
}
}
}
}
================================================
FILE: Multiverse/sass/components/_list.scss
================================================
///
/// Multiverse 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.25em;
li {
padding-left: 0.25em;
}
}
ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1em;
li {
padding-left: 0.5em;
}
&.alt {
list-style: none;
padding-left: 0;
li {
border-top: solid 1px _palette(border);
padding: 0.5em 0;
&:first-child {
border-top: 0;
padding-top: 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);
}
}
================================================
FILE: Multiverse/sass/components/_panel.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Panel */
.panel {
@include padding(4em, 4em);
@include vendor('transform', 'translateY(100vh)');
@include vendor('transition', 'transform #{_duration(panel)} ease');
-webkit-overflow-scrolling: touch;
background: transparentize(_palette(bg), 0.025);
bottom: _size(header);
left: 0;
max-height: calc(80vh - #{_size(header)});
overflow-y: auto;
position: fixed;
width: 100%;
z-index: _misc(z-index-base) + 1;
&.active {
@include vendor('transform', 'translateY(1px)');
}
> .inner {
margin: 0 auto;
max-width: 100%;
width: 75em;
&.split {
@include vendor('display', 'flex');
> div {
margin-left: 4em;
width: 50%;
}
> :first-child {
margin-left: 0;
}
}
}
> .closer {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
background-image: url('images/close.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 3em;
cursor: pointer;
height: 5em;
opacity: 0.25;
position: absolute;
right: 0;
top: 0;
width: 5em;
z-index: 2;
&:hover {
opacity: 1.0;
}
}
@include breakpoint('<=large') {
@include padding(3em, 3em);
> .inner {
&.split {
> div {
margin-left: 3em;
}
}
}
> .closer {
background-size: 2.5em;
background-position: 75% 25%;
}
}
@include breakpoint('<=medium') {
> .inner {
&.split {
@include vendor('flex-direction', 'column');
> div {
margin-left: 0;
width: 100%;
}
}
}
}
@include breakpoint('<=small') {
@include vendor('transform', 'translateY(-100vh)');
@include padding(4em, 2em);
bottom: auto;
top: calc(#{_size(header)} - 1px);
&.active {
@include vendor('transform', 'translateY(0)');
}
}
}
================================================
FILE: Multiverse/sass/components/_poptrox-popup.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Poptrox Popup */
.poptrox-overlay {
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
.poptrox-popup {
background: transparentize(_palette(bg-alt), 0.075);
box-shadow: 0 1em 3em 0.5em rgba(0,0,0,0.25);
cursor: default;
&:before {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
@include vendor('background-image', (
'linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0))',
'linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0))'
));
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
opacity: 1;
}
.closer {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
background-image: url('images/close.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 3em;
height: 5em;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 5em;
z-index: 2;
}
.nav-previous,
.nav-next {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
background-image: url('images/arrow.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 5em;
cursor: pointer;
height: 8em;
margin-top: -4em;
opacity: 0;
position: absolute;
top: 50%;
width: 6em;
z-index: 2;
}
.nav-previous {
@include vendor('transform', 'scaleX(-1)');
left: 0;
}
.nav-next {
right: 0;
}
.caption {
@include padding(2em, 2em);
@include vendor('background-image', 'linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%)');
bottom: 0;
cursor: default;
left: 0;
position: absolute;
text-align: left;
width: 100%;
z-index: 2;
h2, h3, h4, h5, h6 {
margin: 0 0 (_size(element-margin) * 0.25) 0;
}
p {
color: _palette(fg-bold);
}
}
.loader {
@include vendor('animation', 'spinner 1s infinite linear !important');
background-image: url('images/spinner.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0.25;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
&:hover {
.closer,
.nav-previous,
.nav-next {
opacity: 0.5;
&:hover {
opacity: 1.0;
}
}
}
&.loading {
&:before {
opacity: 0;
}
}
body.touch & {
.closer,
.nav-previous,
.nav-next {
opacity: 1.0 !important;
}
}
@include breakpoint('<=medium') {
.closer {
background-size: 3em;
}
.nav-previous,
.nav-next {
background-size: 4em;
}
}
@include breakpoint('<=small') {
&:before {
display: none;
}
.caption {
display: none !important;
}
.closer,
.nav-previous,
.nav-next {
display: none !important;
}
}
}
================================================
FILE: Multiverse/sass/components/_table.scss
================================================
///
/// Multiverse 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.75em 0.75em;
}
th {
color: _palette(fg-bold);
font-size: 0.9em;
font-weight: _font(weight-bold);
padding: 0 0.75em 0.75em 0.75em;
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;
}
}
}
================================================
FILE: Multiverse/sass/layout/_footer.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Footer */
#footer {
.copyright {
color: _palette(fg-light);
font-size: 0.9em;
a {
color: inherit;
}
}
}
================================================
FILE: Multiverse/sass/layout/_header.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Header */
body {
padding: 0 0 _size(header) 0;
}
#header {
@include vendor('transform', 'translateY(0)');
@include vendor('transition', 'transform #{_duration(header)} ease');
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
background: _palette(bg-alt);
bottom: -1em;
height: _size(header) + 1em;
left: 0;
line-height: _size(header);
padding: 0 1.5em;
position: fixed;
user-select: none;
width: 100%;
z-index: _misc(z-index-base) + 2;
body.is-preload & {
@include vendor('transform', 'translateY(#{_size(header)})');
}
h1 {
color: _palette(fg);
display: inline-block;
font-size: 1em;
line-height: 1;
margin: 0;
vertical-align: middle;
a {
border: 0;
color: inherit;
&:hover {
color: inherit !important;
}
}
}
nav {
position: absolute;
right: 0;
top: 0;
> ul {
list-style: none;
margin: 0;
padding: 0;
> li {
display: inline-block;
padding: 0;
a {
@include vendor('transition', 'background-color #{_duration(panel)} ease');
border: 0;
color: _palette(fg-bold);
display: inline-block;
letter-spacing: _font(kerning-alt);
padding: 0 1.65em;
text-transform: uppercase;
&.icon {
&:before {
color: _palette(fg-light);
float: right;
margin-left: 0.75em;
}
}
&:hover {
color: _palette(fg-bold) !important;
}
&.active {
background-color: _palette(bg);
}
}
}
}
}
}
@include breakpoint('<=small') {
body {
padding: _size(header) 0 0 0;
}
#header {
@include vendor('transform', 'translateY(0)');
bottom: auto;
height: _size(header);
padding: 0 1em;
top: 0;
body.is-preload & {
@include vendor('transform', 'translateY(#{_size(header) * -0.85})');
}
h1 {
font-size: 0.9em;
}
nav {
> ul {
> li {
a {
font-size: 0.9em;
padding: 0 1.15em;
}
}
}
}
}
}
================================================
FILE: Multiverse/sass/layout/_main.scss
================================================
///
/// Multiverse by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Main */
#main {
@include vendor('transition', (
'-moz-filter #{_duration(panel)} ease',
'-webkit-filter #{_duration(panel)} ease',
'-ms-filter #{_duration(panel)} ease',
'filter #{_duration(panel)} ease'
));
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
-webkit-tap-highlight-color: rgba(255,255,255,0);
.thumb {
@include vendor('transition', (
'opacity 1.25s ease-in-out'
));
@include vendor('pointer-events', 'auto');
-webkit-tap-highlight-color: rgba(255,255,255,0);
opacity: 1;
overflow: hidden;
position: relative;
&:after {
@include vendor('background-image', 'linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%)');
@include vendor('pointer-events', 'none');
background-size: cover;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
> .image {
-webkit-tap-highlight-color: rgba(255,255,255,0);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
> h2 {
@include vendor('pointer-events', 'none');
bottom: (1.5em / 0.8);
font-size: 0.8em;
left: (1.75em / 0.8);
margin: 0;
position: absolute;
z-index: 1;
}
> p {
display: none;
}
}
&:after {
@include vendor('pointer-events', 'none');
@include vendor('transition', (
'opacity #{_duration(panel)} ease',
'visibility #{_duration(panel)}',
));
background: _palette(bg-overlay);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
body.ie & {
background: _palette(bg-ie-overlay);
}
}
body.content-active & {
@include vendor('filter', 'blur(6px)');
&:after {
@include vendor('pointer-events', 'auto');
opacity: 1;
visibility: visible;
}
}
body.is-preload & {
.thumb {
@include vendor('pointer-events', 'none');
opacity: 0;
}
}
@mixin thumb($rows, $columns, $pad, $minHeight) {
$baseDelay: _duration(header) - 0.5;
$defaultDelay: $baseDelay + (((($rows * $columns) + 1) * 1.5) * _duration(thumb));
.thumb {
@include vendor('transition-delay', '#{$defaultDelay}');
height: calc(#{100vh / ($rows + $pad)} - #{_size(header) / $rows});
min-height: $minHeight;
width: (100% / $columns);
@for $i from 1 through (($rows * $columns) * 1.5) {
&:nth-child(#{$i}) {
@include vendor('transition-delay', '#{$baseDelay + ($i * _duration(thumb))}');
}
}
}
}
// Default.
@include thumb(
_misc(main-layout, default, rows),
_misc(main-layout, default, columns),
_misc(main-layout, default, pad),
_misc(main-layout, default, minHeight)
);
// XLarge.
@include breakpoint('<=xlarge') {
@include thumb(
_misc(main-layout, xlarge, rows),
_misc(main-layout, xlarge, columns),
_misc(main-layout, xlarge, pad),
_misc(main-layout, xlarge, minHeight)
);
}
// Large.
@include breakpoint('<=large') {
@include thumb(
_misc(main-layout, large, rows),
_misc(main-layout, large, columns),
_misc(main-layout, large, pad),
_misc(main-layout, large, minHeight)
);
}
// Medium.
@include breakpoint('<=medium') {
@include thumb(
_misc(main-layout, medium, rows),
_misc(main-layout, medium, columns),
_misc(main-layout, medium, pad),
_misc(main-layout, medium, minHeight)
);
}
// XSmall.
@include breakpoint('<=xsmall') {
@include thumb(
_misc(main-layout, xsmall, rows),
_misc(main-layout, xsmall, columns),
_misc(main-layout, xsmall, pad),
_misc(main-layout, xsmall, minHeight)
);
}
}
================================================
FILE: Multiverse/sass/layout/_wrapper.scss
================================================
///
/// Multiverse 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', (
'-moz-filter #{_duration(panel)} ease',
'-webkit-filter #{_duration(panel)} ease',
'-ms-filter #{_duration(panel)} ease',
'filter #{_duration(panel)} ease'
));
position: relative;
&:after {
@include vendor('pointer-events', 'none');
@include vendor('transition', (
'opacity #{_duration(modal)} ease',
'visibility #{_duration(modal)}',
));
background: _palette(bg-overlay-alt);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
body.ie & {
background: _palette(bg-ie-overlay-alt);
}
}
body.modal-active & {
@include vendor('filter', 'blur(8px)');
&:after {
@include vendor('pointer-events', 'auto');
opacity: 1;
visibility: visible;
z-index: _misc(z-index-base) + 3;
}
}
&:before {
@include vendor('animation', 'spinner 1s infinite linear !important');
@include vendor('pointer-events', 'none');
@include vendor('transition', (
'top 0.75s ease-in-out',
'opacity 0.35s ease-out',
'visibility 0.35s'
));
background-image: url('images/spinner.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0;
position: fixed;
text-align: center;
top: 75%;
visibility: hidden;
width: 2em;
}
body.is-preload & {
&:before {
@include vendor('transition', 'opacity 1s ease-out !important');
@include vendor('transition-delay', '0.5s !important');
opacity: 0.25;
top: 50%;
visibility: visible;
}
}
}
================================================
FILE: Multiverse/sass/libs/_breakpoints.scss
================================================
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
// Vars.
/// Breakpoints.
/// @var {list}
$breakpoints: () !global;
// Mixins.
/// Sets breakpoints.
/// @param {map} $x Breakpoints.
@mixin breakpoints($x: ()) {
$breakpoints: $x !global;
}
/// Wraps @content in a @media block targeting a specific orientation.
/// @param {string} $orientation Orientation.
@mixin orientation($orientation) {
@media screen and (orientation: #{$orientation}) {
@content;
}
}
/// Wraps @content in a @media block using a given query.
/// @param {string} $query Query.
@mixin breakpoint($query: null) {
$breakpoint: null;
$op: null;
$media: null;
// Determine operator, breakpoint.
// Greater than or equal.
@if (str-slice($query, 0, 2) == '>=') {
$op: 'gte';
$breakpoint: str-slice($query, 3);
}
// Less than or equal.
@elseif (str-slice($query, 0, 2) == '<=') {
$op: 'lte';
$breakpoint: str-slice($query, 3);
}
// Greater than.
@elseif (str-slice($query, 0, 1) == '>') {
$op: 'gt';
$breakpoint: str-slice($query, 2);
}
// Less than.
@elseif (str-slice($query, 0, 1) == '<') {
$op: 'lt';
$breakpoint: str-slice($query, 2);
}
// Not.
@elseif (str-slice($query, 0, 1) == '!') {
$op: 'not';
$breakpoint: str-slice($query, 2);
}
// Equal.
@else {
$op: 'eq';
$breakpoint: $query;
}
// Build media.
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
$a: map-get($breakpoints, $breakpoint);
// Range.
@if (type-of($a) == 'list') {
$x: nth($a, 1);
$y: nth($a, 2);
// Max only.
@if ($x == null) {
// Greater than or equal (>= 0 / anything)
@if ($op == 'gte') {
$media: 'screen';
}
// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}
// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Less than (< 0 / invalid)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: -1px)';
}
// Not (> y)
@elseif ($op == 'not') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Equal (<= y)
@else {
$media: 'screen and (max-width: ' + $y + ')';
}
}
// Min only.
@else if ($y == null) {
// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}
// Less than or equal (<= inf / anything)
@elseif ($op == 'lte') {
$media: 'screen';
}
// Greater than (> inf / invalid)
@elseif ($op == 'gt') {
$media: 'screen and (max-width: -1px)';
}
// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Not (< x)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Equal (>= x)
@else {
$media: 'screen and (min-width: ' + $x + ')';
}
}
// Min and max.
@else {
// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}
// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}
// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Not (< x and > y)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
}
// Equal (>= x and <= y)
@else {
$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
}
}
}
// String.
@else {
// Missing a media type? Prefix with "screen".
@if (str-slice($a, 0, 1) == '(') {
$media: 'screen and ' + $a;
}
// Otherwise, use as-is.
@else {
$media: $a;
}
}
}
// Output.
@media #{$media} {
@content;
}
}
================================================
FILE: Multiverse/sass/libs/_functions.scss
================================================
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
/// Gets a value from a map.
/// @author Hugo Giraudel
/// @param {map} $map Map.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function val($map, $keys...) {
@if nth($keys, 1) == null {
$keys: remove-nth($keys, 1);
}
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
/// Gets a duration value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _duration($keys...) {
@return val($duration, $keys...);
}
/// Gets a font value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _font($keys...) {
@return val($font, $keys...);
}
/// Gets a misc value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _misc($keys...) {
@return val($misc, $keys...);
}
/// Gets a palette value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _palette($keys...) {
@return val($palette, $keys...);
}
/// Gets a size value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _size($keys...) {
@return val($size, $keys...);
}
================================================
FILE: Multiverse/sass/libs/_mixins.scss
================================================
/// Makes an element's :before pseudoelement a FontAwesome icon.
/// @param {string} $content Optional content value to use.
/// @param {string} $category Optional category to use.
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $category: regular, $where: before) {
text-decoration: none;
&:#{$where} {
@if $content {
content: $content;
}
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
@if ($category == brands) {
font-family: 'Font Awesome 5 Brands';
}
@elseif ($category == solid) {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@else {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
}
}
/// Applies padding to an element, taking the current element-margin value into account.
/// @param {mixed} $tb Top/bottom padding.
/// @param {mixed} $lr Left/right padding.
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
@if $important {
$important: '!important';
}
$x: 0.1em;
@if unit(_size(element-margin)) == 'rem' {
$x: 0.1rem;
}
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
}
/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
/// @param {string} $svg SVG data URL.
/// @return {string} Encoded SVG data URL.
@function svg-url($svg) {
$svg: str-replace($svg, '"', '\'');
$svg: str-replace($svg, '%', '%25');
$svg: str-replace($svg, '<', '%3C');
$svg: str-replace($svg, '>', '%3E');
$svg: str-replace($svg, '&', '%26');
$svg: str-replace($svg, '#', '%23');
$svg: str-replace($svg, '{', '%7B');
$svg: str-replace($svg, '}', '%7D');
$svg: str-replace($svg, ';', '%3B');
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
}
================================================
FILE: Multiverse/sass/libs/_vars.scss
================================================
// Misc.
$misc: (
z-index-base: 10000,
main-layout: (
default: (
rows: 2,
columns: 4,
pad: 0.5,
minHeight: 20em
),
xlarge: (
rows: 2,
columns: 3,
pad: 0.5,
minHeight: 20em
),
large: (
rows: 2,
columns: 2,
pad: 0.5,
minHeight: 20em
),
medium: (
rows: 3,
columns: 2,
pad: 0.5,
minHeight: 18em
),
xsmall: (
rows: 2,
columns: 1,
pad: 0.5,
minHeight: 18em
)
)
);
// Duration.
$duration: (
transition: 0.2s,
header: 1s,
panel: 0.5s,
modal: 0.5s,
thumb: 0.15s
);
// Size.
$size: (
element-height: 2.75em,
element-margin: 2em,
header: 4em
);
// Font.
$font: (
family: ('Source Sans Pro', Helvetica, sans-serif),
family-fixed: ('Courier New', monospace),
weight: 300,
weight-bold: 300,
weight-extrabold: 400,
kerning: 0.025em,
kerning-alt: 0.1em
);
// Palette.
$palette: (
bg: #242629,
bg-alt: #1f2224,
bg-overlay: transparentize(#242629, 0.75),
bg-overlay-alt: transparentize(#242629, 0.5),
bg-ie-overlay: transparentize(#242629, 0.45),
bg-ie-overlay-alt: transparentize(#242629, 0.2),
fg: #a0a0a1,
fg-bold: #ffffff,
fg-medium: #707071,
fg-light: #505051,
border: #36383c,
border-bg: #34363b,
border-bg-alt: #44464b,
accent1: #34a58e
);
================================================
FILE: Multiverse/sass/libs/_vendor.scss
================================================
// vendor.scss v1.0 | @ajlkn | MIT licensed */
// Vars.
/// Vendor prefixes.
/// @var {list}
$vendor-prefixes: (
'-moz-',
'-webkit-',
'-ms-',
''
);
/// Properties that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-properties: (
// Animation.
'animation',
'animation-delay',
'animation-direction',
'animation-duration',
'animation-fill-mode',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
// Appearance.
'appearance',
// Backdrop filter.
'backdrop-filter',
// Background image options.
'background-clip',
'background-origin',
'background-size',
// Box sizing.
'box-sizing',
// Clip path.
'clip-path',
// Filter effects.
'filter',
// Flexbox.
'align-content',
'align-items',
'align-self',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'justify-content',
'order',
// Font feature.
'font-feature-settings',
'font-language-override',
'font-variant-ligatures',
// Font kerning.
'font-kerning',
// Fragmented borders and backgrounds.
'box-decoration-break',
// Grid layout.
'grid-column',
'grid-column-align',
'grid-column-end',
'grid-column-start',
'grid-row',
'grid-row-align',
'grid-row-end',
'grid-row-start',
'grid-template-columns',
'grid-template-rows',
// Hyphens.
'hyphens',
'word-break',
// Masks.
'mask',
'mask-border',
'mask-border-outset',
'mask-border-repeat',
'mask-border-slice',
'mask-border-source',
'mask-border-width',
'mask-clip',
'mask-composite',
'mask-image',
'mask-origin',
'mask-position',
'mask-repeat',
'mask-size',
// Multicolumn.
'break-after',
'break-before',
'break-inside',
'column-count',
'column-fill',
'column-gap',
'column-rule',
'column-rule-color',
'column-rule-style',
'column-rule-width',
'column-span',
'column-width',
'columns',
// Object fit.
'object-fit',
'object-position',
// Regions.
'flow-from',
'flow-into',
'region-fragment',
// Scroll snap points.
'scroll-snap-coordinate',
'scroll-snap-destination',
'scroll-snap-points-x',
'scroll-snap-points-y',
'scroll-snap-type',
// Shapes.
'shape-image-threshold',
'shape-margin',
'shape-outside',
// Tab size.
'tab-size',
// Text align last.
'text-align-last',
// Text decoration.
'text-decoration-color',
'text-decoration-line',
'text-decoration-skip',
'text-decoration-style',
// Text emphasis.
'text-emphasis',
'text-emphasis-color',
'text-emphasis-position',
'text-emphasis-style',
// Text size adjust.
'text-size-adjust',
// Text spacing.
'text-spacing',
// Transform.
'transform',
'transform-origin',
// Transform 3D.
'backface-visibility',
'perspective',
'perspective-origin',
'transform-style',
// Transition.
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
// Unicode bidi.
'unicode-bidi',
// User select.
'user-select',
// Writing mode.
'writing-mode',
);
/// Values that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-values: (
// Cross fade.
'cross-fade',
// Element function.
'element',
// Filter function.
'filter',
// Flexbox.
'flex',
'inline-flex',
// Grab cursors.
'grab',
'grabbing',
// Gradients.
'linear-gradient',
'repeating-linear-gradient',
'radial-gradient',
'repeating-radial-gradient',
// Grid layout.
'grid',
'inline-grid',
// Image set.
'image-set',
// Intrinsic width.
'max-content',
'min-content',
'fit-content',
'fill',
'fill-available',
'stretch',
// Sticky position.
'sticky',
// Transform.
'transform',
// Zoom cursors.
'zoom-in',
'zoom-out',
);
// Functions.
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
/// Replaces a substring within another string.
/// @author Hugo Giraudel
/// @param {string} $string String.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {string} Updated string.
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/// Replaces a substring within each string in a list.
/// @param {list} $strings List of strings.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {list} Updated list of strings.
@function str-replace-all($strings, $search, $replace: '') {
@each $string in $strings {
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
}
@return $strings;
}
// Mixins.
/// Wraps @content in vendorized keyframe blocks.
/// @param {string} $name Name.
@mixin keyframes($name) {
@-moz-keyframes #{$name} { @content; }
@-webkit-keyframes #{$name} { @content; }
@-ms-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }
}
/// Vendorizes a declaration's property and/or value(s).
/// @param {string} $property Property.
/// @param {mixed} $value String/list of value(s).
@mixin vendor($property, $value) {
// Determine if property should expand.
$expandProperty: index($vendor-properties, $property);
// Determine if value should expand (and if so, add '-prefix-' placeholder).
$expandValue: false;
@each $x in $value {
@each $y in $vendor-values {
@if $y == str-slice($x, 1, str-length($y)) {
$value: set-nth($value, index($value, $x), '-prefix-' + $x);
$expandValue: true;
}
}
}
// Expand property?
@if $expandProperty {
@each $vendor in $vendor-prefixes {
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Expand just the value?
@elseif $expandValue {
@each $vendor in $vendor-prefixes {
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Neither? Treat them as a normal declaration.
@else {
#{$property}: #{$value};
}
}
================================================
FILE: Multiverse/sass/main.scss
================================================
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'fontawesome-all.min.css';
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic');
/*
Multiverse by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
// Breakpoints.
@include breakpoints((
xlarge: ( 1281px, 1680px ),
large: ( 981px, 1280px ),
medium: ( 737px, 980px ),
small: ( 481px, 736px ),
xsmall: ( null, 480px )
));
// Spinner.
@include keyframes(spinner) {
0% {
@include vendor('transform', 'rotate(0deg)');
}
100% {
@include vendor('transform', 'rotate(359deg)');
}
}
// Base.
@import 'base/reset';
@import 'base/page';
@import 'base/typography';
// Component.
@import 'components/button';
@import 'components/form';
@import 'components/icon';
@import 'components/list';
@import 'components/actions';
@import 'components/icons';
@import 'components/table';
@import 'components/panel';
@import 'components/poptrox-popup';
// Layout.
@import 'layout/wrapper';
@import 'layout/header';
@import 'layout/main';
@import 'layout/footer';
================================================
FILE: Multiverse/sass/noscript.scss
================================================
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
/*
Multiverse by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Wrapper */
#wrapper {
body.is-preload & {
&:before {
display: none;
}
}
}
/* Main */
#main {
body.is-preload & {
.thumb {
@include vendor('pointer-events', 'auto');
opacity: 1;
}
}
}
/* Header */
#header {
body.is-preload & {
@include vendor('transform', 'none');
}
}
================================================
FILE: Multiverse.php
================================================
<?php $this->title() ?> - <?php $this->options->title() ?>
================================================
FILE: README-EN.md
================================================
# photo page for typecho
[中文](README.md) / English
Typecho photo page template, a single page template that is not a theme and can exist with a theme! Based on HTML5UP development design static single page, looks nice, then integrated into the typecho, to achieve dynamic management. This project requires only one PHP file to be installed, static resources global jsDelivr CDN, easy to use.Version 2.0 introduces two photo page themes Multiverse and Lens, you can choose.
Demo (HTML5UP official demo, not this project demo):
https://html5up.net/uploads/demos/lens/
https://html5up.net/uploads/demos/multiverse/
# Demo
### Computer Example
Multiverse style
Lens style
# Feature
- [x] Smooth running experience
- [x] Single-page template that can exist with a theme
- [x] Simple editing
- [x] Public resources global CDN
- [x] Thumbnail cloud processing support
- [x] HTML5UP design
- [x] Two optional styles
# Update
2.0. new lens template and change the overall directory tree structure
1.2. fix fontawesome icon loading error, add some custom fields
1.1. rewrite data read interface, add jsDelivr public CDN, add object storage image cloud processing
1.0. initial push
# Instructions for use
### Installation
[Download the latest version](https://github.com/zzd/photo-page-for-typecho/releases)
Upload the `.php` file in the `photo-page-for-typecho` folder to the root of the theme you are using ( optional templates), such as the default theme path `/usr/themes/default`, then create a blank single page in the background of the typecho and select either `Multiverse-style photo album` or `Lens-style photo album` based on the file you have uploaded. Since GoogleFont service is fully functional in China, third-party image acceleration is not used for the time being.
Note: You do not need to download all files under `master', static files are accelerated with jsDelivr public CDN; it is highly recommended to use object storage to save photos so that the program can automatically invoke the image cloud processing function.
### Call format
```
Title, introduction, picture link
```
Multiple images end with a carriage return, with each line representing one image of information.
Example：
```
picture1,Shot on 2020/01/01/,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture2,Shot on 2020/01/02/,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture3,Shot on 2020/01/03,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
```
### Custom fields
[Optional] `about': control text in specified locations, customizable information on, etc..
[Optional] `CDN`: Used to match the object storage service provider you use, currently supports the cloud also beat cloud, Ali cloud OSS, seven niu cloud, Tencent cloud, the purpose of this field is to use cloud image processing to dynamically generate thumbnails. The corresponding fields should read: `UPYUN`/`OSS`/`KODO`/`COS`.
[Optional] Social link fields `Twitter`, `Facebook`, `Instagram`, `GitHub`, just fill in the links to the corresponding fields.
================================================
FILE: README.md
================================================
# photo page for typecho
中文 / [English](README-EN.md)
typecho相册单页模板，单页模板非主题，可与主题共存！基于HTML5UP开发设计的静态单页，觉得好看，便整合到typecho里面，实现了动态管理。本项目仅需安装一个php文件，静态资源全球jsDelivr加速，使用方便简单。2.0版本引入了两个相册主题Multiverse和Lens，可自行选择。
在线演示(前端官方样式参考，非本项目demo)：
https://html5up.net/uploads/demos/lens/
https://html5up.net/uploads/demos/multiverse/
# 展示
### 电脑端示例
Multiverse风格
Lens风格
# 特性
- [x] 流畅的运行体验
- [x] 单页模板，可与主题共存
- [x] 后台编辑简单
- [x] 公共资源全球CDN加速
- [x] 支持缩略图云处理
- [x] 由HTML5UP设计前端
- [x] 两种可选样式
# 版本更新
2.0. 新增lens模板，更改整体目录结构
1.2. 修复fontawesome图标加载错误的问题，新增部分自定义字段
1.1. 重写数据读取接口，增加jsDelivr公共CDN，增加对象存储图片云处理
1.0. 初次推送
# 使用说明
### 安装
[点击下载最新版本](https://github.com/zzd/photo-page-for-typecho/releases)
将`photo-page-for-typecho`文件夹内的`.php`文件上传至你所使用的主题根目录（可选两种模板），如默认主题路径`/usr/themes/default`，然后在typecho后台创建空白单页，根据你所上传的文件，将模板选择`Multiverse风格照片集`或`Lens风格照片集`。鉴于GoogleFont服务在国内完全正常使用，暂不使用第三方镜像加速。
注：你无需下载`master`下的所有文件，静态文件均采用了jsDelivr公共CDN加速；强烈建议使用对象存储保存照片，以便程序自动调用图片云处理功能。
### 调用格式
```
标题,简介,图片链接
```
多图以回车结束，每一行代表一张图片的信息。
例如：
```
picture1,2020年01月01日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture2,2020年01月02日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture3,2020年01月03日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
```
### 自定义字段
[可选] `about`：控制指定位置的文本，可自定义关于等信息；
[可选] `CDN`：用以匹配你所使用的对象存储服务商，目前支持又拍云、阿里云OSS、七牛云、腾讯云，本字段目的在于使用云图像处理动态生成缩略图。对应填写内容为：`UPYUN`/`OSS`/`KODO`/`COS`；
[可选] 社交链接字段 `Twitter`, `Facebook`, `Instagram`, `GitHub`，给相应字段填入链接即可。
[中文](README.md) / English
Typecho photo page template, a single page template that is not a theme and can exist with a theme! Based on HTML5UP development design static single page, looks nice, then integrated into the typecho, to achieve dynamic management. This project requires only one PHP file to be installed, static resources global jsDelivr CDN, easy to use.Version 2.0 introduces two photo page themes Multiverse and Lens, you can choose.
Demo (HTML5UP official demo, not this project demo):
https://html5up.net/uploads/demos/lens/
https://html5up.net/uploads/demos/multiverse/
# Demo
### Computer Example
Multiverse style
Lens style
# Feature
- [x] Smooth running experience
- [x] Single-page template that can exist with a theme
- [x] Simple editing
- [x] Public resources global CDN
- [x] Thumbnail cloud processing support
- [x] HTML5UP design
- [x] Two optional styles
# Update
2.0. new lens template and change the overall directory tree structure
1.2. fix fontawesome icon loading error, add some custom fields
1.1. rewrite data read interface, add jsDelivr public CDN, add object storage image cloud processing
1.0. initial push
# Instructions for use
### Installation
[Download the latest version](https://github.com/zzd/photo-page-for-typecho/releases)
Upload the `.php` file in the `photo-page-for-typecho` folder to the root of the theme you are using ( optional templates), such as the default theme path `/usr/themes/default`, then create a blank single page in the background of the typecho and select either `Multiverse-style photo album` or `Lens-style photo album` based on the file you have uploaded. Since GoogleFont service is fully functional in China, third-party image acceleration is not used for the time being.
Note: You do not need to download all files under `master', static files are accelerated with jsDelivr public CDN; it is highly recommended to use object storage to save photos so that the program can automatically invoke the image cloud processing function.
### Call format
```
Title, introduction, picture link
```
Multiple images end with a carriage return, with each line representing one image of information.
Example：
```
picture1,Shot on 2020/01/01/,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture2,Shot on 2020/01/02/,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture3,Shot on 2020/01/03,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
```
### Custom fields
[Optional] `about': control text in specified locations, customizable information on, etc..
[Optional] `CDN`: Used to match the object storage service provider you use, currently supports the cloud also beat cloud, Ali cloud OSS, seven niu cloud, Tencent cloud, the purpose of this field is to use cloud image processing to dynamically generate thumbnails. The corresponding fields should read: `UPYUN`/`OSS`/`KODO`/`COS`.
[Optional] Social link fields `Twitter`, `Facebook`, `Instagram`, `GitHub`, just fill in the links to the corresponding fields.
================================================
FILE: README.md
================================================
# photo page for typecho
中文 / [English](README-EN.md)
typecho相册单页模板，单页模板非主题，可与主题共存！基于HTML5UP开发设计的静态单页，觉得好看，便整合到typecho里面，实现了动态管理。本项目仅需安装一个php文件，静态资源全球jsDelivr加速，使用方便简单。2.0版本引入了两个相册主题Multiverse和Lens，可自行选择。
在线演示(前端官方样式参考，非本项目demo)：
https://html5up.net/uploads/demos/lens/
https://html5up.net/uploads/demos/multiverse/
# 展示
### 电脑端示例
Multiverse风格
Lens风格
# 特性
- [x] 流畅的运行体验
- [x] 单页模板，可与主题共存
- [x] 后台编辑简单
- [x] 公共资源全球CDN加速
- [x] 支持缩略图云处理
- [x] 由HTML5UP设计前端
- [x] 两种可选样式
# 版本更新
2.0. 新增lens模板，更改整体目录结构
1.2. 修复fontawesome图标加载错误的问题，新增部分自定义字段
1.1. 重写数据读取接口，增加jsDelivr公共CDN，增加对象存储图片云处理
1.0. 初次推送
# 使用说明
### 安装
[点击下载最新版本](https://github.com/zzd/photo-page-for-typecho/releases)
将`photo-page-for-typecho`文件夹内的`.php`文件上传至你所使用的主题根目录（可选两种模板），如默认主题路径`/usr/themes/default`，然后在typecho后台创建空白单页，根据你所上传的文件，将模板选择`Multiverse风格照片集`或`Lens风格照片集`。鉴于GoogleFont服务在国内完全正常使用，暂不使用第三方镜像加速。
注：你无需下载`master`下的所有文件，静态文件均采用了jsDelivr公共CDN加速；强烈建议使用对象存储保存照片，以便程序自动调用图片云处理功能。
### 调用格式
```
标题,简介,图片链接
```
多图以回车结束，每一行代表一张图片的信息。
例如：
```
picture1,2020年01月01日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture2,2020年01月02日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
picture3,2020年01月03日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg
```
### 自定义字段
[可选] `about`：控制指定位置的文本，可自定义关于等信息；
[可选] `CDN`：用以匹配你所使用的对象存储服务商，目前支持又拍云、阿里云OSS、七牛云、腾讯云，本字段目的在于使用云图像处理动态生成缩略图。对应填写内容为：`UPYUN`/`OSS`/`KODO`/`COS`；
[可选] 社交链接字段 `Twitter`, `Facebook`, `Instagram`, `GitHub`，给相应字段填入链接即可。