commit c0e00b2e8c1188c5548ed0d90a21223bb0a7498b · veryroundbird.house/homemadejam

+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
       384
       +
       }

     

       385
       385
       +
       

     

       386
       386
       +
       .game main {

     

       387
       387
       +
       	display: grid;

     

       388
       388
       +
       	grid-template-areas: "header header" "screenshots stuff";

     

       389
       389
       +
       	text-align: left;

     

       390
       390
       +
       	border-bottom: 1px var(--accent) solid;

     

       391
       391
       +
       	padding-bottom: 0;

     

       392
       392
       +
       }

     

       393
       393
       +
       

     

       394
       394
       +
       .game main h3 {

     

       395
       395
       +
       	margin: 0;

     

       396
       396
       +
       }

     

       397
       397
       +
       

     

       398
       398
       +
       .game .game-header {

     

       399
       399
       +
       	margin: -20px -20px 0;

     

       400
       400
       +
       	width: calc(100% + 40px);

     

       401
       401
       +
       	border-bottom: 1px var(--accent) solid;

     

       402
       402
       +
       	padding: 20px;

     

       403
       403
       +
       	text-align: left;

     

       404
       404
       +
       	grid-area: header;

     

       405
       405
       +
       }

     

       406
       406
       +
       

     

       407
       407
       +
       .game .game-header .jamsub {

     

       408
       408
       +
       	font-size: .8em;

     

       409
       409
       +
       	font-style: italic;

     

       410
       410
       +
       	color: color-mix(in srgb-linear, var(--foreground), var(--background) 15%);

     

       411
       411
       +
       	margin: 0;

     

       412
       412
       +
       }

     

       413
       413
       +
       

     

       414
       414
       +
       .game .game-header h2 {

     

       415
       415
       +
       	margin: 0;

     

       416
       416
       +
       }

     

       417
       417
       +
       

     

       418
       418
       +
       .game .game-header h2 a {

     

       419
       419
       +
       	font-size: .9rem;

     

       420
       420
       +
       	margin-left: 10px;

     

       421
       421
       +
       	display: inline-block;

     

       422
       422
       +
       	vertical-align: middle;

     

       423
       423
       +
       }

     

       424
       424
       +
       

     

       425
       425
       +
       .game .game-header .blurb {

     

       426
       426
       +
       	margin: 1em 0;

     

       427
       427
       +
       }

     

       428
       428
       +
       

     

       429
       429
       +
       .game .screenshots {

     

       430
       430
       +
       	border-right: 1px var(--accent) solid;

     

       431
       431
       +
       	grid-area: screenshots;

     

       432
       432
       +
       	padding: 20px;

     

       433
       433
       +
       }

     

       434
       434
       +
       

     

       435
       435
       +
       .game .screenshots .gallery {

     

       436
       436
       +
       	display: grid;

     

       437
       437
       +
       	gap: 10px;

     

       438
       438
       +
       	grid-template-columns: repeat(2, 1fr);

     

       439
       439
       +
       	grid-template-rows: auto;

     

       440
       440
       +
       	grid-template-areas: "featured featured";

     

       441
       441
       +
       }

     

       442
       442
       +
       

     

       443
       443
       +
       .game .screenshots .gallery a,

     

       444
       444
       +
       .game .screenshots .gallery button {

     

       445
       445
       +
       	position: relative;

     

       446
       446
       +
       	padding-top: 50%;

     

       447
       447
       +
       	width: 100%;

     

       448
       448
       +
       }

     

       449
       449
       +
       

     

       450
       450
       +
       .game .screenshots .gallery a img,

     

       451
       451
       +
       .game .screenshots .gallery button img {

     

       452
       452
       +
       	position: absolute;

     

       453
       453
       +
       	top: 0;

     

       454
       454
       +
       	left: 0;

     

       455
       455
       +
       	width: 100%;

     

       456
       456
       +
       	height: 100%;

     

       457
       457
       +
       	object-fit: cover;

     

       458
       458
       +
       }

     

       459
       459
       +
       

     

       460
       460
       +
       .game .screenshots .gallery > :first-child {

     

       461
       461
       +
       	grid-area: featured;

     

       462
       462
       +
       }

     

       463
       463
       +
       

     

       464
       464
       +
       .game .interaction {

     

       465
       465
       +
       	grid-area: stuff;

     

       466
       466
       +
       }

     

       467
       467
       +
       

     

       468
       468
       +
       .game .downloads {

     

       469
       469
       +
       	padding: 20px;

     

       470
       470
       +
       }

     

       471
       471
       +
       

     

       472
       472
       +
       .game .comments {

     

       473
       473
       +
       	border-top: 1px var(--accent) solid;

     

       474
       474
       +
       }

     

       475
       475
       +
       

     

       476
       476
       +
       [popover] {

     

       477
       477
       +
       	position: fixed;

     

       478
       478
       +
       	z-index: 99;

     

       479
       479
       +
       	top: 50%;

     

       480
       480
       +
       	left: 50%;

     

       481
       481
       +
       	max-width: 90%;

     

       482
       482
       +
       	max-height: 90%;

     

       483
       483
       +
       	transform: translate(-50%, -50%);

     

       484
       484
       +
       }

     

       485
       485
       +
       

     

       486
       486
       +
       [popover]:-internal-popover-in-top-layer::backdrop {

     

       487
       487
       +
       	background-color: rgba(0,0,0,.5);

     

       384
       488
        
       }

