From 1443e00ae4310b593bfc907d20f83cb9d2902d85 Mon Sep 17 00:00:00 2001 From: Madison Scott-Clary Date: Tue, 15 Aug 2023 12:11:08 -0700 Subject: [PATCH] Add carousel --- content/_index.md | 129 ++++++++++++++++++++++------------------- static/carousel.js | 41 +++++++++++++ static/css/toledot.css | 99 +++++++++++++++++-------------- 3 files changed, 164 insertions(+), 105 deletions(-) create mode 100644 static/carousel.js diff --git a/content/_index.md b/content/_index.md index cf54b6f..084569e 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,66 +2,73 @@ --- -
- -
- -
+
+ +
+
+
    +
  • Given the chance to live forever in a world not built for death, what do you do?
    • +
  • Given the inability to forget—all your joys and sorrows, all your foundational memories and traumas—how do you cope?
    • +
  • Given the ability to create a full copy of yourself—down to every single one of those memories—to do as they will, to individuate and live out their own forever lives, or merge back down and meld their memories with your own, what paths do you take?
    • +
+
+ +

Updates

+ +
+
+

The Post-Self Cycle

+

The book covers

+
+

And thus grew a new world, a world that was not built for death…

+
+

From the very beginning of the consensual dream of the System, the members of the Ode clade, all forks from the same core personality, have dealt with fear each in their own way. Do they search for greater ways to control their lives? Do they hunt for yet deeper emotional connection? Do they hone their art to the finest point?

+

From roots in political turmoil to the building of a new society, the story is there to be found, and the Bălan clade is there to tell it.

+ +
+
+

Clade

+

The book cover

+
+

Clade (n) – /klɛ:id/ – post-self theory
+ A group of individuals patterned off a single root consciousness, formed through branching expansion of the forking of its constituent members.
+ See also: cladistics, cocladist, up-/down-/cross-tree instance, forking, post-self theory.
+ — The System Central Library Encyclopedia

+
+

To split oneself among however many individuals, to let the mind drift and diverge, to feel the world from points of view not your own, and then let those memories crash down into you…well, it inspires a feeling best described as ‘heady’, to say the least.

+

Ten stories by ten authors, all set in the Post-Self universe. An extra funded by the Mitzvot Kickstarter backers.

+
+
+

The Post-Self TTRPG

+

The book cover

+

A tabletop role-playing game powered by The Apocalypse, an extra funded by the Mitzvot Kickstarter backers.

+

Coming soon!

+
+
+

About

+

The Post-Self universe is an open setting for exploring the ramifications of being able to create copies of oneself, of what it means to undergo individuation, of what it means to let memories build up and up and up within oneself. All of the information on working with the universe is contained within this appendix, an extra funded by the Mitzvot Kickstarter backers.

+
    +
  • Extras — Additional stories, resources, and visual art
    • +
  • Timeline — A basic timeline of events covered in the books
    • +
  • Dramatic Personae — A list of characters in the books and where they came from
    • +
  • The Universe — The mechanics of the setting
    • +
  • Glossary — Some common words and terms
    • +
  • Questions and Answers — Questions that have arisen and some answers to go with them
    • +
+

As an open setting, everything is free to use for your own purposes under a Creative-Commons 4.0 Attribution license. These stories wouldn’t be what they are without the contributions of others.

