Carousel
This commit is contained in:
Madison Scott-Clary
@ -192,8 +192,9 @@ pre {
|
||||
/* = = = = = = = = = = Animate Styles = = = = = = = = = = */
|
||||
//@import "parts/animate";
|
||||
|
||||
/* = = = = = = = = = = Misc = = = = = = = = = = */
|
||||
@import "parts/misc";
|
||||
@import "parts/front-flex";
|
||||
@import "parts/front";
|
||||
|
||||
/* = = = = = = = = = = Media = = = = = = = = = = */
|
||||
@import "media";
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
.front-flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.third {
|
||||
flex: 1 0 30%;
|
||||
padding: 0.5rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.half {
|
||||
flex: 1 0 45%;
|
||||
padding: 0.5rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.third, .half {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
flex: 1 0 38%;
|
||||
padding: 0.5rem;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.large {
|
||||
flex: 1 0 61%;
|
||||
padding: 0.5rem;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.odd {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.front-flex {
|
||||
display: block;
|
||||
|
||||
div, .hero, .hero div {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
126
assets/css/parts/_front.scss
Normal file
126
assets/css/parts/_front.scss
Normal file
@ -0,0 +1,126 @@
|
||||
.carousel {
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
border-bottom: 1px solid $dark-gray;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&.on {
|
||||
background-color: $dark-gray;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
margin-top: 5rem;
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
vertical-align: top;
|
||||
flex-direction: row;
|
||||
width: 500%;
|
||||
overflow: hidden;
|
||||
|
||||
section.carousel-item {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 20%;
|
||||
transition: transform 300ms ease;
|
||||
|
||||
&#recent, &#publications {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.third {
|
||||
flex: 1 0 30%;
|
||||
padding: 0.5rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.half {
|
||||
flex: 1 0 45%;
|
||||
padding: 0.5rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.third, .half {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
flex: 1 0 38%;
|
||||
padding: 0.5rem;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.large {
|
||||
flex: 1 0 61%;
|
||||
padding: 0.5rem;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.odd {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.carousel main article {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
section.carousel-item {
|
||||
display: inline-block !important;
|
||||
width: 100%;
|
||||
flex: none !important;
|
||||
|
||||
h2 {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: inline-block !important;
|
||||
flex: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,83 +1,2 @@
|
||||
---
|
||||
---
|
||||
|
||||
<div class="front-flex">
|
||||
<div class="hero">
|
||||
<div class="small">
|
||||
<img alt="Madison Scott-Clary" src="/assets/img/headshot.jpg" />
|
||||
</div>
|
||||
<div class="large">
|
||||
<p>Welcome to the written works of Madison Scott-Clary.</p>
|
||||
|
||||
<p>Madison is an author of fiction, non-fiction, and poetry living in the Pacific Northwest. Her interests lie in the realms of furry fiction and non-fiction, collaborative fiction, and hypertextual writing. She is a member of the Furry Writers' Guild, and editor for several projects, fiction and non-fiction. This site collects several of her written works.</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="large">
|
||||
<h2><a href="/publications">Publications</a></h2>
|
||||
<p>Madison has had her work published in several anthologies and has self-published her work in a few more.</p>
|
||||
<h3>Madison's works</h3>
|
||||
<ul>
|
||||
<li><a href="/publications/rum-and-coke">Rum and Coke</a></li>
|
||||
<li><a href="/publications/restless-town">Restless Town</a></li>
|
||||
<li><a href="/publications/eigengrau">Eigengrau</a></li>
|
||||
<li><a href="https://ally.id/book?pk_campaign=publications">ally</a></li>
|
||||
</ul>
|
||||
<h3>Works containing Madison's writing</h3>
|
||||
<ul>
|
||||
<li><a href="#">Paw to Print</a> (upcomming) - <em>Tracking an anthology: the steps from start to finish</em> and <em>Layout and design: reducing barriers between story and reader</em></li>
|
||||
<li><a href="#">Hot Dish vol. 3</a> (upcomming) - <em>Disappearance</em></li>
|
||||
<li><a href="http://thurstonhowlpub.storenvy.com/collections/1587098-anthologies/products/22227398-arcana-a-tarot-anthology">Arcana - A Tarot Anthology</a> - <em>The First Step (The Fool)</em></li>
|
||||
<li><a href="http://thurstonhowlpub.storenvy.com/collections/1587098-anthologies/products/21737930-furries-among-us-2-more-essays-on-furries-by-furries">Furries Among Us 2</a> - <em>Gender: Furry</em></li>
|
||||
<li><a href="https://www.weaselpress.com/product-page/civilized-beasts-volume-ii">Civilized Beasts II</a> - <em>The dogs assure me</em></li>
|
||||
<li><a href="https://www.weaselpress.com/shop/knotted-vol-ii">Knotted: A BDSM Anthology, vol II</a> - <em>Centerpiece</em></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small">
|
||||
<img alt="Some of the publications Madison has been in" src="/assets/img/publications.jpg" />
|
||||
</div>
|
||||
<div class="large odd">
|
||||
<h2>Projects</h2>
|
||||
<p>Along with standalone works and story collections, Madison has worked on several writing projects, often with others</p>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://ally.id">ally</a> - an ergodic, semiautobiographical project in the form of a conversation</li>
|
||||
<li><a target="_blank" href="https://post-self.io">Post-Self</a> - a collaborative fiction project designed to explore the implications of a universe where the sense of self can be blurred, split, or demolished through replication</li>
|
||||
<li><a target="_blank" href="https://adjectivespecies.com">[adjective][species]</a> and <a target="_blank" href="https://lovesexfur.com">Love ◦ Sex ◦ Fur</a> - [a][s] is a metafurry resource aiming to take a look at the furry world from the inside out; LSF is a sub-project exploring the same in a more adult setting</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small odd">
|
||||
<a target="_blank" href="https://ally.id"><img alt="ally" src="/assets/img/projects/ally.png" /></a>
|
||||
<a target="_blank" href="https://post-self.io"><img alt="Post-Self" src="/assets/img/projects/post-self.png" /></a>
|
||||
<a target="_blank" href="https://adjectivespecies.com"><img alt="[a][s]" src="/assets/img/projects/adjspecies.png" /></a>
|
||||
</div>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/categories/short-story">Short stories</a></li>
|
||||
<li><a href="/categories/poem">Poetry</a></li>
|
||||
<li><a href="/categories/interactive">Interactive fiction</a></li>
|
||||
<li><a href="/categories">More...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="third">
|
||||
<h2><a href="/tags">Tags</a></h2>
|
||||
<p>Madison's work covers a variety of topics, organized into tags.</p>
|
||||
<ul>
|
||||
<li><a href="/tags/furry">Furry</a></li>
|
||||
<li><a href="/tags/gender">Gender</a></li>
|
||||
<li><a href="/tags/mental-health">Mental health</a></li>
|
||||
<li><a href="/tags">More...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="third">
|
||||
<h2><a href="/series">Series</a></h2>
|
||||
<p>Several of Madison's projects take part in shared universes or in series.</p>
|
||||
<ul>
|
||||
<li><a href="/series/sawtooth">Sawtooth</a></li>
|
||||
<li><a href="/series/post-self">Post-Self</a></li>
|
||||
<li><a href="/series/rum-and-coke">Run and Coke</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,114 @@
|
||||
{{ define "main" }}
|
||||
<div class="content wrapper">
|
||||
{{ $paginator := .Paginate (where .Site.Pages.ByPublishDate.Reverse ".Params.date" "!=" nil) 6 }}
|
||||
{{ if eq $paginator.PageNumber 1 }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
<h2>Recent pieces</h2>
|
||||
<div class="carousel">
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="carousel-entry home"><a href="#home">Home</a></li>
|
||||
<li class="carousel-entry publications"><a href="#publications">Publications</a></li>
|
||||
<li class="carousel-entry projects"><a href="#projects">Projects</a></li>
|
||||
<li class="carousel-entry recent"><a href="#recent">Recent posts</a></li>
|
||||
<li class="carousel-entry more"><a href="#more">More...</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<section id="home" class="carousel-item home">
|
||||
<div class="small">
|
||||
<img alt="Madison Scott-Clary" src="/assets/img/headshot.jpg" />
|
||||
</div>
|
||||
<div class="large">
|
||||
<p>Welcome to the written works of Madison Scott-Clary.</p>
|
||||
|
||||
<p>Madison is an author of fiction, non-fiction, and poetry living in the Pacific Northwest. Her interests lie in the realms of furry fiction and non-fiction, collaborative fiction, and hypertextual writing. She is a member of the Furry Writers' Guild, and editor for several projects, fiction and non-fiction. This site collects several of her written works.</p>
|
||||
|
||||
<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">
|
||||
<h2><a href="/publications">Publications</a></h2>
|
||||
<ol class="post-card-box clearfix">
|
||||
{{ range $paginator.Pages.ByPublishDate.Reverse }}
|
||||
<li>
|
||||
<div class="post-card">
|
||||
<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>
|
||||
</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>
|
||||
<div class="post-card-body">
|
||||
<a href="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>
|
||||
<div class="post-card-body">
|
||||
<a href="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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h1>Publications edited</h1>
|
||||
<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>
|
||||
<div class="post-card-body">
|
||||
<a href="arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3>Appearing in</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Paw to Print</a> (upcomming) - <em>Tracking an anthology: the steps from start to finish</em> and <em>Layout and design: reducing barriers between story and reader</em></li>
|
||||
<li><a href="#">Hot Dish vol. 3</a> (upcomming) - <em>Disappearance</em></li>
|
||||
<li><a href="http://thurstonhowlpub.storenvy.com/collections/1587098-anthologies/products/22227398-arcana-a-tarot-anthology">Arcana - A Tarot Anthology</a> - <em>The First Step (The Fool)</em></li>
|
||||
<li><a href="http://thurstonhowlpub.storenvy.com/collections/1587098-anthologies/products/21737930-furries-among-us-2-more-essays-on-furries-by-furries">Furries Among Us 2</a> - <em>Gender: Furry</em></li>
|
||||
<li><a href="https://www.weaselpress.com/product-page/civilized-beasts-volume-ii">Civilized Beasts II</a> - <em>The dogs assure me</em></li>
|
||||
<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">
|
||||
<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>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://ally.id">ally</a> - an ergodic, semiautobiographical project in the form of a conversation</li>
|
||||
<li><a target="_blank" href="https://post-self.io">Post-Self</a> - a collaborative fiction project designed to explore the implications of a universe where the sense of self can be blurred, split, or demolished through replication</li>
|
||||
<li><a target="_blank" href="https://adjectivespecies.com">[adjective][species]</a> and <a target="_blank" href="https://lovesexfur.com">Love ◦ Sex ◦ Fur</a> - [a][s] is a metafurry resource aiming to take a look at the furry world from the inside out; LSF is a sub-project exploring the same in a more adult setting</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="small">
|
||||
<a target="_blank" href="https://ally.id"><img alt="ally" src="/assets/img/projects/ally.png" /></a>
|
||||
<a target="_blank" href="https://post-self.io"><img alt="Post-Self" src="/assets/img/projects/post-self.png" /></a>
|
||||
<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">
|
||||
<h2>Recent</h2>
|
||||
<ol class="post-card-box clearfix">
|
||||
{{ range first 6 (where .Site.Pages.ByPublishDate.Reverse ".Params.date" "!=" nil) }}
|
||||
<li>
|
||||
<div class="post-card">
|
||||
<a href="{{ .Permalink }}" class="post-card-image"{{ with .Params.img }} style="background-image: url(/assets/img/{{.}} )"{{ end }}>
|
||||
@ -25,7 +127,42 @@
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
<link rel="stylesheet" type="text/css" href="/css/pagination.css" />
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
<p style="text-align: center"><a href="/post"><b>More...</b></a></p>
|
||||
</section>
|
||||
<section id="more" 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>
|
||||
<ul>
|
||||
<li><a href="/categories/short-story">Short stories</a></li>
|
||||
<li><a href="/categories/poem">Poetry</a></li>
|
||||
<li><a href="/categories/interactive">Interactive fiction</a></li>
|
||||
<li><a href="/categories">More...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="third">
|
||||
<h2><a href="/tags">Tags</a></h2>
|
||||
<p>Madison's work covers a variety of topics, organized into tags.</p>
|
||||
<ul>
|
||||
<li><a href="/tags/furry">Furry</a></li>
|
||||
<li><a href="/tags/gender">Gender</a></li>
|
||||
<li><a href="/tags/mental-health">Mental health</a></li>
|
||||
<li><a href="/tags">More...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="third">
|
||||
<h2><a href="/series">Series</a></h2>
|
||||
<p>Several of Madison's projects take part in shared universes or in series.</p>
|
||||
<ul>
|
||||
<li><a href="/series/sawtooth">Sawtooth</a></li>
|
||||
<li><a href="/series/post-self">Post-Self</a></li>
|
||||
<li><a href="/series/rum-and-coke">Run and Coke</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/assets/js/carousel.js"></script>
|
||||
{{ end }}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="/assets/fonts/font-awesome/css/font-awesome.min.css">
|
||||
<!-- Styles -->
|
||||
{{ $style := resources.Get "css/main.scss" | resources.ToCSS }}
|
||||
{{ $style := resources.Get "css/main.scss" | resources.ToCSS | resources.Fingerprint "sha256" }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}">
|
||||
{{ with .Params.extracss }}
|
||||
<link rel="stylesheet" href="{{.}}">
|
||||
|
||||
40
static/assets/js/carousel.js
Normal file
40
static/assets/js/carousel.js
Normal file
@ -0,0 +1,40 @@
|
||||
function switchTab(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Unselect currently selected item.
|
||||
document
|
||||
.querySelector('.carousel-entry.on').classList.remove('on');
|
||||
|
||||
// Select the new item.
|
||||
document
|
||||
.querySelector(`.carousel-entry.${window.location.hash.substring(1)}`)
|
||||
.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);
|
||||
}
|
||||
|
||||
function load() {
|
||||
if (window.innerWidth >= 960) {
|
||||
// Add a listener for the location changing if window width supports it.
|
||||
window.addEventListener('popstate', switchTab);
|
||||
} else {
|
||||
window.removeEventListener('popstate', switchTab);
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
load();
|
||||
});
|
||||
window.addEventListener('resize', load);
|
||||
|
||||
// If we enter the page with no hash, select home.
|
||||
if (!window.location.hash) {
|
||||
history.pushState({}, '', '#home');
|
||||
}
|
||||
Reference in New Issue
Block a user