--- /dev/null
+/* The person who associated a work with this deed has dedicated the
+ work to the public domain by waiving all of his or her rights to
+ the work worldwide under copyright law, including all related and
+ neighboring rights, to the extent allowed by law.
+
+ You can copy, modify, distribute and perform the work, even for
+ commercial purposes, all without asking permission.
+
+ See https://creativecommons.org/publicdomain/zero/1.0/ for details.
+*/
+
+/* However, we would appreciate it if you kept this link in the file,
+ to help inform other people about what it does and how they can use
+ it -- https://yukkurigames.com/choicecss/choicecss.html#0
+*/
+
+/* These properties are set to values required for choice.css to
+ function. Do not override them. */
+
+html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+html, body, main {
+ overflow: hidden;
+}
+
+nav, main, section, header {
+ display: block;
+}
+
+main {
+ position: absolute;
+}
+
+section {
+ position: absolute;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ visibility: hidden;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ top: 50%;
+ margin: auto;
+ -webkit-transition: all 0.333s, -webkit-transform 0.333s;
+ -moz-transition: all 0.333s;
+ -o-transition: all 0.333s;
+ transition: all 0.333s;
+ -webkit-transition-timing-function: ease-in-out;
+ -moz-transition-timing-function: ease-in-out;
+ -o-transition-timing-function: ease-in-out;
+ transition-timing-function: ease-in-out;
+ opacity: 1;
+ -webkit-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ -moz-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ -ms-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ -o-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ transform: translate(0, -50%) scale(1, 1) rotate(0);
+}
+/* These are three possible appearance transitions for sections.
+ Sections receive a default transition for variety, but may also be
+ manually specified to override the default. */
+
+section:nth-child(3n), section.hpop {
+ /* Horizontal pop-in */
+ -webkit-transform: translate(0, -50%) scale(0, 1) rotate(0);
+ -moz-transform: translate(0, -50%) scale(0, 1) rotate(0);
+ -ms-transform: translate(0, -50%) scale(0, 1) rotate(0);
+ -o-transform: translate(0, -50%) scale(0, 1) rotate(0);
+ transform: translate(0, -50%) scale(0, 1) rotate(0);
+}
+
+section:nth-child(3n+1), section.vpop {
+ /* Vertical pop-in */
+ -webkit-transform: translate(0, -50%) scale(1, 0) rotate(0);
+ -moz-transform: translate(0, -50%) scale(1, 0) rotate(0);
+ -ms-transform: translate(0, -50%) scale(1, 0) rotate(0);
+ -o-transform: translate(0, -50%) scale(1, 0) rotate(0);
+ transform: translate(0, -50%) scale(1, 0) rotate(0);
+}
+
+section:nth-child(3n+2), section.fade {
+ /* Fade in */
+ opacity: 0;
+}
+
+section:target, section:last-child {
+ /* Delay new appearance until the previous section is finishing. */
+ -webkit-transition-delay: 0.25s;
+ -moz-transition-delay: 0.25s;
+ -o-transition-delay: 0.25s;
+ transition-delay: 0.25s;
+
+ /* Reset everything set in the animation styles. */
+ opacity: 1;
+ visibility: visible;
+ -webkit-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ -moz-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ -ms-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ -o-transform: translate(0, -50%) scale(1, 1) rotate(0);
+ transform: translate(0, -50%) scale(1, 1) rotate(0);
+}
+
+
+section:target ~ section:last-child {
+ display: none;
+}
+
+/* These properties may be modified within limits. */
+
+main {
+ /* This needs to be big enough for a reasonable amount of text. */
+ padding: 0.5em;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+section {
+ /* The left and right margins and maximum size may be modified, but
+ must be set (and less than 100%). */
+ left: 0.5em;
+ right: 0.5em;
+ max-width: 35em;
+ max-height: 90%;
+}
+
+@media print {
+ html, body, main {
+ height: auto;
+ width: auto;
+ }
+
+ main {
+ position: static;
+ overflow: auto;
+ }
+
+ section {
+ max-height: none;
+ height: auto;
+ position: static;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ top: auto;
+ -webkit-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
+ -moz-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
+ -ms-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
+ -o-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
+ transform: translate(0, 0) scale(1, 1) rotate(0) !important;
+ opacity: 1 !important;
+ visibility: visible !important;
+ }
+
+ section[id]:before {
+ display: block;
+ content: "(Section #" attr(id) ")";
+ }
+
+ section a[href^="#"]:not(.no-section):after {
+ content: " (section " attr(href) ")";
+ }
+
+ .no-print {
+ display: none;
+ }
+}
+
+/* Most other properties may be modified freely. */
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <!--
+ The person who associated a work with this deed has dedicated the
+ work to the public domain by waiving all of his or her rights to
+ the work worldwide under copyright law, including all related and
+ neighboring rights, to the extent allowed by law.
+
+ You can copy, modify, distribute and perform the work, even for
+ commercial purposes, all without asking permission.
+
+ See https://creativecommons.org/publicdomain/zero/1.0/ for details.
+ -->
+ <head>
+ <link rel=stylesheet href=choice.css>
+ <link rel=stylesheet href=yukkuri.css>
+ <meta name=description content="choice.css is a stylesheet you can use to make CYOA-style gamebooks using plain HTML and no JavaScript.">
+ <meta name="viewport" content="width=device-width, user-scalable=no">
+ <title>choice.css - Plain HTML Gamebooks ~ Yukkuri Games</title>
+ </head>
+ <body>
+ <header>
+ <nav>
+ <h1><a class=title href="#0">choice.css</a></h1>
+ <a href='https://yukkurigames.com' style="float: left">⌂</a>
+ <a href='#license' style="float: right" class=flipX>©</a>
+ </nav>
+ </header>
+ <main>
+ <section id=0>
+ <p>
+ This page is powered by a
+ <a target=_blank href=choice.css>single stylesheet</a> which turns
+ ordinary HTML into a
+ <a href="http://en.wikipedia.org/wiki/Choose_Your_Own_Adventure">
+ <em>Choose Your Own Adventure</em></a>-like
+ <a href="http://en.wikipedia.org/wiki/Gamebook">gamebook</a>,
+ and another that describes its colors. No JavaScript is
+ involved, and the HTML is kept nearly undisturbed.
+ </p>
+ <ul>
+ <li><a href="#how">How do I use it?</a></li>
+ <li><a href="#why">What's the point?</a></li>
+ <li><a href="#why-not">What can't it do?</a></li>
+ <li><a target=_blank href=choice.css>Download <code>choice.css</code></a></li>
+ </ul>
+ </section>
+ <section id=how>
+ <h1><a href="#0" class=no-print>◀</a> How to Use It</h1>
+ <p>
+ To use <code>choice.css</code> you'll need to be at least
+ a little familiar with CSS and HTML.
+ </p>
+ <p>
+ (If you're not comfortable with HTML, consider trying
+ <a href="http://twinery.org/">Twine</a> instead. It's got a
+ graphical interface and a simpler markup format. It's also a
+ good choice if you want to do something more complicated
+ than CYOA.)
+ </p>
+ <h2>Writing Your HTML</h2>
+ <p>
+ The first thing you need is a bare HTML page, including
+ <code>choice.css</code> as a stylesheet. (You can also include
+ it inline between a <code><style>...</style></code>
+ block.)
+ </p>
+ <pre><!DOCTYPE html>
+<html>
+ <head>
+ <link rel=stylesheet href=<a target=_blank href=choice.css>choice.css</a>>
+ <title>...</title>
+ </head>
+ <body>
+ <main>
+ ...
+ </main>
+ </body>
+</body></pre>
+ <p>
+ Inside the main block, place a series
+ of <code><section></code> elements with your writing, and
+ give them each an <code>id</code>:
+ </p>
+ <pre><section id=example>
+ This is an example section.
+</section></pre>
+ <p>
+ Then inside each section, you can create links to the other
+ sections with standard HTML links:
+ </p>
+ <pre><section id=other-example>
+ This is a <a href='#example'>link to that section</a>.
+</section></pre>
+ <h2>Transitions</h2>
+ <p>
+ The three different transition styles you'll see on this
+ page (horizontal pop-in, vertical pop-in, and fade) will be
+ applied automatically to create some variety in transitions.
+ </p>
+ <p>
+ If you'd like more manual control, you can use the
+ <code>vpop</code>, <code>hpop</code>, and <code>fade</code>
+ classes on your sections, or write your own using standard
+ <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>.
+ </p>
+ <h2>Styling</h2>
+ <p>
+ You can style the rest of the page using CSS normally,
+ as long as you keep the main display structure
+ from <code>choice.css</code> — the absolutely-positioned,
+ overflow-hiding <code><main></code> element, and the
+ selectors for <code><section></code> elements.
+ </p>
+ <p>
+ You can also add more elements. For example, this page adds
+ a header with some navigation links. And while JavaScript
+ isn't required, you can include JavaScript code in your page
+ for more advanced effects.
+ </p>
+ <h2>Errors</h2>
+ <p>
+ If you link to a section that doesn't exist, or the
+ reader types one in manually, you'll see
+ <a href='#busted'>the last section in the page</a>
+ even if you didn't give it an ID. You might want to write
+ your last section with this in mind.
+ </p>
+ </section>
+ <section id=why>
+ <h1><a href="#0" class=no-print>◀</a> Why Bother?</h1>
+ <p>
+ Because...
+ </p>
+ <ul>
+ <li>
+ Modern websites are too complicated. A decade ago, you
+ could open up nearly any site and see how it was made. Now
+ all you get is a mass of minified HTML, CSS, and
+ JavaScript, patching weird features over each other into
+ an unintelligible mess. But today's sites
+ <a onclick='window.open("view-source:" + location.href)'>
+ can still be intelligible</a> while doing new things.
+ </li>
+ <li>
+ <a href="javascript:window.print()">Pages can be printed
+ to paper (or PDF) intact</a>.
+ </li>
+ <li>
+ Bookmarks and sharing links always go to the right part.
+ </li>
+ <li>
+ It works, in an CPU/energy-efficient way, on a wide variety of
+ browser interfaces and input devices.
+ </li>
+ <li>
+ The page's full content can be indexed by search engines,
+ <a href="https://archive.org/">the Internet Archive</a>,
+ and other tools and services.
+ </li>
+ <li>
+ It still works with CSS <em>completely disabled</em>, or
+ in browsers that never supported CSS or JavaScript like
+ <a href="http://lynx.isc.org/">Lynx</a>.
+ You'll just see the sections before and after the current
+ one.
+ </li>
+ <li>
+ Despite their problems, HTML and CSS still strike one
+ of the best balances in computing between ease of writing,
+ ease of learning, and features.
+ <a href='http://www.w3.org/2001/tag/doc/leastPower.html'>The
+ rule of least power</a> remains a good design maxim,
+ and the above are some of its benefits.
+ </li>
+ </ul>
+ </section>
+ <section id=why-not>
+ <h1><a href="#0" class=no-print>◀</a> Why Not?</h1>
+ <ul>
+ <li>
+ It doesn't work in old-but-not-too-old versions
+ of Internet Explorer. (It works in <em>very old</em>
+ versions that don't support CSS or CSS visibility
+ but doesn't work in <em>recently-old</em> versions that
+ support CSS visibility but not CSS transforms.)
+ </li>
+ <li>
+ It's awkward in some mobile browsers, older ones
+ especially. (But so is almost anything not designed
+ specifically for them.)
+ </li>
+ <li>
+ Error handling <a href="#busted">doesn't work very well</a>.
+ </li>
+ <li>
+ Direct links to the page without a #fragment are the same
+ as an error.
+ </li>
+ <li>
+ Without more scripting, it can't do anything like track
+ variables or dynamic content. You could write your own
+ JavaScript, but it might be easier to just
+ <a href="http://twinery.org/">use Twine</a>
+ if you want to do that.
+ </li>
+ </ul>
+ </section>
+ <section id=license>
+ <h1><a href="#0" class=no-print>◀</a> License</h1>
+ <p>
+ <code><a target=_blank href=choice.css>choice.css</a></code> and
+ this demonstration page are
+ <a href="https://creativecommons.org/publicdomain/zero/1.0/">released
+ into the public domain</a>,
+ or as close as possible in your jurisdiction. We waive all our
+ rights to the work worldwide under copyright law, including
+ all related and neighboring rights, to the extent allowed by
+ law.
+ </p>
+ <p>
+ You can copy, modify, distribute and perform the work, even for
+ commercial purposes, all without asking permission.
+ </p>
+ <p>
+ However, we would appreciate it if you kept
+ <a href='#0'>a link to this page</a> in the file when you
+ use it, to help inform other people about what it does and
+ how they can use it too.
+ </p>
+ </section>
+ <section>
+ <p>
+ If the target location is invalid, the last section —
+ this section — is displayed, even if it doesn't have
+ an ID. You can put any link you want here, like
+ <a href="#0">back to the first section</a>, or
+ <a href="javascript:history.back()">just plain back</a>.
+ </p>
+ <p>
+ It'd be nicer if the default was the first section, or a
+ special section, but that's not currently possible in CSS.
+ At times <a href="http://dev.w3.org/csswg/selectors4/">CSS Selectors
+ Level 4</a> has included features that would help with this,
+ but they don't work in any browser yet.
+ </p>
+ <p>
+ Or, you could write your page so that the last section is
+ the first one people should read. But that will mess up the
+ order when printing or reading the page without the special
+ stylesheet. And it's just confusing.
+ </p>
+ </section>
+ </main>
+ </body>
+</html>
projects / choicecss.git / commitdiff