Skip to content

Commit 6aa6b6f

Browse files
simondotmsimondotm
committed
art page done
1 parent 2978456 commit 6aa6b6f

File tree

5 files changed

+202
-103
lines changed

5 files changed

+202
-103
lines changed

‎_includes/art.html

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
2+
<style>
3+
#art {
4+
/* Prevent vertical gaps */
5+
line-height: 0;
6+
7+
-webkit-column-count: 6;
8+
-webkit-column-gap: 2px;
9+
-moz-column-count: 6;
10+
-moz-column-gap: 2px;
11+
column-count: 6;
12+
column-gap: 2px;
13+
}
14+
15+
#art img {
16+
/* Just in case there are inline attributes */
17+
width: 100% !important;
18+
height: auto !important;
19+
}
20+
21+
@media (max-width: 1200px) {
22+
#art {
23+
-moz-column-count: 6;
24+
-webkit-column-count: 6;
25+
column-count: 6;
26+
}
27+
}
28+
@media (max-width: 1000px) {
29+
#art {
30+
-moz-column-count: 5;
31+
-webkit-column-count: 5;
32+
column-count: 5;
33+
}
34+
}
35+
@media (max-width: 800px) {
36+
#art {
37+
-moz-column-count: 4;
38+
-webkit-column-count: 4;
39+
column-count: 4;
40+
}
41+
}
42+
@media (max-width: 400px) {
43+
#art {
44+
-moz-column-count: 3;
45+
-webkit-column-count: 3;
46+
column-count: 3;
47+
}
48+
}
49+
.art-container {
50+
overflow:hidden;
51+
margin-bottom: 2px;
52+
opacity: 0;
53+
54+
}
55+
.art-effect {
56+
transform-origin: center;
57+
transition: transform 250ms ease-in-out;
58+
-webkit-transition: transform 250ms ease-in-out;
59+
-moz-transition: transform 250ms ease-in-out;
60+
-o-transition: transform 250ms ease-in-out;
61+
}
62+
.art-effect:hover {
63+
transform: scale(1.05);
64+
}
65+
.art-fade {
66+
animation: fadeInAnimation 1s;
67+
animation-iteration-count: 1;
68+
animation-fill-mode: forwards;
69+
animation-timing-function: ease-in-out;
70+
}
71+
@keyframes fadeInAnimation {
72+
from {
73+
opacity:0;
74+
}
75+
to {
76+
opacity:1;
77+
}
78+
}
79+
80+
81+
</style>
82+
<script>
83+
84+
85+
function compareElementVerticalPosition(a, b) {
86+
const boundRect1 = a.getBoundingClientRect()
87+
const boundRect2 = b.getBoundingClientRect()
88+
89+
const top1 = boundRect1.top + window.pageYOffset
90+
const top2 = boundRect2.top + window.pageYOffset
91+
92+
if (top1 < top2) {
93+
return -1;
94+
}
95+
if (top1 > top2) {
96+
return 1;
97+
}
98+
// a must be equal to b
99+
return 0;
100+
}
101+
102+
103+
function getSortedElements(elements) {
104+
return elements.sort(compareElementVerticalPosition)
105+
}
106+
107+
window.addEventListener('load', (event) => {
108+
109+
110+
111+
//console.log("loaded")
112+
113+
114+
115+
var myList = document.querySelector('#art')
116+
const imageContainerList = []
117+
/*
118+
for (const element of myList.children) {
119+
120+
imageContainerList.push(element)
121+
}
122+
*/
123+
for (var i = myList.children.length; i >= 0; i--) {
124+
const element = myList.children[Math.random() * i | 0]
125+
myList.appendChild(element)
126+
imageContainerList.push(element)
127+
}
128+
129+
const sortedImageContainers = getSortedElements(imageContainerList)
130+
for (let i=0; i<sortedImageContainers.length; ++i) {
131+
const element = sortedImageContainers[i]
132+
133+
/*
134+
const rect = element.getBoundingClientRect()
135+
var node = document.createElement("h6");
136+
const ypos = rect.top + window.pageYOffset
137+
//const ypos = element.offsetTop
138+
const text = '#' + i + ', ' + ypos
139+
var textnode = document.createTextNode(text);
140+
node.appendChild(textnode);
141+
element.insertBefore(node, element.firstChild)
142+
*/
143+
144+
//console.log(element.className)
145+
const animationDelay = 'animation-delay: '+ i*100 + 'ms'
146+
//console.log(animationDelay)
147+
element.setAttribute('style', animationDelay)
148+
element.classList.add('art-fade')
149+
}
150+
})
151+
</script>
152+
153+
154+
<section id="art">
155+
{% for image in site.static_files %}
156+
{% if image.path contains 'img/art' %}
157+
<div class="art-container">
158+
<img src="{{ site.baseurl }}{{ image.path }}" class="art-effect" alt="">
159+
</div>
160+
{% endif %}
161+
{% endfor %}
162+
</section>
163+
164+
<!--
165+
<div class="row">
166+
167+
{% for image in site.static_files %}
168+
{% if image.path contains 'img/media' %}
169+
<div class="col-lg-2 col-md-2 mb-4 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"">
170+
171+
<img src="{{ site.baseurl }}{{ image.path }}" class="img-fluid mb-4" width="320px" alt="">
172+
173+
</div>
174+
{% endif %}
175+
{% endfor %}
176+
177+
</div>
178+
-->

