捏角系統

by Andy_Yuan

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>捏角系統</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="outerContainer">
        <h3 class="written-in-ink"><a href="https://www.inklestudios.com/ink">WRITTEN IN INK</a></h3>

        <div id="controls" class="buttons">
          <a id="rewind" title="Restart story from beginning">restart</a>
          <a id="save" title="Save progress">save</a>
          <a id="reload" title="Reload from save point">load</a>
          <a id="theme-switch" title="Switch theme">theme</a>
        </div>

        <div id="story" class="container">
            <div class="header">
                <h1>捏角系統</h1>
                <h2 class="byline"></h2>
            </div>
        </div>
    </div>

    <script src="ink.js"></script>
    <script src="捏角系統.js"></script>
    <script src="main.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700|Quattrocento:700');

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    background: white;
    overflow: hidden;
}

body.switched {
    transition: color 0.6s, background-color 0.6s;
}

h1,
h2 {
    text-align: center;
    font-family: "Quattrocento", Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 30pt;
    margin-bottom: 10px;
}

h2 {
    font-size: 14pt;
    font-style: italic;
    font-family: sans-serif;
    font-weight: lighter;
    color: #BBB;
}

.header {
    padding-top: 3em;
    padding-bottom: 3em;
}

/*
  Built-in class:
    # author: Name
*/
.byline {
    font-style: italic;
}

.written-in-ink {
    z-index: 3;
    font-size: 9pt;
    font-family: sans-serif;
    text-align: center;
    font-weight: 700;
    position: fixed;
    display: block;
    width: 100%;
    background: white;
    transition: color 0.6s, background 0.6s;
    margin: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    height: 14px;
    top: 0;
}

/* 
  Enables <iframe> support work on itch.io when using mobile iOS
*/
.outerContainer {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: 24px;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 980px) {
    .outerContainer {
        margin-top: 44px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.container {
    display: block;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 4em;
    background: white;
}

.switched .container {
    transition: background-color 0.6s;
}

p {
    font-size: 13pt;
    color: #888;
    line-height: 1.7em;
    font-weight: lighter;
}

a {
    font-weight: 700;
    color:...