From d7517b170a5d4f2f316db963b876221323d687bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hendrik=20Bl=C3=B6=C3=9F?= Date: Fri, 14 Jul 2017 17:37:56 +0200 Subject: [PATCH] Added gallery section - added gallery section - removed hero_area_small.html --- _config.yml | 1 + _includes/gallery.html | 33 ++++ _includes/head.html | 4 + _includes/hero_area_small.html | 14 -- _includes/js.html | 2 + css/gallery.css | 312 +++++++++++++++++++++++++++++++++ css/gallery.theme.css | 36 ++++ css/main.css | 35 +++- gallery.html | 5 + js/smooth-scroll.js | 4 +- 10 files changed, 426 insertions(+), 20 deletions(-) create mode 100644 _includes/gallery.html delete mode 100644 _includes/hero_area_small.html create mode 100644 css/gallery.css create mode 100644 css/gallery.theme.css create mode 100644 gallery.html diff --git a/_config.yml b/_config.yml index a2b32365..5f40a7fb 100644 --- a/_config.yml +++ b/_config.yml @@ -77,6 +77,7 @@ pages_list: News: 'news' Download: 'download' Features: 'about' + Gallery: 'gallery' Help: 'help' Contribute: 'contribute' Songs: 'songs' diff --git a/_includes/gallery.html b/_includes/gallery.html new file mode 100644 index 00000000..7999f822 --- /dev/null +++ b/_includes/gallery.html @@ -0,0 +1,33 @@ + +
+
+
+

{{ page.title }}

+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ • + • + • +
+
+
+
+ +
+ diff --git a/_includes/head.html b/_includes/head.html index d632378c..e2dd62f9 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -27,6 +27,10 @@ + + + + diff --git a/_includes/hero_area_small.html b/_includes/hero_area_small.html deleted file mode 100644 index 2cae3fc7..00000000 --- a/_includes/hero_area_small.html +++ /dev/null @@ -1,14 +0,0 @@ - - -
-
-
-
-

{{site.title}}

-

{{site.subtitle}}

