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

Merge pull request #4 from makyo/carousel

Browse Source 
Add carousel
This commit is contained in:
Madison Scott-Clary
2023-08-15 12:20:02 -07:00
committed by GitHub
parent e12fecf7e3 1443e00ae4
commit 42b893b2b0
3 changed files with 164 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
content/_index.md
View File

@ -2,66 +2,73 @@
---
</main>
<div class="hero">
<ul>
<li>Given the chance to live forever in a world not built for death, what do you do?</li>
<li>Given the inability to forget—all your joys and sorrows, all your foundational memories and traumas—how do you cope?</li>
<li>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?</li>
</ul>
</div>
<!--
Alternately: "If I had a nickel for every time I accidentally wrote something with heavy plural undertones that I hadn't intended but nonetheless made me doubt my identity, I'd have two nickels! Which isn't a lot, but it is weird that it happened twice."
-->
<main>
<main class="carousel">
<nav>
<ul>
<li class="carousel-entry home"><a href="#home">Home</a></li>
<li class="carousel-entry cycle"><a href="#cycle">The Post-Self Cycle</a></li>
<li class="carousel-entry clade"><a href="#clade">Clade</a></li>
<li class="carousel-entry ttrpg"><a href="#ttrpg">The Post-Self TTRPG</a></li>
<li class="carousel-entry about"><a href="#about">About</a></li>
</ul>
</nav>
<section class="carousel-item home">
<div class="hero">
<ul>
<li>Given the chance to live forever in a world not built for death, what do you do?</li>
<li>Given the inability to forget—all your joys and sorrows, all your foundational memories and traumas—how do you cope?</li>
<li>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?</li>
</ul>
</div>
<!--
Alternately: "If I had a nickel for every time I accidentally wrote something with heavy plural undertones that I hadn't intended but nonetheless made me doubt my identity, I'd have two nickels! Which isn't a lot, but it is weird that it happened twice."
-->
<h2 id="home">Updates</h2>
<iframe style="width: 100%; height: 75vh" src="https://cohost.org/post-self"></iframe>
</section>
<section class="carousel-item cycle">
<h2 id="cycle">The Post-Self Cycle</h2>
<p><a href="/cycle"><img src="/img/covers.png" alt="The book covers"></a></p>
<blockquote>
<p>And thus grew a new world, a world that was not built for death&hellip;</p>
</blockquote>
<p>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?</p>
<p>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.</p>
<!--
Alternately: "Gender-weird meta-furry almost-plural sci-fi."
-->
</section>
<section class="carousel-item clade">
<h2 id="clade">Clade</h2>
<p><a href="https://clade.post-self.ink"><img src="/img/clade.png" alt="The book cover"></a></p>
<blockquote>
<p><strong>Clade</strong> <em>(n)</em> – /klɛ:id/ – <em>post-self theory</em><br>
A group of individuals patterned off a single root consciousness, formed through branching expansion of the forking of its constituent members.<br>
<em>See also: cladistics, cocladist, up-/down-/cross-tree instance, forking, post-self theory.</em><br>
— The System Central Library Encyclopedia</p>
</blockquote>
<p>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.</p>
<p>Ten stories by ten authors, all set in the Post-Self universe. An extra funded by the <em>Mitzvot</em> Kickstarter backers.</p>
</section>
<section class="carousel-item ttrpg">
<h2 id="ttrpg">The Post-Self TTRPG</h2>
<p><a href="/extras/ttrpg"><img src="/img/ttrpg.png" alt="The book cover"></a></p>
<p>A tabletop role-playing game powered by The Apocalypse, an extra funded by the <em>Mitzvot</em> Kickstarter backers.</p>
<p><em>Coming soon!</em></p>
</section>
<section class="carousel-item about">
<h2 id="about">About</h2>
<p>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 <em>Mitzvot</em> Kickstarter backers.</p>
<ul>
<li><a href="/extras">Extras</a> — Additional stories, resources, and visual art</li>
<li><a href="/about/timeline">Timeline</a> — A basic timeline of events covered in the books</li>
<li><a href="/about/characters">Dramatic Personae</a> — A list of characters in the books and where they came from</li>
<li><a href="/about/universe">The Universe</a> — The mechanics of the setting</li>
<li><a href="/about/glossary">Glossary</a> — Some common words and terms</li>
<li><a href="/about/questions">Questions and Answers</a> — Questions that have arisen and some answers to go with them</li>
</ul>
<p>As an open setting, everything is free to use for your own purposes under a Creative-Commons 4.0 Attribution license. These stories wouldn&rsquo;t be what they are without the contributions of others.</p>
</section>
<script src="/carousel.js"></script>
## 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.
<!--
Alternately: "Gender-weird meta-furry almost-plural sci-fi."
-->
## 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&hellip;well, it inspires a feeling best described as &lsquo;heady&rsquo;, 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.

41
static/carousel.js Normal file
View File

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

99
static/css/toledot.css
View File

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