From: Joe Wreschnig Date: Sun, 14 Sep 2014 18:23:00 +0000 (+0200) Subject: Initial import. X-Git-Url: https://git.yukkurigames.com/?a=commitdiff_plain;h=HEAD;p=choicecss.git Initial import. --- 1fc69bef2eddc027aea154c568d4e17c994e699b diff --git a/README.md b/README.md new file mode 100644 index 0000000..4c8ff65 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# choice.css - Plain CSS Gamebooks + +choice.css is a stylesheet you can use to make CYOA-style gamebooks +using plain HTML and no JavaScript. + +Open [choicecss.html] in a browser to see it working. diff --git a/choice.css b/choice.css new file mode 100644 index 0000000..bb47122 --- /dev/null +++ b/choice.css @@ -0,0 +1,174 @@ +/* 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. */ diff --git a/choicecss.html b/choicecss.html new file mode 100644 index 0000000..c6e3d3d --- /dev/null +++ b/choicecss.html @@ -0,0 +1,256 @@ + + + + + + + + + choice.css - Plain HTML Gamebooks ~ Yukkuri Games + + +
+ +
+
+
+

+ This page is powered by a + single stylesheet which turns + ordinary HTML into a + + Choose Your Own Adventure-like + gamebook, + and another that describes its colors. No JavaScript is + involved, and the HTML is kept nearly undisturbed. +

+ +
+
+

◀ How to Use It

+

+ To use choice.css you'll need to be at least + a little familiar with CSS and HTML. +

+

+ (If you're not comfortable with HTML, consider trying + Twine 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.) +

+

Writing Your HTML

+

+ The first thing you need is a bare HTML page, including + choice.css as a stylesheet. (You can also include + it inline between a <style>...</style> + block.) +

+ 
<!DOCTYPE html>
+<html>
+  <head>
+    <link rel=stylesheet href=choice.css>
+    <title>...</title>
+  </head>
+  <body>
+    <main>
+          ...
+    </main>
+  </body>
+</body>
+

+ Inside the main block, place a series + of <section> elements with your writing, and + give them each an id: +

+ 
<section id=example>
+  This is an example section.
+</section>
+

+ Then inside each section, you can create links to the other + sections with standard HTML links: +

+ 
<section id=other-example>
+  This is a <a href='#example'>link to that section</a>.
+</section>
+

Transitions

+

+ 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. +

+

+ If you'd like more manual control, you can use the + vpop, hpop, and fade + classes on your sections, or write your own using standard + CSS transitions. +

+

Styling

+

+ You can style the rest of the page using CSS normally, + as long as you keep the main display structure + from choice.css — the absolutely-positioned, + overflow-hiding <main> element, and the + selectors for <section> elements. +

+

+ 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. +

+

Errors

+

+ If you link to a section that doesn't exist, or the + reader types one in manually, you'll see + the last section in the page + even if you didn't give it an ID. You might want to write + your last section with this in mind. +

+
+
+

◀ Why Bother?

+

+ Because... +

+
    +
  • + 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 + + can still be intelligible while doing new things. +
    • +
  • + Pages can be printed + to paper (or PDF) intact. +
    • +
  • + Bookmarks and sharing links always go to the right part. +
    • +
  • + It works, in an CPU/energy-efficient way, on a wide variety of + browser interfaces and input devices. +
    • +
  • + The page's full content can be indexed by search engines, + the Internet Archive, + and other tools and services. +
    • +
  • + It still works with CSS completely disabled, or + in browsers that never supported CSS or JavaScript like + Lynx. + You'll just see the sections before and after the current + one. +
    • +
  • + Despite their problems, HTML and CSS still strike one + of the best balances in computing between ease of writing, + ease of learning, and features. + The + rule of least power remains a good design maxim, + and the above are some of its benefits. +
    • +
+
+
+

◀ Why Not?

+
    +
  • + It doesn't work in old-but-not-too-old versions + of Internet Explorer. (It works in very old + versions that don't support CSS or CSS visibility + but doesn't work in recently-old versions that + support CSS visibility but not CSS transforms.) +
    • +
  • + It's awkward in some mobile browsers, older ones + especially. (But so is almost anything not designed + specifically for them.) +
    • +
  • + Error handling doesn't work very well. +
    • +
  • + Direct links to the page without a #fragment are the same + as an error. +
    • +
  • + 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 + use Twine + if you want to do that. +
    • +
+
+
+

◀ License

+

+ choice.css and + this demonstration page are + released + into the public domain, + 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. +

+

+ You can copy, modify, distribute and perform the work, even for + commercial purposes, all without asking permission. +

+

+ However, we would appreciate it if you kept + a link to this page in the file when you + use it, to help inform other people about what it does and + how they can use it too. +

+
+
+

+ 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 + back to the first section, or + just plain back. +

+

+ 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 CSS Selectors + Level 4 has included features that would help with this, + but they don't work in any browser yet. +

+

+ 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. +

+
+
+ + diff --git a/yukkuri.css b/yukkuri.css new file mode 100644 index 0000000..a1984fd --- /dev/null +++ b/yukkuri.css @@ -0,0 +1,114 @@ +html { + background-color: #E2C0F2; + background-image: linear-gradient(#E2C0F2, #F4C7C7 100%); + font-size: 16px; +} + +@media (max-width: 320px) { + html { font-size: 10px; } +} + +main { + top: 1.5em; +} + +[onclick] { + cursor: pointer; + text-decoration: underline; +} + +section { + padding: 1em; + box-shadow: 0 0 0 #50257c; + border-radius: 0.3333em; + background-color: white; + font-family: serif; + border-bottom: 0.3333em solid #CE84F2; + border-top: 0.3333em solid #F47E7E; + border-radius: 2em; +} + +section:target { + box-shadow: 0 0 0.667em #50257c; +} + +section:before { + font-weight: 100; + font-size: 0.8em; + margin-bottom: 1em; +} + +header { + z-index: 1; + padding-top: 0.5em; + padding-bottom: 0.5em; + height: 1em; + position: fixed; + left: 0; + right: 0; + background: #9d6bd0; + color: white; + text-align: center; + font-family: sans-serif; +} + +header h1 { + display: inline-block; + margin: 0; + padding: 0; + font-size: 1em; +} + +header a { + color: white; + text-decoration: none; +} + +main a { + color: #50257c; +} + +h1, h2 { + font-family: sans-serif; +} + +h1 { font-size: 1.5em; font-weight: bold; margin: 0.5em 0; } +h2 { font-size: 1.0em; font-weight: bold; margin: 0; margin-top: 1em; } +p { margin: 0.5em; } +li { margin: 0.5em; } + +h1 a { + text-decoration: none; +} + +nav { + margin: 0 0.25em; + font-size: 1.125em; + line-height: 1em; +} + +section:before { + font-family: sans-serif; +} + +pre, code { + font-size: 0.75em; +} + +.flipX { + transform: scaleX(-1); + -webkit-transform: scaleX(-1); +} + +@media print { + header { position: static; } + html { + background-color: white; + background-image: none; + } + section { + border-left: 0.1667em solid #CE84F2; + border-right: 0.1667em solid #F47E7E; + box-shadow: 0 0 0.667em #50257c; + } +}