‎_includes/nav.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@
2424
<li class="page-scroll">
2525
<a href="/archive.html">Scene</a>
2626
</li>
27+
<li class="page-scroll">
28+
<a href="/art.html">Art</a>
29+
</li>
2730
<!--
2831
<li class="page-scroll">
2932
<a href="/prods.html">Prods</a>
3033
</li>
3134
<li class="page-scroll">
3235
<a href="/archive.html">Retro</a>
3336
</li>
34-
<li class="page-scroll">
35-
<a href="/archive.html">Art</a>
36-
</li>
3737
<li class="page-scroll">
3838
<a href="/archive.html">Music</a>
3939
</li>

‎_includes/team.html

Lines changed: 0 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -56,105 +56,5 @@ <h6>{{post.bio}}</h6>
5656
</div><!--end row-->
5757
</div>
5858

59-
<style>
60-
#art {
61-
/* Prevent vertical gaps */
62-
line-height: 0;
63-
64-
-webkit-column-count: 6;
65-
-webkit-column-gap: 2px;
66-
-moz-column-count: 6;
67-
-moz-column-gap: 2px;
68-
column-count: 6;
69-
column-gap: 2px;
70-
}
71-
72-
#art img {
73-
/* Just in case there are inline attributes */
74-
width: 100% !important;
75-
height: auto !important;
76-
}
77-
78-
@media (max-width: 1200px) {
79-
#art {
80-
-moz-column-count: 6;
81-
-webkit-column-count: 6;
82-
column-count: 6;
83-
}
84-
}
85-
@media (max-width: 1000px) {
86-
#art {
87-
-moz-column-count: 5;
88-
-webkit-column-count: 5;
89-
column-count: 5;
90-
}
91-
}
92-
@media (max-width: 800px) {
93-
#art {
94-
-moz-column-count: 4;
95-
-webkit-column-count: 4;
96-
column-count: 4;
97-
}
98-
}
99-
@media (max-width: 400px) {
100-
#art {
101-
-moz-column-count: 3;
102-
-webkit-column-count: 3;
103-
column-count: 3;
104-
}
105-
}
106-
.art-container {
107-
overflow:hidden;
108-
margin-bottom: 2px;
109-
110-
}
111-
.art-effect {
112-
opacity: 1;
113-
transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
114-
transform-origin: center;
115-
}
116-
117-
.art-effect:hover {
118-
transform: scale(1.05);
119-
opacity: 0.5;
120-
}
121-
</style>
122-
<script>
123-
124-
document.addEventListener('DOMContentLoaded', (event) => {
125-
console.log("DOMContentLoaded")
126-
var myList = document.querySelector('#art');
127-
for (var i = myList.children.length; i >= 0; i--) {
128-
myList.appendChild(myList.children[Math.random() * i | 0]);
129-
}
130-
})
131-
</script>
132-
133-
134-
<section id="art">
135-
{% for image in site.static_files %}
136-
{% if image.path contains 'img/art' %}
137-
<div class="art-container">
138-
<img src="{{ site.baseurl }}{{ image.path }}" class="art-effect" alt="">
139-
</div>
140-
{% endif %}
141-
{% endfor %}
142-
</section>
143-
144-
<!--
145-
<div class="row">
146-
147-
{% for image in site.static_files %}
148-
{% if image.path contains 'img/media' %}
149-
<div class="col-lg-2 col-md-2 mb-4 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"">
150-
151-
<img src="{{ site.baseurl }}{{ image.path }}" class="img-fluid mb-4" width="320px" alt="">
152-
153-
</div>
154-
{% endif %}
155-
{% endfor %}
156-
157-
</div>
158-
-->
15959

16060
</section>

‎_layouts/art_page.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
{% include head.html %}
4+
<body id="page-top" class="index">
5+
{% include nav.html %}
6+
{% include header.html %}
7+
8+
9+
10+
{% include art.html %}
11+
12+
13+
{% include footer.html %}
14+
{% include js.html %}
15+
</body>
16+
</html>

‎art.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
layout: art_page
3+
title: Demo Art
4+
5+
---

0 commit comments

Comments
 (0)