makyo/makyo.ink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix for chrome

Browse Source
This commit is contained in:
Madison Scott-Clary
2020-03-01 23:16:11 -08:00
parent 901bb1e720
commit a15f4f603b
4 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/parts/_front.scss
View File

@ -50,7 +50,7 @@
flex-basis: 20%;
transition: transform 300ms ease;
&#recent, &#publications {
&.recent, &.publications {
display: inline-block;
}

18
content/publications/_index.html
View File

@ -13,34 +13,34 @@ permalink: /publications/
<a href="https://ally.id/book?pk_campaign=publications" class="post-card-image" style="background-image: url(/assets/img/publications/ally.png )">
</a>
<div class="post-card-body">
<a href="ally" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
<a href="https://ally.id/book?pk_campaign=publications" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
</div>
</div>
</li>
<li>
<div class="post-card">
<a href="eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
<a href="/publications/eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
</a>
<div class="post-card-body">
<a href="eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
<a href="/publications/eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
</div>
</div>
</li>
<li>
<div class="post-card">
<a href="restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
<a href="/publications/restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
</a>
<div class="post-card-body">
<a href="restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
<a href="/publications/restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
</div>
</div>
</li>
<li>
<div class="post-card">
<a href="rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
<a href="/publications/rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
</a>
<div class="post-card-body">
<a href="rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
<a href="/publications/rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
</div>
</div>
</li>
@ -50,10 +50,10 @@ permalink: /publications/
<ol class="post-card-box clearfix">
<li>
<div class="post-card">
<a href="arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
<a href="/publications/arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
</a>
<div class="post-card-body">
<a href="arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
<a href="/publications/arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
</div>
</div>
</li>

28
layouts/index.html
View File

@ -12,7 +12,7 @@
</nav>
<main>
<article>
<section id="home" class="carousel-item home">
<section class="carousel-item home">
<div class="small">
<img alt="Madison Scott-Clary" src="/assets/img/headshot.jpg" />
</div>
@ -24,7 +24,7 @@
<p>This site comprises mostly completed written works. For drafts, in-progress words, and so on, head over to <a href="http://writing.drab-makyo.com">her blog and writing page</a></p>
</div>
</section>
<section id="publications" class="carousel-item publications">
<section class="carousel-item publications">
<h2><a href="/publications">Publications</a></h2>
<ol class="post-card-box clearfix">
<li>
@ -32,34 +32,34 @@
<a href="https://ally.id/book?pk_campaign=publications" class="post-card-image" style="background-image: url(/assets/img/publications/ally.png )">
</a>
<div class="post-card-body">
<a href="ally" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
<a href="https://ally.id/book?pk_campaign=publications" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
</div>
</div>
</li>
<li>
<div class="post-card">
<a href="eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
<a href="/publications/eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
</a>
<div class="post-card-body">
<a href="eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
<a href="/publications/eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
</div>
</div>
</li>
<li>
<div class="post-card">
<a href="restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
<a href="/publications/restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
</a>
<div class="post-card-body">
<a href="restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
<a href="/publications/restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
</div>
</div>
</li>
<li>
<div class="post-card">
<a href="rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
<a href="/publications/rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
</a>
<div class="post-card-body">
<a href="rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
<a href="/publications/rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
</div>
</div>
</li>
@ -69,10 +69,10 @@
<ol class="post-card-box clearfix">
<li>
<div class="post-card">
<a href="arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
<a href="/publications/arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
</a>
<div class="post-card-body">
<a href="arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
<a href="/publications/arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
</div>
</div>
</li>
@ -89,7 +89,7 @@
<li><a href="https://www.weaselpress.com/shop/knotted-vol-ii">Knotted: A BDSM Anthology, vol II</a> - <em>Centerpiece</em></li>
</ul>
</section>
<section id="projects" class="carousel-item projects">
<section class="carousel-item projects">
<h2>Projects</h2>
<div class="large">
<p>Along with standalone works and story collections, Madison has worked on several writing projects, often with others</p>
@ -105,7 +105,7 @@
<a target="_blank" href="https://adjectivespecies.com"><img alt="[a][s]" src="/assets/img/projects/adjspecies.png" /></a>
</div>
</section>
<section id="recent" class="carousel-item recent">
<section class="carousel-item recent">
<h2>Recent</h2>
<ol class="post-card-box clearfix">
{{ range first 6 (where .Site.Pages.ByPublishDate.Reverse ".Params.date" "!=" nil) }}
@ -129,7 +129,7 @@
</ol>
<p style="text-align: center"><a href="/post"><b>More...</b></a></p>
</section>
<section id="more" class="carousel-item more">
<section class="carousel-item more">
<div class="third">
<h2><a href="/categories">Categories</a></h2>
<p>Madison has worked on several pieces of various kinds. These are broken down into sensible categories.</p>

23
static/assets/js/carousel.js
View File

@ -1,35 +1,40 @@
function switchTab(e) {
e.preventDefault();
const tab = window.location.hash.substring(1);
// Unselect currently selected item.
document
.querySelector('.carousel-entry.on').classList.remove('on');
try {
document
.querySelector('.carousel-entry.on').classList.remove('on');
} catch(e) {
// pass
}
// Select the new item.
document
.querySelector(`.carousel-entry.${window.location.hash.substring(1)}`)
.querySelector(`.carousel-entry.${tab}`)
.classList.add('on');
// In case of back button, in some edge cases, scroll the element into view.
document.body.scrollTo(0, 0);
document.querySelector('.carousel').scrollTo(
document.querySelector(window.location.hash).offsetLeft, 0);
document.querySelector(`.carousel-item.${tab}`).offsetLeft, 0);
document.body.scrollTo(0, 0);
}
function load() {
// Add a listener for the location changing if window width supports it.
if (window.innerWidth >= 960) {
// Add a listener for the location changing if window width supports it.
window.addEventListener('popstate', switchTab);
document.querySelector('.carousel nav').style.display = 'block';
} else {
window.removeEventListener('popstate', switchTab);
document.querySelector('.carousel nav').style.display = 'none';
}
}
// If we enter the page with a hash, select the current item.
window.addEventListener('load', () => {
document.querySelector(`.carousel-entry.${window.location.hash.substring(1)}`)
.classList.add('on');
document.body.scrollTo(0, 0);
switchTab({preventDefault: () => {}});
load();
});
window.addEventListener('resize', load);