+78

plain-html/game.html

···

       1
       1
       +
       <!doctype html>

     

       2
       2
       +
       <html>

     

       3
       3
       +
       	<head>

     

       4
       4
       +
       		<title>!!YOUR GAME JAM TITLE!!</title>

     

       5
       5
       +
       		<link rel="stylesheet" type="text/css" href="./css/style.css" />

     

       6
       6
       +
       		<link rel="stylesheet" type="text/css" href="./css/custom.css" />

     

       7
       7
       +
       		<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">

     

       8
       8
       +
       		<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

     

       9
       9
       +
       		<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">

     

       10
       10
       +
       		<link rel="manifest" href="./site.webmanifest">

     

       11
       11
       +
       	</head>

     

       12
       12
       +
       	<body class="wide game">

     

       13
       13
       +
       		<div id="banner">

     

       14
       14
       +
       			<!-- uncomment the below line if banner is desired -->

     

       15
       15
       +
       			<!-- <img src="!!YOURBANNER!!" alt="!!BANNERALT!!" /> -->

     

       16
       16
       +
       		</div>

     

       17
       17
       +
       		<div id="page">

     

       18
       18
       +
       			<header>

     

       19
       19
       +
       				<h1>!!YOUR GAME JAM TITLE!!</h1>

     

       20
       20
       +
       				<p class="hosted">Hosted by <a href="!!YOURLINK!!" target="_blank">!!YOURNAME!!</a> &bull; <a href="!!LINK TO HASHTAG FILTER!!" target="_blank">#!!HASHTAG!!</a></p>

     

       21
       21
       +
       				<div class="entries">

     

       22
       22
       +
       					<span class="count" id="entriesCount">!!#!!</span>

     

       23
       23
       +
       					<span class="caption">Entries</span>

     

       24
       24
       +
       				</div>

     

       25
       25
       +
       				<nav>

     

       26
       26
       +
       					<ul>

     

       27
       27
       +
       						<li><a href="index.html">Overview</a></li>

     

       28
       28
       +
       						<!-- uncomment the below if you have a discord or a forum or something -->

     

       29
       29
       +
       						<!-- <li><a href="!!COMMUNITY LINK!!">Community</a></li> -->

     

       30
       30
       +
       						<li><a href="submissions.html" class="current">Submissions</a></li>

     

       31
       31
       +
       					</ul>

     

       32
       32
       +
       				</nav>

     

       33
       33
       +
       			</header>

     

       34
       34
       +
       			<main>

     

       35
       35
       +
       				<div class="game-header">

     

       36
       36
       +
       					<p class="jamsub">A jam submission</p>

     

       37
       37
       +
       					<h2>!! GAME TITLE !! <a href="#">View game website &rarr;</a></h2>

     

       38
       38
       +
       					<div class="blurb">

     

       39
       39
       +
       						!! BLURB GOES HERE !!

     

       40
       40
       +
       					</div>

     

       41
       41
       +
       					<div class="authors">

     

       42
       42
       +
       						Submitted by <a href="#">Author 1</a>, <a href="#">Author 2</a> &mdash; <span id="timebefore">!! TIME !!</span> before deadline

     

       43
       43
       +
       					</div>

     

       44
       44
       +
       				</div>

     

       45
       45
       +
       				<div class="screenshots">

     

       46
       46
       +
       					<div class="gallery">

     

       47
       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
       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
       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
       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
       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
       52
       +
       					</div>

     

       53
       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
       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
       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
       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
       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
       58
       +
       				</div>

     

       59
       59
       +
       				<div class="interaction">

     

       60
       60
       +
       					<div class="downloads">

     

       61
       61
       +
       						<h3>Downloads</h3>

     

       62
       62
       +
       						<ul>

     

       63
       63
       +
       							<li></li>

     

       64
       64
       +
       						</ul>

     

       65
       65
       +
       					</div>

     

       66
       66
       +
       					<!-- uncomment if you want to drop in some kind of commenting system and put in whatever script you're using -->

     

       67
       67
       +
       					<!--<div class="comments">

     

       68
       68
       +
       					

     

       69
       69
       +
       					</div>-->

     

       70
       70
       +
       				</div>

     

       71
       71
       +
       			</main>

     

       72
       72
       +
       			<footer>

     

       73
       73
       +
       				<a href="https://veryroundbird.house">♥︎</a>

     

       74
       74
       +
       			</footer>

     

       75
       75
       +
       		</div>

     

       76
       76
       +
       		<script type="module" src="./js/script.mjs"></script>

     

       77
       77
       +
       	</body>

     

       78
       78
       +
       </html>