This commit is contained in:
Madison Scott-Clary
2020-03-01 22:49:54 -08:00
parent 2ece8b806a
commit 901bb1e720
7 changed files with 331 additions and 171 deletions

View File

@ -192,8 +192,9 @@ pre {
/* = = = = = = = = = = Animate Styles = = = = = = = = = = */
//@import "parts/animate";
/* = = = = = = = = = = Misc = = = = = = = = = = */
@import "parts/misc";
@import "parts/front-flex";
@import "parts/front";
/* = = = = = = = = = = Media = = = = = = = = = = */
@import "media";

View File

@ -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%;
}
}
}

View 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;
}
}
}
}

View File

@ -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>

View File

@ -1,31 +1,168 @@
{{ 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>
<ol class="post-card-box clearfix">
{{ range $paginator.Pages.ByPublishDate.Reverse }}
<li>
<div class="post-card">
<a href="{{ .Permalink }}" class="post-card-image"{{ with .Params.img }} style="background-image: url(/assets/img/{{.}} )"{{ end }}>
</a>
<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>
<div class="post-card-body">
{{ with .Params.tags }}
{{ range . }}
<a href="/tags/{{ . | urlize }}" class="tag">|&#32;{{ . }}</a>
{{ end }}
{{ end }}
<a href="{{ .Permalink }}" class="post-card-link"><h3 class="post-card-title">{{ .Title }}</h3></a>
</div>
<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>
</div>
</li>
{{ end }}
</ol>
<link rel="stylesheet" type="text/css" href="/css/pagination.css" />
{{ template "_internal/pagination.html" . }}
<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">
<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 }}>
</a>
<div class="post-card-body">
{{ with .Params.tags }}
{{ range . }}
<a href="/tags/{{ . | urlize }}" class="tag">|&#32;{{ . }}</a>
{{ end }}
{{ end }}
<a href="{{ .Permalink }}" class="post-card-link"><h3 class="post-card-title">{{ .Title }}</h3></a>
</div>
</div>
</li>
{{ end }}
</ol>
<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 }}

View File

@ -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="{{.}}">

View 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');
}