瀏覽代碼

initial description

crobi 10 年之前
父節點
當前提交
63d1c8ad28
共有 3 個檔案被更改,包括 133 行新增22 行删除
  1. 二進制
      images/back.png
  2. 二進制
      images/front.png
  3. 133
    22
      index.html

二進制
images/back.png 查看文件


二進制
images/front.png 查看文件


+ 133
- 22
index.html 查看文件

@@ -1,4 +1,4 @@
1
-<!DOCTYPE html>
1
+<!DOCTYPE html>
2 2
 <html>
3 3
 
4 4
   <head>
@@ -32,36 +32,147 @@
32 32
     <div id="main_content_wrap" class="outer">
33 33
       <section id="main_content" class="inner">
34 34
         <h3>
35
-<a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>Welcome to GitHub Pages.</h3>
36
-
37
-<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:</p>
38
-
39
-<pre><code>$ cd your_repo_root/repo_name
40
-$ git fetch origin
41
-$ git checkout gh-pages
35
+            <a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>
36
+            What it does
37
+        </h3>
38
+
39
+<p>
40
+    This project generates cards for spells, items, or monsters for RPG games.
41
+    The cards are packed on a sheet such that you can print double sided and
42
+    get cards with a front and back.
43
+    Here's an example of what you can create:
44
+</p>
45
+
46
+<div align="center">
47
+    <img src="images/front.png">
48
+    <img src="images/back.png">
49
+</div>
50
+
51
+<p>
52
+    You can define the content of the cards yourself using simple JSON data. The above example was generated by this:
53
+</p>
54
+
55
+<pre><code>{
56
+    "count": 1,
57
+    "color": "dimgray",
58
+    "title": "Full Plate",
59
+    "icon": "custom-armor-heavy",
60
+    "contents": [
61
+        "subtitle | Heavy armor (1500gp)",
62
+        "rule",
63
+        "property | AC | 18",
64
+        "property | Strength required | 15",
65
+        "property | Stealth | Disadvantage",
66
+        "rule",
67
+        "fill-2",
68
+        "description | Heavy | Your speed is reduced by 10 feet.",
69
+        "description | Stealth | You have disadvantage on Stealth.",
70
+        "fill-3"
71
+    ]
72
+}
42 73
 </code></pre>
43 74
 
44
-<p>If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.</p>
45
-
46
-<h3>
47
-<a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>Designer Templates</h3>
48
-
49
-<p>We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.</p>
50
-
51
-<h3>
52
-<a name="rather-drive-stick" class="anchor" href="#rather-drive-stick"><span class="octicon octicon-link"></span></a>Rather Drive Stick?</h3>
75
+          <h3>
76
+    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
77
+    Live demo
78
+</h3>
53 79
 
54
-<p>If you prefer to not use the automatic generator, push a branch named <code>gh-pages</code> to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.</p>
80
+<p>
81
+    <a href="generator/generator.htm">Try it out yourself</a>
82
+</p>
55 83
 
56 84
 <h3>
57
-<a name="authors-and-contributors" class="anchor" href="#authors-and-contributors"><span class="octicon octicon-link"></span></a>Authors and Contributors</h3>
85
+    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
86
+    Card JSON data
87
+</h3>
88
+
89
+<p>
90
+    <ul>
91
+        <li>
92
+            <strong>count</strong>
93
+            The number of times this card is repeated. Useful for consumable items that you hand out multiple times.
94
+        </li>
95
+        <li>
96
+            <strong>color</strong>
97
+            Name of the card color. You can use all <a href="http://www.w3schools.com/cssref/css_colornames.asp">CSS color names</a>.
98
+            Additional custom colors are defined in <i>css/custom-colors.css</i>.
99
+        </li>
100
+        <li>
101
+            <strong>icon</strong>
102
+            Name of the card icon. You can use all icons from <a href="http://game-icons.net/">game-icons.net</a>.
103
+            For example, the file name of <a href="http://game-icons.net/lorc/originals/plain-dagger.html">this dagger</a>
104
+            is <i>plain-dagger.png</i>, so you would use "plain-dagger" as the icon name.
105
+            Additional custom names are defined in <i>css/custom-icons.css</i>.
106
+        </li>
107
+        <li>
108
+            <strong>back_icon</strong>
109
+            Optional. Name of the big icon on the card back. If not specified, the icon from the "icon" property is used.
110
+        </li>
111
+        <li>
112
+            <strong>title</strong>
113
+            The title of the card.
114
+        </li>
115
+        <li>
116
+            <strong>contents</strong>
117
+            An array of strings, specifying all card elements, in top to bottom order (see below).
118
+        </li>
119
+    </ul>
120
+</p>
58 121
 
59
-<p>You can <a href="https://github.com/blog/821" class="user-mention">@mention</a> a GitHub username to generate a link to their profile. The resulting <code>&lt;a&gt;</code> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (<a href="https://github.com/defunkt" class="user-mention">@defunkt</a>), PJ Hyett (<a href="https://github.com/pjhyett" class="user-mention">@pjhyett</a>), and Tom Preston-Werner (<a href="https://github.com/mojombo" class="user-mention">@mojombo</a>) founded GitHub.</p>
60 122
 
61 123
 <h3>
62
-<a name="support-or-contact" class="anchor" href="#support-or-contact"><span class="octicon octicon-link"></span></a>Support or Contact</h3>
124
+    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
125
+    Card elements
126
+</h3>
127
+
128
+<p>
129
+    Each card element is a string of the following format:
130
+    <pre>element | param1 | param2</pre><br />
131
+
132
+    The following elements are available:
133
+
134
+    <ul>
135
+        <li>
136
+            <strong>subtitle</strong>
137
+            Slightly larger italic text.
138
+            Param1: the subtitle text.
139
+        </li>
140
+        <li>
141
+            <strong>rule</strong>
142
+            A horizontal rule.
143
+        </li>
144
+        <li>
145
+            <strong>property</strong>
146
+            A property line. The property description is indented if it spans more than one line.
147
+            Param1: the property name (in bold).
148
+            Param2: the property description.
149
+        </li>
150
+        <li>
151
+            <strong>description</strong>
152
+            Same as <i>property</i>, but text is not indented.
153
+        </li>
154
+        <li>
155
+            <strong>text</strong>
156
+            A simple paragraph of text.
157
+            Param1: the text.
158
+        </li>
159
+        <li>
160
+            <strong>subsection</strong>
161
+            A subsection header, with a horizontal rule below the subsection name.
162
+            Param1: the subsection name
163
+        </li>
164
+        <li>
165
+            <strong>fill-1</strong>
166
+            A dynamically resized empty element that takes up 1 unit of unused space on the card.
167
+            You can use this to vertically center text by adding one of these before and after the text you want to center.
168
+        </li>
169
+        <li>
170
+            <strong>fill-2</strong>
171
+            Same as <i>fill-1</i>, but takes up 2 units of unused space - these elements will therefore be larger than any <i>fill-1</i> element.
172
+        </li>
173
+    </ul>
174
+</p>
63 175
 
64
-<p>Having trouble with Pages? Check out the documentation at <a href="http://help.github.com/pages">http://help.github.com/pages</a> or contact <a href="mailto:support@github.com">support@github.com</a> and we’ll help you sort it out.</p>
65 176
       </section>
66 177
     </div>
67 178
 

Loading…
取消
儲存