Lightbox, styled, changed text content, links
This commit is contained in:
Joe Wroten
parent
ede822f726
commit
e4bf8e11e2
30 changed files with 140 additions and 553 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
12
:w
Normal file
12
:w
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
body {
|
||||
background: #f8f8f2;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.top-spacing {
|
||||
margin-top: 5%;
|
||||
}
|
||||
39
README.md
39
README.md
|
|
@ -2,46 +2,17 @@
|
|||
|
||||
[](https://app.netlify.com/sites/gaiety-art/deploys)
|
||||
|
||||
This is a photo gallery demo project for Netlify Large Media made with photos from [Unsplash](https://unsplash.com/) and built with [Hugo](https://gohugo.io/).
|
||||
## Deving Locally
|
||||
|
||||
This project has two branches:
|
||||
|
||||
* **master:** A photo gallery that does _not_ have Netlify Large Media enabled yet. You can follow the [README instructions](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md/#how-to-deploy-your-own-photo-gallery-with-large-media) to deploy this with your Netlify account and start using Large Media yourself.
|
||||
* **large-media-sample:** A copy of the photo gallery, with Netlify Large Media enabled. You can go to the files in the [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is used to deploy the demo site, [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/).
|
||||
|
||||
## How to deploy your own photo gallery with Netlify Large Media
|
||||
|
||||
1. Deploy to Netlify with "Deploy to Netlify" button. This will create a new Netlify site and copy the repository to your GitHub account.
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-photo-gallery)
|
||||
2. Find your newly created repository on GitHub and clone it to your local computer with `git clone`.
|
||||
3. Follow the instructions for [Enabling Netlify Large Media](https://www.netlify.com/docs/large-media/#enabling-netlify-large-media) to enable Large Media for the newly deployed site.
|
||||
4. Specify which files to track using the `git lfs track` command. The following example tracks `jpg` and `png` files. Tracking them is required for this photo gallery, so you can start tracking them:
|
||||
* To track jpg files: `git lfs track "*.jpg"`.
|
||||
* To track png files: `git lfs track "*.png"`.
|
||||
5. Find out more about how to configure file tracking in [the documentation](https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration).
|
||||
7. After making sure you `git add` and `git commit` your changes, run `git push origin master` to push your changes to GitHub. It'll be automatically deployed to Netlify using Large Media.
|
||||
8. When your deploy is done, try running transformations with the image files. For example, you can tweak the layout file at `layouts/photos_s/list.html`.
|
||||
|
||||
## Running the site locally
|
||||
|
||||
This site is built with Hugo, and works with Hugo version 0.42 and above. Run `hugo version` in your teminal to see if you have Hugo installed. If it's not installed, or you have a version below 0.42, follow the [Hugo documentation](https://gohugo.io/getting-started/installing) to install the current version.
|
||||
|
||||
When Hugo is installed, `cd` into this repository and run:
|
||||
https://gohugo.io/
|
||||
|
||||
```
|
||||
hugo server
|
||||
```
|
||||
|
||||
After building the site, the terminal will output the URL for the local server. It will hot reload when you save changes.
|
||||
## Forked from Netlify Photo Gallery
|
||||
|
||||
## To add photos to the gallery:
|
||||
https://github.com/netlify/netlify-photo-gallery/blob/master/README.md/#how-to-deploy-your-own-photo-gallery-with-large-media
|
||||
|
||||
1. Add some images in `static/images` folder, and the info to `data/photos.json`.
|
||||
* You can check which files/suffix are currently tracked by checking `.gitattributes` file.
|
||||
2. Once it's done, you can `git add`, `git commit`, then `git push` to push them to Netlify Large Media!
|
||||
3. By running `git lfs ls-files`, you can double check which files are managed by Large Media.
|
||||
Requires Git LFS
|
||||
|
||||
## Get fancy
|
||||
|
||||
With Netlify Large Media, you can do cool things like image transformation. You can visit the [documentation](https://www.netlify.com/docs/image-transformation/) for more detail.
|
||||
|
|
|
|||
18
config.toml
18
config.toml
|
|
@ -1,17 +1,3 @@
|
|||
baseURL = "https://netlify-photo-gallery.netlify.com/"
|
||||
baseURL = "https://gaiety.art/"
|
||||
languageCode = "en-us"
|
||||
title = "Netlify photo gallery"
|
||||
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
identifier = "top"
|
||||
name = "Home"
|
||||
url = "/"
|
||||
[[menu.main]]
|
||||
identifier = "photos_m"
|
||||
name = "Photo gallery (masonry)"
|
||||
url = "/photos_m/"
|
||||
[[menu.main]]
|
||||
identifier = "photos_s"
|
||||
name = "Photo gallery (square)"
|
||||
url = "/photos_s/"
|
||||
title = "Gaiety Art"
|
||||
|
|
|
|||
|
|
@ -1,15 +1,5 @@
|
|||
---
|
||||
title: "All the cool photos live here"
|
||||
title: "Gaiety Art"
|
||||
date: 2019-02-11T18:25:55-08:00
|
||||
---
|
||||
|
||||
This is a photo gallery demo project for Netlify Large Media made with photos from [Unsplash](https://unsplash.com/) and built with [Hugo](https://gohugo.io/).
|
||||
|
||||
This project has two branches:
|
||||
|
||||
- **master:** A photo gallery that does _not_ have Netlify Large Media enabled yet. You can follow the [README instructions](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md/#how-to-deploy-your-own-photo-gallery-with-large-media) to deploy this with your Netlify account and start using Large Media yourself.
|
||||
- **large-media-sample:** A copy of the photo gallery, with Netlify Large Media enabled. You can go to the files in the [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is used to deploy the demo site, [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/).
|
||||
|
||||
### What can I do with this?
|
||||
|
||||
If you want to try deploying your own photo gallery with Netlify Large Media, please go to the [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) for how to do it.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: "Photo list"
|
||||
date: 2019-02-11T18:47:38-08:00
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: "Photo list"
|
||||
date: 2019-02-11T18:47:38-08:00
|
||||
---
|
||||
|
|
@ -8,24 +8,26 @@
|
|||
{{ end }}</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Poppins:400&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/css/normalize.css">
|
||||
<link rel="stylesheet" href="/css/skeleton.css">
|
||||
<link rel="stylesheet" href="/css/masonry.css">
|
||||
<link rel="stylesheet" href="/css/spotlight.css">
|
||||
<link rel="stylesheet" href="/css/custom.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="body">
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: 5%">
|
||||
{{ range .Site.Menus.main }}
|
||||
<div class="one-third column">
|
||||
<a href="{{ .URL }}" title="{{ .Title }}">
|
||||
{{- .Name -}}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<header class="header top-spacing">
|
||||
<h1>{{.Title}}</h1>
|
||||
|
||||
<a href="https://www.wroten.me/">
|
||||
Portfolio
|
||||
</a>
|
||||
<a href="https://gaiety.life/">
|
||||
Life (Blog)
|
||||
</a>
|
||||
</header>
|
||||
<!-- Code that all your templates share, like a header -->
|
||||
{{ block "main" . }}
|
||||
<!-- The part of the page that begins to differ between templates -->
|
||||
|
|
@ -34,6 +36,7 @@
|
|||
<!-- More shared code, perhaps a footer but that can be overridden if need be in -->
|
||||
{{ end }}
|
||||
</div>
|
||||
<script src="/js/spotlight.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<div class="row">
|
||||
<div class="twelve column" style="margin-top: 5%">
|
||||
<h1>{{.Title}}</h1>
|
||||
|
||||
{{.Content}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
{{ define "main" }}
|
||||
<div class="row" style="margin-top: 5%">
|
||||
<div class="twelve column">
|
||||
<h1>{{.Title}}</h1>
|
||||
<p>{{.Content}}</p>
|
||||
</div>
|
||||
<div class="top-spacing">
|
||||
{{.Content}}
|
||||
<div class="masonry spotlight-group" data-theme="white">
|
||||
{{ range $.Site.Data.photos }}
|
||||
<a class="item spotlight white" href="{{ .src }}?nf_resize=fit">
|
||||
<img src="{{ .src }}?nf_resize=fit&w=300">
|
||||
<div class="caption">{{ .name }}</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<div class="row" style="margin-top: 5%">
|
||||
<h1>Masonry view<tiny><code>?nf_resize=fit&w=300</code></tiny></h1>
|
||||
<div class="masonry">
|
||||
{{ range $.Site.Data.photos }}
|
||||
<div class="item">
|
||||
<img src="{{ .src }}?nf_resize=fit&w=300">
|
||||
<div class="top-left">{{ .name }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<div class="row" style="margin-top: 5%">
|
||||
<h1>Square view<tiny><code>?nf_resize=smartcrop&w=300&h=300</code></tiny></h1>
|
||||
<div class="masonry">
|
||||
{{ range $.Site.Data.photos }}
|
||||
<div class="item">
|
||||
<img src="{{ .src }}?nf_resize=smartcrop&w=300&h=300">
|
||||
<div class="top-left">{{ .name }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
BIN
static/.DS_Store
vendored
Normal file
BIN
static/.DS_Store
vendored
Normal file
Binary file not shown.
41
static/css/custom.css
Normal file
41
static/css/custom.css
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.body {
|
||||
background: #f8f8f2;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.body {
|
||||
background: #282a36;
|
||||
color: #ced8de;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
font-size: 17.75px;
|
||||
}
|
||||
|
||||
.header a {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ff79c6;
|
||||
}
|
||||
|
||||
.top-spacing {
|
||||
margin-top: 12%;
|
||||
}
|
||||
|
|
@ -18,29 +18,27 @@
|
|||
background: #fff;
|
||||
margin: 0 0 1.5em;
|
||||
width: 100%;
|
||||
-webkit-transition: 1s ease all;
|
||||
transition: .5s ease-out all;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-shadow: 2px 2px 4px 0 #ccc;
|
||||
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .5);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 0;
|
||||
}
|
||||
.item:hover {
|
||||
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, .2);
|
||||
transform: scale(1.05) translateY(-1.5%);
|
||||
}
|
||||
.item img{
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
.caption {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
tiny {
|
||||
font-size: 50%;
|
||||
padding-left: 30px;
|
||||
left: 10px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 320px) {
|
||||
|
|
@ -64,4 +62,4 @@ tiny {
|
|||
-webkit-column-count: 3;
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
418
static/css/skeleton.css
vendored
418
static/css/skeleton.css
vendored
|
|
@ -1,418 +0,0 @@
|
|||
/*
|
||||
* Skeleton V2.0.4
|
||||
* Copyright 2014, Dave Gamache
|
||||
* www.getskeleton.com
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 12/29/2014
|
||||
*/
|
||||
|
||||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Grid
|
||||
- Base Styles
|
||||
- Typography
|
||||
- Links
|
||||
- Buttons
|
||||
- Forms
|
||||
- Lists
|
||||
- Code
|
||||
- Tables
|
||||
- Spacing
|
||||
- Utilities
|
||||
- Clearing
|
||||
- Media Queries
|
||||
*/
|
||||
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box; }
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%; }
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 4%; }
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.one.column,
|
||||
.one.columns { width: 4.66666666667%; }
|
||||
.two.columns { width: 13.3333333333%; }
|
||||
.three.columns { width: 22%; }
|
||||
.four.columns { width: 30.6666666667%; }
|
||||
.five.columns { width: 39.3333333333%; }
|
||||
.six.columns { width: 48%; }
|
||||
.seven.columns { width: 56.6666666667%; }
|
||||
.eight.columns { width: 65.3333333333%; }
|
||||
.nine.columns { width: 74.0%; }
|
||||
.ten.columns { width: 82.6666666667%; }
|
||||
.eleven.columns { width: 91.3333333333%; }
|
||||
.twelve.columns { width: 100%; margin-left: 0; }
|
||||
|
||||
.one-third.column { width: 30.6666666667%; }
|
||||
.two-thirds.column { width: 65.3333333333%; }
|
||||
|
||||
.one-half.column { width: 48%; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns { margin-left: 17.3333333333%; }
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns { margin-left: 26%; }
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns { margin-left: 43.3333333333%; }
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns { margin-left: 52%; }
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns { margin-left: 60.6666666667%; }
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns { margin-left: 69.3333333333%; }
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns { margin-left: 78.0%; }
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns { margin-left: 86.6666666667%; }
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns { margin-left: 52%; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* NOTE
|
||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
body {
|
||||
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222; }
|
||||
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
h1 { font-size: 5.0rem; }
|
||||
h2 { font-size: 4.2rem; }
|
||||
h3 { font-size: 3.6rem; }
|
||||
h4 { font-size: 3.0rem; }
|
||||
h5 { font-size: 2.4rem; }
|
||||
h6 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: #333;
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0; }
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
input[type="reset"].button-primary:hover,
|
||||
input[type="button"].button-primary:hover,
|
||||
.button.button-primary:focus,
|
||||
button.button-primary:focus,
|
||||
input[type="submit"].button-primary:focus,
|
||||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB; }
|
||||
|
||||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: #fff;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
/* Removes awkward default styles on some inputs for iOS */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
textarea {
|
||||
min-height: 65px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px; }
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid #33C3F0;
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
|
||||
|
||||
/* Lists
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
ul {
|
||||
list-style: circle inside; }
|
||||
ol {
|
||||
list-style: decimal inside; }
|
||||
ol, ul {
|
||||
padding-left: 0;
|
||||
margin-top: 0; }
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin: 1.5rem 0 1.5rem 3rem;
|
||||
font-size: 90%; }
|
||||
li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
|
||||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #E1E1E1; }
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0; }
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0; }
|
||||
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem; }
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
margin-bottom: 1.5rem; }
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form {
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
|
||||
/* Misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #E1E1E1; }
|
||||
|
||||
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
|
||||
/* Media Queries
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/*
|
||||
Note: The best way to structure the use of media queries is to create the queries
|
||||
near the relevant code. For example, if you wanted to change the styles for buttons
|
||||
on small devices, paste the mobile query code up in the buttons section and style it
|
||||
there.
|
||||
*/
|
||||
|
||||
|
||||
/* Larger than mobile */
|
||||
@media (min-width: 400px) {}
|
||||
|
||||
/* Larger than phablet (also point when grid becomes active) */
|
||||
@media (min-width: 550px) {}
|
||||
|
||||
/* Larger than tablet */
|
||||
@media (min-width: 750px) {}
|
||||
|
||||
/* Larger than desktop */
|
||||
@media (min-width: 1000px) {}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
@media (min-width: 1200px) {}
|
||||
1
static/css/spotlight.css
Executable file
1
static/css/spotlight.css
Executable file
|
|
@ -0,0 +1 @@
|
|||
@keyframes pulsate{0%,to{opacity:1}50%{opacity:.2}}#spotlight,#spotlight .drag,#spotlight .preloader,#spotlight .scene{top:0;width:100%;height:100%}#spotlight .arrow,#spotlight .icon{cursor:pointer;background-repeat:no-repeat}#spotlight{position:fixed;z-index:99999;color:#fff;background-color:#000;visibility:hidden;opacity:0;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:visibility .25s ease,opacity .25s ease;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;contain:layout size paint style;touch-action:none;-webkit-tap-highlight-color:transparent}#spotlight.show{opacity:1;visibility:visible;transition:none}#spotlight.show .pane,#spotlight.show .scene{will-change:transform}#spotlight.show .scene img{will-change:transform,opacity}#spotlight .preloader{position:absolute;background-position:center center;background-repeat:no-repeat;background-size:42px 42px;visibility:hidden}#spotlight .preloader.show{transition:visibility 0s linear .25s;visibility:visible}#spotlight .drag{position:absolute}#spotlight .scene{position:absolute;transition:transform 1s cubic-bezier(.1,1,.1,1);contain:layout size style;pointer-events:none}#spotlight .scene img{display:inline-block;position:absolute;width:auto;height:auto;max-width:100%;max-height:100%;left:50%;top:50%;opacity:1;margin:0;padding:0;border:0;transform:translate(-50%,-50%) scale(1) perspective(100vw);transition:transform 1s cubic-bezier(.1,1,.1,1),opacity 1s cubic-bezier(.3,1,.3,1);transform-style:preserve-3d;contain:layout paint style;visibility:hidden}#spotlight .header,#spotlight .pane{position:absolute;top:0;width:100%;height:100%;contain:layout size style}#spotlight .header{height:50px;text-align:right;background-color:rgba(0,0,0,.45);transform:translateY(-100px);transition:transform .35s ease-out;contain:layout size paint style}#spotlight .header:hover,#spotlight.menu .header{transform:translateY(0)}#spotlight .header div{display:inline-block;vertical-align:middle;white-space:nowrap;width:30px;height:50px;padding-right:20px;opacity:.5}#spotlight .progress{position:absolute;top:0;width:100%;height:3px;background-color:rgba(255,255,255,.45);transform:translateX(-100%);transition:transform 1s linear}#spotlight .arrow,#spotlight .footer{position:absolute;background-color:rgba(0,0,0,.45)}#spotlight .footer{bottom:0;line-height:1.35em;padding:20px 25px;text-align:left;pointer-events:none;contain:layout paint style}#spotlight .footer .title{font-size:125%;padding-bottom:10px}#spotlight .page{float:left;width:auto;padding-left:20px;line-height:50px}#spotlight .icon{background-position:left center;background-size:21px 21px;transition:opacity .2s ease-out}#spotlight .fullscreen{background-image:url(../img/maximize.svg)}#spotlight .fullscreen.on{background-image:url(../img/minimize.svg)}#spotlight .autofit{background-image:url(../img/autofit.svg)}#spotlight .zoom-out{background-image:url(../img/zoom-out.svg)}#spotlight .zoom-in{background-image:url(../img/zoom-in.svg)}#spotlight .theme{background-image:url(../img/theme.svg)}#spotlight .player{background-image:url(../img/play.svg)}#spotlight .player.on{background-image:url(../img/pause.svg);animation:pulsate 1s ease infinite}#spotlight .close{background-image:url(../img/close.svg)}#spotlight .preloader{background-image:url(../img/preloader.svg)}#spotlight .arrow{top:50%;left:20px;width:50px;height:50px;border-radius:100%;margin-top:-25px;padding:10px;transform:translateX(-100px);transition:transform .35s ease-out,opacity .2s ease-out;box-sizing:border-box;background-position:center center;background-size:30px 30px;opacity:.65;background-image:url(../img/arrow.svg)}#spotlight .arrow-right{left:auto;right:20px;transform:translateX(100px) scaleX(-1)}#spotlight.menu .arrow-left{transform:translateX(0)}#spotlight.menu .arrow-right{transform:translateX(0) scaleX(-1)}#spotlight .arrow-left:hover,#spotlight .arrow-right:hover,#spotlight .icon:hover{opacity:1;animation:none}#spotlight.white{color:#fff;background-color:#fff}#spotlight.white .arrow,#spotlight.white .footer,#spotlight.white .header,#spotlight.white .preloader,#spotlight.white .progress{filter:invert(1)}.hide-scrollbars{overflow:-moz-hidden-unscrollable;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{width:0}@media (max-width:800px){#spotlight .header div{width:20px}#spotlight .footer{font-size:12px}#spotlight .arrow{width:35px;height:35px;margin-top:-17.5px;background-size:15px 15px}#spotlight .preloader{background-size:30px 30px}}@media (max-width:400px),(max-height:400px){#spotlight .fullscreen{display:none!important}}
|
||||
1
static/img/arrow.svg
Executable file
1
static/img/arrow.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
|
After Width: | Height: | Size: 236 B |
1
static/img/autofit.svg
Executable file
1
static/img/autofit.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg height="96px" viewBox="0 0 96 96" width="96px" xmlns="http://www.w3.org/2000/svg"><path transform="rotate(90 50 50)" fill="#fff" d="M71.311,80C69.67,84.66,65.23,88,60,88H20c-6.63,0-12-5.37-12-12V36c0-5.23,3.34-9.67,8-11.311V76c0,2.21,1.79,4,4,4H71.311 z"/><path transform="rotate(90 50 50)" fill="#fff" d="M76,8H36c-6.63,0-12,5.37-12,12v40c0,6.63,5.37,12,12,12h40c6.63,0,12-5.37,12-12V20C88,13.37,82.63,8,76,8z M80,60 c0,2.21-1.79,4-4,4H36c-2.21,0-4-1.79-4-4V20c0-2.21,1.79-4,4-4h40c2.21,0,4,1.79,4,4V60z"/></svg>
|
||||
|
After Width: | Height: | Size: 541 B |
1
static/img/close.svg
Executable file
1
static/img/close.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="2 2 20 20" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/></svg>
|
||||
|
After Width: | Height: | Size: 274 B |
1
static/img/maximize.svg
Executable file
1
static/img/maximize.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewBox="-1 -1 26 26" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||||
|
After Width: | Height: | Size: 309 B |
1
static/img/minimize.svg
Executable file
1
static/img/minimize.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>
|
||||
|
After Width: | Height: | Size: 307 B |
1
static/img/pause.svg
Executable file
1
static/img/pause.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="-0.5 -0.5 25 25" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><line x1="10" x2="10" y1="15" y2="9"/><line x1="14" x2="14" y1="15" y2="9"/></svg>
|
||||
|
After Width: | Height: | Size: 314 B |
BIN
static/img/pixel.gif
Executable file
BIN
static/img/pixel.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
1
static/img/play.svg
Executable file
1
static/img/play.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="-0.5 -0.5 25 25" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><polygon fill="#fff" points="10 8 16 12 10 16 10 8"/></svg>
|
||||
|
After Width: | Height: | Size: 291 B |
1
static/img/preloader.svg
Executable file
1
static/img/preloader.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2" stroke-opacity=".65"><circle stroke-opacity=".15" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></g></svg>
|
||||
|
After Width: | Height: | Size: 435 B |
1
static/img/theme.svg
Executable file
1
static/img/theme.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg height="24px" version="1.2" viewBox="2 2 20 20" width="24px" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="M12,4c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8S16.418,4,12,4z M12,18c-3.314,0-6-2.686-6-6s2.686-6,6-6s6,2.686,6,6 S15.314,18,12,18z"/><path d="M12,7v10c2.757,0,5-2.243,5-5S14.757,7,12,7z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 349 B |
1
static/img/zoom-in.svg
Executable file
1
static/img/zoom-in.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
|
||||
|
After Width: | Height: | Size: 352 B |
1
static/img/zoom-out.svg
Executable file
1
static/img/zoom-out.svg
Executable file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
|
||||
|
After Width: | Height: | Size: 314 B |
30
static/js/spotlight.min.js
vendored
Executable file
30
static/js/spotlight.min.js
vendored
Executable file
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Spotlight.js v0.5.9
|
||||
* Copyright 2019 Nextapps GmbH
|
||||
* Author: Thomas Wilkerling
|
||||
* Licence: Apache-2.0
|
||||
* https://github.com/nextapps-de/spotlight
|
||||
*/
|
||||
(function(){'use strict';var aa={};function ba(a){for(var b=a.classList,c={},d=0;d<b.length;d++)c[b[d]]=1;a.a=c;a.c=b}function e(a,b){a=g(a);var c="string"===typeof b;if(a.length)for(var d=0;d<a.length;d++)(c?ca:da)(a[d],b);else(c?ca:da)(a,b)}function da(a,b){for(var c=0;c<b.length;c++)ca(a,b[c])}function ca(a,b){a.a||ba(a);a.a[b]||(a.a[b]=1,a.c.add(b))}function h(a,b){a=g(a);var c="string"===typeof b;if(a.length)for(var d=0;d<a.length;d++)(c?ea:fa)(a[d],b);else(c?ea:fa)(a,b)}
|
||||
function fa(a,b){for(var c=0;c<b.length;c++)ea(a,b[c])}function ea(a,b){a.a||ba(a);a.a[b]&&(a.a[b]=0,a.c.remove(b))}function k(a,b,c){a=g(a);var d="string"!==typeof b&&Object.keys(b);if(a.length)for(var f=0;f<a.length;f++)(d?ha:ia)(a[f],b,d||c,void 0);else(d?ha:ia)(a,b,d||c,void 0)}function ha(a,b,c,d){for(var f=0;f<c.length;f++){var p=c[f];ia(a,p,b[p],d)}}
|
||||
function ia(a,b,c,d){var f=a.f;f||(a.f=f={});f[b]!==c&&(f[b]=c,(a.g||(a.g=a.style)).setProperty(aa[b]||(aa[b]=b.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()),c,d?"important":null))}var ja=0;function l(a,b,c){k(a,"transition","none");k(a,b,c);ja||(ja=a.clientTop&&0);k(a,"transition","")}function ka(a,b){b||(b="");a=g(a);if(a.length)for(var c=0;c<a.length;c++){var d=a[c],f=b;d.b!==f&&(d.b=f,d.textContent=f)}else a.b!==b&&(a.b=b,a.textContent=b)}
|
||||
function g(a){return"string"===typeof a?document.querySelectorAll(a):a}function m(a,b){return(b||document).getElementsByClassName(a)};function la(a,b,c,d){ma("add",a,b,c,d)}function na(a,b,c,d){ma("remove",a,b,c,d)}function ma(a,b,c,d,f){b[a+"EventListener"](c||"click",d,"undefined"===typeof f?!0:f)}function n(a,b){a||(a=window.event);a&&(b||a.preventDefault(),a.stopImmediatePropagation(),a.returnValue=!1);return!1};var q="theme fullscreen autofit zoom-in zoom-out page title description player progress".split(" "),r,t,oa,pa,x,y,z,A,B,C,D,E,F,G,H,qa,I,J,L,M,ra,sa,N,O,P,Q,R,ta,ua,va,wa,xa,S,ya,Aa,Ba,Ca,T,Da,U,V,W,Ea;function Fa(a,b,c){this.src=a;this.title=b;this.description=c}
|
||||
function Ga(a,b){if(J=a.length){P||(P=m("pane",R));var c=P.length,d=L.title,f=L.description;W=Array(J);for(var p=0;p<J;p++){var u=a[p],v=u.dataset;if(p>=c){var w=P[0].cloneNode(!1);k(w,"left",100*p+"%");P[0].parentNode.appendChild(w)}w=void 0;var K=W,fb=p,gb=v&&(v.href||v.src)||u.src||u.href,za;(za=v&&v.title||u.title)||(za=(w=(u||document).getElementsByTagName("img")).length&&w[0].alt);K[fb]=new Fa(gb,za||d||"",v&&v.description||u.description||f||"")}I=b||1;l(N,"transform","translateX(-"+100*(I-
|
||||
1)+"%)");Ha()}}function Ia(a,b,c,d){if(d||a[c])L[c]=b&&b[c]||d}
|
||||
function Ja(a,b){L={};b&&Ka(b);Ka(a);Ia(a,b,"description");Ia(a,b,"title");Ia(a,b,"prefetch",!0);Ia(a,b,"preloader",!0);M=L.infinite;M="undefined"!==typeof M&&"false"!==M;ra="false"!==L.progress;sa=1*L.player||7E3;if((a=L.zoom)||""===a)L["zoom-in"]=L["zoom-out"]=a,delete L.zoom;if((a=L.control)||""===a){a="string"===typeof a?a.split(","):a;for(b=0;b<q.length;b++)L[q[b]]="false";for(b=0;b<a.length;b++){var c=a[b].trim();"zoom"===c?L["zoom-in"]=L["zoom-out"]="true":L[c]="true"}}for(a=0;a<q.length;a++)b=
|
||||
q[a],k(m(b,R)[0],"display","false"===L[b]?"none":"");(qa=L.theme)?La():qa="white"}function Ka(a){for(var b=L,c=Object.keys(a),d=0;d<c.length;d++){var f=c[d];b[f]=""+a[f]}}
|
||||
function Ma(){var a=I;O=P[a-1];Q=O.firstElementChild;I=a;if(!Q){var b="false"!==L.preloader;Q=new Image;Q.onload=function(){b&&h(Ca,"show");W&&(z=this.width,A=this.height,k(this,{visibility:"visible",opacity:1,transform:""}),"false"!==L.prefetch&&a<J&&((new Image).src=W[a].src))};Q.onerror=function(){O.removeChild(this)};O.appendChild(Q);Q.src=W[a-1].src;b&&e(Ca,"show");return!b}return!0}la(document,"",Na);
|
||||
la(document,"DOMContentLoaded",function(){R=document.createElement("div");R.id="spotlight";R.innerHTML='<div class=drag></div><div class=preloader></div><div class=scene><div class=pane></div></div><div class=header><div class=page></div><div class="icon fullscreen"></div><div class="icon autofit"></div><div class="icon zoom-out"></div><div class="icon zoom-in"></div><div class="icon theme"></div><div class="icon player"></div><div class="icon close"></div></div><div class=progress></div><div class="arrow arrow-left"></div><div class="arrow arrow-right"></div><div class=footer><div class=title></div><div class=description></div></div>';
|
||||
k(R,"transition","none");document.body.appendChild(R);N=m("scene",R)[0];ta=m("footer",R)[0];ua=m("title",ta)[0];va=m("description",ta)[0];wa=m("arrow-left",R)[0];xa=m("arrow-right",R)[0];S=m("fullscreen",R)[0];ya=m("page",R)[0];Aa=m("player",R)[0];Ba=m("progress",R)[0];Ca=m("preloader",R)[0];V=document.documentElement||document.body;document.cancelFullScreen||(document.cancelFullScreen=document.exitFullscreen||document.webkitCancelFullScreen||document.webkitExitFullscreen||document.mozCancelFullScreen||
|
||||
function(){});V.requestFullScreen||(V.requestFullScreen=V.webkitRequestFullScreen||V.msRequestFullScreen||V.mozRequestFullScreen||k(S,"display","none")||function(){});var a=m("drag",R)[0];Ea=[[window,"keydown",Oa],[window,"wheel",Pa],[window,"hashchange",Qa],[window,"resize",Ra],[a,"mousedown",Sa],[a,"mouseleave",Ta],[a,"mouseup",Ta],[a,"mousemove",Ua],[a,"touchstart",Sa,{passive:!1}],[a,"touchcancel",Ta],[a,"touchend",Ta],[a,"touchmove",Ua,{passive:!0}],[S,"",Va],[wa,"",Wa],[xa,"",X],[Aa,"",Xa],
|
||||
[m("autofit",R)[0],"",Ya],[m("zoom-in",R)[0],"",Za],[m("zoom-out",R)[0],"",$a],[m("close",R)[0],"",ab],[m("theme",R)[0],"",La]]},{once:!0});function Ra(){x=R.clientWidth;y=R.clientHeight;Q&&(z=Q.width,A=Q.height,bb())}function bb(){k(Q,"transform","translate(-50%, -50%) scale("+B+")")}function cb(a){for(var b=0;b<Ea.length;b++){var c=Ea[b];(a?la:na)(c[0],c[1],c[2],c[3])}}
|
||||
function Na(a){var b=db.call(a.target,".spotlight");if(b){var c=db.call(b,".spotlight-group"),d=m("spotlight",c);Ja(b.dataset,c&&c.dataset);for(c=0;c<d.length;c++)if(d[c]===b){Ga(d,c+1);break}eb();return n(a)}}function Oa(a){if(O)switch(a.keyCode){case 8:Ya();break;case 27:ab();break;case 32:"false"!==L.player&&Xa();break;case 37:Wa();break;case 39:X();break;case 38:case 107:case 187:Za();break;case 40:case 109:case 189:$a()}}function Pa(a){O&&(a=a.deltaY,0>.5*(0>a?1:a?-1:0)?$a():Za())}
|
||||
function Qa(){O&&"#spotlight"===location.hash&&ab(!0)}function Xa(a){("boolean"===typeof a?a:!T)?T||(T=setInterval(X,sa),e(Aa,"on"),ra&&hb()):T&&(T=clearInterval(T),h(Aa,"on"),ra&&l(Ba,"transform",""));return T}function Y(){U?clearTimeout(U):e(R,"menu");var a=L.autohide;U="false"!==a?setTimeout(function(){h(R,"menu");U=null},1*a||3E3):1}function ib(a){"boolean"===typeof a&&(U=a?U:0);U?(U=clearTimeout(U),h(R,"menu")):Y();return n(a)}
|
||||
function Sa(a){C=!0;D=!1;var b=jb(a);E=z*B<=x;oa=b.x;pa=b.y;return n(a,!0)}function Ta(a){if(C&&!D)return C=!1,ib(a);E&&D&&(l(N,"transform","translateX("+-(100*(I-1)-r/x*100)+"%)"),r<-(y/10)&&X()||r>y/10&&Wa()||k(N,"transform","translateX(-"+100*(I-1)+"%)"),r=0,E=!1,k(O,"transform",""));C=!1;return n(a)}
|
||||
function Ua(a){if(C){Da||(Da=requestAnimationFrame(kb));var b=jb(a),c=(z*B-x)/2;D=!0;r-=oa-(oa=b.x);E?F=!0:r>c?r=c:0<x-r-z*B+c?r=x-z*B+c:F=!0;A*B>y&&(c=(A*B-y)/2,t-=pa-(pa=b.y),t>c?t=c:0<y-t-A*B+c?t=y-A*B+c:F=!0)}else Y();return n(a,!0)}function jb(a){var b=a.touches;b&&(b=b[0]);return{x:b?b.clientX:a.pageX,y:b?b.clientY:a.pageY}}function kb(a){F?(a&&(Da=requestAnimationFrame(kb)),k(O,"transform","translate("+r+"px, "+t+"px)")):Da=null;F=!1}
|
||||
function Va(a){("boolean"===typeof a?a:document.isFullScreen||document.webkitIsFullScreen||document.mozFullScreen)?(document.cancelFullScreen(),h(S,"on")):(V.requestFullScreen(),e(S,"on"))}function Ya(a){"boolean"===typeof a&&(G=!a);G=1===B&&!G;k(Q,{maxHeight:G?"none":"",maxWidth:G?"none":"",transform:""});z=Q.width;A=Q.height;B=1;t=r=0;F=!0;kb();Y()}function Za(a){var b=B/.65;5>=b&&lb(B=b);a||Y()}function lb(a){B=a||1;bb()}function $a(a){var b=.65*B;1<=b&&(lb(B=b),t=r=0,F=!0,kb());a||Y()}
|
||||
function eb(){location.hash="spotlight";location.hash="show";k(R,"transition","");e(V,"hide-scrollbars");e(R,"show");cb(!0);Ra();Y()}function ab(a){cb(!1);history.go(!0===a?-1:-2);h(V,"hide-scrollbars");h(R,"show");T&&Xa(!1);Q.parentNode.removeChild(Q);O=Q=W=null}function Wa(){if(1<I)return Z(I-1);if(T||M)return Z(J)}function X(){if(I<J)return Z(I+1);if(T||M)return Z(1)}function Z(a){if(!(T&&C||a===I)){T||Y();T&&ra&&hb();var b=a>I;I=a;Ha(b);return!0}}
|
||||
function hb(){l(Ba,{transitionDuration:"",transform:""});k(Ba,{transitionDuration:sa+"ms",transform:"translateX(0)"})}function La(a){"boolean"===typeof a?H=a:(H=!H,Y());H?e(R,qa):h(R,qa)}
|
||||
function Ha(a){t=r=0;B=1;var b=L.animation,c=!0,d=!0,f=!0;if(b||""===b){c=d=f=!1;b="string"===typeof b?b.split(","):b;for(var p=0;p<b.length;p++){var u=b[p].trim();if("scale"===u)c=!0;else if("fade"===u)d=!0;else if("slide"===u)f=!0;else if("flip"===u)var v=!0;else if("false"!==u){c=d=f=v=!1;var w=u;break}}}k(N,{transition:f?"":"none",transform:"translateX(-"+100*(I-1)+"%)"});O&&k(O,"transform","");if(Q){k(Q,{opacity:d?0:1,transform:""});var K=Q;setTimeout(function(){K&&Q!==K&&K.parentNode&&K.parentNode.removeChild(K)},
|
||||
800)}f=Ma();w&&e(Q,w);l(Q,{opacity:d?0:1,transform:"translate(-50%, -50%)"+(c?" scale(0.8)":"")+(v&&"undefined"!==typeof a?" rotateY("+(a?"":"-")+"90deg)":""),maxHeight:"",maxWidth:""});f&&k(Q,{visibility:"visible",opacity:1,transform:""});w&&h(Q,w);k(O,"transform","");k(wa,"visibility",M||1!==I?"":"hidden");k(xa,"visibility",M||I!==J?"":"hidden");a=W[I-1];if(c=a.title||a.description)ka(ua,a.title),ka(va,a.description);k(ta,"visibility",c?"visible":"hidden");ka(ya,I+" / "+J)}
|
||||
var db=Element.prototype.closest||function(a){var b=this;for(a=a.substring(1);b&&1===b.nodeType;){if(b.classList.contains(a))return b;b=b.parentElement||b.parentNode}};window.Spotlight={theme:La,fullscreen:Va,autofit:Ya,next:X,prev:Wa,"goto":Z,close:ab,zoom:lb,menu:ib,show:function(a,b){setTimeout(function(){a?(b?Ja(b):b={},Ga(a,b.index)):L={};eb()})},play:Xa};}).call(this);
|
||||
Loading…
Add table
Reference in a new issue