Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

tweak layout and style #3

Merged
merged 1 commit into from

2 participants

@ono
ono commented

screen shot:
Screen Shot

@tenderlove tenderlove merged commit b490e15 into tenderlove:gh-pages
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 5, 2011
  1. @ono

    update layout and style

    ono authored
This page is out of date. Refresh to see the latest.
Showing with 112 additions and 69 deletions.
  1. +36 −0 fsm.css
  2. +28 −69 index.html
  3. +48 −0 reset.css
View
36 fsm.css
@@ -0,0 +1,36 @@
+@import url(reset.css);
+
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
+ margin: 0;
+}
+
+h1 {
+ font-size: 2.0em; font-weight: bold; text-align: center;
+ color: white; background-color: black;
+ padding: 5px 0;
+ margin: 0 0 20px;
+}
+
+h2 {
+ text-align: center;
+ display: none;
+ font-size: 0.5em;
+}
+
+div#chart-2 {
+ height: 350px;
+}
+
+.clearfix {display: inline-block; }
+.input { overflow: show;}
+.instruction { color: #666; padding: 0 30px 20px; font-size: 0.9em}
+.instruction p { padding: 0 0 5px; }
+.instruction li { padding: 0 10px 5px; }
+
+.form { background: #EEE; padding: 20px 30px; border-radius: 5px; margin-left: auto; margin-right: auto; width: 480px; margin-bottom: 20px}
+.form p, .form form { text-align: center }
+.form form {padding: 0 10px 5px; }
+.form .fun_routes { font-size: 0.9em;}
+.form .fun_routes a { margin: 0 5px 0 0; }
+
View
97 index.html
@@ -1,34 +1,7 @@
-<<!DOCTYPE html>
+<!DOCTYPE html>
<html>
<head>
- <style>
- body {
- background-color: #333;
- margin: 0;
- }
-
- #input div {
- padding: 10px;
- }
-
- h1, h2 {
- width: 100%;
- text-align: center;
- }
-
- div#wrapper {
- top: 0;
- bottom: 0;
- width: 1000px;
- margin: auto;
- background-color: #fff;
- padding: 20px;
- }
-
- div#chart-2 {
- height: 350px;
- }
- </style>
+ <link rel="stylesheet" href="fsm.css" media="all" />
</head>
<body>
<div id="wrapper">
@@ -38,6 +11,22 @@
Fix me!
</a>
</h2>
+ <div class="instruction form">
+ <p>
+ Type a route in to the box and click "simulate".
+ </p>
+ <form onsubmit="return match(this.route.value);">
+ <input type="text" size="30" name="route" value="/articles/new" />
+ <button>simulate</button>
+ <input type="reset" value="reset" onclick="return reset_graph();"/>
+ </form>
+ <p class="fun_routes">
+ Some fun routes to try:
+ <a href="#" onclick="document.forms[0].elements[0].value=this.text; return match(this.text);">/articles</a>
+ <a href="#" onclick="document.forms[0].elements[0].value=this.text; return match(this.text);">/articles/10/edit.json</a>
+ <a href="#" onclick="document.forms[0].elements[0].value=this.text; return match(this.text);">/articles/new.</a>
+ </p>
+ </div>
<div class='chart' id='chart-2'>
<svg viewBox="0.00 0.00 1368.00 362.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 358)">
@@ -292,46 +281,16 @@
</g>
</svg>
</div>
- <div id="input">
- <div>
- <form onsubmit="return match(this.route.value);">
- <input type="text" size="30" name="route" value="/articles/new" />
- <button>simulate</button>
- <input type="reset" value="reset" onclick="return reset_graph();"/>
- </form>
- </div>
- <div>
- This is a FSM for a system that has the following routes:
- <ul>
- <li>/articles(.:format)</li>
- <li>/articles/new(.:format)</li>
- <li>/articles/:id/edit(.:format)</li>
- <li>/articles/:id(.:format)</li>
- </ul>
- Type a route in to the box and click "simulate". Some fun routes to try:
- <ul>
- <li>
- <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));">
- /articles
- </a>
- </li>
- <li>
- <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));">
- /articles/10/edit.json
- </a>
- </li>
- <li>
- <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));">
- /articles/new.
- </a>
- </li>
- <li>
- <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));">
- /articles/new
- </a>
- </li>
- </ul>
- </div>
+ <div class="instruction">
+ <p>
+ This is a FSM for a system that has the following routes:
+ </p>
+ <ul>
+ <li>/articles(.:format)</li>
+ <li>/articles/new(.:format)</li>
+ <li>/articles/:id/edit(.:format)</li>
+ <li>/articles/:id(.:format)</li>
+ </ul>
</div>
</div>
<script src="d3.min.js" type="text/javascript"></script>
View
48 reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
Something went wrong with that request. Please try again.