You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spice/index.html

173 lines
7.5 KiB

<!DOCTYPE html>
<html>
<head>
<title>Spice: All files</title>
<link rel="stylesheet" href="/share/static/css/spice.css">
<meta property="og:site_name" content="Spice - goodrobot.net">
<style>
html {
font-family: helvetica, sans-serif;
font-size: 18px; }
h1 {
font-family: 'BauerBodoniW01-BoldDisp', georgia, serif;
font-size: 2rem;
color: #fff;
margin: 0;
padding: 0.75em 0.25em;
background: #2c2c2c;
line-height: 1.1em; }
ul {
padding: 0; }
li {
list-style-type: none;
font-weight: bold;
font-size: 4rem;
position: relative; }
li:focus {
border: 10px solid blue; }
span {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); }
ul {
/* autoprefixer: off */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 100px;
grid-auto-flow: dense;
grid-gap: 1em;
margin: 1em;
}
li {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.03);
border-radius: 4px;
padding: 8px;
}
li.one-x-two {
grid-row: span 1;
grid-column: span 1;
}
li.one-x-four {
grid-row: span 1;
grid-column: span 2;
}
li.two-x-two {
grid-row: span 2;
grid-column: span 1;
}
li.two-x-three {
grid-row: span 3;
grid-column: span 1;
}
li.four-x-three {
grid-row: span 3;
grid-column: span 2;
}
li.four-x-two {
grid-row: span 2;
grid-column: span 2;
}
img {
width: 100%;
max-height: 100%;
display: block;
object-fit: contain;
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
}
.warning {
color: red;
font-size: 200%; }
@supports (display: grid) {
.warning {
display: none; } }
</style>
</head>
<body>
<main>
<ul>
<li class="two-x-three"> <img class="tile" style="visiblity:hidden" src="https://goodrobot.net/share/static/cache/thumbnail-59ba5a67-7146-4f2e-ad39-1f5df9705713.png"> </li>
<li class="one-x-four"><img src="https://goodrobot.net/share/static/cache/thumbnail-22b40bf1-7c38-488e-b40c-bcd20148e1d3.png"></li>
<li class="four-x-two highlight-tall2"><img src="https://goodrobot.net/share/static/cache/thumbnail-5b892d3c-287f-4dcd-9167-7cf037bea299.png"></li>
<li class="one-x-four"><img src="https://goodrobot.net/share/static/cache/thumbnail-486baf8d-5e3b-4679-b749-3b6ae868fdc2.png"></li>
<li class="four-x-two"><img src="https://goodrobot.net/share/static/cache/thumbnail-b4453e65-39dc-465a-8f20-4f8e8a190343.png"></li>
<li class="one-x-four"><img src="https://goodrobot.net/share/static/cache/thumbnail-a1d2e145-0fa9-4774-86b6-bfdeeb4f1b8e.png"></li>
<li class="one-x-four"><img src="https://goodrobot.net/share/static/cache/thumbnail-ed2dfbc3-7686-40fd-b2b4-7d6f91626dce.png"></li>
<li class="one-x-four"><img src="https://goodrobot.net/share/static/cache/thumbnail-ff28cb95-879a-4988-8f05-a01932351e7a.png"></li>
<li class="one-x-four"><img src="https://goodrobot.net/share/static/cache/thumbnail-00c742fe-99d4-498a-b2c6-d02add92f23a.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-b9d4f70e-c8b8-45e4-a9f0-a6284d3308bf.png"></li>
<li class="two-x-three"><img src="https://goodrobot.net/share/static/cache/thumbnail-24f52f70-71fe-44e3-90f3-0c4af861e5bc.png"></li>
<li class="four-x-three"><img src="https://goodrobot.net/share/static/cache/thumbnail-11c1f382-b9a7-4c46-aa2a-f50db6ef217b.jpg"></li>
<li class="two-x-two"><img src="https://goodrobot.net/share/static/cache/thumbnail-f58c226c-64ab-4f97-9e31-4497dff97261.png"></li>
<li class="two-x-two"><img src="https://goodrobot.net/share/static/cache/thumbnail-6b7be78d-9391-4132-b5ff-decf1d7b5417.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-eedb444a-e9e8-49d7-82cd-7d81fa6d4c08.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-8c8a1800-6e4f-4f88-8b1b-fde6e82492bb.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-8464619c-739a-4086-90de-f5ffd871ba20.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-b1db51d9-7e09-42cf-9148-190be1707907.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-547e36f4-872d-4dad-ade5-874dbf95440e.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-35e9c08a-177c-4df6-8a5e-8611b09ad0b1.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-bb084cae-f2b5-4f17-9ec8-45952e64c74e.png"></li>
<li class="highlight-tall"><img src="https://goodrobot.net/share/static/cache/thumbnail-aa0dee41-a7ab-4ca4-a282-31033739dcb7.png"></li>
<li class="highlight-tall"><img src="https://goodrobot.net/share/static/cache/thumbnail-c8a3db01-2cbc-4d3d-875a-e71e61a0f000.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-6b9f33e3-213e-41dc-8f54-56e50ad6f446.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-edf4c5d7-5eac-4643-adf8-271343f6de9d.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-f4d20e77-288c-4203-aa72-8e02511ddb74.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-52e38914-419f-4aa7-afa7-8e352500ee00.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-5656520b-7671-4753-a6a0-d2b90f4db2e3.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-ebbc1c67-d17a-427a-8b77-b41565421044.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-d0a3bfc0-32ad-4a78-b1da-00280306747a.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-1eb5d94e-23d0-40e5-96e7-6b825374c34d.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-a06022e2-97ba-4113-998a-d65be6a13bea.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-dab6b007-2edc-4d04-9d75-12b5c8d8ec28.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-150c3625-3bbd-4b0d-8966-fc52be6d8d36.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-827e6098-079a-4090-a66e-c71d42e39e81.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-09c8dadf-a0b0-4722-9562-49da04a9e1c5.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-69b5b69d-bba5-427f-b1b2-02331452b5d5.gif"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-190c50d0-5d22-4e38-b041-ede6576dc6bf.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-6d22d391-c385-452a-9e27-644a9b1c21a3.png"></li>
<li class="highlight-tall"><img src="https://goodrobot.net/share/static/cache/thumbnail-33b7ecb3-b818-4c6b-bc16-4142a16f7640.png"></li>
<li class="highlight-wide"><img src="https://goodrobot.net/share/static/cache/thumbnail-3bf8f46d-a10b-4098-b479-a02930b8c90e.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-bd7f22da-3b99-4290-b5b4-7b89f32bf4db.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-55b57a8e-8a70-4078-bbb3-dae4c8c4febf.png"></li>
<li><img src="https://goodrobot.net/share/static/cache/thumbnail-e751cfb2-c86e-4a39-b023-3cd90002de9b.png"></li>
</ul>
</main>
</body>
</html>