|
12 | 12 | body { font : 300 13pt Lato,"Helvetica"; color : #555 } |
13 | 13 | h1,h2,h3,h4{font-weight : 400;} |
14 | 14 | h1 { font-size: 2.7em; text-align : center; } |
| 15 | + h2 { text-align: center; max-width: 880px;} |
15 | 16 | h3 { font-size : 1.2em; margin : 3px 0 } |
16 | 17 | h4 { font-size : 1.1em; margin : 2px 0 2px } |
17 | 18 | ul { margin : 8px 0 } |
18 | 19 |
|
19 | 20 | #div-img-layout { width : 800px; margin : 32px auto } |
20 | 21 | #main { max-width : 1020px; margin : 0 auto } |
21 | 22 | #arsonitelayoutimg { text-align : center } |
22 | | - |
| 23 | + #design-goals h3{line-height: 1.7em} |
| 24 | + #design-goals li{line-height: 1.7em} |
23 | 25 | .layout { margin : 8px 4px 20px } |
24 | 26 | #downloads{margin: 20px auto; width: 500px} |
25 | 27 | #downloads > a { background : orange; padding : 2px 20px 3px; color : black; text-decoration : none; margin : 0 8px } |
26 | 28 | #downloads > a:first-child{margin-right: 50px} |
27 | 29 | #performance { margin : 26px 0 0; position: relative } |
28 | | - #text{border: 1px solid #ccc; background: #eee; padding: 8px; width: 100%} |
29 | | - #process{background: orange; border: 1px orange; padding: 2px 8px 3px; font: 300 12pt Lato; position: absolute; top: 197px; right: 0} |
| 30 | + #perf-line {display: table-row} |
| 31 | + #perf-line div.center{text-align: center; width: 100%} |
| 32 | + #perf-line small{} |
| 33 | + #perf-line div{display: table-cell} |
| 34 | + #process{background: orange; border: 1px orange; padding: 2px 8px 3px; font: 300 12pt Lato; display: table-cell; text-align: right} |
| 35 | + |
| 36 | + #text{border: 1px solid #ccc; background: #eee; padding: 8px; width: 98%; font-family: consolas, monaco, inconsolata, monospace} |
30 | 37 | </style> |
31 | 38 | </head> |
32 | 39 | <body> |
@@ -62,7 +69,11 @@ <h3>Design Goals</h3> |
62 | 69 | </div> |
63 | 70 |
|
64 | 71 | <div id="performance"> |
65 | | - <h3>Performance</h3> |
| 72 | + <div id="perf-line"> |
| 73 | + <div><h3>Performance</h3></div> |
| 74 | + <div class="center"><small>Enter/paste sample text here to test the performance of the layouts</small></div> |
| 75 | + <div><button id="process">Process</button></div> |
| 76 | + </div> |
66 | 77 | <textarea name="text" id="text" cols="30" rows="10"> |
67 | 78 | "Attitude" |
68 | 79 |
|
@@ -99,7 +110,7 @@ <h3>Performance</h3> |
99 | 110 |
|
100 | 111 | Try it and see. |
101 | 112 | </textarea> |
102 | | - <button id="process">Process</button> |
| 113 | + |
103 | 114 |
|
104 | 115 | <div id="layouts-all"> |
105 | 116 | <div id="layout-template" class="layout" style="display: none"> |
|
0 commit comments