Initial files
This commit is contained in:
commit
276ae3350e
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "go"]
|
||||
path = go
|
||||
url = https://github.com/makyo/commission-organizer.git
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 573 KiB |
|
|
@ -0,0 +1,296 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>All Commissions</h1>
|
||||
|
||||
<a href="sinereous--ladies--maddy-judith--G.png" class="G">
|
||||
<img src="thumbs/sinereous--ladies--maddy-judith--G.png" title="ladies" alt="ladies" />
|
||||
</a>
|
||||
<a href="grinse--snow--judith--G.png" class="G">
|
||||
<img src="thumbs/grinse--snow--judith--G.png" title="snow" alt="snow" />
|
||||
</a>
|
||||
<a href="kris--school--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/kris--school--lexy--G.jpg" title="school" alt="school" />
|
||||
</a>
|
||||
<a href="osmaru--fireball--judith--G.png" class="G">
|
||||
<img src="thumbs/osmaru--fireball--judith--G.png" title="fireball" alt="fireball" />
|
||||
</a>
|
||||
<a href="bone--2b--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/bone--2b--lexy--G.jpg" title="2b" alt="2b" />
|
||||
</a>
|
||||
<a href="sinereous-mycotae--tfcorg--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/sinereous-mycotae--tfcorg--lexy--G.jpg" title="tfcorg" alt="tfcorg" />
|
||||
</a>
|
||||
<a href="who--sword--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/who--sword--lexy--G.jpg" title="sword" alt="sword" />
|
||||
</a>
|
||||
<a href="poodlewool--mask--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/poodlewool--mask--lexy--G.jpg" title="mask" alt="mask" />
|
||||
</a>
|
||||
<a href="pointedfox--ana--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/pointedfox--ana--lexy--G.jpg" title="ana" alt="ana" />
|
||||
</a>
|
||||
<a href="muzz--sailorbadge--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/muzz--sailorbadge--lexy--G.jpg" title="sailorbadge" alt="sailorbadge" />
|
||||
</a>
|
||||
<a href="bone--books-icon--bun--G.jpg" class="G">
|
||||
<img src="thumbs/bone--books-icon--bun--G.jpg" title="books-icon" alt="books-icon" />
|
||||
</a>
|
||||
<a href="bone--books--bun--G.jpg" class="G">
|
||||
<img src="thumbs/bone--books--bun--G.jpg" title="books" alt="books" />
|
||||
</a>
|
||||
<a href="who--badge--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/who--badge--lexy--G.jpg" title="badge" alt="badge" />
|
||||
</a>
|
||||
<a href="sinereous--fancy--bun--G.jpg" class="G">
|
||||
<img src="thumbs/sinereous--fancy--bun--G.jpg" title="fancy" alt="fancy" />
|
||||
</a>
|
||||
<a href="kris--reading--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/kris--reading--lexy--G.jpg" title="reading" alt="reading" />
|
||||
</a>
|
||||
<a href="sinereous--hisoka--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/sinereous--hisoka--lexy--G.jpg" title="hisoka" alt="hisoka" />
|
||||
</a>
|
||||
<a href="slushy--chatting--bun-maddy--G.jpg" class="G">
|
||||
<img src="thumbs/slushy--chatting--bun-maddy--G.jpg" title="chatting" alt="chatting" />
|
||||
</a>
|
||||
<a href="ekbellatrix--sailorcorg--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/ekbellatrix--sailorcorg--lexy--G.jpg" title="sailorcorg" alt="sailorcorg" />
|
||||
</a>
|
||||
<a href="amon--bust--judith--G.jpg" class="G">
|
||||
<img src="thumbs/amon--bust--judith--G.jpg" title="bust" alt="bust" />
|
||||
</a>
|
||||
<a href="pinkkbees--trans--judith--G.jpg" class="G">
|
||||
<img src="thumbs/pinkkbees--trans--judith--G.jpg" title="trans" alt="trans" />
|
||||
</a>
|
||||
<a href="zeru--fire--judith--G.jpg" class="G">
|
||||
<img src="thumbs/zeru--fire--judith--G.jpg" title="fire" alt="fire" />
|
||||
</a>
|
||||
<a href="naira--chibi--judith--G.jpg" class="G">
|
||||
<img src="thumbs/naira--chibi--judith--G.jpg" title="chibi" alt="chibi" />
|
||||
</a>
|
||||
<a href="sourtwig--icon--judith--G.jpg" class="G">
|
||||
<img src="thumbs/sourtwig--icon--judith--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
<a href="flashwhite--lil-dragon--judith--G.jpg" class="G">
|
||||
<img src="thumbs/flashwhite--lil-dragon--judith--G.jpg" title="lil-dragon" alt="lil-dragon" />
|
||||
</a>
|
||||
<a href="bone--armor--judith--G.jpg" class="G">
|
||||
<img src="thumbs/bone--armor--judith--G.jpg" title="armor" alt="armor" />
|
||||
</a>
|
||||
<a href="sinereous--phoenix--judith--G.jpg" class="G">
|
||||
<img src="thumbs/sinereous--phoenix--judith--G.jpg" title="phoenix" alt="phoenix" />
|
||||
</a>
|
||||
<a href="grey--icon--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/grey--icon--lexy--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
<a href="4remy--books--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/4remy--books--lexy--G.jpg" title="books" alt="books" />
|
||||
</a>
|
||||
<a href="ekbellatrix--icon--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/ekbellatrix--icon--lexy--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
<a href="ekbellatrix--swish--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/ekbellatrix--swish--lexy--G.jpg" title="swish" alt="swish" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
|
|
@ -0,0 +1 @@
|
|||
../../4remy--books--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: 4remy</h1>
|
||||
|
||||
<a href="4remy--books--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/4remy--books--lexy--G.jpg" title="books" alt="books" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../amon--bust--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: amon</h1>
|
||||
|
||||
<a href="amon--bust--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/amon--bust--judith--G.jpg" title="bust" alt="bust" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--2b--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--armor--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--books--bun--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--books-icon--bun--G.jpg
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: bone</h1>
|
||||
|
||||
<a href="bone--2b--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--2b--lexy--G.jpg" title="2b" alt="2b" />
|
||||
</a>
|
||||
<a href="bone--books-icon--bun--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--books-icon--bun--G.jpg" title="books-icon" alt="books-icon" />
|
||||
</a>
|
||||
<a href="bone--books--bun--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--books--bun--G.jpg" title="books" alt="books" />
|
||||
</a>
|
||||
<a href="bone--armor--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--armor--judith--G.jpg" title="armor" alt="armor" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--icon--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--sailorcorg--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--swish--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: ekbellatrix</h1>
|
||||
|
||||
<a href="ekbellatrix--sailorcorg--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--sailorcorg--lexy--G.jpg" title="sailorcorg" alt="sailorcorg" />
|
||||
</a>
|
||||
<a href="ekbellatrix--icon--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--icon--lexy--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
<a href="ekbellatrix--swish--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--swish--lexy--G.jpg" title="swish" alt="swish" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../flashwhite--lil-dragon--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: flashwhite</h1>
|
||||
|
||||
<a href="flashwhite--lil-dragon--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/flashwhite--lil-dragon--judith--G.jpg" title="lil-dragon" alt="lil-dragon" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../grey--icon--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: grey</h1>
|
||||
|
||||
<a href="grey--icon--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/grey--icon--lexy--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../grinse--snow--judith--G.png
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: grinse</h1>
|
||||
|
||||
<a href="grinse--snow--judith--G.png" class="G">
|
||||
<img src="../../thumbs/grinse--snow--judith--G.png" title="snow" alt="snow" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist</h1>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Images</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td><a href="4remy">4remy</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="amon">amon</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="bone">bone</a></td>
|
||||
<td>4 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="ekbellatrix">ekbellatrix</a></td>
|
||||
<td>3 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="flashwhite">flashwhite</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="grey">grey</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="grinse">grinse</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="kris">kris</a></td>
|
||||
<td>2 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="muzz">muzz</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="naira">naira</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="osmaru">osmaru</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pinkkbees">pinkkbees</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pointedfox">pointedfox</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="poodlewool">poodlewool</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="sinereous">sinereous</a></td>
|
||||
<td>4 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="sinereous-mycotae">sinereous-mycotae</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="slushy">slushy</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="sourtwig">sourtwig</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="who">who</a></td>
|
||||
<td>2 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="zeru">zeru</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: kris</h1>
|
||||
|
||||
<a href="kris--school--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--school--lexy--G.jpg" title="school" alt="school" />
|
||||
</a>
|
||||
<a href="kris--reading--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--reading--lexy--G.jpg" title="reading" alt="reading" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../kris--reading--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../kris--school--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: muzz</h1>
|
||||
|
||||
<a href="muzz--sailorbadge--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/muzz--sailorbadge--lexy--G.jpg" title="sailorbadge" alt="sailorbadge" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../muzz--sailorbadge--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: naira</h1>
|
||||
|
||||
<a href="naira--chibi--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/naira--chibi--judith--G.jpg" title="chibi" alt="chibi" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../naira--chibi--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: osmaru</h1>
|
||||
|
||||
<a href="osmaru--fireball--judith--G.png" class="G">
|
||||
<img src="../../thumbs/osmaru--fireball--judith--G.png" title="fireball" alt="fireball" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../osmaru--fireball--judith--G.png
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: pinkkbees</h1>
|
||||
|
||||
<a href="pinkkbees--trans--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/pinkkbees--trans--judith--G.jpg" title="trans" alt="trans" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../pinkkbees--trans--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: pointedfox</h1>
|
||||
|
||||
<a href="pointedfox--ana--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/pointedfox--ana--lexy--G.jpg" title="ana" alt="ana" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../pointedfox--ana--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: poodlewool</h1>
|
||||
|
||||
<a href="poodlewool--mask--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/poodlewool--mask--lexy--G.jpg" title="mask" alt="mask" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../poodlewool--mask--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: sinereous-mycotae</h1>
|
||||
|
||||
<a href="sinereous-mycotae--tfcorg--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous-mycotae--tfcorg--lexy--G.jpg" title="tfcorg" alt="tfcorg" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous-mycotae--tfcorg--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: sinereous</h1>
|
||||
|
||||
<a href="sinereous--ladies--maddy-judith--G.png" class="G">
|
||||
<img src="../../thumbs/sinereous--ladies--maddy-judith--G.png" title="ladies" alt="ladies" />
|
||||
</a>
|
||||
<a href="sinereous--fancy--bun--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous--fancy--bun--G.jpg" title="fancy" alt="fancy" />
|
||||
</a>
|
||||
<a href="sinereous--hisoka--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous--hisoka--lexy--G.jpg" title="hisoka" alt="hisoka" />
|
||||
</a>
|
||||
<a href="sinereous--phoenix--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous--phoenix--judith--G.jpg" title="phoenix" alt="phoenix" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--fancy--bun--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--hisoka--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--ladies--maddy-judith--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--phoenix--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: slushy</h1>
|
||||
|
||||
<a href="slushy--chatting--bun-maddy--G.jpg" class="G">
|
||||
<img src="../../thumbs/slushy--chatting--bun-maddy--G.jpg" title="chatting" alt="chatting" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../slushy--chatting--bun-maddy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: sourtwig</h1>
|
||||
|
||||
<a href="sourtwig--icon--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/sourtwig--icon--judith--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sourtwig--icon--judith--G.jpg
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: who</h1>
|
||||
|
||||
<a href="who--sword--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/who--sword--lexy--G.jpg" title="sword" alt="sword" />
|
||||
</a>
|
||||
<a href="who--badge--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/who--badge--lexy--G.jpg" title="badge" alt="badge" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../who--badge--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../who--sword--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: zeru</h1>
|
||||
|
||||
<a href="zeru--fire--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/zeru--fire--judith--G.jpg" title="fire" alt="fire" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../zeru--fire--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--books--bun--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--books-icon--bun--G.jpg
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Character: bun</h1>
|
||||
|
||||
<a href="bone--books-icon--bun--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--books-icon--bun--G.jpg" title="books-icon" alt="books-icon" />
|
||||
</a>
|
||||
<a href="bone--books--bun--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--books--bun--G.jpg" title="books" alt="books" />
|
||||
</a>
|
||||
<a href="sinereous--fancy--bun--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous--fancy--bun--G.jpg" title="fancy" alt="fancy" />
|
||||
</a>
|
||||
<a href="slushy--chatting--bun-maddy--G.jpg" class="G">
|
||||
<img src="../../thumbs/slushy--chatting--bun-maddy--G.jpg" title="chatting" alt="chatting" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--fancy--bun--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../slushy--chatting--bun-maddy--G.jpg
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Character</h1>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Character</th>
|
||||
<th>Images</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td><a href="bun">bun</a></td>
|
||||
<td>4 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="judith">judith</a></td>
|
||||
<td>11 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="lexy">lexy</a></td>
|
||||
<td>15 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="maddy">maddy</a></td>
|
||||
<td>2 images</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../amon--bust--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--armor--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../flashwhite--lil-dragon--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../grinse--snow--judith--G.png
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Character: judith</h1>
|
||||
|
||||
<a href="sinereous--ladies--maddy-judith--G.png" class="G">
|
||||
<img src="../../thumbs/sinereous--ladies--maddy-judith--G.png" title="ladies" alt="ladies" />
|
||||
</a>
|
||||
<a href="grinse--snow--judith--G.png" class="G">
|
||||
<img src="../../thumbs/grinse--snow--judith--G.png" title="snow" alt="snow" />
|
||||
</a>
|
||||
<a href="osmaru--fireball--judith--G.png" class="G">
|
||||
<img src="../../thumbs/osmaru--fireball--judith--G.png" title="fireball" alt="fireball" />
|
||||
</a>
|
||||
<a href="amon--bust--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/amon--bust--judith--G.jpg" title="bust" alt="bust" />
|
||||
</a>
|
||||
<a href="pinkkbees--trans--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/pinkkbees--trans--judith--G.jpg" title="trans" alt="trans" />
|
||||
</a>
|
||||
<a href="zeru--fire--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/zeru--fire--judith--G.jpg" title="fire" alt="fire" />
|
||||
</a>
|
||||
<a href="naira--chibi--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/naira--chibi--judith--G.jpg" title="chibi" alt="chibi" />
|
||||
</a>
|
||||
<a href="sourtwig--icon--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/sourtwig--icon--judith--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
<a href="flashwhite--lil-dragon--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/flashwhite--lil-dragon--judith--G.jpg" title="lil-dragon" alt="lil-dragon" />
|
||||
</a>
|
||||
<a href="bone--armor--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--armor--judith--G.jpg" title="armor" alt="armor" />
|
||||
</a>
|
||||
<a href="sinereous--phoenix--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous--phoenix--judith--G.jpg" title="phoenix" alt="phoenix" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../naira--chibi--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../osmaru--fireball--judith--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../pinkkbees--trans--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--ladies--maddy-judith--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--phoenix--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sourtwig--icon--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../zeru--fire--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../4remy--books--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--2b--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--icon--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--sailorcorg--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--swish--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../grey--icon--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Character: lexy</h1>
|
||||
|
||||
<a href="kris--school--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--school--lexy--G.jpg" title="school" alt="school" />
|
||||
</a>
|
||||
<a href="bone--2b--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/bone--2b--lexy--G.jpg" title="2b" alt="2b" />
|
||||
</a>
|
||||
<a href="sinereous-mycotae--tfcorg--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous-mycotae--tfcorg--lexy--G.jpg" title="tfcorg" alt="tfcorg" />
|
||||
</a>
|
||||
<a href="who--sword--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/who--sword--lexy--G.jpg" title="sword" alt="sword" />
|
||||
</a>
|
||||
<a href="poodlewool--mask--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/poodlewool--mask--lexy--G.jpg" title="mask" alt="mask" />
|
||||
</a>
|
||||
<a href="pointedfox--ana--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/pointedfox--ana--lexy--G.jpg" title="ana" alt="ana" />
|
||||
</a>
|
||||
<a href="muzz--sailorbadge--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/muzz--sailorbadge--lexy--G.jpg" title="sailorbadge" alt="sailorbadge" />
|
||||
</a>
|
||||
<a href="who--badge--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/who--badge--lexy--G.jpg" title="badge" alt="badge" />
|
||||
</a>
|
||||
<a href="kris--reading--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--reading--lexy--G.jpg" title="reading" alt="reading" />
|
||||
</a>
|
||||
<a href="sinereous--hisoka--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/sinereous--hisoka--lexy--G.jpg" title="hisoka" alt="hisoka" />
|
||||
</a>
|
||||
<a href="ekbellatrix--sailorcorg--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--sailorcorg--lexy--G.jpg" title="sailorcorg" alt="sailorcorg" />
|
||||
</a>
|
||||
<a href="grey--icon--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/grey--icon--lexy--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
<a href="4remy--books--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/4remy--books--lexy--G.jpg" title="books" alt="books" />
|
||||
</a>
|
||||
<a href="ekbellatrix--icon--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--icon--lexy--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
<a href="ekbellatrix--swish--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--swish--lexy--G.jpg" title="swish" alt="swish" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../kris--reading--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../kris--school--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../muzz--sailorbadge--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../pointedfox--ana--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../poodlewool--mask--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--hisoka--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous-mycotae--tfcorg--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../who--badge--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../who--sword--lexy--G.jpg
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Character: maddy</h1>
|
||||
|
||||
<a href="sinereous--ladies--maddy-judith--G.png" class="G">
|
||||
<img src="../../thumbs/sinereous--ladies--maddy-judith--G.png" title="ladies" alt="ladies" />
|
||||
</a>
|
||||
<a href="slushy--chatting--bun-maddy--G.jpg" class="G">
|
||||
<img src="../../thumbs/slushy--chatting--bun-maddy--G.jpg" title="chatting" alt="chatting" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2019-11-28.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
<div class="meta"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const root = window.location.pathname.replace(/\/by-.+$/, '/');
|
||||
const modal = document.querySelector('.modal');
|
||||
const img = document.querySelector('.img');
|
||||
const meta = document.querySelector('.meta');
|
||||
const scroll = {
|
||||
top: window.scrollY,
|
||||
left: window.scrollX,
|
||||
behavior: 'auto'
|
||||
};
|
||||
let mustLoadHash = window.location.hash !== '';
|
||||
|
||||
function loadHash() {
|
||||
if (!mustLoadHash) {
|
||||
mustLoadHash = true;
|
||||
return;
|
||||
}
|
||||
hash = window.location.hash.replace('#', '');
|
||||
if (hash !== '') {
|
||||
scroll.top = window.scrollY;
|
||||
scroll.left = window.scrollX;
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
if (thumb.attributes.href.textContent === hash) {
|
||||
thumb.click();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hideModal();
|
||||
window.scrollTo(scroll);
|
||||
}
|
||||
}
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
// There's an edge case here, where if you load the page with
|
||||
// no hash, click an image, then click back, it adds an empty
|
||||
// hash to the URL (e.g: example.com/#). The problem with this
|
||||
// is that it adds to the history, so if you click back from
|
||||
// there, it goes to the location without the hash, then adds
|
||||
// the hash again, meaning you can't back out of the page
|
||||
// after clicking an image.
|
||||
//
|
||||
// The web is a mess and computers were a mistake.
|
||||
if (window.location.hash !== '') {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', evt => {
|
||||
if (evt.key === 'Escape') {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', evt => {
|
||||
hideModal();
|
||||
});
|
||||
window.onhashchange = loadHash;
|
||||
|
||||
document.querySelectorAll('.G, .R, .X').forEach(thumb => {
|
||||
thumb.addEventListener('click', evt => {
|
||||
const imgName = thumb.attributes.href.textContent;
|
||||
const parts = imgName.split('.')[0].split('--');
|
||||
const title = parts[1].replace(/-/g, ' ');
|
||||
const characters = parts[2].split('-').map(c => `<a href="${root}by-character/${c}">${c}</a>`).join(', ');
|
||||
evt.preventDefault();
|
||||
modal.classList.add('show');
|
||||
mustLoadHash = true;
|
||||
window.location.hash = imgName;
|
||||
img.innerHTML = `<a href="${imgName}" target="_blank"><img src="${imgName}" title="${title}" alt="${title}" /></a>`;
|
||||
meta.innerHTML = `<h2>${title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Characters</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="${root}by-artist/${parts[0]}">${parts[0]}</a></td>
|
||||
<td>${characters}</td>
|
||||
<td><a href="${root}by-rating/${parts[3]}">${parts[3]}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
});
|
||||
|
||||
loadHash();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../sinereous--ladies--maddy-judith--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../slushy--chatting--bun-maddy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../4remy--books--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../amon--bust--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--2b--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bone--armor--judith--G.jpg
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue