More files
This commit is contained in:
parent
276ae3350e
commit
d9c686153d
39
all.html
39
all.html
|
|
@ -102,6 +102,39 @@
|
|||
<main>
|
||||
<h1>All Commissions</h1>
|
||||
|
||||
<a href="yamshkey--face-off-small--makyo-lexy--G.png" class="G">
|
||||
<img src="thumbs/yamshkey--face-off-small--makyo-lexy--G.png" title="face-off-small" alt="face-off-small" />
|
||||
</a>
|
||||
<a href="ultrafox--jojo4-small--makyo-lexy--G.jpg" class="G">
|
||||
<img src="thumbs/ultrafox--jojo4-small--makyo-lexy--G.jpg" title="jojo4-small" alt="jojo4-small" />
|
||||
</a>
|
||||
<a href="shaggi--jojo-small--makyo-lexy--G.png" class="G">
|
||||
<img src="thumbs/shaggi--jojo-small--makyo-lexy--G.png" title="jojo-small" alt="jojo-small" />
|
||||
</a>
|
||||
<a href="muzz--CorgiBadge--lexy--G.png" class="G">
|
||||
<img src="thumbs/muzz--CorgiBadge--lexy--G.png" title="CorgiBadge" alt="CorgiBadge" />
|
||||
</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="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="idess--corgify--lexy--G.png" class="G">
|
||||
<img src="thumbs/idess--corgify--lexy--G.png" title="corgify" alt="corgify" />
|
||||
</a>
|
||||
<a href="grey--prettycorgi-via-amdusias--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/grey--prettycorgi-via-amdusias--lexy--G.jpg" title="prettycorgi-via-amdusias" alt="prettycorgi-via-amdusias" />
|
||||
</a>
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="casparr--catching-up-finished--makyo-lexy--G.png" class="G">
|
||||
<img src="thumbs/casparr--catching-up-finished--makyo-lexy--G.png" title="catching-up-finished" alt="catching-up-finished" />
|
||||
</a>
|
||||
<a href="cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" class="R">
|
||||
<img src="thumbs/cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" title="PolyPile-small" alt="PolyPile-small" />
|
||||
</a>
|
||||
<a href="sinereous--ladies--maddy-judith--G.png" class="G">
|
||||
<img src="thumbs/sinereous--ladies--maddy-judith--G.png" title="ladies" alt="ladies" />
|
||||
</a>
|
||||
|
|
@ -129,9 +162,6 @@
|
|||
<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>
|
||||
|
|
@ -144,9 +174,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.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: cadmiumtea</h1>
|
||||
|
||||
<a href="cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" class="R">
|
||||
<img src="../../thumbs/cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" title="PolyPile-small" alt="PolyPile-small" />
|
||||
</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 @@
|
|||
../../casparr--catching-up-finished--makyo-lexy--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: casparr</h1>
|
||||
|
||||
<a href="casparr--catching-up-finished--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/casparr--catching-up-finished--makyo-lexy--G.png" title="catching-up-finished" alt="catching-up-finished" />
|
||||
</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--polycule-small--makyo-amdusias-lexy-jd--G.png
|
||||
|
|
@ -102,6 +102,9 @@
|
|||
<main>
|
||||
<h1>Artist: ekbellatrix</h1>
|
||||
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="ekbellatrix--sailorcorg--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--sailorcorg--lexy--G.jpg" title="sailorcorg" alt="sailorcorg" />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../grey--prettycorgi-via-amdusias--lexy--G.jpg
|
||||
|
|
@ -102,6 +102,9 @@
|
|||
<main>
|
||||
<h1>Artist: grey</h1>
|
||||
|
||||
<a href="grey--prettycorgi-via-amdusias--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/grey--prettycorgi-via-amdusias--lexy--G.jpg" title="prettycorgi-via-amdusias" alt="prettycorgi-via-amdusias" />
|
||||
</a>
|
||||
<a href="grey--icon--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/grey--icon--lexy--G.jpg" title="icon" alt="icon" />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../idess--corgify--lexy--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: idess</h1>
|
||||
|
||||
<a href="idess--corgify--lexy--G.png" class="G">
|
||||
<img src="../../thumbs/idess--corgify--lexy--G.png" title="corgify" alt="corgify" />
|
||||
</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>
|
||||
|
|
@ -123,9 +123,17 @@
|
|||
<td><a href="bone">bone</a></td>
|
||||
<td>4 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="cadmiumtea">cadmiumtea</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="casparr">casparr</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="ekbellatrix">ekbellatrix</a></td>
|
||||
<td>3 images</td>
|
||||
<td>4 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="flashwhite">flashwhite</a></td>
|
||||
|
|
@ -133,15 +141,19 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><a href="grey">grey</a></td>
|
||||
<td>1 image</td>
|
||||
<td>2 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="grinse">grinse</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="idess">idess</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="kris">kris</a></td>
|
||||
<td>2 images</td>
|
||||
<td>3 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="muzz">muzz</a></td>
|
||||
|
|
@ -167,6 +179,10 @@
|
|||
<td><a href="poodlewool">poodlewool</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="shaggi">shaggi</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="sinereous">sinereous</a></td>
|
||||
<td>4 images</td>
|
||||
|
|
@ -183,10 +199,18 @@
|
|||
<td><a href="sourtwig">sourtwig</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="ultrafox">ultrafox</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="who">who</a></td>
|
||||
<td>2 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="yamshkey">yamshkey</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="zeru">zeru</a></td>
|
||||
<td>1 image</td>
|
||||
|
|
|
|||
|
|
@ -102,11 +102,14 @@
|
|||
<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>
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="kris--school--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--school--lexy--G.jpg" title="school" alt="school" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg
|
||||
|
|
@ -102,8 +102,8 @@
|
|||
<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 href="muzz--CorgiBadge--lexy--G.png" class="G">
|
||||
<img src="../../thumbs/muzz--CorgiBadge--lexy--G.png" title="CorgiBadge" alt="CorgiBadge" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../muzz--CorgiBadge--lexy--G.png
|
||||
|
|
@ -1 +0,0 @@
|
|||
../../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: shaggi</h1>
|
||||
|
||||
<a href="shaggi--jojo-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/shaggi--jojo-small--makyo-lexy--G.png" title="jojo-small" alt="jojo-small" />
|
||||
</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 @@
|
|||
../../shaggi--jojo-small--makyo-lexy--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: ultrafox</h1>
|
||||
|
||||
<a href="ultrafox--jojo4-small--makyo-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ultrafox--jojo4-small--makyo-lexy--G.jpg" title="jojo4-small" alt="jojo4-small" />
|
||||
</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 @@
|
|||
../../ultrafox--jojo4-small--makyo-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: yamshkey</h1>
|
||||
|
||||
<a href="yamshkey--face-off-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/yamshkey--face-off-small--makyo-lexy--G.png" title="face-off-small" alt="face-off-small" />
|
||||
</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 @@
|
|||
../../yamshkey--face-off-small--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png
|
||||
|
|
@ -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>Character: amdusias</h1>
|
||||
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" class="R">
|
||||
<img src="../../thumbs/cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" title="PolyPile-small" alt="PolyPile-small" />
|
||||
</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--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-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>Character: heff</h1>
|
||||
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</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--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg
|
||||
|
|
@ -111,21 +111,45 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td><a href="amdusias">amdusias</a></td>
|
||||
<td>3 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="bun">bun</a></td>
|
||||
<td>4 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="heff">heff</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="jd">jd</a></td>
|
||||
<td>3 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="judith">judith</a></td>
|
||||
<td>11 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="kris">kris</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="lexy">lexy</a></td>
|
||||
<td>15 images</td>
|
||||
<td>24 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="maddy">maddy</a></td>
|
||||
<td>2 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="makyo">makyo</a></td>
|
||||
<td>7 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="polycute">polycute</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png
|
||||
|
|
@ -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>Character: jd</h1>
|
||||
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" class="R">
|
||||
<img src="../../thumbs/cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" title="PolyPile-small" alt="PolyPile-small" />
|
||||
</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--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-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>Character: kris</h1>
|
||||
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</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--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../casparr--catching-up-finished--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../grey--prettycorgi-via-amdusias--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../idess--corgify--lexy--G.png
|
||||
|
|
@ -102,6 +102,39 @@
|
|||
<main>
|
||||
<h1>Character: lexy</h1>
|
||||
|
||||
<a href="yamshkey--face-off-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/yamshkey--face-off-small--makyo-lexy--G.png" title="face-off-small" alt="face-off-small" />
|
||||
</a>
|
||||
<a href="ultrafox--jojo4-small--makyo-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ultrafox--jojo4-small--makyo-lexy--G.jpg" title="jojo4-small" alt="jojo4-small" />
|
||||
</a>
|
||||
<a href="shaggi--jojo-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/shaggi--jojo-small--makyo-lexy--G.png" title="jojo-small" alt="jojo-small" />
|
||||
</a>
|
||||
<a href="muzz--CorgiBadge--lexy--G.png" class="G">
|
||||
<img src="../../thumbs/muzz--CorgiBadge--lexy--G.png" title="CorgiBadge" alt="CorgiBadge" />
|
||||
</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="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="idess--corgify--lexy--G.png" class="G">
|
||||
<img src="../../thumbs/idess--corgify--lexy--G.png" title="corgify" alt="corgify" />
|
||||
</a>
|
||||
<a href="grey--prettycorgi-via-amdusias--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/grey--prettycorgi-via-amdusias--lexy--G.jpg" title="prettycorgi-via-amdusias" alt="prettycorgi-via-amdusias" />
|
||||
</a>
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="casparr--catching-up-finished--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/casparr--catching-up-finished--makyo-lexy--G.png" title="catching-up-finished" alt="catching-up-finished" />
|
||||
</a>
|
||||
<a href="cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" class="R">
|
||||
<img src="../../thumbs/cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" title="PolyPile-small" alt="PolyPile-small" />
|
||||
</a>
|
||||
<a href="kris--school--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--school--lexy--G.jpg" title="school" alt="school" />
|
||||
</a>
|
||||
|
|
@ -120,15 +153,9 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../muzz--CorgiBadge--lexy--G.png
|
||||
|
|
@ -1 +0,0 @@
|
|||
../../muzz--sailorbadge--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../shaggi--jojo-small--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ultrafox--jojo4-small--makyo-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../yamshkey--face-off-small--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../casparr--catching-up-finished--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
<!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: makyo</h1>
|
||||
|
||||
<a href="yamshkey--face-off-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/yamshkey--face-off-small--makyo-lexy--G.png" title="face-off-small" alt="face-off-small" />
|
||||
</a>
|
||||
<a href="ultrafox--jojo4-small--makyo-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ultrafox--jojo4-small--makyo-lexy--G.jpg" title="jojo4-small" alt="jojo4-small" />
|
||||
</a>
|
||||
<a href="shaggi--jojo-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/shaggi--jojo-small--makyo-lexy--G.png" title="jojo-small" alt="jojo-small" />
|
||||
</a>
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="casparr--catching-up-finished--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/casparr--catching-up-finished--makyo-lexy--G.png" title="catching-up-finished" alt="catching-up-finished" />
|
||||
</a>
|
||||
<a href="cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" class="R">
|
||||
<img src="../../thumbs/cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" title="PolyPile-small" alt="PolyPile-small" />
|
||||
</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--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../shaggi--jojo-small--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ultrafox--jojo4-small--makyo-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../yamshkey--face-off-small--makyo-lexy--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>Character: polycute</h1>
|
||||
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</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--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../casparr--catching-up-finished--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../grey--prettycorgi-via-amdusias--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../idess--corgify--lexy--G.png
|
||||
|
|
@ -102,6 +102,36 @@
|
|||
<main>
|
||||
<h1>Rating: G</h1>
|
||||
|
||||
<a href="yamshkey--face-off-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/yamshkey--face-off-small--makyo-lexy--G.png" title="face-off-small" alt="face-off-small" />
|
||||
</a>
|
||||
<a href="ultrafox--jojo4-small--makyo-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/ultrafox--jojo4-small--makyo-lexy--G.jpg" title="jojo4-small" alt="jojo4-small" />
|
||||
</a>
|
||||
<a href="shaggi--jojo-small--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/shaggi--jojo-small--makyo-lexy--G.png" title="jojo-small" alt="jojo-small" />
|
||||
</a>
|
||||
<a href="muzz--CorgiBadge--lexy--G.png" class="G">
|
||||
<img src="../../thumbs/muzz--CorgiBadge--lexy--G.png" title="CorgiBadge" alt="CorgiBadge" />
|
||||
</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="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="idess--corgify--lexy--G.png" class="G">
|
||||
<img src="../../thumbs/idess--corgify--lexy--G.png" title="corgify" alt="corgify" />
|
||||
</a>
|
||||
<a href="grey--prettycorgi-via-amdusias--lexy--G.jpg" class="G">
|
||||
<img src="../../thumbs/grey--prettycorgi-via-amdusias--lexy--G.jpg" title="prettycorgi-via-amdusias" alt="prettycorgi-via-amdusias" />
|
||||
</a>
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="../../thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="casparr--catching-up-finished--makyo-lexy--G.png" class="G">
|
||||
<img src="../../thumbs/casparr--catching-up-finished--makyo-lexy--G.png" title="catching-up-finished" alt="catching-up-finished" />
|
||||
</a>
|
||||
<a href="sinereous--ladies--maddy-judith--G.png" class="G">
|
||||
<img src="../../thumbs/sinereous--ladies--maddy-judith--G.png" title="ladies" alt="ladies" />
|
||||
</a>
|
||||
|
|
@ -129,9 +159,6 @@
|
|||
<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>
|
||||
|
|
@ -144,9 +171,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../muzz--CorgiBadge--lexy--G.png
|
||||
|
|
@ -1 +0,0 @@
|
|||
../../muzz--sailorbadge--lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../shaggi--jojo-small--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../ultrafox--jojo4-small--makyo-lexy--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../yamshkey--face-off-small--makyo-lexy--G.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.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>Rating: R</h1>
|
||||
|
||||
<a href="cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" class="R">
|
||||
<img src="../../thumbs/cadmiumtea--PolyPile-small--amdusias-jd-lexy-makyo--R.jpg" title="PolyPile-small" alt="PolyPile-small" />
|
||||
</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>
|
||||
|
|
@ -113,7 +113,11 @@
|
|||
|
||||
<tr>
|
||||
<td><a href="G">G</a></td>
|
||||
<td>30 images</td>
|
||||
<td>38 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="R">R</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 490 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
40
index.html
40
index.html
|
|
@ -112,35 +112,35 @@
|
|||
|
||||
<a href="all.html">All images</a>
|
||||
</strong></p>
|
||||
<a href="sinereous--ladies--maddy-judith--G.png" class="G">
|
||||
<img src="thumbs/sinereous--ladies--maddy-judith--G.png" title="ladies" alt="ladies" />
|
||||
<a href="yamshkey--face-off-small--makyo-lexy--G.png" class="G">
|
||||
<img src="thumbs/yamshkey--face-off-small--makyo-lexy--G.png" title="face-off-small" alt="face-off-small" />
|
||||
</a>
|
||||
<a href="grinse--snow--judith--G.png" class="G">
|
||||
<img src="thumbs/grinse--snow--judith--G.png" title="snow" alt="snow" />
|
||||
<a href="ultrafox--jojo4-small--makyo-lexy--G.jpg" class="G">
|
||||
<img src="thumbs/ultrafox--jojo4-small--makyo-lexy--G.jpg" title="jojo4-small" alt="jojo4-small" />
|
||||
</a>
|
||||
<a href="kris--school--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/kris--school--lexy--G.jpg" title="school" alt="school" />
|
||||
<a href="shaggi--jojo-small--makyo-lexy--G.png" class="G">
|
||||
<img src="thumbs/shaggi--jojo-small--makyo-lexy--G.png" title="jojo-small" alt="jojo-small" />
|
||||
</a>
|
||||
<a href="osmaru--fireball--judith--G.png" class="G">
|
||||
<img src="thumbs/osmaru--fireball--judith--G.png" title="fireball" alt="fireball" />
|
||||
<a href="muzz--CorgiBadge--lexy--G.png" class="G">
|
||||
<img src="thumbs/muzz--CorgiBadge--lexy--G.png" title="CorgiBadge" alt="CorgiBadge" />
|
||||
</a>
|
||||
<a href="bone--2b--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/bone--2b--lexy--G.jpg" title="2b" alt="2b" />
|
||||
<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-mycotae--tfcorg--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/sinereous-mycotae--tfcorg--lexy--G.jpg" title="tfcorg" alt="tfcorg" />
|
||||
<a href="kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" class="G">
|
||||
<img src="thumbs/kris--foxfamily-s--polycute-makyo-jd-amdusias-kris-heff-lexy--G.jpg" title="foxfamily-s" alt="foxfamily-s" />
|
||||
</a>
|
||||
<a href="who--sword--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/who--sword--lexy--G.jpg" title="sword" alt="sword" />
|
||||
<a href="idess--corgify--lexy--G.png" class="G">
|
||||
<img src="thumbs/idess--corgify--lexy--G.png" title="corgify" alt="corgify" />
|
||||
</a>
|
||||
<a href="poodlewool--mask--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/poodlewool--mask--lexy--G.jpg" title="mask" alt="mask" />
|
||||
<a href="grey--prettycorgi-via-amdusias--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/grey--prettycorgi-via-amdusias--lexy--G.jpg" title="prettycorgi-via-amdusias" alt="prettycorgi-via-amdusias" />
|
||||
</a>
|
||||
<a href="pointedfox--ana--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/pointedfox--ana--lexy--G.jpg" title="ana" alt="ana" />
|
||||
<a href="ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" class="G">
|
||||
<img src="thumbs/ekbellatrix--polycule-small--makyo-amdusias-lexy-jd--G.png" title="polycule-small" alt="polycule-small" />
|
||||
</a>
|
||||
<a href="muzz--sailorbadge--lexy--G.jpg" class="G">
|
||||
<img src="thumbs/muzz--sailorbadge--lexy--G.jpg" title="sailorbadge" alt="sailorbadge" />
|
||||
<a href="casparr--catching-up-finished--makyo-lexy--G.png" class="G">
|
||||
<img src="thumbs/casparr--catching-up-finished--makyo-lexy--G.png" title="catching-up-finished" alt="catching-up-finished" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 372 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 792 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 902 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 662 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Loading…
Reference in New Issue