diff --git a/assets/css/main.scss b/assets/css/main.scss index 09e57cb..24abcdd 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -192,8 +192,9 @@ pre { /* = = = = = = = = = = Animate Styles = = = = = = = = = = */ //@import "parts/animate"; +/* = = = = = = = = = = Misc = = = = = = = = = = */ @import "parts/misc"; -@import "parts/front-flex"; +@import "parts/front"; /* = = = = = = = = = = Media = = = = = = = = = = */ @import "media"; diff --git a/assets/css/parts/_front-flex.scss b/assets/css/parts/_front-flex.scss deleted file mode 100644 index 2b670fd..0000000 --- a/assets/css/parts/_front-flex.scss +++ /dev/null @@ -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%; - } - } -} diff --git a/assets/css/parts/_front.scss b/assets/css/parts/_front.scss new file mode 100644 index 0000000..b6562e0 --- /dev/null +++ b/assets/css/parts/_front.scss @@ -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; + } + } + } +} diff --git a/content/_index.html b/content/_index.html index f3daa92..a845151 100644 --- a/content/_index.html +++ b/content/_index.html @@ -1,83 +1,2 @@ --- --- - -
-
-
- Madison Scott-Clary -
-
-

Welcome to the written works of Madison Scott-Clary.

- -

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.

- -

This site comprises mostly completed written works. For drafts, in-progress words, and so on, head over to her blog and writing page

-
-
-
-

Publications

-

Madison has had her work published in several anthologies and has self-published her work in a few more.

-

Madison's works

- -

Works containing Madison's writing

- -
-
- Some of the publications Madison has been in -
-
-

Projects

-

Along with standalone works and story collections, Madison has worked on several writing projects, often with others

- -
-
- ally - Post-Self - [a][s] -
-
-

Categories

-

Madison has worked on several pieces of various kinds. These are broken down into sensible categories.

- -
-
-

Tags

-

Madison's work covers a variety of topics, organized into tags.

- -
-
-

Series

-

Several of Madison's projects take part in shared universes or in series.

- -
-
diff --git a/layouts/index.html b/layouts/index.html index 23843be..c3ede07 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,31 +1,168 @@ {{ define "main" }}
-{{ $paginator := .Paginate (where .Site.Pages.ByPublishDate.Reverse ".Params.date" "!=" nil) 6 }} -{{ if eq $paginator.PageNumber 1 }} -{{ .Content }} -{{ end }} -

Recent pieces

-
    - {{ range $paginator.Pages.ByPublishDate.Reverse }} -
  1. -
    - - +
    + +
    +
    +
    2. - {{ end }} -
- -{{ template "_internal/pagination.html" . }} +

This site comprises mostly completed written works. For drafts, in-progress words, and so on, head over to her blog and writing page

+
+ + + + + + + + + {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 2e8e382..f91d799 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -33,7 +33,7 @@ - {{ $style := resources.Get "css/main.scss" | resources.ToCSS }} + {{ $style := resources.Get "css/main.scss" | resources.ToCSS | resources.Fingerprint "sha256" }} {{ with .Params.extracss }} diff --git a/static/assets/js/carousel.js b/static/assets/js/carousel.js new file mode 100644 index 0000000..cc0ccd3 --- /dev/null +++ b/static/assets/js/carousel.js @@ -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'); +}