Skip to content

Commit 6be9c98

Browse files
nickclark2016nickclark2016
committed
End of Year Showcasse 2021, updates to previews (#62)
1 parent ef97d6f commit 6be9c98

File tree

22 files changed

+178
-88
lines changed

22 files changed

+178
-88
lines changed

‎css/utils.css

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,17 @@
2525
}
2626

2727
div.showcase-preview-element {
28-
height: 11em;
28+
height: calc(12vh + 1.5em + 16px);
29+
}
30+
31+
img.showcase-preview-year-img {
32+
height: 24vh;
33+
object-fit: cover;
34+
}
35+
36+
img.showcase-preview-element-img {
37+
height: 12vh;
38+
object-fit: cover;
2939
}
3040

3141
.showcase-preview-year
@@ -34,12 +44,7 @@ div.showcase-preview-element {
3444
flex-direction: column;
3545
padding-left: 0.5vw;
3646
padding-right: 0.5vw;
37-
padding-bottom: 0.25vw;
38-
}
39-
40-
div.showcase-preview-year > a > img {
41-
object-fit: cover;
42-
height: 100%;
47+
padding-bottom: 0.25vh;
4348
}
4449

4550
.showcase-preview-link
@@ -79,4 +84,4 @@ video.markdeep
7984
right: 0;
8085
width: 100%;
8186
height: 100%;
82-
}
87+
}

