veryroundbird.house
+104
plain-html/css/style.css
+104
plain-html/css/style.css
···
381
381
margin-top: 5px;
382
382
font-size: .8em;
383
383
color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
384
+
}
385
+
386
+
.game main {
387
+
display: grid;
388
+
grid-template-areas: "header header" "screenshots stuff";
389
+
text-align: left;
390
+
border-bottom: 1px var(--accent) solid;
391
+
padding-bottom: 0;
392
+
}
393
+
394
+
.game main h3 {
395
+
margin: 0;
396
+
}
397
+
398
+
.game .game-header {
399
+
margin: -20px -20px 0;
400
+
width: calc(100% + 40px);
401
+
border-bottom: 1px var(--accent) solid;
402
+
padding: 20px;
403
+
text-align: left;
404
+
grid-area: header;
405
+
}
406
+
407
+
.game .game-header .jamsub {
408
+
font-size: .8em;
409
+
font-style: italic;
410
+
color: color-mix(in srgb-linear, var(--foreground), var(--background) 15%);
411
+
margin: 0;
412
+
}
413
+
414
+
.game .game-header h2 {
415
+
margin: 0;
416
+
}
417
+
418
+
.game .game-header h2 a {
419
+
font-size: .9rem;
420
+
margin-left: 10px;
421
+
display: inline-block;
422
+
vertical-align: middle;
423
+
}
424
+
425
+
.game .game-header .blurb {
426
+
margin: 1em 0;
427
+
}
428
+
429
+
.game .screenshots {
430
+
border-right: 1px var(--accent) solid;
431
+
grid-area: screenshots;
432
+
padding: 20px;
433
+
}
434
+
435
+
.game .screenshots .gallery {
436
+
display: grid;
437
+
gap: 10px;
438
+
grid-template-columns: repeat(2, 1fr);
439
+
grid-template-rows: auto;
440
+
grid-template-areas: "featured featured";
441
+
}
442
+
443
+
.game .screenshots .gallery a,
444
+
.game .screenshots .gallery button {
445
+
position: relative;
446
+
padding-top: 50%;
447
+
width: 100%;
448
+
}
449
+
450
+
.game .screenshots .gallery a img,
451
+
.game .screenshots .gallery button img {
452
+
position: absolute;
453
+
top: 0;
454
+
left: 0;
455
+
width: 100%;
456
+
height: 100%;
457
+
object-fit: cover;
458
+
}
459
+
460
+
.game .screenshots .gallery > :first-child {
461
+
grid-area: featured;
462
+
}
463
+
464
+
.game .interaction {
465
+
grid-area: stuff;
466
+
}
467
+
468
+
.game .downloads {
469
+
padding: 20px;
470
+
}
471
+
472
+
.game .comments {
473
+
border-top: 1px var(--accent) solid;
474
+
}
475
+
476
+
[popover] {
477
+
position: fixed;
478
+
z-index: 99;
479
+
top: 50%;
480
+
left: 50%;
481
+
max-width: 90%;
482
+
max-height: 90%;
483
+
transform: translate(-50%, -50%);
484
+
}
485
+
486
+
[popover]:-internal-popover-in-top-layer::backdrop {
487
+
background-color: rgba(0,0,0,.5);
384
488
}
+78
plain-html/game.html
+78
plain-html/game.html
···
1
+
<!doctype html>
2
+
<html>
3
+
<head>
4
+
<title>!!YOUR GAME JAM TITLE!!</title>
5
+
<link rel="stylesheet" type="text/css" href="./css/style.css" />
6
+
<link rel="stylesheet" type="text/css" href="./css/custom.css" />
7
+
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">
8
+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
9
+
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
10
+
<link rel="manifest" href="./site.webmanifest">
11
+
</head>
12
+
<body class="wide game">
13
+
<div id="banner">
14
+
<!-- uncomment the below line if banner is desired -->
15
+
<!-- <img src="!!YOURBANNER!!" alt="!!BANNERALT!!" /> -->
16
+
</div>
17
+
<div id="page">
18
+
<header>
19
+
<h1>!!YOUR GAME JAM TITLE!!</h1>
20
+
<p class="hosted">Hosted by <a href="!!YOURLINK!!" target="_blank">!!YOURNAME!!</a> • <a href="!!LINK TO HASHTAG FILTER!!" target="_blank">#!!HASHTAG!!</a></p>
21
+
<div class="entries">
22
+
<span class="count" id="entriesCount">!!#!!</span>
23
+
<span class="caption">Entries</span>
24
+
</div>
25
+
<nav>
26
+
<ul>
27
+
<li><a href="index.html">Overview</a></li>
28
+
<!-- uncomment the below if you have a discord or a forum or something -->
29
+
<!-- <li><a href="!!COMMUNITY LINK!!">Community</a></li> -->
30
+
<li><a href="submissions.html" class="current">Submissions</a></li>
31
+
</ul>
32
+
</nav>
33
+
</header>
34
+
<main>
35
+
<div class="game-header">
36
+
<p class="jamsub">A jam submission</p>
37
+
<h2>!! GAME TITLE !! <a href="#">View game website →</a></h2>
38
+
<div class="blurb">
39
+
!! BLURB GOES HERE !!
40
+
</div>
41
+
<div class="authors">
42
+
Submitted by <a href="#">Author 1</a>, <a href="#">Author 2</a> — <span id="timebefore">!! TIME !!</span> before deadline
43
+
</div>
44
+
</div>
45
+
<div class="screenshots">
46
+
<div class="gallery">
47
+
<button popovertarget="img1"><img src="https://images.unsplash.com/photo-1756151224665-eba765e8c3b5?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
48
+
<button popovertarget="img2"><img src="https://images.unsplash.com/photo-1754922493956-364a7623a016?q=80&w=2150&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
49
+
<button popovertarget="img3"><img src="https://images.unsplash.com/photo-1755429518361-1d6060edcf3c?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
50
+
<button popovertarget="img4"><img src="https://images.unsplash.com/photo-1755603461859-9da81ff3afea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
51
+
<button popovertarget="img5"><img src="https://images.unsplash.com/photo-1755467020939-4c3e196545bd?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
52
+
</div>
53
+
<img src="https://images.unsplash.com/photo-1756151224665-eba765e8c3b5?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img1" />
54
+
<img src="https://images.unsplash.com/photo-1754922493956-364a7623a016?q=80&w=2150&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img2" />
55
+
<img src="https://images.unsplash.com/photo-1755429518361-1d6060edcf3c?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img3" />
56
+
<img src="https://images.unsplash.com/photo-1755603461859-9da81ff3afea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img4" />
57
+
<img src="https://images.unsplash.com/photo-1755467020939-4c3e196545bd?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img5" />
58
+
</div>
59
+
<div class="interaction">
60
+
<div class="downloads">
61
+
<h3>Downloads</h3>
62
+
<ul>
63
+
<li></li>
64
+
</ul>
65
+
</div>
66
+
<!-- uncomment if you want to drop in some kind of commenting system and put in whatever script you're using -->
67
+
<!--<div class="comments">
68
+
69
+
</div>-->
70
+
</div>
71
+
</main>
72
+
<footer>
73
+
<a href="https://veryroundbird.house">♥︎</a>
74
+
</footer>
75
+
</div>
76
+
<script type="module" src="./js/script.mjs"></script>
77
+
</body>
78
+
</html>