-
-
-
-
- - diff --git a/_includes/js.html b/_includes/js.html index 689e5a45..56eeaf38 100644 --- a/_includes/js.html +++ b/_includes/js.html @@ -3,6 +3,8 @@ + + diff --git a/css/gallery.css b/css/gallery.css new file mode 100644 index 00000000..e6be6d55 --- /dev/null +++ b/css/gallery.css @@ -0,0 +1,312 @@ +.gallery .control-operator:target ~ .controls .control-button { + color: #ccc; + color: rgba(255, 255, 255, 0.4); +} + +.gallery .control-button:first-of-type, .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1), .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2), .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3), .gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4), .gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) { + color: white; + color: rgba(255, 255, 255, 0.8); +} + +.gallery .item:first-of-type { + position: static; + pointer-events: auto; + opacity: 1; +} +.gallery .item { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0; + transition: opacity .5s; +} +.gallery .control-operator { + display: none; +} +.gallery .control-operator:target ~ .item { + pointer-events: none; + opacity: 0; + animation: none; +} +.gallery .control-operator:target ~ .controls .control-button { + animation: none; +} + +@keyframes controlAnimation-2 { + 0% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } + + 14.3%, + 50% { + color: white; + color: rgba(255, 255, 255, 0.8); + } + + 64.3%, + 100% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } +} +@keyframes galleryAnimation-2 { + 0% { + opacity: 0; + } + + 14.3%, + 50% { + opacity: 1; + } + + 64.3%, + 100% { + opacity: 0; + } +} +.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { + pointer-events: auto; + opacity: 1; +} + +.items-2.autoplay .control-button { + animation: controlAnimation-2 14s infinite; +} +.items-2.autoplay .item { + animation: galleryAnimation-2 14s infinite; +} +.items-2 .control-button:nth-of-type(1), +.items-2 .item:nth-of-type(1) { + animation-delay: -2s; +} +.items-2 .control-button:nth-of-type(2), +.items-2 .item:nth-of-type(2) { + animation-delay: 5s; +} + +@keyframes controlAnimation-3 { + 0% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } + + 9.5%, + 33.3% { + color: white; + color: rgba(255, 255, 255, 0.8); + } + + 42.9%, + 100% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } +} +@keyframes galleryAnimation-3 { + 0% { + opacity: 0; + } + + 9.5%, + 33.3% { + opacity: 1; + } + + 42.9%, + 100% { + opacity: 0; + } +} +.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) { + pointer-events: auto; + opacity: 1; +} + +.items-3.autoplay .control-button { + animation: controlAnimation-3 21s infinite; +} +.items-3.autoplay .item { + animation: galleryAnimation-3 21s infinite; +} +.items-3 .control-button:nth-of-type(1), +.items-3 .item:nth-of-type(1) { + animation-delay: -2s; +} +.items-3 .control-button:nth-of-type(2), +.items-3 .item:nth-of-type(2) { + animation-delay: 5s; +} +.items-3 .control-button:nth-of-type(3), +.items-3 .item:nth-of-type(3) { + animation-delay: 12s; +} + +@keyframes controlAnimation-4 { + 0% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } + + 7.1%, + 25% { + color: white; + color: rgba(255, 255, 255, 0.8); + } + + 32.1%, + 100% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } +} +@keyframes galleryAnimation-4 { + 0% { + opacity: 0; + } + + 7.1%, + 25% { + opacity: 1; + } + + 32.1%, + 100% { + opacity: 0; + } +} +.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) { + pointer-events: auto; + opacity: 1; +} + +.items-4.autoplay .control-button { + animation: controlAnimation-4 28s infinite; +} +.items-4.autoplay .item { + animation: galleryAnimation-4 28s infinite; +} +.items-4 .control-button:nth-of-type(1), +.items-4 .item:nth-of-type(1) { + animation-delay: -2s; +} +.items-4 .control-button:nth-of-type(2), +.items-4 .item:nth-of-type(2) { + animation-delay: 5s; +} +.items-4 .control-button:nth-of-type(3), +.items-4 .item:nth-of-type(3) { + animation-delay: 12s; +} +.items-4 .control-button:nth-of-type(4), +.items-4 .item:nth-of-type(4) { + animation-delay: 19s; +} + +@keyframes controlAnimation-5 { + 0% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } + + 5.7%, + 20% { + color: white; + color: rgba(255, 255, 255, 0.8); + } + + 25.7%, + 100% { + color: #ccc; + color: rgba(255, 255, 255, 0.4); + } +} +@keyframes galleryAnimation-5 { + 0% { + opacity: 0; + } + + 5.7%, + 20% { + opacity: 1; + } + + 25.7%, + 100% { + opacity: 0; + } +} +.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) { + pointer-events: auto; + opacity: 1; +} +.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) { + pointer-events: auto; + opacity: 1; +} + +.items-5.autoplay .control-button { + animation: controlAnimation-5 35s infinite; +} +.items-5.autoplay .item { + animation: galleryAnimation-5 35s infinite; +} +.items-5 .control-button:nth-of-type(1), +.items-5 .item:nth-of-type(1) { + animation-delay: -2s; +} +.items-5 .control-button:nth-of-type(2), +.items-5 .item:nth-of-type(2) { + animation-delay: 5s; +} +.items-5 .control-button:nth-of-type(3), +.items-5 .item:nth-of-type(3) { + animation-delay: 12s; +} +.items-5 .control-button:nth-of-type(4), +.items-5 .item:nth-of-type(4) { + animation-delay: 19s; +} +.items-5 .control-button:nth-of-type(5), +.items-5 .item:nth-of-type(5) { + animation-delay: 26s; +} diff --git a/css/gallery.theme.css b/css/gallery.theme.css new file mode 100644 index 00000000..fb563378 --- /dev/null +++ b/css/gallery.theme.css @@ -0,0 +1,36 @@ +.gallery .control-button { + color: #ccc; + color: rgba(255, 255, 255, 0.4); +} + +.gallery .control-button:hover { + color: white; + color: rgba(255, 255, 255, 0.8); +} + +/* + Theme controls how everything looks in Gallery CSS. +*/ +.gallery { + position: relative; +} +.gallery .item { + height: 400px; + overflow: hidden; + text-align: center; + background: #4d87e2; +} +.gallery .controls { + position: absolute; + bottom: 0; + width: 100%; + text-align: center; +} +.gallery .control-button { + display: inline-block; + margin: 0 .02em; + font-size: 3em; + text-align: center; + text-decoration: none; + transition: color .1s; +} diff --git a/css/main.css b/css/main.css index 5f0c6abd..ffeccb73 100644 --- a/css/main.css +++ b/css/main.css @@ -162,14 +162,15 @@ a:hover { text-align: center; } -#about, -#songs { +#songs, +#gallery { background: #2C3E50; color: #fff; } -#download, -#help { +#news, +#help, +#about { background: #EEEEEE; } @@ -494,6 +495,7 @@ a:hover { background-color: #fff; margin: 0 0 30px 0; padding: 0; + border: 1px solid #2C3E50; } #about .card img { @@ -530,6 +532,31 @@ a:hover { transition: all 0.27s ease-in-out; } +/**************/ + + +/***Gallery****/ + +.gallery { + height: 550px; + /*margin: 0 100px !important;*/ +} + +.control-button { + font-size: 1.7em !important; +} + +.item { + /*max-height: 500px !important;*/ + height: 500px !important; + background-color: transparent !important; +} + +.item img { + display: inline !important; + /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/ + /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/ +} /**************/ diff --git a/gallery.html b/gallery.html new file mode 100644 index 00000000..ddf638c8 --- /dev/null +++ b/gallery.html @@ -0,0 +1,5 @@ +--- +layout: null +section-type: gallery +title: Gallery +--- diff --git a/js/smooth-scroll.js b/js/smooth-scroll.js index a5adaca5..c3312082 100644 --- a/js/smooth-scroll.js +++ b/js/smooth-scroll.js @@ -1,5 +1,5 @@ $(function() { - $('a[href*=#]:not([href=#])').click(function() { + $('a[href*=#]:not([href=#]):not(.control-button)').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); @@ -11,4 +11,4 @@ $(function() { } } }); -}); \ No newline at end of file +});