+
+ -## The Post-Self Cycle - -[![The book covers](/img/covers.png)](/cycle) - -> And thus grew a new world, a world that was not built for death... - -From the very beginning of the consensual dream of the System, the members of the Ode clade, all forks from the same core personality, have dealt with fear each in their own way. Do they search for greater ways to control their lives? Do they hunt for yet deeper emotional connection? Do they hone their art to the finest point? - -From roots in political turmoil to the building of a new society, the story is there to be found, and the Bălan clade is there to tell it. - - -## Clade - -[![The book cover](/img/clade.png)](https://clade.post-self.ink) - -> **Clade** *(n)* – /klɛ:id/ – *post-self theory* -> A group of individuals patterned off a single root consciousness, formed through branching expansion of the forking of its constituent members. -> *See also: cladistics, cocladist, up-/down-/cross-tree instance, forking, post-self theory.* -> — The System Central Library Encyclopedia - -To split oneself among however many individuals, to let the mind drift and diverge, to feel the world from points of view not your own, and then let those memories crash down into you…well, it inspires a feeling best described as ‘heady’, to say the least. - -Ten stories by ten authors, all set in the Post-Self universe. An extra funded by the *Mitzvot* Kickstarter backers. - -*Coming August 1, 2023* - -## The Post-Self TTRPG - -[![The book cover](/img/ttrpg.png)](/extras/ttrpg) - -A tabletop role-playing game powered by The Apocalypse, an extra funded by the *Mitzvot* Kickstarter backers. - -*Coming soon!* - ------ - -## About - -The Post-Self universe is an open setting for exploring the ramifications of being able to create copies of oneself, of what it means to undergo individuation, of what it means to let memories build up and up and up within oneself. All of the information on working with the universe is contained within this appendix, an extra funded by the *Mitzvot* Kickstarter backers. - -* [Extras](/extras) — Additional stories, resources, and visual art -* [Timeline](/about/timeline) — A basic timeline of events covered in the books -* [Dramatic Personae](/about/characters) — A list of characters in the books and where they came from -* [The Universe](/about/universe) — The mechanics of the setting -* [Glossary](/about/glossary) — Some common words and terms -* [Questions and Answers](/about/questions) — Questions that have arisen and some answers to go with them - -As an open setting, everything is free to use for your own purposes under a Creative-Commons 4.0 Attribution license. These stories wouldn't be what they are without the contributions of others. diff --git a/static/carousel.js b/static/carousel.js new file mode 100644 index 0000000..a3f8fcb --- /dev/null +++ b/static/carousel.js @@ -0,0 +1,41 @@ +function switchTab(e) { + e.preventDefault(); + const tab = window.location.hash.substring(1); + + // Unselect currently selected item. + try { + document + .querySelector('.carousel-entry.on').classList.remove('on'); + document + .querySelector('.carousel-item.on').classList.remove('on'); + } catch(e) { + // pass + } + + // Select the new item. + document + .querySelector(`.carousel-entry.${tab}`) + .classList.add('on'); + document + .querySelector(`.carousel-item.${tab}`) + .classList.add('on'); +} + +function load() { + // Add a listener for the location changing if window width supports it. + if (window.innerWidth >= 960) { + window.addEventListener('popstate', switchTab); + } else { + window.removeEventListener('popstate', switchTab); + } +} + +// If we enter the page with no hash, select home. +if (!window.location.hash) { + history.pushState({}, '', '#home'); +} + +// If we enter the page with a hash, select the current item. +switchTab({preventDefault: () => {}}); +load(); +window.addEventListener('resize', load); diff --git a/static/css/toledot.css b/static/css/toledot.css index 8eb3a3a..23fd4b1 100644 --- a/static/css/toledot.css +++ b/static/css/toledot.css @@ -38,37 +38,17 @@ ul { } .hero { - max-width: 960px; - margin: 0 auto; font-family: "Gentium Plus", serif; font-size: 18pt; - display: flex; - flex-wrap: wrap; line-height: 1.5; -} - -.hero blockquote { - margin: 1rem 0; - padding: 0 0 0 2rem; - border-left: 3px solid #ddd; -} - -.hero p { - text-indent: 2rem; -} - -.hero blockquote p { - text-indent: 0; - margin-bottom: 0.5rem; + color: #444444; + background-color: #fafafa; } .hero ul { font-size: 20pt; - color: #444444; - background-color: #fafafa; list-style-type: none; text-align: center; - flex: 2 1 100%; margin: 0; padding: 1rem; } @@ -78,10 +58,59 @@ ul { padding: 0; } -.hero .half { - flex: 1 0 400px; - margin: 0 1rem; - max-width: 100%; +.carousel nav { + height: 5rem; + width: 100%; + display: block; + margin: 0 auto; + text-align: center; + z-index: 1000; +} + +.carousel nav ul { + list-style-type: none; + border-bottom: 1px solid #555; + padding: 0; +} + +.carousel nav li { + display: inline-block; + margin: 0; + padding: 0.5rem; + } + +.carousel nav li.on { + background-color: #555; +} +.carousel nav li.on a { + color: #fff !important; +} + +.carousel nav li a { + text-decoration: none; + font-size: 16pt; +} + +.carousel .carousel-item { + display: none; +} + +.carousel .carousel-item.on { + display: block; +} + +@media only screen and (max-width: 960px) { + .carousel nav { + display: none; + } + + .carousel .carousel-item { + display: block; + width: 100%; + } + .carousel .carousel-item h2 { + display: block !important; + } } @media (max-device-width: 450px) { @@ -94,22 +123,4 @@ ul { nav ul li { padding-bottom: 0.5rem !important; } - .hero { - display: block; - margin: 0; - padding: 0 2rem; - width: 100%; - } - .hero ul { - flex: none; - width: 100%; - padding: 0; - background-color: initial; - } - .hero .half { - flex: none; - width: auto; - margin: 0; - padding: 0; - } }