diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..374d76c Binary files /dev/null and b/.DS_Store differ diff --git a/:w b/:w new file mode 100644 index 0000000..6bd5f1d --- /dev/null +++ b/:w @@ -0,0 +1,12 @@ +body { + background: #f8f8f2; +} + +.container { + margin: 0 auto; + max-width: 900px; +} + +.top-spacing { + margin-top: 5%; +} diff --git a/README.md b/README.md index f93ca4a..6ba84ad 100644 --- a/README.md +++ b/README.md @@ -2,46 +2,17 @@ [![Netlify Status](https://api.netlify.com/api/v1/badges/0da64eff-bb5e-43c6-9d0a-871c19c56b59/deploy-status)](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. - - [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](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. diff --git a/config.toml b/config.toml index 4c7129f..4019c78 100644 --- a/config.toml +++ b/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" diff --git a/content/_index.md b/content/_index.md index 8a95051..53e5295 100644 --- a/content/_index.md +++ b/content/_index.md @@ -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. \ No newline at end of file diff --git a/content/photos_m/_index.md b/content/photos_m/_index.md deleted file mode 100644 index 9c4aadb..0000000 --- a/content/photos_m/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: "Photo list" -date: 2019-02-11T18:47:38-08:00 ---- diff --git a/content/photos_s/_index.md b/content/photos_s/_index.md deleted file mode 100644 index 9c4aadb..0000000 --- a/content/photos_s/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: "Photo list" -date: 2019-02-11T18:47:38-08:00 ---- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 22ad08f..e028006 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,24 +8,26 @@ {{ end }} - + - + + - +
-
- {{ range .Site.Menus.main }} -
- - {{- .Name -}} - -
- {{ end }} -
+
+

{{.Title}}

+ + + Portfolio + + + Life (Blog) + +
{{ block "main" . }} @@ -34,6 +36,7 @@ {{ end }}
+ - \ No newline at end of file + diff --git a/layouts/_default/list.html b/layouts/_default/list.html deleted file mode 100644 index a4faedd..0000000 --- a/layouts/_default/list.html +++ /dev/null @@ -1,9 +0,0 @@ -{{ define "main" }} -
-
-

{{.Title}}

- - {{.Content}} -
-
-{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 8cc419c..d8841bf 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,8 +1,13 @@ {{ define "main" }} -
-
-

{{.Title}}

-

{{.Content}}

-
+
+ {{.Content}} +
+ {{ range $.Site.Data.photos }} + + +
{{ .name }}
+ + {{ end }} +
-{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/photos_m/list.html b/layouts/photos_m/list.html deleted file mode 100644 index 356b7c1..0000000 --- a/layouts/photos_m/list.html +++ /dev/null @@ -1,13 +0,0 @@ -{{ define "main" }} -
-

Masonry view?nf_resize=fit&w=300

-
- {{ range $.Site.Data.photos }} -
- -
{{ .name }}
-
- {{ end }} -
-
-{{ end }} \ No newline at end of file diff --git a/layouts/photos_s/list.html b/layouts/photos_s/list.html deleted file mode 100644 index 60559ae..0000000 --- a/layouts/photos_s/list.html +++ /dev/null @@ -1,13 +0,0 @@ -{{ define "main" }} -
-

Square view?nf_resize=smartcrop&w=300&h=300

-
- {{ range $.Site.Data.photos }} -
- -
{{ .name }}
-
- {{ end }} -
-
-{{ end }} \ No newline at end of file diff --git a/static/.DS_Store b/static/.DS_Store new file mode 100644 index 0000000..36942ff Binary files /dev/null and b/static/.DS_Store differ diff --git a/static/css/custom.css b/static/css/custom.css new file mode 100644 index 0000000..0b67381 --- /dev/null +++ b/static/css/custom.css @@ -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%; +} diff --git a/static/css/masonry.css b/static/css/masonry.css index 64d1aeb..7b6551b 100644 --- a/static/css/masonry.css +++ b/static/css/masonry.css @@ -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; } -} \ No newline at end of file +} diff --git a/static/css/skeleton.css b/static/css/skeleton.css deleted file mode 100644 index f28bf6c..0000000 --- a/static/css/skeleton.css +++ /dev/null @@ -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) {} diff --git a/static/css/spotlight.css b/static/css/spotlight.css new file mode 100755 index 0000000..0bc1bf0 --- /dev/null +++ b/static/css/spotlight.css @@ -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}} \ No newline at end of file diff --git a/static/img/arrow.svg b/static/img/arrow.svg new file mode 100755 index 0000000..126ab26 --- /dev/null +++ b/static/img/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/autofit.svg b/static/img/autofit.svg new file mode 100755 index 0000000..f12f7a7 --- /dev/null +++ b/static/img/autofit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/close.svg b/static/img/close.svg new file mode 100755 index 0000000..179a24d --- /dev/null +++ b/static/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/maximize.svg b/static/img/maximize.svg new file mode 100755 index 0000000..e768cab --- /dev/null +++ b/static/img/maximize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/minimize.svg b/static/img/minimize.svg new file mode 100755 index 0000000..7ff3ce3 --- /dev/null +++ b/static/img/minimize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/pause.svg b/static/img/pause.svg new file mode 100755 index 0000000..14448b4 --- /dev/null +++ b/static/img/pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/pixel.gif b/static/img/pixel.gif new file mode 100755 index 0000000..5bfd67a Binary files /dev/null and b/static/img/pixel.gif differ diff --git a/static/img/play.svg b/static/img/play.svg new file mode 100755 index 0000000..e8e2bc2 --- /dev/null +++ b/static/img/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/preloader.svg b/static/img/preloader.svg new file mode 100755 index 0000000..1c6ef35 --- /dev/null +++ b/static/img/preloader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/theme.svg b/static/img/theme.svg new file mode 100755 index 0000000..f6fb4aa --- /dev/null +++ b/static/img/theme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/zoom-in.svg b/static/img/zoom-in.svg new file mode 100755 index 0000000..8964085 --- /dev/null +++ b/static/img/zoom-in.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/zoom-out.svg b/static/img/zoom-out.svg new file mode 100755 index 0000000..38e30be --- /dev/null +++ b/static/img/zoom-out.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/js/spotlight.min.js b/static/js/spotlight.min.js new file mode 100755 index 0000000..3227f1d --- /dev/null +++ b/static/js/spotlight.min.js @@ -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=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
'; +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.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:0y&&(c=(A*B-y)/2,t-=pa-(pa=b.y),t>c?t=c:0=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(1I;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