Skip to content
Browse files

fix margins

  • Loading branch information...
1 parent 4b40f0c commit 03b33ba188dee22afbe1cb2e725f3c9ac2e21536 Dom Nguyen committed Jan 18, 2012
Showing with 36 additions and 36 deletions.
  1. +12 −13 index.html
  2. +20 −18 style.css
  3. +4 −5 style.scss
View
25 index.html
@@ -16,10 +16,7 @@
<body>
<div id="content">
-
- <a class="logo" href="http://github.com/tmeasday/edifice">
- <img src="images/logo_edifice_80x93.png" alt="VISIT EDIFICE ON GITHUB" />
- </a>
+ <a class="logo" href="http://github.com/tmeasday/edifice"><img src="images/logo_edifice_80x93.png" alt="VISIT EDIFICE ON GITHUB" /></a>
<div class="pitch">
<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>
<body class="c_users v_show l_application">
{% endhighlight %}
- <img src="images/icon_page_120x120.png" alt="Page-level JS" class="page" />
- <div class="padded">
+ <div class="point">
+ <img src="images/icon_page_120x120.png" alt="Page-level JS" class="page" />
<h3 class="subtitle color">Page-level Javascript</h3>
<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>
<span>Just add:</span>
@@ -69,8 +66,8 @@ <h3 class="subtitle color">Page-level Javascript</h3>
<p>The rest will be taken care of.</p>
</div>
- <img src="images/icon_globe_120x120.png" alt="Global JS Widgets" class="globe" />
- <div class="padded">
+ <div class="point">
+ <img src="images/icon_globe_120x120.png" alt="Global JS Widgets" class="globe" />
<h3 class="subtitle color">Site-wide Javascript</h3>
<p>Reluctant to separate your JS by views?
<a href="https://github.com/tmeasday/edifice-widgets">Edifice-widgets</a>
@@ -85,12 +82,12 @@ <h3 class="subtitle color">Site-wide Javascript</h3>
<input type="text" name="zipcode" data-trait="only_allow_numbers">
{% endhighlight %}
- 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>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>
</div>
-
- <img src="images/icon_check_120x120.png" alt="Simple forms with Edifice" class="check" />
- <div class="padded">
+
+ <div class="point">
+ <img src="images/icon_check_120x120.png" alt="Simple forms with Edifice" class="check" />
<h3 class="subtitle color">Avoid form boilerplate</h3>
<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
<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>
<form data-remote="true" data-form="show_errors">
{% endhighlight %}
- <span>And things will work just as you might expect.</span>
+ <p>And things will work just as you might expect.</p>
</div>
+ <div class="point nomargin">
<h3 class="subtitle color">Easy non-persistent forms</h3>
<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>
<span>Just add:</span>
@@ -130,6 +128,7 @@ <h3 class="subtitle color">Easy non-persistent forms</h3>
{% highlight erb %}
<%= form_for @feedback do |f| %>
{% endhighlight %}
+</div>
<img src="images/icon_rails_120x120.png" alt="Rails 3+" class="rails" />
<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>
</div>
View
38 style.css
@@ -409,73 +409,75 @@ p + pre {
color: #999;
}
/* line 195, style.scss */
-#content .explain .padded {
- position: relative;
- width: 444px;
- float: left;
+#content .explain .point {
min-height: 0;
+ margin-left: 160px;
}
/* line 33, stylesheets/include/_helpers.scss */
-#content .explain .padded:after {
+#content .explain .point:after {
clear: both;
content: " ";
display: block;
visibility: hidden;
height: 0;
font-size: 0;
}
-/* line 201, style.scss */
+/* line 198, style.scss */
+#content .explain .point.nomargin {
+ margin-left: 0px;
+}
+/* line 200, style.scss */
#content .explain img {
margin: 1em;
}
-/* line 203, style.scss */
+/* line 202, style.scss */
#content .explain img.rails {
display: block;
margin: 3em auto 1em;
}
-/* line 207, style.scss */
+/* line 206, style.scss */
#content .explain img.globe, #content .explain img.page, #content .explain img.check {
float: left;
- margin: 3em 2em 1em 0;
+ margin: 0em 2em 1em -160px;
}
-/* line 212, style.scss */
+/* line 211, style.scss */
#content .explain dl {
margin: 19px 0 21px;
}
-/* line 214, style.scss */
+/* line 213, style.scss */
#content .explain dl dt, #content .explain dl dd {
line-height: 21px;
padding: 0 10px;
list-style-position: inside;
}
-/* line 219, style.scss */
+/* line 218, style.scss */
#content .explain dl dt {
font-weight: bold;
padding: 0 10px;
}
-/* line 222, style.scss */
+/* line 221, style.scss */
#content .explain dl dd {
font-style: italic;
padding: 0 20px;
}
-/* line 226, style.scss */
+/* line 225, style.scss */
#content .explain ul li {
list-style-type: disc;
}
-/* line 227, style.scss */
+/* line 226, style.scss */
#content .explain ol li {
list-style-type: decimal;
}
-/* line 228, style.scss */
+/* line 227, style.scss */
#content .explain ul, #content .explain ol {
margin: 1em 0 1.5em;
}
-/* line 230, style.scss */
+/* line 229, style.scss */
#content .explain ul ul, #content .explain ul ol, #content .explain ol ul, #content .explain ol ol {
margin: 0;
border-bottom: 0;
}
-/* line 234, style.scss */
+/* line 233, style.scss */
#content .explain ul li, #content .explain ol li {
list-style-position: inside;
padding: 0 30px;
View
9 style.scss
@@ -192,11 +192,10 @@ p + pre{
color: #999;
}
}
- .padded{
- position: relative;
- width: 600px- (120px + 18px* 2);
- float: left;
+ .point{
@include clearfix;
+ margin-left: 160px;
+ &.nomargin{margin-left: 0px;}
}
img{
margin: 1em;
@@ -206,7 +205,7 @@ p + pre{
}
&.globe, &.page, &.check{
float: left;
- margin: 3em 2em 1em 0;
+ margin: 0em 2em 1em -160px;
}
}
dl{

0 comments on commit 03b33ba

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