Add art
This commit is contained in:
parent
a0fffbf8a4
commit
800b0144f9
|
|
@ -66,3 +66,12 @@ trunch--flamable--judith--G.jpg 1659715147.0899959
|
|||
neralis--icon--judith--G.jpg 1659715138.9899292
|
||||
sinereous--cycle--judith--G.jpg 1659715129.8418539
|
||||
trunch--flammable--judith--G.jpg 1659715147.0899959
|
||||
artykeythong--gryphon--judith--G.jpg 1665942628.65981
|
||||
kagiroshi--smug--judith--G.jpg 1665942833.5485942
|
||||
mossratsun--tf--judith--G.jpg 1665942673.943975
|
||||
kota--tf--woof--G.jpg 1665942573.1196158
|
||||
hhazard--woof-tf--blaidd--G.jpg 1665942791.796427
|
||||
lukst--goop--judith--G.jpg 1665942508.7434022
|
||||
the_dawner--then-perish--judith--G.jpg 1665942757.6162927
|
||||
fekaiiki--goop-tf--judith--G.jpg 1665942703.7800865
|
||||
joey--hearts--judith--G.jpg 1665942439.551189
|
||||
|
|
|
|||
29
all.html
29
all.html
|
|
@ -102,6 +102,33 @@
|
|||
<main>
|
||||
<h1>All Commissions</h1>
|
||||
|
||||
<a href="kagiroshi--smug--judith--G.jpg" class="G">
|
||||
<img src="thumbs/kagiroshi--smug--judith--G.jpg" title="smug" alt="smug" />
|
||||
</a>
|
||||
<a href="hhazard--woof-tf--blaidd--G.jpg" class="G">
|
||||
<img src="thumbs/hhazard--woof-tf--blaidd--G.jpg" title="woof-tf" alt="woof-tf" />
|
||||
</a>
|
||||
<a href="the_dawner--then-perish--judith--G.jpg" class="G">
|
||||
<img src="thumbs/the_dawner--then-perish--judith--G.jpg" title="then-perish" alt="then-perish" />
|
||||
</a>
|
||||
<a href="fekaiiki--goop-tf--judith--G.jpg" class="G">
|
||||
<img src="thumbs/fekaiiki--goop-tf--judith--G.jpg" title="goop-tf" alt="goop-tf" />
|
||||
</a>
|
||||
<a href="mossratsun--tf--judith--G.jpg" class="G">
|
||||
<img src="thumbs/mossratsun--tf--judith--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
<a href="artykeythong--gryphon--judith--G.jpg" class="G">
|
||||
<img src="thumbs/artykeythong--gryphon--judith--G.jpg" title="gryphon" alt="gryphon" />
|
||||
</a>
|
||||
<a href="kota--tf--woof--G.jpg" class="G">
|
||||
<img src="thumbs/kota--tf--woof--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
<a href="lukst--goop--judith--G.jpg" class="G">
|
||||
<img src="thumbs/lukst--goop--judith--G.jpg" title="goop" alt="goop" />
|
||||
</a>
|
||||
<a href="joey--hearts--judith--G.jpg" class="G">
|
||||
<img src="thumbs/joey--hearts--judith--G.jpg" title="hearts" alt="hearts" />
|
||||
</a>
|
||||
<a href="trunch--flammable--judith--G.jpg" class="G">
|
||||
<img src="thumbs/trunch--flammable--judith--G.jpg" title="flammable" alt="flammable" />
|
||||
</a>
|
||||
|
|
@ -302,7 +329,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../artykeythong--gryphon--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: artykeythong</h1>
|
||||
|
||||
<a href="artykeythong--gryphon--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/artykeythong--gryphon--judith--G.jpg" title="gryphon" alt="gryphon" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../fekaiiki--goop-tf--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: fekaiiki</h1>
|
||||
|
||||
<a href="fekaiiki--goop-tf--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/fekaiiki--goop-tf--judith--G.jpg" title="goop-tf" alt="goop-tf" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../hhazard--woof-tf--blaidd--G.jpg
|
||||
|
|
@ -102,6 +102,9 @@
|
|||
<main>
|
||||
<h1>Artist: hhazard</h1>
|
||||
|
||||
<a href="hhazard--woof-tf--blaidd--G.jpg" class="G">
|
||||
<img src="../../thumbs/hhazard--woof-tf--blaidd--G.jpg" title="woof-tf" alt="woof-tf" />
|
||||
</a>
|
||||
<a href="hhazard--robold-tf--robold--G.jpg" class="G">
|
||||
<img src="../../thumbs/hhazard--robold-tf--robold--G.jpg" title="robold-tf" alt="robold-tf" />
|
||||
</a>
|
||||
|
|
@ -110,7 +113,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -119,6 +119,10 @@
|
|||
<td><a href="amon">amon</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="artykeythong">artykeythong</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="bera">bera</a></td>
|
||||
<td>1 image</td>
|
||||
|
|
@ -155,6 +159,10 @@
|
|||
<td><a href="ekbellatrix">ekbellatrix</a></td>
|
||||
<td>4 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="fekaiiki">fekaiiki</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="finbeard">finbeard</a></td>
|
||||
<td>1 image</td>
|
||||
|
|
@ -173,7 +181,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><a href="hhazard">hhazard</a></td>
|
||||
<td>2 images</td>
|
||||
<td>3 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="hornbuckle">hornbuckle</a></td>
|
||||
|
|
@ -187,10 +195,22 @@
|
|||
<td><a href="ira-arn">ira-arn</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="joey">joey</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="juleteon">juleteon</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="kagiroshi">kagiroshi</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="kota">kota</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="kris">kris</a></td>
|
||||
<td>3 images</td>
|
||||
|
|
@ -199,6 +219,10 @@
|
|||
<td><a href="lagi">lagi</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="lukst">lukst</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="lunegrimm">lunegrimm</a></td>
|
||||
<td>1 image</td>
|
||||
|
|
@ -207,6 +231,10 @@
|
|||
<td><a href="mads">mads</a></td>
|
||||
<td>2 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="mossratsun">mossratsun</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="muzz">muzz</a></td>
|
||||
<td>1 image</td>
|
||||
|
|
@ -271,6 +299,10 @@
|
|||
<td><a href="tazzle">tazzle</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="the_dawner">the_dawner</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="tinymochadeer">tinymochadeer</a></td>
|
||||
<td>2 images</td>
|
||||
|
|
@ -299,7 +331,7 @@
|
|||
</table>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -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: joey</h1>
|
||||
|
||||
<a href="joey--hearts--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/joey--hearts--judith--G.jpg" title="hearts" alt="hearts" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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 @@
|
|||
../../joey--hearts--judith--G.jpg
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -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: kagiroshi</h1>
|
||||
|
||||
<a href="kagiroshi--smug--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/kagiroshi--smug--judith--G.jpg" title="smug" alt="smug" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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 @@
|
|||
../../kagiroshi--smug--judith--G.jpg
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
a.G, a.R, a.X {
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
a.X {
|
||||
border: 2px solid red;
|
||||
}
|
||||
a.X img {
|
||||
filter: blur(1rem);
|
||||
}
|
||||
a.R {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
a.R img {
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
a.X img:hover, a.R img:hover {
|
||||
filter: blur(0);
|
||||
}
|
||||
main {
|
||||
max-width: 1024px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
font-size: 10pt;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.modal .inner {
|
||||
width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.modal .meta {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.modal .img {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal .img img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
margin: 0 auto;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
tbody tr:nth-child(even) td {
|
||||
background-color: #eee;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Artist: kota</h1>
|
||||
|
||||
<a href="kota--tf--woof--G.jpg" class="G">
|
||||
<img src="../../thumbs/kota--tf--woof--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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 @@
|
|||
../../kota--tf--woof--G.jpg
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -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: lukst</h1>
|
||||
|
||||
<a href="lukst--goop--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/lukst--goop--judith--G.jpg" title="goop" alt="goop" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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 @@
|
|||
../../lukst--goop--judith--G.jpg
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -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: mossratsun</h1>
|
||||
|
||||
<a href="mossratsun--tf--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/mossratsun--tf--judith--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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 @@
|
|||
../../mossratsun--tf--judith--G.jpg
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -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: the_dawner</h1>
|
||||
|
||||
<a href="the_dawner--then-perish--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/the_dawner--then-perish--judith--G.jpg" title="then-perish" alt="then-perish" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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 @@
|
|||
../../the_dawner--then-perish--judith--G.jpg
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../hhazard--woof-tf--blaidd--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: blaidd</h1>
|
||||
|
||||
<a href="hhazard--woof-tf--blaidd--G.jpg" class="G">
|
||||
<img src="../../thumbs/hhazard--woof-tf--blaidd--G.jpg" title="woof-tf" alt="woof-tf" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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>
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,10 @@
|
|||
<td><a href="amdusias">amdusias</a></td>
|
||||
<td>3 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="blaidd">blaidd</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="bun">bun</a></td>
|
||||
<td>4 images</td>
|
||||
|
|
@ -129,7 +133,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td><a href="judith">judith</a></td>
|
||||
<td>37 images</td>
|
||||
<td>44 images</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="kris">kris</a></td>
|
||||
|
|
@ -158,12 +162,16 @@
|
|||
<tr>
|
||||
<td><a href="robold">robold</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="woof">woof</a></td>
|
||||
<td>1 image</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../artykeythong--gryphon--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../fekaiiki--goop-tf--judith--G.jpg
|
||||
|
|
@ -102,6 +102,27 @@
|
|||
<main>
|
||||
<h1>Character: judith</h1>
|
||||
|
||||
<a href="kagiroshi--smug--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/kagiroshi--smug--judith--G.jpg" title="smug" alt="smug" />
|
||||
</a>
|
||||
<a href="the_dawner--then-perish--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/the_dawner--then-perish--judith--G.jpg" title="then-perish" alt="then-perish" />
|
||||
</a>
|
||||
<a href="fekaiiki--goop-tf--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/fekaiiki--goop-tf--judith--G.jpg" title="goop-tf" alt="goop-tf" />
|
||||
</a>
|
||||
<a href="mossratsun--tf--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/mossratsun--tf--judith--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
<a href="artykeythong--gryphon--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/artykeythong--gryphon--judith--G.jpg" title="gryphon" alt="gryphon" />
|
||||
</a>
|
||||
<a href="lukst--goop--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/lukst--goop--judith--G.jpg" title="goop" alt="goop" />
|
||||
</a>
|
||||
<a href="joey--hearts--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/joey--hearts--judith--G.jpg" title="hearts" alt="hearts" />
|
||||
</a>
|
||||
<a href="trunch--flammable--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/trunch--flammable--judith--G.jpg" title="flammable" alt="flammable" />
|
||||
</a>
|
||||
|
|
@ -215,7 +236,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../joey--hearts--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../kagiroshi--smug--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../lukst--goop--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../mossratsun--tf--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../the_dawner--then-perish--judith--G.jpg
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -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: woof</h1>
|
||||
|
||||
<a href="kota--tf--woof--G.jpg" class="G">
|
||||
<img src="../../thumbs/kota--tf--woof--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</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 @@
|
|||
../../kota--tf--woof--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../artykeythong--gryphon--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../fekaiiki--goop-tf--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../hhazard--woof-tf--blaidd--G.jpg
|
||||
|
|
@ -102,6 +102,33 @@
|
|||
<main>
|
||||
<h1>Rating: G</h1>
|
||||
|
||||
<a href="kagiroshi--smug--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/kagiroshi--smug--judith--G.jpg" title="smug" alt="smug" />
|
||||
</a>
|
||||
<a href="hhazard--woof-tf--blaidd--G.jpg" class="G">
|
||||
<img src="../../thumbs/hhazard--woof-tf--blaidd--G.jpg" title="woof-tf" alt="woof-tf" />
|
||||
</a>
|
||||
<a href="the_dawner--then-perish--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/the_dawner--then-perish--judith--G.jpg" title="then-perish" alt="then-perish" />
|
||||
</a>
|
||||
<a href="fekaiiki--goop-tf--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/fekaiiki--goop-tf--judith--G.jpg" title="goop-tf" alt="goop-tf" />
|
||||
</a>
|
||||
<a href="mossratsun--tf--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/mossratsun--tf--judith--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
<a href="artykeythong--gryphon--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/artykeythong--gryphon--judith--G.jpg" title="gryphon" alt="gryphon" />
|
||||
</a>
|
||||
<a href="kota--tf--woof--G.jpg" class="G">
|
||||
<img src="../../thumbs/kota--tf--woof--G.jpg" title="tf" alt="tf" />
|
||||
</a>
|
||||
<a href="lukst--goop--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/lukst--goop--judith--G.jpg" title="goop" alt="goop" />
|
||||
</a>
|
||||
<a href="joey--hearts--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/joey--hearts--judith--G.jpg" title="hearts" alt="hearts" />
|
||||
</a>
|
||||
<a href="trunch--flammable--judith--G.jpg" class="G">
|
||||
<img src="../../thumbs/trunch--flammable--judith--G.jpg" title="flammable" alt="flammable" />
|
||||
</a>
|
||||
|
|
@ -299,7 +326,7 @@
|
|||
</a>
|
||||
</main>
|
||||
<footer>
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-08-05.
|
||||
Site built using <a href="https://commorg.projects.makyo.io" target="_blank">commission organizer</a> on 2022-10-16.
|
||||
</footer>
|
||||
<div class="modal">
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../joey--hearts--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../kagiroshi--smug--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../kota--tf--woof--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../lukst--goop--judith--G.jpg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../mossratsun--tf--judith--G.jpg
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue