Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

fix margins

  • Loading branch information...
commit 03b33ba188dee22afbe1cb2e725f3c9ac2e21536 1 parent 4b40f0c
Dom Nguyen authored

Showing 3 changed files with 36 additions and 36 deletions. Show diff stats Hide diff stats

  1. +12 13 index.html
  2. +20 18 style.css
  3. +4 5 style.scss
25 index.html
@@ -16,10 +16,7 @@
16 16
17 17 <body>
18 18 <div id="content">
19   -
20   - <a class="logo" href="http://github.com/tmeasday/edifice">
21   - <img src="images/logo_edifice_80x93.png" alt="VISIT EDIFICE ON GITHUB" />
22   - </a>
  19 + <a class="logo" href="http://github.com/tmeasday/edifice"><img src="images/logo_edifice_80x93.png" alt="VISIT EDIFICE ON GITHUB" /></a>
23 20
24 21 <div class="pitch">
25 22 <h1><span class="hero">Edifice:</span><span class="tagline">CSS &amp; JS the Rails way</span></h1>
@@ -53,8 +50,8 @@ <h3 class="subtitle color">Namespacing CSS</h3>
53 50 <body class="c_users v_show l_application">
54 51 {% endhighlight %}
55 52
56   - <img src="images/icon_page_120x120.png" alt="Page-level JS" class="page" />
57   - <div class="padded">
  53 + <div class="point">
  54 + <img src="images/icon_page_120x120.png" alt="Page-level JS" class="page" />
58 55 <h3 class="subtitle color">Page-level Javascript</h3>
59 56 <p>Condensing your sites javascript assets into one master file is a performance requirement these days. It gets pretty confusing when you only want to run certain bits of code on different pages. Edifice solves this problem by enabling view specific JS.</p>
60 57 <span>Just add:</span>
@@ -69,8 +66,8 @@ <h3 class="subtitle color">Page-level Javascript</h3>
69 66 <p>The rest will be taken care of.</p>
70 67 </div>
71 68
72   - <img src="images/icon_globe_120x120.png" alt="Global JS Widgets" class="globe" />
73   - <div class="padded">
  69 + <div class="point">
  70 + <img src="images/icon_globe_120x120.png" alt="Global JS Widgets" class="globe" />
74 71 <h3 class="subtitle color">Site-wide Javascript</h3>
75 72 <p>Reluctant to separate your JS by views?
76 73 <a href="https://github.com/tmeasday/edifice-widgets">Edifice-widgets</a>
@@ -85,12 +82,12 @@ <h3 class="subtitle color">Site-wide Javascript</h3>
85 82 <input type="text" name="zipcode" data-trait="only_allow_numbers">
86 83 {% endhighlight %}
87 84
88   - We'll take care of the rest (you'll have to tell us what a <code>styled_select</code> is and what <code>only_allow_numbers</code> means).
  85 + <p>We'll take care of the rest (you'll have to tell us what a <code>styled_select</code> is and what <code>only_allow_numbers</code> means).</p>
89 86 </div>
90 87
91   -
92   - <img src="images/icon_check_120x120.png" alt="Simple forms with Edifice" class="check" />
93   - <div class="padded">
  88 +
  89 + <div class="point">
  90 + <img src="images/icon_check_120x120.png" alt="Simple forms with Edifice" class="check" />
94 91 <h3 class="subtitle color">Avoid form boilerplate</h3>
95 92 <p>Tired of writing standard code to deal with form errors? Wondering why rails' unobtrusive remote form's don't handle it for you? Let
96 93 <a href="https://github.com/tmeasday/edifice-forms">edifice-forms</a> help you out:</p>
@@ -100,9 +97,10 @@ <h3 class="subtitle color">Avoid form boilerplate</h3>
100 97 <form data-remote="true" data-form="show_errors">
101 98 {% endhighlight %}
102 99
103   - <span>And things will work just as you might expect.</span>
  100 + <p>And things will work just as you might expect.</p>
104 101 </div>
105 102
  103 + <div class="point nomargin">
106 104 <h3 class="subtitle color">Easy non-persistent forms</h3>
107 105 <p>Need a form that's not based on a DB-backed model? Still want to validate fields and write simple controllers? Yep, edifice-forms can help with that too:</p>
108 106 <span>Just add:</span>
@@ -130,6 +128,7 @@ <h3 class="subtitle color">Easy non-persistent forms</h3>
130 128 {% highlight erb %}
131 129 <%= form_for @feedback do |f| %>
132 130 {% endhighlight %}
  131 +</div>
133 132 <img src="images/icon_rails_120x120.png" alt="Rails 3+" class="rails" />
134 133 <p class="colophon">Edifice is crafted by <a href="http://percolatestudio.com">Percolate Studio</a> and released under the <a href="http://www.opensource.org/licenses/MIT">MIT license</a></p>
135 134 </div>
38 style.css
@@ -409,14 +409,12 @@ p + pre {
409 409 color: #999;
410 410 }
411 411 /* line 195, style.scss */
412   -#content .explain .padded {
413   - position: relative;
414   - width: 444px;
415   - float: left;
  412 +#content .explain .point {
416 413 min-height: 0;
  414 + margin-left: 160px;
417 415 }
418 416 /* line 33, stylesheets/include/_helpers.scss */
419   -#content .explain .padded:after {
  417 +#content .explain .point:after {
420 418 clear: both;
421 419 content: " ";
422 420 display: block;
@@ -424,58 +422,62 @@ p + pre {
424 422 height: 0;
425 423 font-size: 0;
426 424 }
427   -/* line 201, style.scss */
  425 +/* line 198, style.scss */
  426 +#content .explain .point.nomargin {
  427 + margin-left: 0px;
  428 +}
  429 +/* line 200, style.scss */
428 430 #content .explain img {
429 431 margin: 1em;
430 432 }
431   -/* line 203, style.scss */
  433 +/* line 202, style.scss */
432 434 #content .explain img.rails {
433 435 display: block;
434 436 margin: 3em auto 1em;
435 437 }
436   -/* line 207, style.scss */
  438 +/* line 206, style.scss */
437 439 #content .explain img.globe, #content .explain img.page, #content .explain img.check {
438 440 float: left;
439   - margin: 3em 2em 1em 0;
  441 + margin: 0em 2em 1em -160px;
440 442 }
441   -/* line 212, style.scss */
  443 +/* line 211, style.scss */
442 444 #content .explain dl {
443 445 margin: 19px 0 21px;
444 446 }
445   -/* line 214, style.scss */
  447 +/* line 213, style.scss */
446 448 #content .explain dl dt, #content .explain dl dd {
447 449 line-height: 21px;
448 450 padding: 0 10px;
449 451 list-style-position: inside;
450 452 }
451   -/* line 219, style.scss */
  453 +/* line 218, style.scss */
452 454 #content .explain dl dt {
453 455 font-weight: bold;
454 456 padding: 0 10px;
455 457 }
456   -/* line 222, style.scss */
  458 +/* line 221, style.scss */
457 459 #content .explain dl dd {
458 460 font-style: italic;
459 461 padding: 0 20px;
460 462 }
461   -/* line 226, style.scss */
  463 +/* line 225, style.scss */
462 464 #content .explain ul li {
463 465 list-style-type: disc;
464 466 }
465   -/* line 227, style.scss */
  467 +/* line 226, style.scss */
466 468 #content .explain ol li {
467 469 list-style-type: decimal;
468 470 }
469   -/* line 228, style.scss */
  471 +/* line 227, style.scss */
470 472 #content .explain ul, #content .explain ol {
471 473 margin: 1em 0 1.5em;
472 474 }
473   -/* line 230, style.scss */
  475 +/* line 229, style.scss */
474 476 #content .explain ul ul, #content .explain ul ol, #content .explain ol ul, #content .explain ol ol {
475 477 margin: 0;
476 478 border-bottom: 0;
477 479 }
478   -/* line 234, style.scss */
  480 +/* line 233, style.scss */
479 481 #content .explain ul li, #content .explain ol li {
480 482 list-style-position: inside;
481 483 padding: 0 30px;
9 style.scss
@@ -192,11 +192,10 @@ p + pre{
192 192 color: #999;
193 193 }
194 194 }
195   - .padded{
196   - position: relative;
197   - width: 600px- (120px + 18px* 2);
198   - float: left;
  195 + .point{
199 196 @include clearfix;
  197 + margin-left: 160px;
  198 + &.nomargin{margin-left: 0px;}
200 199 }
201 200 img{
202 201 margin: 1em;
@@ -206,7 +205,7 @@ p + pre{
206 205 }
207 206 &.globe, &.page, &.check{
208 207 float: left;
209   - margin: 3em 2em 1em 0;
  208 + margin: 0em 2em 1em -160px;
210 209 }
211 210 }
212 211 dl{

0 comments on commit 03b33ba

Please sign in to comment.
Something went wrong with that request. Please try again.