From 120e812c93709fda1096b41a5a49b7c51b42d7ba Mon Sep 17 00:00:00 2001 From: XeliteXirish Date: Fri, 4 Nov 2016 17:20:59 +0000 Subject: [PATCH 1/4] Main functions working --- css/gallery.css | 312 ++++++++++++++++++++++++++++++++++++++++++ css/gallery.theme.css | 36 +++++ index.html | 42 ++++-- 3 files changed, 381 insertions(+), 9 deletions(-) create mode 100644 css/gallery.css create mode 100644 css/gallery.theme.css diff --git a/css/gallery.css b/css/gallery.css new file mode 100644 index 0000000..e6be6d5 --- /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 0000000..fb56337 --- /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/index.html b/index.html index 6123d27..510a00e 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,8 @@ + + @@ -78,16 +80,38 @@ -
-
-

- The Collective Development Group -

-

- An open group of open-source developers. -

+
+
+
+
+ +
+

Welcome to the official TCDG website!

+

We take development very seriously

+
+ +
+
+
+

Welcome to the official TCDG website!

+
+
+
+ +
+
+
+

We take development very seriously

+
+
+
+ +
+ • + • + • +
-
From ecad9a399c2ff7a0b0f438c9dcd071d98a72d5ee Mon Sep 17 00:00:00 2001 From: XeliteXirish Date: Fri, 4 Nov 2016 17:32:32 +0000 Subject: [PATCH 2/4] Messed up --- index.html | 62 +++++++++++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 510a00e..901f0bb 100644 --- a/index.html +++ b/index.html @@ -80,38 +80,38 @@
-
-
-
-
- -
-

Welcome to the official TCDG website!

-

We take development very seriously

-
- -
-
-
+
+
+
+
+
+ +
+

Welcome to the official TCDG website!

-
-
-
- -
-
-
-

We take development very seriously

-
-
-
- -
- • - • - • -
-
+

We take development very seriously

+ + + +
+
+

Welcome to the official TCDG website!

+
+
+ +
+
+

We take development very seriously

+
+
+ +
+ • + • + • +
+ +
From bac63c90e0dff85170f27700e1c4b1d6f27ff6da Mon Sep 17 00:00:00 2001 From: XeliteXirish Date: Fri, 4 Nov 2016 17:32:41 +0000 Subject: [PATCH 3/4] Messed up (reverted from commit ecad9a399c2ff7a0b0f438c9dcd071d98a72d5ee) --- index.html | 62 +++++++++++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 901f0bb..510a00e 100644 --- a/index.html +++ b/index.html @@ -80,38 +80,38 @@ -
-
-
-
-
- -
-
+
+
+
+
+ +

Welcome to the official TCDG website!

-

We take development very seriously

-
-
- -
-
-

Welcome to the official TCDG website!

-
-
- -
-
-

We take development very seriously

-
-
- -
- • - • - • -
-
-
+

We take development very seriously

+ + +
+
+
+

Welcome to the official TCDG website!

+
+
+
+ +
+
+
+

We take development very seriously

+
+
+
+ +
+ • + • + • +
+
From c00237da1b84644bb65bdef348a99076cf0f4f18 Mon Sep 17 00:00:00 2001 From: XeliteXirish Date: Fri, 4 Nov 2016 17:37:19 +0000 Subject: [PATCH 4/4] Stuff --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 510a00e..5cee35b 100644 --- a/index.html +++ b/index.html @@ -80,17 +80,17 @@ -
+
-
-

Welcome to the official TCDG website!

+
+

Welcome to the official TCDG website!

We take development very seriously

-
+

Welcome to the official TCDG website!

@@ -98,7 +98,7 @@

Welcome to the official TCDG website!

-
+

We take development very seriously