Showing preview only (224K chars total). Download the full file or copy to clipboard to get everything.
Repository: zzd/photo-page-for-typecho
Branch: master
Commit: 48bbdd4e6cdc
Files: 56
Total size: 207.0 KB
Directory structure:
gitextract_lgb0mua0/
├── LICENSE
├── Lens/
│ ├── css/
│ │ ├── main.css
│ │ └── noscript.css
│ ├── js/
│ │ └── main.js
│ └── sass/
│ ├── base/
│ │ ├── _page.scss
│ │ ├── _reset.scss
│ │ └── _typography.scss
│ ├── components/
│ │ ├── _actions.scss
│ │ ├── _button.scss
│ │ ├── _form.scss
│ │ ├── _icon.scss
│ │ ├── _icons.scss
│ │ └── _list.scss
│ ├── layout/
│ │ ├── _footer.scss
│ │ ├── _header.scss
│ │ ├── _main.scss
│ │ ├── _thumbnails.scss
│ │ └── _viewer.scss
│ ├── libs/
│ │ ├── _breakpoints.scss
│ │ ├── _functions.scss
│ │ ├── _mixins.scss
│ │ ├── _vars.scss
│ │ └── _vendor.scss
│ ├── main.scss
│ └── noscript.scss
├── Lens.php
├── Multiverse/
│ ├── css/
│ │ ├── main.css
│ │ └── noscript.css
│ ├── js/
│ │ ├── main.js
│ │ └── util.js
│ └── sass/
│ ├── base/
│ │ ├── _page.scss
│ │ ├── _reset.scss
│ │ └── _typography.scss
│ ├── components/
│ │ ├── _actions.scss
│ │ ├── _button.scss
│ │ ├── _form.scss
│ │ ├── _icon.scss
│ │ ├── _icons.scss
│ │ ├── _list.scss
│ │ ├── _panel.scss
│ │ ├── _poptrox-popup.scss
│ │ └── _table.scss
│ ├── layout/
│ │ ├── _footer.scss
│ │ ├── _header.scss
│ │ ├── _main.scss
│ │ └── _wrapper.scss
│ ├── libs/
│ │ ├── _breakpoints.scss
│ │ ├── _functions.scss
│ │ ├── _mixins.scss
│ │ ├── _vars.scss
│ │ └── _vendor.scss
│ ├── main.scss
│ └── noscript.scss
├── Multiverse.php
├── README-EN.md
└── README.md
================================================
FILE CONTENTS
================================================
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 616620131
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: Lens/css/main.css
================================================
@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
/*
Lens by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
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;
}
blockquote:before, blockquote:after, q:before, q: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;
}
/* Basic */
/*
@-ms-viewport {
width: device-width;
}
*/
@media screen and (max-width: 480px) {
html, body {
min-width: 320px;
}
}
body.is-preload-0 *, body.is-preload-0 *:before, body.is-preload-0 *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
background-color: #101010;
overflow: hidden;
}
/* Type */
html {
font-size: 16pt;
}
@media screen and (max-width: 1680px) {
html {
font-size: 12pt;
}
}
@media screen and (max-width: 1280px) {
html {
font-size: 11pt;
}
}
body {
background-color: #fff;
color: #aaa;
}
body, input, select, textarea {
font-family: "Roboto", Helvetica, sans-serif;
font-weight: 400;
line-height: 1.65;
font-size: 1em;
color: #aaa;
}
a {
-moz-transition: color 0.25s ease, border-bottom-color 0.25s ease;
-webkit-transition: color 0.25s ease, border-bottom-color 0.25s ease;
-ms-transition: color 0.25s ease, border-bottom-color 0.25s ease;
transition: color 0.25s ease, border-bottom-color 0.25s ease;
border-bottom: dotted 1px;
color: inherit;
text-decoration: none;
}
a:hover {
border-bottom-color: transparent;
color: #00D3B7;
}
strong, b {
font-weight: 400;
color: #555;
}
em, i {
font-style: italic;
}
p {
margin: 0 0 1.25em 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.25;
margin: 0 0 0.5em 0;
color: #555;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
text-decoration: none;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 0.9em;
}
h5 {
font-size: 0.8em;
}
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: solid 4px #ccc;
font-style: italic;
margin: 0 0 1.25em 0;
padding: 0.3125em 0 0.3125em 1.25em;
}
code {
border-radius: 4px;
border: solid 1px;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
border-color: #ccc;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0 1.25em 0;
}
pre code {
display: block;
padding: 1em 1.5em;
overflow-x: auto;
}
hr {
border: 0;
border-bottom: solid 1px #ccc;
margin: 1.25em 0;
}
hr.major {
margin: 1.875em 0;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
-webkit-transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
-ms-transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
background-color: transparent;
border-radius: 4px;
border: solid 1px #ccc;
color: #555;
cursor: pointer;
display: inline-block;
line-height: 1;
padding: 0.75em 1.5em;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
border-color: #00D3B7;
color: #00D3B7;
}
input[type="submit"]:hover:active,
input[type="reset"]:hover:active,
input[type="button"]:hover:active,
button:hover:active,
.button:hover:active {
background-color: rgba(0, 211, 183, 0.15);
}
input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
button.icon,
.button.icon {
padding-left: 1.35em;
}
input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
margin-right: 0.5em;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
font-size: 0.8em;
}
input[type="submit"].large,
input[type="reset"].large,
input[type="button"].large,
button.large,
.button.large {
font-size: 1.35em;
}
input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
pointer-events: none;
opacity: 0.25;
}
/* Form */
form {
margin: 0 0 1.25em 0;
}
label {
color: #555;
display: block;
font-size: 0.9em;
font-weight: 400;
margin: 0 0 0.625em 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
background-color: transparent;
border-radius: 4px;
border: solid 1px #ccc;
color: inherit;
display: block;
outline: 0;
padding: 0 0.75em;
text-decoration: none;
width: 100%;
}
input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
border-color: #00D3B7;
}
select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath 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='%23ccc' /%3E%3C/svg%3E");
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
height: 2.75em;
padding-right: 2.75em;
text-overflow: ellipsis;
}
select option {
color: #555;
background: #fff;
}
select:focus::-ms-value {
background-color: transparent;
}
select::-ms-expand {
display: none;
}
.select-wrapper {
text-decoration: none;
display: block;
position: relative;
}
.select-wrapper:before {
-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;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.select-wrapper:before {
color: #ccc;
content: '\f107';
display: block;
height: 2.75em;
line-height: 2.75em;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 2.75em;
}
.select-wrapper select::-ms-expand {
display: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
height: 2.75em;
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #aaa;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 400;
margin: 0;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-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;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
background: transparent;
border-radius: 4px;
border: solid 1px #ccc;
content: '';
display: inline-block;
font-size: 0.8em;
height: 2.0625em;
left: 0;
line-height: 2.0625em;
position: absolute;
text-align: center;
top: 0;
width: 2.0625em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background-color: #555;
border-color: #555;
color: #fff;
content: '\f00c';
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
border-color: #00D3B7;
}
input[type="checkbox"] + label:before {
border-radius: 4px;
}
input[type="radio"] + label:before {
border-radius: 100%;
}
::-webkit-input-placeholder {
opacity: 1.0;
color: #ccc !important;
}
:-moz-placeholder {
opacity: 1.0;
color: #ccc !important;
}
::-moz-placeholder {
opacity: 1.0;
color: #ccc !important;
}
:-ms-input-placeholder {
opacity: 1.0;
color: #ccc !important;
}
.field {
margin: 0 0 1.25em 0;
}
/* Icon */
.icon {
text-decoration: none;
border-bottom: none;
position: relative;
}
.icon:before {
-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;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
.icon > .label {
display: none;
}
.icon:before {
line-height: inherit;
}
.icon.solid:before {
font-weight: 900;
}
.icon.brands:before {
font-family: 'Font Awesome 5 Brands';
}
/* List */
ol {
list-style: decimal;
margin: 0 0 1.25em 0;
padding-left: 1.25em;
}
ol li {
padding-left: 0.25em;
}
ul {
list-style: disc;
margin: 0 0 1.25em 0;
padding-left: 1em;
}
ul li {
padding-left: 0.5em;
}
ul.alt {
list-style: none;
padding-left: 0;
}
ul.alt li {
border-top: solid 1px #ccc;
padding: 0.5em 0;
}
ul.alt li:first-child {
border-top: 0;
padding-top: 0;
}
dl {
margin: 0 0 1.25em 0;
}
dl dt {
display: block;
font-weight: 400;
margin: 0 0 0.625em 0;
}
dl dd {
margin-left: 1.25em;
}
/* Actions */
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -0.625em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 0.625em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
ul.actions.stacked li {
padding: 0.8125em 0 0 0;
}
ul.actions.stacked li:first-child {
padding-top: 0;
}
ul.actions.fit {
width: calc(100% + 0.625em);
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
}
ul.actions.fit li > * {
width: 100%;
}
ul.actions.fit.stacked {
width: 100%;
}
@media screen and (max-width: 480px) {
ul.actions:not(.fixed) {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
width: 100% !important;
}
ul.actions:not(.fixed) li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
padding: 0.625em 0 0 0;
text-align: center;
width: 100%;
}
ul.actions:not(.fixed) li > * {
width: 100%;
}
ul.actions:not(.fixed) li:first-child {
padding-top: 0;
}
ul.actions:not(.fixed) li input[type="submit"],
ul.actions:not(.fixed) li input[type="reset"],
ul.actions:not(.fixed) li input[type="button"],
ul.actions:not(.fixed) li button,
ul.actions:not(.fixed) li .button {
width: 100%;
}
ul.actions:not(.fixed) li input[type="submit"].icon:before,
ul.actions:not(.fixed) li input[type="reset"].icon:before,
ul.actions:not(.fixed) li input[type="button"].icon:before,
ul.actions:not(.fixed) li button.icon:before,
ul.actions:not(.fixed) li .button.icon:before {
margin-left: -0.5rem;
}
}
/* Icons */
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
}
ul.icons li {
display: inline-block;
padding: 0 1em 0 0;
}
ul.icons li:last-child {
padding-right: 0;
}
ul.icons li .icon:before {
font-size: 1.5rem;
}
/* Main */
#main {
-moz-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
-webkit-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
-ms-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
width: 22.5em;
height: 100%;
background: #fff;
outline: 0;
overflow-x: hidden;
overflow-y: auto;
text-align: right;
visibility: visible;
z-index: 10000;
right: 0;
}
#main .toggle {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
width: 4em;
height: 4em;
background-image: url("images/close-small-alt.svg");
background-repeat: no-repeat;
background-size: 32px 32px;
cursor: pointer;
display: none;
z-index: 1;
background-position: 0.5em 0.5em;
left: 0;
}
body.fullscreen #main {
visibility: hidden;
right: -22.5em;
}
body.is-preload-1 #main {
opacity: 0;
right: -2em;
}
@media screen and (max-width: 1280px) {
#main {
width: 19em;
}
body.fullscreen #main {
right: -19em;
}
}
@media screen and (max-width: 980px) {
#main {
background: rgba(255, 255, 255, 0.925);
}
#main .toggle {
display: block;
}
}
@media screen and (max-width: 480px) {
#main {
-moz-transition: opacity 0.5s ease, visibility 0.5s;
-webkit-transition: opacity 0.5s ease, visibility 0.5s;
-ms-transition: opacity 0.5s ease, visibility 0.5s;
transition: opacity 0.5s ease, visibility 0.5s;
width: 100%;
background: #fff;
text-align: center;
}
body.is-preload-1 #main {
left: auto !important;
right: auto !important;
}
body.fullscreen #main {
left: auto !important;
right: auto !important;
opacity: 0;
}
#main .toggle {
display: none;
}
}
/* Header */
#header {
padding: 3em 2.25em 1.75em 2.25em ;
}
#header h1 {
font-size: 2.25em;
font-weight: 700;
}
/* Footer */
#footer {
padding: 2.25em 2.25em 1em 2.25em ;
}
#footer .copyright {
list-style: none;
padding: 0;
}
#footer .copyright li {
display: inline-block;
font-size: 0.8em;
margin-left: 0.35em;
padding: 0;
}
#footer .copyright li:first-child {
margin-left: 0;
}
/* Thumbnails */
#thumbnails {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 0.75em;
}
#thumbnails article {
position: relative;
width: 50%;
background: #101010;
outline: 0;
}
#thumbnails article .thumbnail {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: block;
position: relative;
border: 0;
outline: 0;
}
#thumbnails article .thumbnail img {
display: block;
width: 100%;
}
#thumbnails article .thumbnail:before {
pointer-events: none;
-moz-transition: opacity 0.25s ease;
-webkit-transition: opacity 0.25s ease;
-ms-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 2px #00D3B7, inset 0 0 0px 3px rgba(0, 0, 0, 0.15);
opacity: 0;
z-index: 1;
}
#thumbnails article .thumbnail:focus:before {
opacity: 0.5;
}
#thumbnails article h2, #thumbnails article p {
display: none;
}
#thumbnails article.active .thumbnail:before {
opacity: 1;
}
@media screen and (max-width: 480px) {
#thumbnails article .thumbnail:before {
display: none;
}
}
/* Viewer */
@-moz-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#viewer {
-moz-transition: opacity 0.75s ease, width 0.75s ease;
-webkit-transition: opacity 0.75s ease, width 0.75s ease;
-ms-transition: opacity 0.75s ease, width 0.75s ease;
transition: opacity 0.75s ease, width 0.75s ease;
position: absolute;
top: 0;
width: calc(100% - 22.5em);
height: 100%;
left: 0;
}
#viewer .inner {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
#viewer .inner > * {
pointer-events: auto;
}
#viewer .inner:before {
background-image: -moz-linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), -moz-linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0));
background-image: -webkit-linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), -webkit-linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0));
background-image: -ms-linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), -ms-linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0));
background-image: linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0));
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#viewer .inner .toggle {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
width: 4em;
height: 4em;
background-image: url("images/close.svg");
background-repeat: no-repeat;
background-size: 64px 64px;
cursor: pointer;
z-index: 1;
right: 0;
background-position: calc(100% - 0.75em) 0.75em;
}
#viewer .inner .nav-next,
#viewer .inner .nav-previous {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: absolute;
top: 50%;
width: 6em;
height: 6em;
margin-top: -3em;
background-image: url("images/arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
#viewer .inner .nav-previous {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
left: 0;
}
#viewer .inner .nav-next {
right: 0;
}
#viewer .slide {
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
}
#viewer .slide .caption {
background-image: -moz-linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0));
background-image: -webkit-linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0));
background-image: -ms-linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0));
background-image: linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0));
padding: 2em 2em 0.75em 2em ;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: rgba(255, 255, 255, 0.5);
z-index: 1;
}
#viewer .slide .caption h2, #viewer .slide .caption h3, #viewer .slide .caption h4, #viewer .slide .caption h5, #viewer .slide .caption h6 {
color: #fff;
}
#viewer .slide .image {
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
}
#viewer .slide:before {
-moz-animation: spinner 1s linear infinite;
-webkit-animation: spinner 1s linear infinite;
-ms-animation: spinner 1s linear infinite;
animation: spinner 1s linear infinite;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
background-image: url("images/spinner.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: -1.5em 0 0 -1.5em;
opacity: 0;
}
#viewer .slide.loading:before {
opacity: 1;
}
#viewer .slide.active .image {
opacity: 1;
}
body.fullscreen #viewer {
width: 100%;
}
body.fullscreen #viewer .inner .toggle {
background-image: url("images/open.svg");
}
body.is-preload-1 #viewer {
opacity: 0;
}
body.is-preload-2 #viewer .slide {
opacity: 0;
}
@media screen and (max-width: 1280px) {
#viewer {
width: calc(100% - 19em);
}
}
@media screen and (max-width: 980px) {
#viewer {
width: 100%;
}
#viewer .inner .toggle {
-moz-transition: opacity 0.75s ease;
-webkit-transition: opacity 0.75s ease;
-ms-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
background-image: url("images/open.svg");
opacity: 0;
right: 0;
}
body.fullscreen #viewer .inner .toggle {
opacity: 1;
}
}
@media screen and (max-width: 736px) {
#viewer .inner .toggle {
background-size: 32px 32px;
}
#viewer .inner .nav-next,
#viewer .inner .nav-previous {
background-image: url("images/arrow-small.svg");
background-size: 32px 32px;
}
body.fullscreen #viewer .inner .toggle {
background-image: url("images/open-small.svg");
}
}
@media screen and (max-width: 480px) {
#viewer {
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
opacity: 0;
}
#viewer .inner .toggle {
background-image: url("images/close-small.svg") !important;
background-size: 32px 32px;
}
body.fullscreen #viewer {
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
opacity: 1;
}
}
================================================
FILE: Lens/css/noscript.css
================================================
/*
Lens by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Main */
#main {
opacity: 1 !important;
right: 0 !important;
}
body:before {
content: 'Javascript is disabled :(';
display: block;
position: absolute;
top: 50%;
width: calc(100% - 22.5em * 0.333333333);
height: 4em;
margin-top: -2em;
color: #282828;
cursor: default;
font-size: 3em;
line-height: 4em;
text-align: center;
white-space: nowrap;
left: 0;
}
================================================
FILE: Lens/js/main.js
================================================
/*
Lens by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
var main = (function($) { var _ = {
/**
* Settings.
* @var {object}
*/
settings: {
// Preload all images.
preload: false,
// Slide duration (must match "duration.slide" in _vars.scss).
slideDuration: 500,
// Layout duration (must match "duration.layout" in _vars.scss).
layoutDuration: 750,
// Thumbnails per "row" (must match "misc.thumbnails-per-row" in _vars.scss).
thumbnailsPerRow: 2,
// Side of main wrapper (must match "misc.main-side" in _vars.scss).
mainSide: 'right'
},
/**
* Window.
* @var {jQuery}
*/
$window: null,
/**
* Body.
* @var {jQuery}
*/
$body: null,
/**
* Main wrapper.
* @var {jQuery}
*/
$main: null,
/**
* Thumbnails.
* @var {jQuery}
*/
$thumbnails: null,
/**
* Viewer.
* @var {jQuery}
*/
$viewer: null,
/**
* Toggle.
* @var {jQuery}
*/
$toggle: null,
/**
* Nav (next).
* @var {jQuery}
*/
$navNext: null,
/**
* Nav (previous).
* @var {jQuery}
*/
$navPrevious: null,
/**
* Slides.
* @var {array}
*/
slides: [],
/**
* Current slide index.
* @var {integer}
*/
current: null,
/**
* Lock state.
* @var {bool}
*/
locked: false,
/**
* Keyboard shortcuts.
* @var {object}
*/
keys: {
// Escape: Toggle main wrapper.
27: function() {
_.toggle();
},
// Up: Move up.
38: function() {
_.up();
},
// Down: Move down.
40: function() {
_.down();
},
// Space: Next.
32: function() {
_.next();
},
// Right Arrow: Next.
39: function() {
_.next();
},
// Left Arrow: Previous.
37: function() {
_.previous();
}
},
/**
* Initialize properties.
*/
initProperties: function() {
// Window, body.
_.$window = $(window);
_.$body = $('body');
// Thumbnails.
_.$thumbnails = $('#thumbnails');
// Viewer.
_.$viewer = $(
'<div id="viewer">' +
'<div class="inner">' +
'<div class="nav-next"></div>' +
'<div class="nav-previous"></div>' +
'<div class="toggle"></div>' +
'</div>' +
'</div>'
).appendTo(_.$body);
// Nav.
_.$navNext = _.$viewer.find('.nav-next');
_.$navPrevious = _.$viewer.find('.nav-previous');
// Main wrapper.
_.$main = $('#main');
// Toggle.
$('<div class="toggle"></div>')
.appendTo(_.$main);
_.$toggle = $('.toggle');
},
/**
* Initialize events.
*/
initEvents: function() {
// Window.
// Remove is-preload-* classes on load.
_.$window.on('load', function() {
_.$body.removeClass('is-preload-0');
window.setTimeout(function() {
_.$body.removeClass('is-preload-1');
}, 100);
window.setTimeout(function() {
_.$body.removeClass('is-preload-2');
}, 100 + Math.max(_.settings.layoutDuration - 150, 0));
});
// Disable animations/transitions on resize.
var resizeTimeout;
_.$window.on('resize', function() {
_.$body.addClass('is-preload-0');
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(function() {
_.$body.removeClass('is-preload-0');
}, 100);
});
// Viewer.
// Hide main wrapper on tap (<= medium only).
_.$viewer.on('touchend', function() {
if (breakpoints.active('<=medium'))
_.hide();
});
// Touch gestures.
_.$viewer
.on('touchstart', function(event) {
// Record start position.
_.$viewer.touchPosX = event.originalEvent.touches[0].pageX;
_.$viewer.touchPosY = event.originalEvent.touches[0].pageY;
})
.on('touchmove', function(event) {
// No start position recorded? Bail.
if (_.$viewer.touchPosX === null
|| _.$viewer.touchPosY === null)
return;
// Calculate stuff.
var diffX = _.$viewer.touchPosX - event.originalEvent.touches[0].pageX,
diffY = _.$viewer.touchPosY - event.originalEvent.touches[0].pageY;
boundary = 20,
delta = 50;
// Swipe left (next).
if ( (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta) )
_.next();
// Swipe right (previous).
else if ( (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)) )
_.previous();
// Overscroll fix.
var th = _.$viewer.outerHeight(),
ts = (_.$viewer.get(0).scrollHeight - _.$viewer.scrollTop());
if ((_.$viewer.scrollTop() <= 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
}
});
// Main.
// Touch gestures.
_.$main
.on('touchstart', function(event) {
// Bail on xsmall.
if (breakpoints.active('<=xsmall'))
return;
// Record start position.
_.$main.touchPosX = event.originalEvent.touches[0].pageX;
_.$main.touchPosY = event.originalEvent.touches[0].pageY;
})
.on('touchmove', function(event) {
// Bail on xsmall.
if (breakpoints.active('<=xsmall'))
return;
// No start position recorded? Bail.
if (_.$main.touchPosX === null
|| _.$main.touchPosY === null)
return;
// Calculate stuff.
var diffX = _.$main.touchPosX - event.originalEvent.touches[0].pageX,
diffY = _.$main.touchPosY - event.originalEvent.touches[0].pageY;
boundary = 20,
delta = 50,
result = false;
// Swipe to close.
switch (_.settings.mainSide) {
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
default:
break;
}
if (result)
_.hide();
// Overscroll fix.
var th = _.$main.outerHeight(),
ts = (_.$main.get(0).scrollHeight - _.$main.scrollTop());
if ((_.$main.scrollTop() <= 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
}
});
// Toggle.
_.$toggle.on('click', function() {
_.toggle();
});
// Prevent event from bubbling up to "hide event on tap" event.
_.$toggle.on('touchend', function(event) {
event.stopPropagation();
});
// Nav.
_.$navNext.on('click', function() {
_.next();
});
_.$navPrevious.on('click', function() {
_.previous();
});
// Keyboard shortcuts.
// Ignore shortcuts within form elements.
_.$body.on('keydown', 'input,select,textarea', function(event) {
event.stopPropagation();
});
_.$window.on('keydown', function(event) {
// Ignore if xsmall is active.
if (breakpoints.active('<=xsmall'))
return;
// Check keycode.
if (event.keyCode in _.keys) {
// Stop other events.
event.stopPropagation();
event.preventDefault();
// Call shortcut.
(_.keys[event.keyCode])();
}
});
},
/**
* Initialize viewer.
*/
initViewer: function() {
// Bind thumbnail click event.
_.$thumbnails
.on('click', '.thumbnail', function(event) {
var $this = $(this);
// Stop other events.
event.preventDefault();
event.stopPropagation();
// Locked? Blur.
if (_.locked)
$this.blur();
// Switch to this thumbnail's slide.
_.switchTo($this.data('index'));
});
// Create slides from thumbnails.
_.$thumbnails.children()
.each(function() {
var $this = $(this),
$thumbnail = $this.children('.thumbnail'),
s;
// Slide object.
s = {
$parent: $this,
$slide: null,
$slideImage: null,
$slideCaption: null,
url: $thumbnail.attr('href'),
loaded: false
};
// Parent.
$this.attr('tabIndex', '-1');
// Slide.
// Create elements.
s.$slide = $('<div class="slide"><div class="caption"></div><div class="image"></div></div>');
// Image.
s.$slideImage = s.$slide.children('.image');
// Set background stuff.
s.$slideImage
.css('background-image', '')
.css('background-position', ($thumbnail.data('position') || 'center'));
// Caption.
s.$slideCaption = s.$slide.find('.caption');
// Move everything *except* the thumbnail itself to the caption.
$this.children().not($thumbnail)
.appendTo(s.$slideCaption);
// Preload?
if (_.settings.preload) {
// Force image to download.
var $img = $('<img src="' + s.url + '" />');
// Set slide's background image to it.
s.$slideImage
.css('background-image', 'url(' + s.url + ')');
// Mark slide as loaded.
s.$slide.addClass('loaded');
s.loaded = true;
}
// Add to slides array.
_.slides.push(s);
// Set thumbnail's index.
$thumbnail.data('index', _.slides.length - 1);
});
},
/**
* Initialize stuff.
*/
init: function() {
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ null, '480px' ]
});
// Everything else.
_.initProperties();
_.initViewer();
_.initEvents();
// Show first slide if xsmall isn't active.
breakpoints.on('>xsmall', function() {
if (_.current === null)
_.switchTo(0, true);
});
},
/**
* Switch to a specific slide.
* @param {integer} index Index.
*/
switchTo: function(index, noHide) {
// Already at index and xsmall isn't active? Bail.
if (_.current == index
&& !breakpoints.active('<=xsmall'))
return;
// Locked? Bail.
if (_.locked)
return;
// Lock.
_.locked = true;
// Hide main wrapper if medium is active.
if (!noHide
&& breakpoints.active('<=medium'))
_.hide();
// Get slides.
var oldSlide = (_.current !== null ? _.slides[_.current] : null),
newSlide = _.slides[index];
// Update current.
_.current = index;
// Deactivate old slide (if there is one).
if (oldSlide) {
// Thumbnail.
oldSlide.$parent
.removeClass('active');
// Slide.
oldSlide.$slide.removeClass('active');
}
// Activate new slide.
// Thumbnail.
newSlide.$parent
.addClass('active')
.focus();
// Slide.
var f = function() {
// Old slide exists? Detach it.
if (oldSlide)
oldSlide.$slide.detach();
// Attach new slide.
newSlide.$slide.appendTo(_.$viewer);
// New slide not yet loaded?
if (!newSlide.loaded) {
window.setTimeout(function() {
// Mark as loading.
newSlide.$slide.addClass('loading');
// Wait for it to load.
$('<img src="' + newSlide.url + '" />').on('load', function() {
//window.setTimeout(function() {
// Set background image.
newSlide.$slideImage
.css('background-image', 'url(' + newSlide.url + ')');
// Mark as loaded.
newSlide.loaded = true;
newSlide.$slide.removeClass('loading');
// Mark as active.
newSlide.$slide.addClass('active');
// Unlock.
window.setTimeout(function() {
_.locked = false;
}, 100);
//}, 1000);
});
}, 100);
}
// Otherwise ...
else {
window.setTimeout(function() {
// Mark as active.
newSlide.$slide.addClass('active');
// Unlock.
window.setTimeout(function() {
_.locked = false;
}, 100);
}, 100);
}
};
// No old slide? Switch immediately.
if (!oldSlide)
(f)();
// Otherwise, wait for old slide to disappear first.
else
window.setTimeout(f, _.settings.slideDuration);
},
/**
* Switches to the next slide.
*/
next: function() {
// Calculate new index.
var i, c = _.current, l = _.slides.length;
if (c >= l - 1)
i = 0;
else
i = c + 1;
// Switch.
_.switchTo(i);
},
/**
* Switches to the previous slide.
*/
previous: function() {
// Calculate new index.
var i, c = _.current, l = _.slides.length;
if (c <= 0)
i = l - 1;
else
i = c - 1;
// Switch.
_.switchTo(i);
},
/**
* Switches to slide "above" current.
*/
up: function() {
// Fullscreen? Bail.
if (_.$body.hasClass('fullscreen'))
return;
// Calculate new index.
var i, c = _.current, l = _.slides.length, tpr = _.settings.thumbnailsPerRow;
if (c <= (tpr - 1))
i = l - (tpr - 1 - c) - 1;
else
i = c - tpr;
// Switch.
_.switchTo(i);
},
/**
* Switches to slide "below" current.
*/
down: function() {
// Fullscreen? Bail.
if (_.$body.hasClass('fullscreen'))
return;
// Calculate new index.
var i, c = _.current, l = _.slides.length, tpr = _.settings.thumbnailsPerRow;
if (c >= l - tpr)
i = c - l + tpr;
else
i = c + tpr;
// Switch.
_.switchTo(i);
},
/**
* Shows the main wrapper.
*/
show: function() {
// Already visible? Bail.
if (!_.$body.hasClass('fullscreen'))
return;
// Show main wrapper.
_.$body.removeClass('fullscreen');
// Focus.
_.$main.focus();
},
/**
* Hides the main wrapper.
*/
hide: function() {
// Already hidden? Bail.
if (_.$body.hasClass('fullscreen'))
return;
// Hide main wrapper.
_.$body.addClass('fullscreen');
// Blur.
_.$main.blur();
},
/**
* Toggles main wrapper.
*/
toggle: function() {
if (_.$body.hasClass('fullscreen'))
_.show();
else
_.hide();
},
}; return _; })(jQuery); main.init();
================================================
FILE: Lens/sass/base/_page.scss
================================================
///
/// Lens 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;
}
*/
// Ensures page width is always >=320px.
@include breakpoint('<=xsmall') {
html, body {
min-width: 320px;
}
}
// Stops initial animations until page loads.
body.is-preload-0 {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
// 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;
}
html, body {
background-color: _palette(page-bg);
overflow: hidden;
}
================================================
FILE: Lens/sass/base/_reset.scss
================================================
///
/// Lens 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: Lens/sass/base/_typography.scss
================================================
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Type */
html {
font-size: 16pt;
@include breakpoint('<=xlarge') {
font-size: 12pt;
}
@include breakpoint('<=large') {
font-size: 11pt;
}
}
body {
background-color: _palette(bg);
color: _palette(fg);
}
body, input, select, textarea {
font-family: _font(family);
font-weight: _font(weight);
line-height: 1.65;
font-size: 1em;
color: _palette(fg);
}
a {
@include vendor('transition', ('color #{_duration(transition)} ease', 'border-bottom-color #{_duration(transition)} ease'));
border-bottom: dotted 1px;
color: inherit;
text-decoration: none;
&:hover {
border-bottom-color: transparent;
color: _palette(accent);
}
}
strong, b {
font-weight: _font(weight);
color: _palette(fg-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: _font(weight);
line-height: 1.25;
margin: 0 0 (_size(element-margin) * 0.4) 0;
color: _palette(fg-bold);
a {
color: inherit;
text-decoration: none;
}
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 0.9em;
}
h5 {
font-size: 0.8em;
}
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: solid (_size(border-width) * 4) _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 {
border-radius: _size(border-radius);
border: solid _size(border-width);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
border-color: _palette(border);
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
padding: 1em 1.5em;
overflow-x: auto;
}
}
hr {
border: 0;
border-bottom: solid _size(border-width) _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: Lens/sass/components/_actions.scss
================================================
///
/// Lens 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: Lens/sass/components/_button.scss
================================================
///
/// Lens 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',
'border-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
background-color: transparent;
border-radius: _size(border-radius);
border: solid 1px _palette(border);
color: _palette(fg-bold);
cursor: pointer;
display: inline-block;
line-height: 1;
padding: 0.75em 1.5em;
text-align: center;
text-decoration: none;
white-space: nowrap;
&:hover {
border-color: _palette(accent);
color: _palette(accent);
&:active {
background-color: transparentize(_palette(accent), 0.85);
}
}
&.icon {
padding-left: 1.35em;
&:before {
margin-right: 0.5em;
}
}
&.fit {
width: 100%;
}
&.small {
font-size: 0.8em;
}
&.large {
font-size: 1.35em;
}
&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
opacity: 0.25;
}
}
================================================
FILE: Lens/sass/components/_form.scss
================================================
///
/// Lens 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;
}
label {
color: _palette(fg-bold);
display: block;
font-size: 0.9em;
font-weight: _font(weight);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
@include vendor('appearance', 'none');
background-color: transparent;
border-radius: _size(border-radius);
border: solid _size(border-width) _palette(border);
color: inherit;
display: block;
outline: 0;
padding: 0 0.75em;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
}
&:focus {
border-color: _palette(accent);
}
}
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-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;
}
}
.select-wrapper {
@include icon(false, solid);
display: block;
position: relative;
&:before {
color: _palette(border);
content: '\f107';
display: block;
height: _size(element-height);
line-height: _size(element-height);
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: _size(element-height);
}
select::-ms-expand {
display: none;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
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);
margin: 0;
padding-left: (_size(element-height) * 0.6) + 0.75em;
padding-right: 0.75em;
position: relative;
&:before {
background: transparent;
border-radius: _size(border-radius);
border: solid _size(border-width) _palette(border);
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-color: _palette(fg-bold);
border-color: _palette(fg-bold);
color: _palette(bg);
content: '\f00c';
}
}
&:focus + label {
&:before {
border-color: _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;
}
.field {
margin: 0 0 _size(element-margin) 0;
}
================================================
FILE: Lens/sass/components/_icon.scss
================================================
///
/// Lens 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: Lens/sass/components/_icons.scss
================================================
///
/// Lens 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 {
&:before {
font-size: 1.5rem;
}
}
}
}
================================================
FILE: Lens/sass/components/_list.scss
================================================
///
/// Lens 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 _size(border-width) _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);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
dd {
margin-left: _size(element-margin);
}
}
================================================
FILE: Lens/sass/layout/_footer.scss
================================================
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Footer */
#footer {
@include padding(2.25em, 2.25em);
.copyright {
list-style: none;
padding: 0;
li {
display: inline-block;
font-size: 0.8em;
margin-left: 0.35em;
padding: 0;
&:first-child {
margin-left: 0;
}
}
}
}
================================================
FILE: Lens/sass/layout/_header.scss
================================================
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Header */
#header {
@include padding(3em, 2.25em);
h1 {
font-size: 2.25em;
font-weight: _font(weight-bold);
}
}
================================================
FILE: Lens/sass/layout/_main.scss
================================================
///
/// Lens 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', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
width: _size(main);
height: 100%;
background: _palette(bg);
outline: 0;
overflow-x: hidden;
overflow-y: auto;
text-align: _misc(main-align);
visibility: visible;
z-index: _misc(z-index-base);
@if _misc(main-side) == 'left' {
left: 0;
}
@else {
right: 0;
}
.toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: absolute;
top: 0;
width: 4em;
height: 4em;
background-image: url('images/close-small-alt.svg');
background-repeat: no-repeat;
background-size: 32px 32px;
cursor: pointer;
display: none;
z-index: 1;
@if _misc(main-side) == 'left' {
background-position: calc(100% - 0.5em) 0.5em;
right: 0;
}
@else {
background-position: 0.5em 0.5em;
left: 0;
}
}
body.fullscreen & {
visibility: hidden;
@if _misc(main-side) == 'left' {
left: (_size(main) * -1);
}
@else {
right: (_size(main) * -1);
}
}
body.is-preload-1 & {
opacity: 0;
@if _misc(main-side) == 'left' {
left: -2em;
}
@else {
right: -2em;
}
}
@include breakpoint('<=large') {
width: _size(main-alt);
body.fullscreen & {
@if _misc(main-side) == 'left' {
left: (_size(main-alt) * -1);
}
@else {
right: (_size(main-alt) * -1);
}
}
}
@include breakpoint('<=medium') {
background: transparentize(_palette(bg), 0.075);
.toggle {
display: block;
}
}
@include breakpoint('<=xsmall') {
@include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
width: 100%;
background: _palette(bg);
text-align: center;
body.is-preload-1 & {
left: auto !important;
right: auto !important;
}
body.fullscreen & {
left: auto !important;
right: auto !important;
opacity: 0;
}
.toggle {
display: none;
}
}
}
================================================
FILE: Lens/sass/layout/_thumbnails.scss
================================================
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Thumbnails */
#thumbnails {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
padding: 0 0.75em;
article {
position: relative;
width: #{100% / _misc(thumbnails-per-row)};
background: #101010;
outline: 0;
.thumbnail {
-webkit-tap-highlight-color: rgba(0,0,0,0);
display: block;
position: relative;
border: 0;
outline: 0;
img {
display: block;
width: 100%;
}
&:before {
@include vendor('pointer-events', 'none');
@include vendor('transition', 'opacity 0.25s ease');
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 2px _palette(accent), inset 0 0 0px 3px rgba(0,0,0,0.15);
opacity: 0;
z-index: 1;
}
&:focus {
&:before {
opacity: 0.5;
}
}
}
h2, p {
display: none;
}
&.active {
.thumbnail {
&:before {
opacity: 1;
}
}
}
}
@include breakpoint('<=xsmall') {
article {
.thumbnail {
&:before {
display: none;
}
}
}
}
}
================================================
FILE: Lens/sass/layout/_viewer.scss
================================================
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Viewer */
@include keyframes(spinner) {
0% {
@include vendor('transform', 'rotate(0deg)');
}
100% {
@include vendor('transform', 'rotate(360deg)');
}
}
#viewer {
@include vendor('transition', ('opacity #{_duration(layout)} ease', 'width #{_duration(layout)} ease'));
position: absolute;
top: 0;
width: calc(100% - #{_size(main)});
height: 100%;
@if _misc(main-side) == 'left' {
right: 0;
}
@else {
left: 0;
}
.inner {
@include vendor('pointer-events', 'none');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
> * {
@include vendor('pointer-events', 'auto');
}
&:before {
@include vendor('background-image', (
'linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))',
'linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))'
));
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: absolute;
top: 0;
width: 4em;
height: 4em;
background-image: url('images/close.svg');
background-repeat: no-repeat;
background-size: 64px 64px;
cursor: pointer;
z-index: 1;
@if _misc(main-side) == 'left' {
left: 0;
background-position: 0.75em 0.75em;
}
@else {
right: 0;
background-position: calc(100% - 0.75em) 0.75em;
}
}
.nav-next,
.nav-previous {
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: absolute;
top: 50%;
width: 6em;
height: 6em;
margin-top: -3em;
background-image: url('images/arrow.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
.nav-previous {
@include vendor('transform', 'scaleX(-1)');
left: 0;
}
.nav-next {
right: 0;
}
}
.slide {
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
.caption {
@include vendor('background-image', (
'linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0))',
));
@include padding(2em, 2em);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: rgba(255,255,255,0.5);
z-index: 1;
h2, h3, h4, h5, h6 {
color: #fff;
}
}
.image {
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
}
&:before {
@include vendor('animation', 'spinner #{_duration(spinner)} linear infinite');
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
background-image: url('images/spinner.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: -1.5em 0 0 -1.5em;
opacity: 0;
}
&.loading {
&:before {
opacity: 1;
}
}
&.active {
.image {
opacity: 1;
}
}
}
body.fullscreen & {
width: 100%;
.inner {
.toggle {
background-image: url('images/open.svg');
}
}
}
body.is-preload-1 & {
opacity: 0;
}
body.is-preload-2 & {
.slide {
opacity: 0;
}
}
@include breakpoint('<=large') {
width: calc(100% - #{_size(main-alt)});
}
@include breakpoint('<=medium') {
width: 100%;
.inner {
.toggle {
@include vendor('transition', 'opacity #{_duration(layout)} ease');
background-image: url('images/open.svg');
opacity: 0;
@if _misc(main-side) == 'left' {
left: 0;
}
@else {
right: 0;
}
}
}
body.fullscreen & {
.inner {
.toggle {
opacity: 1;
}
}
}
}
@include breakpoint('<=small') {
.inner {
.toggle {
background-size: 32px 32px;
}
.nav-next,
.nav-previous {
background-image: url('images/arrow-small.svg');
background-size: 32px 32px;
}
}
body.fullscreen & {
.inner {
.toggle {
background-image: url('images/open-small.svg');
}
}
}
}
@include breakpoint('<=xsmall') {
@include vendor('transition', ('opacity #{_duration(layout-alt)} ease'));
@include vendor('transition-delay', '0s');
opacity: 0;
.inner {
.toggle {
background-image: url('images/close-small.svg') !important;
background-size: 32px 32px;
}
}
body.fullscreen & {
@include vendor('transition-delay', '#{_duration(layout-alt)}');
opacity: 1;
}
}
}
================================================
FILE: Lens/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: Lens/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: Lens/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: Lens/sass/libs/_vars.scss
================================================
// Misc.
$misc: (
z-index-base: 10000,
main-side: right,
main-align: right,
thumbnails-per-row: 2
);
// Duration.
$duration: (
transition: 0.25s,
layout: 0.75s,
layout-alt: 0.5s,
slide: 0.5s,
spinner: 1s
);
// Size.
$size: (
border-radius: 4px,
border-width: 1px,
element-height: 2.75em,
element-margin: 1.25em,
main: 22.5em,
main-alt: 19em
);
// Font.
$font: (
family: ('Roboto', Helvetica, sans-serif),
family-fixed: ('Courier New', monospace),
weight: 400,
weight-bold: 700
);
// Palette.
$palette: (
page-bg: #101010,
bg: #fff,
fg: #aaa,
fg-bold: #555,
fg-light: #ccc,
border: #ccc,
accent: #00D3B7
);
================================================
FILE: Lens/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: Lens/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=Roboto:400,700");
/*
Lens 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 )
));
// 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';
// Layout.
@import 'layout/main';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/thumbnails';
@import 'layout/viewer';
================================================
FILE: Lens/sass/noscript.scss
================================================
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
/*
Lens by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Main */
#main {
opacity: 1 !important;
@if _misc(main-side) == 'left' {
left: 0 !important;
}
@else {
right: 0 !important;
}
}
body:before {
content: 'Javascript is disabled :(';
display: block;
position: absolute;
top: 50%;
width: calc(100% - #{_size(main)} * 0.333333333);
height: 4em;
margin-top: -2em;
color: mix(_palette(page-bg), #fff, 90%);
cursor: default;
font-size: 3em;
line-height: 4em;
text-align: center;
white-space: nowrap;
@if _misc(main-side) == 'left' {
right: 0;
}
@else {
left: 0;
}
}
================================================
FILE: Lens.php
================================================
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php
/**
* Lens风格照片集
*
* @package custom
*/
?>
<!--
作者：ZhangDi
https://github.com/zzd/photo-page-for-typecho
时间:2024-01-15 版权所有，请勿删除
-->
<!-- jsdelivr公共CDN -->
<?php
function usePublicCdn()
{
echo "https://cdn.jsdelivr.net/gh/zzd/photo-page-for-typecho@master";
}
?>
<!-- 公共CDN结束 -->
<!-- 相册图片对象存储供应商，用以加载缩略图 -->
<!-- 由于Lens模板的缩略图没有固定比例，故将裁剪工作交给云 -->
<?php
function storage($storage)
{
if ($storage == "UPYUN") {
echo "!/fw/640/quality/85/clip/640x400a0a0/gravity/center";
} elseif ($storage == "OSS") {
echo "?x-oss-process=image/crop,x_0,y_0,w_640,h_400,g_center";
} elseif ($storage == "KODO") {
echo "?imageMogr2/gravity/center/crop/!640x400";
} elseif ($storage == "COS") {
echo "?imageMogr2/gravity/center/crop/!640x400";
} else
echo "";
}
?>
<!-- 自动缩略图结束 -->
<!DOCTYPE HTML>
<html>
<head>
<title><?php $this->title() ?> - <?php $this->options->title() ?></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="<?php usePublicCdn(); ?>/Lens/css/main.css" />
<link rel="shortcut icon" href="<?php $this->options->siteUrl(); ?>/favicon.ico">
<noscript>
<link rel="stylesheet" href="<?php usePublicCdn(); ?>/Lens/css/noscript.css" /></noscript>
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?e804e37f8afa68b911afdd756b4314c7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body class="is-preload-0 is-preload-1 is-preload-2">
<!-- Main -->
<div id="main">
<!-- Header -->
<header id="header">
<h1><?php $this->title() ?></h1>
<?php if ($this->fields->about) : ?>
<p><?php echo $this->fields->about; ?></p>
<?php else : ?>
<p>在自定义字段内添加about字段，即可编辑此内容，现有内容将自动替换。</p>
<?php endif ?>
<ul class="icons">
<?php if ($this->fields->Twitter) : ?>
<li><a href="<?php echo $this->fields->Twitter; ?>" class="icon brands fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
<?php endif ?>
<?php if ($this->fields->Facebook) : ?>
<li><a href="<?php echo $this->fields->Facebook; ?>" class="icon brands fa-facebook-f" target="_blank"><span class="label">Facebook</span></a></li>
<?php endif ?>
<?php if ($this->fields->Instagram) : ?>
<li><a href="<?php echo $this->fields->Instagram; ?>" class="icon brands fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
<?php endif ?>
<?php if ($this->fields->GitHub) : ?>
<li><a href="<?php echo $this->fields->GitHub; ?>" class="icon brands fa-github" target="_blank"><span class="label">GitHub</span></a></li>
<?php endif ?>
</ul>
</header>
<!-- Thumbnail -->
<section id="thumbnails">
</section>
<!-- Footer -->
<footer id="footer">
<ul class="copyright">
<li>© <?php echo date("Y")?> <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a></li>
<li>Powered by <a href="https://github.com/zzd/photo-page-for-typecho">ZDSR</a> Based HTML5UP</a>.</li>
</ul>
</footer>
</div>
<!--
动态读取数据 by ZhangDi
https://github.com/zzd/photo-page-for-typecho
-->
<script type="text/javascript">
var datas =
`<?php
$html = $this->row['text'];
echo $html;
?>`;
datas = datas.split("\n");
for (var i = 0; i < datas.length; i++) {
datas[i] = datas[i].split(",");
}
function creatArticle(datas) {
var parent = document.getElementById("thumbnails");
for (var i = 0; i < datas.length; i++) {
var article = document.createElement("article");
article.className = "thumb";
parent.appendChild(article);
var a = document.createElement("a");
a.className = "thumbnail";
a.href = datas[i][2];
article.appendChild(a);
var img = document.createElement("img");
img.src = datas[i][2] + "<?php storage($this->fields->CDN); ?>";
a.appendChild(img);
var h2 = document.createElement("h2");
h2.innerHTML = datas[i][0];
article.appendChild(h2);
var p = document.createElement("p");
p.innerHTML = datas[i][1];
article.appendChild(p);
}
}
creatArticle(datas);
</script>
<!-- Scripts -->
<script src="<?php usePublicCdn(); ?>/Lens/js/jquery.min.js"></script>
<script src="<?php usePublicCdn(); ?>/Lens/js/browser.min.js"></script>
<script src="<?php usePublicCdn(); ?>/Lens/js/breakpoints.min.js"></script>
<script src="<?php usePublicCdn(); ?>/Lens/js/main.js"></script>
</body>
</html>
================================================
FILE: Multiverse/css/main.css
================================================
@import url(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)
*/
@-moz-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
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;
}
blockquote:before, blockquote:after, q:before, q: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;
}
/* Basic */
@-ms-viewport {
width: device-width;
}
body {
-ms-overflow-style: scrollbar;
}
@media screen and (max-width: 480px) {
html, body {
min-width: 320px;
}
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #242629;
}
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
/* Type */
body, input, select, textarea {
color: #a0a0a1;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 15pt;
font-weight: 300;
letter-spacing: 0.025em;
line-height: 1.65;
}
@media screen and (max-width: 1680px) {
body, input, select, textarea {
font-size: 11pt;
}
}
a {
-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
border-bottom: dotted 1px;
color: #34a58e;
text-decoration: none;
}
a:hover {
border-bottom-color: transparent;
color: #34a58e !important;
}
strong, b {
color: #ffffff;
font-weight: 300;
}
em, i {
font-style: italic;
}
p {
margin: 0 0 2em 0;
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
font-weight: 300;
letter-spacing: 0.1em;
line-height: 1.5;
margin: 0 0 1em 0;
text-transform: uppercase;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 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;
}
@media screen and (max-width: 736px) {
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 #36383c;
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
code {
background: #34363b;
border: solid 1px #36383c;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0 2em 0;
}
pre code {
display: block;
line-height: 1.75;
padding: 1em 1.5em;
overflow-x: auto;
}
hr {
border: 0;
border-bottom: solid 1px #36383c;
margin: 2em 0;
}
hr.major {
margin: 3em 0;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: inset 0 0 0 2px #36383c;
color: #ffffff !important;
cursor: pointer;
display: inline-block;
font-size: 0.9em;
font-weight: 300;
height: 3.05556em;
letter-spacing: 0.1em;
line-height: 3.05556em;
padding: 0 2.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
box-shadow: inset 0 0 0 2px #34a58e;
color: #34a58e !important;
}
input[type="submit"]:hover:active,
input[type="reset"]:hover:active,
input[type="button"]:hover:active,
button:hover:active,
.button:hover:active {
background-color: rgba(52, 165, 142, 0.15);
color: #34a58e !important;
}
input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
button.icon,
.button.icon {
padding-left: 1.35em;
}
input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
margin-right: 0.5em;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
font-size: 0.8em;
}
input[type="submit"].large,
input[type="reset"].large,
input[type="button"].large,
button.large,
.button.large {
font-size: 1.35em;
}
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
background-color: #34a58e;
box-shadow: none;
}
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
background-color: #47c5ab;
color: #ffffff !important;
}
input[type="submit"].primary:hover:active,
input[type="reset"].primary:hover:active,
input[type="button"].primary:hover:active,
button.primary:hover:active,
.button.primary:hover:active {
background-color: #287e6d;
}
input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
pointer-events: none;
opacity: 0.35;
}
/* Form */
form {
margin: 0 0 2em 0;
}
form > :last-child {
margin-bottom: 0;
}
form > .fields {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(100% + 3em);
margin: -1.5em 0 2em -1.5em;
}
form > .fields > .field {
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
padding: 1.5em 0 0 1.5em;
width: calc(100% - 1.5em);
}
form > .fields > .field.half {
width: calc(50% - 0.75em);
}
form > .fields > .field.third {
width: calc(100%/3 - 0.5em);
}
form > .fields > .field.quarter {
width: calc(25% - 0.375em);
}
@media screen and (max-width: 736px) {
form > .fields {
width: calc(100% + 3em);
margin: -1.5em 0 2em -1.5em;
}
form > .fields > .field {
padding: 1.5em 0 0 1.5em;
width: calc(100% - 1.5em);
}
form > .fields > .field.half {
width: calc(100% - 1.5em);
}
form > .fields > .field.third {
width: calc(100% - 1.5em);
}
form > .fields > .field.quarter {
width: calc(100% - 1.5em);
}
}
label {
color: #ffffff;
display: block;
font-size: 0.9em;
font-weight: 300;
margin: 0 0 1em 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
background: #34363b;
border: 0;
border-radius: 0;
color: #a0a0a1;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}
input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="tel"]:invalid,
input[type="search"]:invalid,
input[type="url"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
box-shadow: inset 0 0 0 2px #34a58e;
}
select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath 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='%2336383c' /%3E%3C/svg%3E");
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
height: 2.75em;
padding-right: 2.75em;
text-overflow: ellipsis;
}
select option {
color: #ffffff;
background: #242629;
}
select:focus::-ms-value {
background-color: transparent;
}
select::-ms-expand {
display: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
height: 2.75em;
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #a0a0a1;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 300;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-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;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
background: #34363b;
content: '';
display: inline-block;
font-size: 0.8em;
height: 2.0625em;
left: 0;
line-height: 2.0625em;
position: absolute;
text-align: center;
top: 0;
width: 2.0625em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background: #34a58e;
border-color: #34a58e;
color: #ffffff;
content: '\f00c';
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
box-shadow: 0 0 0 2px #34a58e;
}
input[type="radio"] + label:before {
border-radius: 100%;
}
::-webkit-input-placeholder {
color: #707071 !important;
opacity: 1.0;
}
:-moz-placeholder {
color: #707071 !important;
opacity: 1.0;
}
::-moz-placeholder {
color: #707071 !important;
opacity: 1.0;
}
:-ms-input-placeholder {
color: #707071 !important;
opacity: 1.0;
}
/* Icon */
.icon {
text-decoration: none;
border-bottom: none;
position: relative;
}
.icon:before {
-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;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
.icon > .label {
display: none;
}
.icon:before {
line-height: inherit;
}
.icon.solid:before {
font-weight: 900;
}
.icon.brands:before {
font-family: 'Font Awesome 5 Brands';
}
/* List */
ol {
list-style: decimal;
margin: 0 0 2em 0;
padding-left: 1.25em;
}
ol li {
padding-left: 0.25em;
}
ul {
list-style: disc;
margin: 0 0 2em 0;
padding-left: 1em;
}
ul li {
padding-left: 0.5em;
}
ul.alt {
list-style: none;
padding-left: 0;
}
ul.alt li {
border-top: solid 1px #36383c;
padding: 0.5em 0;
}
ul.alt li:first-child {
border-top: 0;
padding-top: 0;
}
dl {
margin: 0 0 2em 0;
}
dl dt {
display: block;
font-weight: 300;
margin: 0 0 1em 0;
}
dl dd {
margin-left: 2em;
}
/* Actions */
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -1em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 1em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
ul.actions.stacked li {
padding: 1.3em 0 0 0;
}
ul.actions.stacked li:first-child {
padding-top: 0;
}
ul.actions.fit {
width: calc(100% + 1em);
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
}
ul.actions.fit li > * {
width: 100%;
}
ul.actions.fit.stacked {
width: 100%;
}
@media screen and (max-width: 480px) {
ul.actions:not(.fixed) {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
width: 100% !important;
}
ul.actions:not(.fixed) li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
padding: 1em 0 0 0;
text-align: center;
width: 100%;
}
ul.actions:not(.fixed) li > * {
width: 100%;
}
ul.actions:not(.fixed) li:first-child {
padding-top: 0;
}
ul.actions:not(.fixed) li input[type="submit"],
ul.actions:not(.fixed) li input[type="reset"],
ul.actions:not(.fixed) li input[type="button"],
ul.actions:not(.fixed) li button,
ul.actions:not(.fixed) li .button {
width: 100%;
}
ul.actions:not(.fixed) li input[type="submit"].icon:before,
ul.actions:not(.fixed) li input[type="reset"].icon:before,
ul.actions:not(.fixed) li input[type="button"].icon:before,
ul.actions:not(.fixed) li button.icon:before,
ul.actions:not(.fixed) li .button.icon:before {
margin-left: -0.5rem;
}
}
/* Icons */
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
}
ul.icons li {
display: inline-block;
padding: 0 1em 0 0;
}
ul.icons li:last-child {
padding-right: 0;
}
ul.icons li .icon {
color: #505051;
}
ul.icons li .icon:before {
font-size: 1.5em;
}
/* Table */
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
table {
margin: 0 0 2em 0;
width: 100%;
}
table tbody tr {
border: solid 1px #36383c;
border-left: 0;
border-right: 0;
}
table tbody tr:nth-child(2n + 1) {
background-color: #34363b;
}
table td {
padding: 0.75em 0.75em;
}
table th {
color: #ffffff;
font-size: 0.9em;
font-weight: 300;
padding: 0 0.75em 0.75em 0.75em;
text-align: left;
}
table thead {
border-bottom: solid 2px #36383c;
}
table tfoot {
border-top: solid 2px #36383c;
}
table.alt {
border-collapse: separate;
}
table.alt tbody tr td {
border: solid 1px #36383c;
border-left-width: 0;
border-top-width: 0;
}
table.alt tbody tr td:first-child {
border-left-width: 1px;
}
table.alt tbody tr:first-child td {
border-top-width: 1px;
}
table.alt thead {
border-bottom: 0;
}
table.alt tfoot {
border-top: 0;
}
/* Panel */
.panel {
padding: 4em 4em 2em 4em ;
-moz-transform: translateY(100vh);
-webkit-transform: translateY(100vh);
-ms-transform: translateY(100vh);
transform: translateY(100vh);
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-overflow-scrolling: touch;
background: rgba(36, 38, 41, 0.975);
bottom: 4em;
left: 0;
max-height: calc(80vh - 4em);
overflow-y: auto;
position: fixed;
width: 100%;
z-index: 10001;
}
.panel.active {
-moz-transform: translateY(1px);
-webkit-transform: translateY(1px);
-ms-transform: translateY(1px);
transform: translateY(1px);
}
.panel > .inner {
margin: 0 auto;
max-width: 100%;
width: 75em;
}
.panel > .inner.split {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.panel > .inner.split > div {
margin-left: 4em;
width: 50%;
}
.panel > .inner.split > :first-child {
margin-left: 0;
}
.panel > .closer {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s 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;
}
.panel > .closer:hover {
opacity: 1.0;
}
@media screen and (max-width: 1280px) {
.panel {
padding: 3em 3em 1em 3em ;
}
.panel > .inner.split > div {
margin-left: 3em;
}
.panel > .closer {
background-size: 2.5em;
background-position: 75% 25%;
}
}
@media screen and (max-width: 980px) {
.panel > .inner.split {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panel > .inner.split > div {
margin-left: 0;
width: 100%;
}
}
@media screen and (max-width: 736px) {
.panel {
-moz-transform: translateY(-100vh);
-webkit-transform: translateY(-100vh);
-ms-transform: translateY(-100vh);
transform: translateY(-100vh);
padding: 4em 2em 2em 2em ;
bottom: auto;
top: calc(4em - 1px);
}
.panel.active {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
/* Poptrox Popup */
.poptrox-overlay {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.poptrox-popup {
background: rgba(31, 34, 36, 0.925);
box-shadow: 0 1em 3em 0.5em rgba(0, 0, 0, 0.25);
cursor: default;
}
.poptrox-popup:before {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
background-image: -moz-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0)), -moz-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0));
background-image: -webkit-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0)), -webkit-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0));
background-image: -ms-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0)), -ms-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0));
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;
}
.poptrox-popup .closer {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s 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;
}
.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s 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;
}
.poptrox-popup .nav-previous {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
left: 0;
}
.poptrox-popup .nav-next {
right: 0;
}
.poptrox-popup .caption {
padding: 2em 2em 0.1em 2em ;
background-image: -moz-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
background-image: -webkit-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
background-image: -ms-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
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;
}
.poptrox-popup .caption h2, .poptrox-popup .caption h3, .poptrox-popup .caption h4, .poptrox-popup .caption h5, .poptrox-popup .caption h6 {
margin: 0 0 0.5em 0;
}
.poptrox-popup .caption p {
color: #ffffff;
}
.poptrox-popup .loader {
-moz-animation: spinner 1s infinite linear !important;
-webkit-animation: spinner 1s infinite linear !important;
-ms-animation: spinner 1s infinite linear !important;
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;
}
.poptrox-popup:hover .closer,
.poptrox-popup:hover .nav-previous,
.poptrox-popup:hover .nav-next {
opacity: 0.5;
}
.poptrox-popup:hover .closer:hover,
.poptrox-popup:hover .nav-previous:hover,
.poptrox-popup:hover .nav-next:hover {
opacity: 1.0;
}
.poptrox-popup.loading:before {
opacity: 0;
}
body.touch .poptrox-popup .closer,
body.touch .poptrox-popup .nav-previous,
body.touch .poptrox-popup .nav-next {
opacity: 1.0 !important;
}
@media screen and (max-width: 980px) {
.poptrox-popup .closer {
background-size: 3em;
}
.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
background-size: 4em;
}
}
@media screen and (max-width: 736px) {
.poptrox-popup:before {
display: none;
}
.poptrox-popup .caption {
display: none !important;
}
.poptrox-popup .closer,
.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
display: none !important;
}
}
/* Wrapper */
#wrapper {
-moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -moz-filter 0.5s ease;
-webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -webkit-filter 0.5s ease;
-ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -ms-filter 0.5s ease;
transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
position: relative;
}
#wrapper:after {
pointer-events: none;
-moz-transition: opacity 0.5s ease, visibility 0.5s;
-webkit-transition: opacity 0.5s ease, visibility 0.5s;
-ms-transition: opacity 0.5s ease, visibility 0.5s;
transition: opacity 0.5s ease, visibility 0.5s;
background: rgba(36, 38, 41, 0.5);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
}
body.ie #wrapper:after {
background: rgba(36, 38, 41, 0.8);
}
body.modal-active #wrapper {
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
}
body.modal-active #wrapper:after {
pointer-events: auto;
opacity: 1;
visibility: visible;
z-index: 10003;
}
#wrapper:before {
-moz-animation: spinner 1s infinite linear !important;
-webkit-animation: spinner 1s infinite linear !important;
-ms-animation: spinner 1s infinite linear !important;
animation: spinner 1s infinite linear !important;
pointer-events: none;
-moz-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
-webkit-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
-ms-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
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 #wrapper:before {
-moz-transition: opacity 1s ease-out !important;
-webkit-transition: opacity 1s ease-out !important;
-ms-transition: opacity 1s ease-out !important;
transition: opacity 1s ease-out !important;
-moz-transition-delay: 0.5s !important;
-webkit-transition-delay: 0.5s !important;
-ms-transition-delay: 0.5s !important;
transition-delay: 0.5s !important;
opacity: 0.25;
top: 50%;
visibility: visible;
}
/* Header */
body {
padding: 0 0 4em 0;
}
#header {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-moz-transition: -moz-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
transition: transform 1s ease;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
background: #1f2224;
bottom: -1em;
height: 5em;
left: 0;
line-height: 4em;
padding: 0 1.5em;
position: fixed;
user-select: none;
width: 100%;
z-index: 10002;
}
body.is-preload #header {
-moz-transform: translateY(4em);
-webkit-transform: translateY(4em);
-ms-transform: translateY(4em);
transform: translateY(4em);
}
#header h1 {
color: #a0a0a1;
display: inline-block;
font-size: 1em;
line-height: 1;
margin: 0;
vertical-align: middle;
}
#header h1 a {
border: 0;
color: inherit;
}
#header h1 a:hover {
color: inherit !important;
}
#header nav {
position: absolute;
right: 0;
top: 0;
}
#header nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
#header nav > ul > li {
display: inline-block;
padding: 0;
}
#header nav > ul > li a {
-moz-transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
border: 0;
color: #ffffff;
display: inline-block;
letter-spacing: 0.1em;
padding: 0 1.65em;
text-transform: uppercase;
}
#header nav > ul > li a.icon:before {
color: #505051;
float: right;
margin-left: 0.75em;
}
#header nav > ul > li a:hover {
color: #ffffff !important;
}
#header nav > ul > li a.active {
background-color: #242629;
}
@media screen and (max-width: 736px) {
body {
padding: 4em 0 0 0;
}
#header {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
bottom: auto;
height: 4em;
padding: 0 1em;
top: 0;
}
body.is-preload #header {
-moz-transform: translateY(-3.4em);
-webkit-transform: translateY(-3.4em);
-ms-transform: translateY(-3.4em);
transform: translateY(-3.4em);
}
#header h1 {
font-size: 0.9em;
}
#header nav > ul > li a {
font-size: 0.9em;
padding: 0 1.15em;
}
}
/* Main */
#main {
-moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -moz-filter 0.5s ease;
-webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -webkit-filter 0.5s ease;
-ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -ms-filter 0.5s ease;
transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#main .thumb {
-moz-transition: opacity 1.25s ease-in-out;
-webkit-transition: opacity 1.25s ease-in-out;
-ms-transition: opacity 1.25s ease-in-out;
transition: opacity 1.25s ease-in-out;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
opacity: 1;
overflow: hidden;
position: relative;
}
#main .thumb:after {
background-image: -moz-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
background-image: -webkit-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
background-image: -ms-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
background-image: linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
pointer-events: none;
background-size: cover;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#main .thumb > .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%;
}
#main .thumb > h2 {
pointer-events: none;
bottom: 1.875em;
font-size: 0.8em;
left: 2.1875em;
margin: 0;
position: absolute;
z-index: 1;
}
#main .thumb > p {
display: none;
}
#main:after {
pointer-events: none;
-moz-transition: opacity 0.5s ease, visibility 0.5s;
-webkit-transition: opacity 0.5s ease, visibility 0.5s;
-ms-transition: opacity 0.5s ease, visibility 0.5s;
transition: opacity 0.5s ease, visibility 0.5s;
background: rgba(36, 38, 41, 0.25);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
}
body.ie #main:after {
background: rgba(36, 38, 41, 0.55);
}
body.content-active #main {
-moz-filter: blur(6px);
-webkit-filter: blur(6px);
-ms-filter: blur(6px);
filter: blur(6px);
}
body.content-active #main:after {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
body.is-preload #main .thumb {
pointer-events: none;
opacity: 0;
}
#main .thumb {
-moz-transition-delay: 2.525s;
-webkit-transition-delay: 2.525s;
-ms-transition-delay: 2.525s;
transition-delay: 2.525s;
height: calc(40vh - 2em);
min-height: 20em;
width: 25%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
#main .thumb:nth-child(7) {
-moz-transition-delay: 1.55s;
-webkit-transition-delay: 1.55s;
-ms-transition-delay: 1.55s;
transition-delay: 1.55s;
}
#main .thumb:nth-child(8) {
-moz-transition-delay: 1.7s;
-webkit-transition-delay: 1.7s;
-ms-transition-delay: 1.7s;
transition-delay: 1.7s;
}
#main .thumb:nth-child(9) {
-moz-transition-delay: 1.85s;
-webkit-transition-delay: 1.85s;
-ms-transition-delay: 1.85s;
transition-delay: 1.85s;
}
#main .thumb:nth-child(10) {
-moz-transition-delay: 2s;
-webkit-transition-delay: 2s;
-ms-transition-delay: 2s;
transition-delay: 2s;
}
#main .thumb:nth-child(11) {
-moz-transition-delay: 2.15s;
-webkit-transition-delay: 2.15s;
-ms-transition-delay: 2.15s;
transition-delay: 2.15s;
}
#main .thumb:nth-child(12) {
-moz-transition-delay: 2.3s;
-webkit-transition-delay: 2.3s;
-ms-transition-delay: 2.3s;
transition-delay: 2.3s;
}
@media screen and (max-width: 1680px) {
#main .thumb {
-moz-transition-delay: 2.075s;
-webkit-transition-delay: 2.075s;
-ms-transition-delay: 2.075s;
transition-delay: 2.075s;
height: calc(40vh - 2em);
min-height: 20em;
width: 33.33333%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
#main .thumb:nth-child(7) {
-moz-transition-delay: 1.55s;
-webkit-transition-delay: 1.55s;
-ms-transition-delay: 1.55s;
transition-delay: 1.55s;
}
#main .thumb:nth-child(8) {
-moz-transition-delay: 1.7s;
-webkit-transition-delay: 1.7s;
-ms-transition-delay: 1.7s;
transition-delay: 1.7s;
}
#main .thumb:nth-child(9) {
-moz-transition-delay: 1.85s;
-webkit-transition-delay: 1.85s;
-ms-transition-delay: 1.85s;
transition-delay: 1.85s;
}
}
@media screen and (max-width: 1280px) {
#main .thumb {
-moz-transition-delay: 1.625s;
-webkit-transition-delay: 1.625s;
-ms-transition-delay: 1.625s;
transition-delay: 1.625s;
height: calc(40vh - 2em);
min-height: 20em;
width: 50%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
}
@media screen and (max-width: 980px) {
#main .thumb {
-moz-transition-delay: 2.075s;
-webkit-transition-delay: 2.075s;
-ms-transition-delay: 2.075s;
transition-delay: 2.075s;
height: calc(28.57143vh - 1.33333em);
min-height: 18em;
width: 50%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
#main .thumb:nth-child(7) {
-moz-transition-delay: 1.55s;
-webkit-transition-delay: 1.55s;
-ms-transition-delay: 1.55s;
transition-delay: 1.55s;
}
#main .thumb:nth-child(8) {
-moz-transition-delay: 1.7s;
-webkit-transition-delay: 1.7s;
-ms-transition-delay: 1.7s;
transition-delay: 1.7s;
}
#main .thumb:nth-child(9) {
-moz-transition-delay: 1.85s;
-webkit-transition-delay: 1.85s;
-ms-transition-delay: 1.85s;
transition-delay: 1.85s;
}
}
@media screen and (max-width: 480px) {
#main .thumb {
-moz-transition-delay: 1.175s;
-webkit-transition-delay: 1.175s;
-ms-transition-delay: 1.175s;
transition-delay: 1.175s;
height: calc(40vh - 2em);
min-height: 18em;
width: 100%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
}
/* Footer */
#footer .copyright {
color: #505051;
font-size: 0.9em;
}
#footer .copyright a {
color: inherit;
}
================================================
FILE: Multiverse/css/noscript.css
================================================
/*
Multiverse by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Wrapper */
body.is-preload #wrapper:before {
display: none;
}
/* Main */
body.is-preload #main .thumb {
pointer-events: auto;
opacity: 1;
}
/* Header */
body.is-preload #header {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
================================================
FILE: Multiverse/js/main.js
================================================
/*
Multiverse by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
var $window = $(window),
$body = $('body'),
$wrapper = $('#wrapper');
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ null, '480px' ]
});
// Hack: Enable IE workarounds.
if (browser.name == 'ie')
$body.addClass('ie');
// Touch?
if (browser.mobile)
$body.addClass('touch');
// Transitions supported?
if (browser.canUse('transition')) {
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Prevent transitions/animations on resize.
var resizeTimeout;
$window.on('resize', function() {
window.clearTimeout(resizeTimeout);
$body.addClass('is-resizing');
resizeTimeout = window.setTimeout(function() {
$body.removeClass('is-resizing');
}, 100);
});
}
// Scroll back to top.
$window.scrollTop(0);
// Panels.
var $panels = $('.panel');
$panels.each(function() {
var $this = $(this),
$toggles = $('[href="#' + $this.attr('id') + '"]'),
$closer = $('<div class="closer" />').appendTo($this);
// Closer.
$closer
.on('click', function(event) {
$this.trigger('---hide');
});
// Events.
$this
.on('click', function(event) {
event.stopPropagation();
})
.on('---toggle', function() {
if ($this.hasClass('active'))
$this.triggerHandler('---hide');
else
$this.triggerHandler('---show');
})
.on('---show', function() {
// Hide other content.
if ($body.hasClass('content-active'))
$panels.trigger('---hide');
// Activate content, toggles.
$this.addClass('active');
$toggles.addClass('active');
// Activate body.
$body.addClass('content-active');
})
.on('---hide', function() {
// Deactivate content, toggles.
$this.removeClass('active');
$toggles.removeClass('active');
// Deactivate body.
$body.removeClass('content-active');
});
// Toggles.
$toggles
.removeAttr('href')
.css('cursor', 'pointer')
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$this.trigger('---toggle');
});
});
// Global events.
$body
.on('click', function(event) {
if ($body.hasClass('content-active')) {
event.preventDefault();
event.stopPropagation();
$panels.trigger('---hide');
}
});
$window
.on('keyup', function(event) {
if (event.keyCode == 27
&& $body.hasClass('content-active')) {
event.preventDefault();
event.stopPropagation();
$panels.trigger('---hide');
}
});
// Header.
var $header = $('#header');
// Links.
$header.find('a').each(function() {
var $this = $(this),
href = $this.attr('href');
// Internal link? Skip.
if (!href
|| href.charAt(0) == '#')
return;
// Redirect on click.
$this
.removeAttr('href')
.css('cursor', 'pointer')
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
window.location.href = href;
});
});
// Footer.
var $footer = $('#footer');
// Copyright.
// This basically just moves the copyright line to the end of the *last* sibling of its current parent
// when the "medium" breakpoint activates, and moves it back when it deactivates.
$footer.find('.copyright').each(function() {
var $this = $(this),
$parent = $this.parent(),
$lastParent = $parent.parent().children().last();
breakpoints.on('<=medium', function() {
$this.appendTo($lastParent);
});
breakpoints.on('>medium', function() {
$this.appendTo($parent);
});
});
// Main.
var $main = $('#main');
// Thumbs.
$main.children('.thumb').each(function() {
var $this = $(this),
$image = $this.find('.image'), $image_img = $image.children('img'),
x;
// No image? Bail.
if ($image.length == 0)
return;
// Image.
// This sets the background of the "image" <span> to the image pointed to by its child
// <img> (which is then hidden). Gives us way more flexibility.
// Set background.
$image.css('background-image', 'url(' + $image_img.attr('src') + ')');
// Set background position.
if (x = $image_img.data('position'))
$image.css('background-position', x);
// Hide original img.
$image_img.hide();
});
// Poptrox.
$main.poptrox({
baseZIndex: 20000,
caption: function($a) {
var s = '';
$a.nextAll().each(function() {
s += this.outerHTML;
});
return s;
},
fadeSpeed: 300,
onPopupClose: function() { $body.removeClass('modal-active'); },
onPopupOpen: function() { $body.addClass('modal-active'); },
overlayOpacity: 0,
popupCloserText: '',
popupHeight: 150,
popupLoaderText: '',
popupSpeed: 300,
popupWidth: 150,
selector: '.thumb > a.image',
usePopupCaption: true,
usePopupCloser: true,
usePopupDefaultStyling: false,
usePopupForceClose: true,
usePopupLoader: true,
usePopupNav: true,
windowMargin: 50
});
// Hack: Set margins to 0 when 'xsmall' activates.
breakpoints.on('<=xsmall', function() {
$main[0]._poptrox.windowMargin = 0;
});
breakpoints.on('>xsmall', function() {
$main[0]._poptrox.windowMargin = 50;
});
})(jQuery);
================================================
FILE: Multiverse/js/util.js
================================================
(function($) {
/**
* Generate an indented list of links from a nav. Meant for use with panel().
* @return {jQuery} jQuery object.
*/
$.fn.navList = function() {
var $this = $(this);
$a = $this.find('a'),
b = [];
$a.each(function() {
var $this = $(this),
indent = Math.max(0, $this.parents('li').length - 1),
href = $this.attr('href'),
target = $this.attr('target');
b.push(
'<a ' +
'class="link depth-' + indent + '"' +
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
'>' +
'<span class="indent-' + indent + '"></span>' +
$this.text() +
'</a>'
);
});
return b.join('');
};
/**
* Panel-ify an element.
* @param {object} userConfig User config.
* @return {jQuery} jQuery object.
*/
$.fn.panel = function(userConfig) {
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).panel(userConfig);
return $this;
}
// Vars.
var $this = $(this),
$body = $('body'),
$window = $(window),
id = $this.attr('id'),
config;
// Config.
config = $.extend({
// Delay.
delay: 0,
// Hide panel on link click.
hideOnClick: false,
// Hide panel on escape keypress.
hideOnEscape: false,
// Hide panel on swipe.
hideOnSwipe: false,
// Reset scroll position on hide.
resetScroll: false,
// Reset forms on hide.
resetForms: false,
// Side of viewport the panel will appear.
side: null,
// Target element for "class".
target: $this,
// Class to toggle.
visibleClass: 'visible'
}, userConfig);
// Expand "target" if it's not a jQuery object already.
if (typeof config.target != 'jQuery')
config.target = $(config.target);
// Panel.
// Methods.
$this._hide = function(event) {
// Already hidden? Bail.
if (!config.target.hasClass(config.visibleClass))
return;
// If an event was provided, cancel it.
if (event) {
event.preventDefault();
event.stopPropagation();
}
// Hide.
config.target.removeClass(config.visibleClass);
// Post-hide stuff.
window.setTimeout(function() {
// Reset scroll position.
if (config.resetScroll)
$this.scrollTop(0);
// Reset forms.
if (config.resetForms)
$this.find('form').each(function() {
this.reset();
});
}, config.delay);
};
// Vendor fixes.
$this
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
.css('-webkit-overflow-scrolling', 'touch');
// Hide on click.
if (config.hideOnClick) {
$this.find('a')
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
$this
.on('click', 'a', function(event) {
var $a = $(this),
href = $a.attr('href'),
target = $a.attr('target');
if (!href || href == '#' || href == '' || href == '#' + id)
return;
// Cancel original event.
event.preventDefault();
event.stopPropagation();
// Hide panel.
$this._hide();
// Redirect to href.
window.setTimeout(function() {
if (target == '_blank')
window.open(href);
else
window.location.href = href;
}, config.delay + 10);
});
}
// Event: Touch stuff.
$this.on('touchstart', function(event) {
$this.touchPosX = event.originalEvent.touches[0].pageX;
$this.touchPosY = event.originalEvent.touches[0].pageY;
})
$this.on('touchmove', function(event) {
if ($this.touchPosX === null
|| $this.touchPosY === null)
return;
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
th = $this.outerHeight(),
ts = ($this.get(0).scrollHeight - $this.scrollTop());
// Hide on swipe?
if (config.hideOnSwipe) {
var result = false,
boundary = 20,
delta = 50;
switch (config.side) {
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
case 'top':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
break;
case 'bottom':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
break;
default:
break;
}
if (result) {
$this.touchPosX = null;
$this.touchPosY = null;
$this._hide();
return false;
}
}
// Prevent vertical scrolling past the top or bottom.
if (($this.scrollTop() < 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
}
});
// Event: Prevent certain events inside the panel from bubbling.
$this.on('click touchend touchstart touchmove', function(event) {
event.stopPropagation();
});
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
$this.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.removeClass(config.visibleClass);
});
// Body.
// Event: Hide panel on body click/tap.
$body.on('click touchend', function(event) {
$this._hide(event);
});
// Event: Toggle.
$body.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.toggleClass(config.visibleClass);
});
// Window.
// Event: Hide on ESC.
if (config.hideOnEscape)
$window.on('keydown', function(event) {
if (event.keyCode == 27)
$this._hide(event);
});
return $this;
};
/**
* Apply "placeholder" attribute polyfill to one or more forms.
* @return {jQuery} jQuery object.
*/
$.fn.placeholder = function() {
// Browser natively supports placeholders? Bail.
if (typeof (document.createElement('input')).placeholder != 'undefined')
return $(this);
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).placeholder();
return $this;
}
// Vars.
var $this = $(this);
// Text, TextArea.
$this.find('input[type=text],textarea')
.each(function() {
var i = $(this);
if (i.val() == ''
|| i.val() == i.attr('placeholder'))
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('blur', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == '')
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('focus', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == i.attr('placeholder'))
i
.removeClass('polyfill-placeholder')
.val('');
});
// Password.
$this.find('input[type=password]')
.each(function() {
var i = $(this);
var x = $(
$('<div>')
.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("<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-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
gitextract_lgb0mua0/ ├── LICENSE ├── Lens/ │ ├── css/ │ │ ├── main.css │ │ └── noscript.css │ ├── js/ │ │ └── main.js │ └── sass/ │ ├── base/ │ │ ├── _page.scss │ │ ├── _reset.scss │ │ └── _typography.scss │ ├── components/ │ │ ├── _actions.scss │ │ ├── _button.scss │ │ ├── _form.scss │ │ ├── _icon.scss │ │ ├── _icons.scss │ │ └── _list.scss │ ├── layout/ │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _main.scss │ │ ├── _thumbnails.scss │ │ └── _viewer.scss │ ├── libs/ │ │ ├── _breakpoints.scss │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ ├── _vars.scss │ │ └── _vendor.scss │ ├── main.scss │ └── noscript.scss ├── Lens.php ├── Multiverse/ │ ├── css/ │ │ ├── main.css │ │ └── noscript.css │ ├── js/ │ │ ├── main.js │ │ └── util.js │ └── sass/ │ ├── base/ │ │ ├── _page.scss │ │ ├── _reset.scss │ │ └── _typography.scss │ ├── components/ │ │ ├── _actions.scss │ │ ├── _button.scss │ │ ├── _form.scss │ │ ├── _icon.scss │ │ ├── _icons.scss │ │ ├── _list.scss │ │ ├── _panel.scss │ │ ├── _poptrox-popup.scss │ │ └── _table.scss │ ├── layout/ │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _main.scss │ │ └── _wrapper.scss │ ├── libs/ │ │ ├── _breakpoints.scss │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ ├── _vars.scss │ │ └── _vendor.scss │ ├── main.scss │ └── noscript.scss ├── Multiverse.php ├── README-EN.md └── README.md
SYMBOL INDEX (4 symbols across 2 files) FILE: Lens.php function usePublicCdn (line 16) | function usePublicCdn() function storage (line 25) | function storage($storage) FILE: Multiverse.php function usePublicCdn (line 16) | function usePublicCdn() function storage (line 24) | function storage($storage)
Condensed preview — 56 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (252K chars).
[
{
"path": "LICENSE",
"chars": 1066,
"preview": "MIT License\n\nCopyright (c) 2019 616620131\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\n"
},
{
"path": "Lens/css/main.css",
"chars": 27266,
"preview": "@import url(fontawesome-all.min.css);\n@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,700\");\n\n/*\n\tLens b"
},
{
"path": "Lens/css/noscript.css",
"chars": 525,
"preview": "/*\n\tLens by HTML5 UP\n\thtml5up.net | @ajlkn\n\tFree for personal and commercial use under the CCA 3.0 license (html5up.net/"
},
{
"path": "Lens/js/main.js",
"chars": 13966,
"preview": "/*\n\tLens by HTML5 UP\n\thtml5up.net | @ajlkn\n\tFree for personal and commercial use under the CCA 3.0 license (html5up.net/"
},
{
"path": "Lens/sass/base/_page.scss",
"chars": 875,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/base/_reset.scss",
"chars": 1489,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/base/_typography.scss",
"chars": 2461,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/components/_actions.scss",
"chars": 1683,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/components/_button.scss",
"chars": 1242,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/components/_form.scss",
"chars": 4049,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/components/_icon.scss",
"chars": 445,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/components/_icons.scss",
"chars": 398,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/components/_list.scss",
"chars": 843,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/layout/_footer.scss",
"chars": 415,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/layout/_header.scss",
"chars": 274,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/layout/_main.scss",
"chars": 2287,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/layout/_thumbnails.scss",
"chars": 1271,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/layout/_viewer.scss",
"chars": 5097,
"preview": "///\n/// Lens by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 license (ht"
},
{
"path": "Lens/sass/libs/_breakpoints.scss",
"chars": 4577,
"preview": "// breakpoints.scss v1.0 | @ajlkn | MIT licensed */\n\n// Vars.\n\n\t/// Breakpoints.\n\t/// @var {list}\n\t$breakpoints: () !glo"
},
{
"path": "Lens/sass/libs/_functions.scss",
"chars": 1868,
"preview": "/// Removes a specific item from a list.\n/// @author Hugo Giraudel\n/// @param {list} $list List.\n/// @param {integer} $i"
},
{
"path": "Lens/sass/libs/_mixins.scss",
"chars": 2141,
"preview": "/// Makes an element's :before pseudoelement a FontAwesome icon.\n/// @param {string} $content Optional content value to "
},
{
"path": "Lens/sass/libs/_vars.scss",
"chars": 725,
"preview": "// Misc.\n\t$misc: (\n\t\tz-index-base:\t\t10000,\n\t\tmain-side:\t\t\tright,\n\t\tmain-align:\t\t\tright,\n\t\tthumbnails-per-row:\t2\n\t);\n\n// "
},
{
"path": "Lens/sass/libs/_vendor.scss",
"chars": 7355,
"preview": "// vendor.scss v1.0 | @ajlkn | MIT licensed */\n\n// Vars.\n\n\t/// Vendor prefixes.\n\t/// @var {list}\n\t$vendor-prefixes: (\n\t\t"
},
{
"path": "Lens/sass/main.scss",
"chars": 984,
"preview": "@import 'libs/vars';\n@import 'libs/functions';\n@import 'libs/mixins';\n@import 'libs/vendor';\n@import 'libs/breakpoints';"
},
{
"path": "Lens/sass/noscript.scss",
"chars": 827,
"preview": "@import 'libs/vars';\n@import 'libs/functions';\n@import 'libs/mixins';\n@import 'libs/vendor';\n@import 'libs/breakpoints';"
},
{
"path": "Lens.php",
"chars": 4632,
"preview": "<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>\n<?php\n/**\n * Lens风格照片集\n *\n * @package custom\n */\n?>\n<!-- \n作者：Zhang"
},
{
"path": "Multiverse/css/main.css",
"chars": 44143,
"preview": "@import url(fontawesome-all.min.css);\n@import url(\"https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic"
},
{
"path": "Multiverse/css/noscript.css",
"chars": 432,
"preview": "/*\n\tMultiverse by HTML5 UP\n\thtml5up.net | @ajlkn\n\tFree for personal and commercial use under the CCA 3.0 license (html5u"
},
{
"path": "Multiverse/js/main.js",
"chars": 5827,
"preview": "/*\n\tMultiverse by HTML5 UP\n\thtml5up.net | @ajlkn\n\tFree for personal and commercial use under the CCA 3.0 license (html5u"
},
{
"path": "Multiverse/js/util.js",
"chars": 11847,
"preview": "(function($) {\n\n\t/**\n\t * Generate an indented list of links from a nav. Meant for use with panel().\n\t * @return {jQuery}"
},
{
"path": "Multiverse/sass/base/_page.scss",
"chars": 1150,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/base/_reset.scss",
"chars": 1495,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/base/_typography.scss",
"chars": 2633,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_actions.scss",
"chars": 1689,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_button.scss",
"chars": 1794,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_form.scss",
"chars": 4710,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_icon.scss",
"chars": 451,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_icons.scss",
"chars": 435,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_list.scss",
"chars": 838,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_panel.scss",
"chars": 1985,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_poptrox-popup.scss",
"chars": 3205,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/components/_table.scss",
"chars": 1212,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/layout/_footer.scss",
"chars": 280,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/layout/_header.scss",
"chars": 2210,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/layout/_main.scss",
"chars": 4071,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/layout/_wrapper.scss",
"chars": 1960,
"preview": "///\n/// Multiverse by HTML5 UP\n/// html5up.net | @ajlkn\n/// Free for personal and commercial use under the CCA 3.0 licen"
},
{
"path": "Multiverse/sass/libs/_breakpoints.scss",
"chars": 4577,
"preview": "// breakpoints.scss v1.0 | @ajlkn | MIT licensed */\n\n// Vars.\n\n\t/// Breakpoints.\n\t/// @var {list}\n\t$breakpoints: () !glo"
},
{
"path": "Multiverse/sass/libs/_functions.scss",
"chars": 1868,
"preview": "/// Removes a specific item from a list.\n/// @author Hugo Giraudel\n/// @param {list} $list List.\n/// @param {integer} $i"
},
{
"path": "Multiverse/sass/libs/_mixins.scss",
"chars": 2141,
"preview": "/// Makes an element's :before pseudoelement a FontAwesome icon.\n/// @param {string} $content Optional content value to "
},
{
"path": "Multiverse/sass/libs/_vars.scss",
"chars": 1396,
"preview": "// Misc.\n\t$misc: (\n\t\tz-index-base:\t\t10000,\n\t\tmain-layout:\t\t(\n\t\t\tdefault:\t\t(\n\t\t\t\trows:\t\t2,\n\t\t\t\tcolumns:\t4,\n\t\t\t\tpad:\t\t0.5,"
},
{
"path": "Multiverse/sass/libs/_vendor.scss",
"chars": 7355,
"preview": "// vendor.scss v1.0 | @ajlkn | MIT licensed */\n\n// Vars.\n\n\t/// Vendor prefixes.\n\t/// @var {list}\n\t$vendor-prefixes: (\n\t\t"
},
{
"path": "Multiverse/sass/main.scss",
"chars": 1258,
"preview": "@import 'libs/vars';\n@import 'libs/functions';\n@import 'libs/mixins';\n@import 'libs/vendor';\n@import 'libs/breakpoints';"
},
{
"path": "Multiverse/sass/noscript.scss",
"chars": 581,
"preview": "@import 'libs/vars';\n@import 'libs/functions';\n@import 'libs/mixins';\n@import 'libs/vendor';\n@import 'libs/breakpoints';"
},
{
"path": "Multiverse.php",
"chars": 5471,
"preview": "<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>\n<?php\n/**\n * Multiverse风格照片集\n *\n * @package custom\n */\n?>\n<!-- \n作者"
},
{
"path": "README-EN.md",
"chars": 3902,
"preview": "# photo page for typecho\n\n<img alt=\"GitHub repo size\" src=\"https://img.shields.io/github/repo-size/zzd/photo-page-for-ty"
},
{
"path": "README.md",
"chars": 2332,
"preview": "# photo page for typecho\n\n<img alt=\"GitHub repo size\" src=\"https://img.shields.io/github/repo-size/zzd/photo-page-for-ty"
}
]
About this extraction
This page contains the full source code of the zzd/photo-page-for-typecho GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 56 files (207.0 KB), approximately 71.3k tokens, and a symbol index with 4 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.