‎scripts/include.js

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
11
/**
22
* Taken from https://www.w3schools.com/howto/howto_html_include.asp
33
*/
4-
function includeHTML() {
5-
var z, i, elmnt, file, xhttp;
4+
async function includeHTML() {
5+
var z, i, elmnt, file;
66
/* Loop through a collection of all HTML elements: */
77
z = document.getElementsByTagName("*");
88
for (i = 0; i < z.length; i++) {
99
elmnt = z[i];
1010
/*search for elements with a certain atrribute:*/
1111
file = elmnt.getAttribute("w3-include-html");
1212
if (file) {
13-
/* Make an HTTP request using the attribute value as the file name: */
14-
xhttp = new XMLHttpRequest();
15-
xhttp.onreadystatechange = function () {
16-
if (this.readyState == 4) {
17-
if (this.status == 200) { elmnt.innerHTML = this.responseText; }
18-
if (this.status == 404) { elmnt.innerHTML = "Page not found."; }
19-
/* Remove the attribute, and call this function once more: */
20-
elmnt.removeAttribute("w3-include-html");
21-
includeHTML();
22-
}
23-
}
24-
xhttp.open("GET", file, true);
25-
xhttp.send();
26-
/* Exit the function: */
27-
return;
13+
const response = await fetch(file).then(x => {
14+
if (x.status == 200) { x.text().then(text => elmnt.innerHTML = text); }
15+
else if (x.status == 404) { elmnt.innerHTML = "Page not found."; }
16+
/* Remove the attribute, and call this function once more: */
17+
elmnt.removeAttribute("w3-include-html");
18+
19+
return includeHTML();
20+
});
21+
22+
return Promise.all([ response ]);
2823
}
2924
}
3025
}

‎scripts/resize.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎showcase/2020/december/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<hr />
8686

8787
<p>
88-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
88+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
8989
a chance to have your image seen here, post your creations in the channel.
9090
</p>
9191

‎showcase/2020/index.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
<script>markdeepOptions = { mode: 'script', tocStyle: 'none' };</script>
1818
<script src="/scripts/markdeep.min.js"></script>
1919
<script src="/scripts/include.js"></script>
20-
<script src="/scripts/resize.js"></script>
2120

2221
<title>2020 Showcase</title>
2322
</head>
@@ -35,7 +34,7 @@
3534
<hr />
3635

3736
<p>
38-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
37+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
3938
a chance to have your image seen here, post your creations in the channel.
4039
</p>
4140

@@ -54,4 +53,4 @@
5453

5554
<script>
5655
includeHTML();
57-
</script>
56+
</script>

‎showcase/2020/november/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<hr />
7272

7373
<p>
74-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
74+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
7575
a chance to have your image seen here, post your creations in the channel.
7676
</p>
7777

‎showcase/2020/october/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<hr />
7272

7373
<p>
74-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
74+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
7575
a chance to have your image seen here, post your creations in the channel.
7676
</p>
7777

‎showcase/2020/showcase_preview.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@
77
</div>
88
<div class="w-25 showcase-preview-element">
99
<a href="/showcase/2020/october/" class="showcase-preview-link showcase-preview-element">
10-
<img src="https://imgur.com/PbW17p5.jpg" class="showcase-preview-element-img" onload="resizeBestOfTheYear();" />
10+
<img src="https://imgur.com/PbW17p5.jpg" class="showcase-preview-element-img" />
1111
October
1212
</a>
1313
</div>
1414
<div class="w-25 showcase-preview-element">
1515
<a href="/showcase/2020/november/" class="showcase-preview-link showcase-preview-element">
16-
<img src="https://imgur.com/7Dqp5bE.jpg" class="showcase-preview-element-img" onload="resizeBestOfTheYear();" />
16+
<img src="https://imgur.com/7Dqp5bE.jpg" class="showcase-preview-element-img" />
1717
November
1818
</a>
1919
</div>
2020
<div class="w-25 showcase-preview-element">
2121
<a href="/showcase/2020/december/" class="showcase-preview-link showcase-preview-element">
22-
<img src="https://imgur.com/xPcGGVf.jpg" class="showcase-preview-element-img" onload="resizeBestOfTheYear();" />
22+
<img src="https://imgur.com/xPcGGVf.jpg" class="showcase-preview-element-img" />
2323
December
2424
</a>
2525
</div>

‎showcase/2020/year/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
<hr />
121121

122122
<p>
123-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
123+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
124124
a chance to have your image seen here, post your creations in the channel.
125125
</p>
126126

‎showcase/2021/april/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<hr />
7272

7373
<p>
74-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
74+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
7575
a chance to have your image seen here, post your creations in the channel.
7676
</p>
7777

‎showcase/2021/august/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
<hr />
6767

6868
<p>
69-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
69+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
7070
a chance to have your image seen here, post your creations in the channel.
7171
</p>
7272

‎showcase/2021/february/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<hr />
7272

7373
<p>
74-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
74+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
7575
a chance to have your image seen here, post your creations in the channel.
7676
</p>
7777

‎showcase/2021/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@
2424
<script>markdeepOptions = { mode: 'script', tocStyle: 'none' };</script>
2525
<script src="/scripts/markdeep.min.js"></script>
2626
<script src="/scripts/include.js"></script>
27-
<script src="/scripts/resize.js"></script>
28-
2927
<title>2021 Showcase</title>
3028
</head>
3129

@@ -42,7 +40,7 @@
4240
<hr />
4341

4442
<p>
45-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
43+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
4644
a chance to have your image seen here, post your creations in the channel.
4745
</p>
4846

‎showcase/2021/january/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<hr />
7979

8080
<p>
81-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
81+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
8282
a chance to have your image seen here, post your creations in the channel.
8383
</p>
8484

‎showcase/2021/july/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
<hr />
6565

6666
<p>
67-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
67+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
6868
a chance to have your image seen here, post your creations in the channel.
6969
</p>
7070

‎showcase/2021/june/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<hr />
8686

8787
<p>
88-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
88+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
8989
a chance to have your image seen here, post your creations in the channel.
9090
</p>
9191

‎showcase/2021/march/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
<hr />
8484

8585
<p>
86-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
86+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
8787
a chance to have your image seen here, post your creations in the channel.
8888
</p>
8989

‎showcase/2021/may/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<hr />
7272

7373
<p>
74-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
74+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
7575
a chance to have your image seen here, post your creations in the channel.
7676
</p>
7777

‎showcase/2021/september/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
<hr />
7676

7777
<p>
78-
All media in this showcase are taken from the #showcase-media channel on the server. If you'd like to have
78+
All media in this showcase are taken from the #showcase channel on the server. If you'd like to have
7979
a chance to have your image seen here, post your creations in the channel.
8080
</p>
8181

‎showcase/2021/showcase_preview.html

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,80 @@
11
<div class="showcase-preview-container w100">
2+
<div class="w-100 showcase-preview-year">
3+
<a href="/showcase/2021/year" class="showcase-preview-link showcase-preview-year">
4+
<img src="https://i.imgur.com/A9I0ylf.jpg" class="showcase-preview-year-img" />
5+
Best of the Year
6+
</a>
7+
</div>
28
<div class="w-25 showcase-preview-element">
39
<a href="/showcase/2021/january/" class="showcase-preview-link showcase-preview-element">
4-
<img src="https://imgur.com/PrWFTFO.png" class="showcase-preview-element-img"
5-
onload="resizeBestOfTheYear();" />
10+
<img src="https://i.imgur.com/PrWFTFO.png" class="showcase-preview-element-img" />
611
January
712
</a>
813
</div>
914
<div class="w-25 showcase-preview-element">
1015
<a href="/showcase/2021/february/" class="showcase-preview-link showcase-preview-element">
11-
<img src="https://imgur.com/q0AIPQk.png" class="showcase-preview-element-img"
12-
onload="resizeBestOfTheYear();" />
16+
<img src="https://i.imgur.com/q0AIPQk.png" class="showcase-preview-element-img" />
1317
February
1418
</a>
1519
</div>
1620
<div class="w-25 showcase-preview-element">
1721
<a href="/showcase/2021/march/" class="showcase-preview-link showcase-preview-element">
18-
<img src="https://imgur.com/DpcydEE.png" class="showcase-preview-element-img"
19-
onload="resizeBestOfTheYear();" />
22+
<img src="https://i.imgur.com/DpcydEE.png" class="showcase-preview-element-img" />
2023
March
2124
</a>
2225
</div>
2326
<div class="w-25 showcase-preview-element">
2427
<a href="/showcase/2021/april/" class="showcase-preview-link showcase-preview-element">
25-
<img src="https://imgur.com/NStZdsR.jpg" class="showcase-preview-element-img"
26-
onload="resizeBestOfTheYear();" />
28+
<img src="https://i.imgur.com/NStZdsR.jpg" class="showcase-preview-element-img" />
2729
April
2830
</a>
2931
</div>
3032
<div class="w-25 showcase-preview-element">
3133
<a href="/showcase/2021/may/" class="showcase-preview-link showcase-preview-element">
32-
<img src="https://imgur.com/FT9MQWk.png" class="showcase-preview-element-img"
33-
onload="resizeBestOfTheYear();" />
34+
<img src="https://i.imgur.com/FT9MQWk.png" class="showcase-preview-element-img" />
3435
May
3536
</a>
3637
</div>
3738
<div class="w-25 showcase-preview-element">
3839
<a href="/showcase/2021/june/" class="showcase-preview-link showcase-preview-element">
39-
<img src="https://imgur.com/64NAYdk.png" class="showcase-preview-element-img"
40-
onload="resizeBestOfTheYear();" />
40+
<img src="https://i.imgur.com/64NAYdk.png" class="showcase-preview-element-img" />
4141
June
4242
</a>
4343
</div>
4444
<div class="w-25 showcase-preview-element">
4545
<a href="/showcase/2021/july/" class="showcase-preview-link showcase-preview-element">
46-
<img src="https://imgur.com/X04NpGA.png" class="showcase-preview-element-img"
47-
onload="resizeBestOfTheYear();" />
46+
<img src="https://i.imgur.com/X04NpGA.png" class="showcase-preview-element-img" />
4847
July
4948
</a>
5049
</div>
5150
<div class="w-25 showcase-preview-element">
5251
<a href="/showcase/2021/august/" class="showcase-preview-link showcase-preview-element">
53-
<img src="https://imgur.com/Ub3Rt0X.jpg" class="showcase-preview-element-img"
54-
onload="resizeBestOfTheYear();" />
52+
<img src="https://i.imgur.com/Ub3Rt0X.jpg" class="showcase-preview-element-img" />
5553
August
5654
</a>
5755
</div>
5856
<div class="w-25 showcase-preview-element">
5957
<a href="/showcase/2021/september/" class="showcase-preview-link showcase-preview-element">
60-
<img src="https://imgur.com/JvHWTv6.png" class="showcase-preview-element-img"
61-
onload="resizeBestOfTheYear();" />
58+
<img src="https://i.imgur.com/JvHWTv6.png" class="showcase-preview-element-img" />
6259
September
6360
</a>
6461
</div>
6562
<div class="w-25 showcase-preview-element">
6663
<a href="/showcase/2021/october/" class="showcase-preview-link showcase-preview-element">
67-
<img src="https://imgur.com/EAz9VzK.png" class="showcase-preview-element-img"
68-
onload="resizeBestOfTheYear();" />
64+
<img src="https://i.imgur.com/EAz9VzK.png" class="showcase-preview-element-img" />
6965
October
7066
</a>
7167
</div>
7268
<div class="w-25 showcase-preview-element">
7369
<a href="/showcase/2021/november/" class="showcase-preview-link showcase-preview-element">
74-
<img src="https://i.imgur.com/z1tPT7t.png" class="showcase-preview-element-img"
75-
onload="resizeBestOfTheYear();" />
70+
<img src="https://i.imgur.com/z1tPT7t.png" class="showcase-preview-element-img" />
7671
November
7772
</a>
7873
</div>
7974
<div class="w-25 showcase-preview-element">
8075
<a href="/showcase/2021/december/" class="showcase-preview-link showcase-preview-element">
81-
<img src="https://i.imgur.com/ke9u1Wa.png" class="showcase-preview-element-img"
82-
onload="resizeBestOfTheYear();" />
76+
<img src="https://i.imgur.com/ke9u1Wa.png" class="showcase-preview-element-img" />
8377
December
8478
</a>
8579
</div>
86-
</div>
80+
</div>

0 commit comments

Comments
 (0)