Permalink
Browse files

Simplify and improve information about project.

  • Loading branch information...
Chad Mazzola
Chad Mazzola committed Feb 23, 2012
1 parent 0ca8bf2 commit 368837b2d250b24574566b22c59d5f4311f04f41
Showing with 111 additions and 39 deletions.
  1. +2 −0 _config.yml
  2. +16 −5 index.html
  3. +38 −16 stylesheets/buttons.css
  4. +55 −18 stylesheets/scss/_screen.scss
View
@@ -0,0 +1,2 @@
+auto: true
+
View
@@ -11,10 +11,21 @@
<div class="container">
<h1>CSS3 buttons</h1>
- <h2>Designed & built by <a href="http://hellohappy.org">Chad Mazzola</a> with inspiration from across the web.</h2>
- <p class="intro">This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button.</p>
- <p>These buttons are now implemented using Sass, with help from <a href="http://github.com/thoughtbot/bourbon">Bourbon</a>. The generated CSS for all the buttons is also available.</p>
- <p class="where intro">The latest code is located at: <a href="http://github.com/ubuwaits/css3-buttons">http://github.com/ubuwaits/css3-buttons</a></p>
+
+ <div class="project-info">
+ <div class="description">
+ <p>This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button.</p>
+ <p>These buttons are now implemented using Sass, with help from <a href="http://github.com/thoughtbot/bourbon">Bourbon</a>. The generated CSS for all the buttons is also available.</p>
+ </div>
+
+ <div class="info">
+ <ul>
+ <li><a href="http://hellohappy.org">Maintained by Chad Mazzola</a>.</li>
+ <li><a href="http://twitter.com/ubuwaits">Follow me on Twitter</a></li>
+ <li><a href="http://github.com/ubuwaits/css3-buttons">Watch this repo on GitHub</a></li
+ </ul>
+ </div>
+ </div>
<div class="button-collection">
<div class="button-info">
@@ -81,7 +92,7 @@ <h2>WebKit experimental</h2>
</ul>
</div>
- <p class="credit">Designed &amp; built by <a href="http://hellohappy.org/">Chad Mazzola</a> with inspiration from across the web.</p>
+ <p class="credit">Maintained by Chad Mazzola. <a href="http://twitter.com/ubuwaits">Follow me on Twitter</a> or <a href="http://github.com/ubuwaits/css3-buttons">Watch this repo on GitHub</a>.</p>
</div>
</body>
View
@@ -788,34 +788,57 @@ div.container {
margin: 40px auto;
width: 960px; }
-a {
- color: #333;
- font-weight: bold;
- text-decoration: none; }
-
h1 {
color: #333;
- font-size: 38px;
- font-weight: 300;
+ font-size: 34px;
+ font-weight: 700;
margin: 24px 0 12px 0; }
-h2 {
- color: #666;
- margin: 0 0 24px 0; }
+div.project-info div.description {
+ float: left;
+ width: 490px; }
+div.project-info div.info {
+ float: left;
+ margin: 0 0 0 30px;
+ width: 340px; }
+ div.project-info div.info ul {
+ position: relative;
+ top: 1px; }
+ div.project-info div.info ul li {
+ color: #444;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 18px;
+ text-transform: uppercase; }
+ div.project-info div.info ul li a:hover {
+ border-bottom: 1px solid #444; }
+ div.project-info div.info ul li:before {
+ content: "\00d7";
+ font-size: 15px;
+ font-weight: 700;
+ left: -2px;
+ position: relative;
+ top: 0px; }
+
+a {
+ color: #333;
+ font-weight: bold;
+ text-decoration: none; }
p {
- color: #555;
+ color: #444;
font-size: 14px;
font-weight: normal;
- line-height: 140%;
+ line-height: 21px;
margin: 0 0 12px 0; }
p.credit {
border-top: 1px solid #ccc;
font-size: 14px;
line-height: 140%;
margin: 36px 0 12px 0;
- padding: 6px 0 0 0; }
+ padding: 8px 0 0 0;
+ text-align: center; }
p.where {
margin: 0 0 12px 0; }
@@ -834,8 +857,6 @@ p.where {
font-size: 22px;
font-weight: normal;
margin: 10px 0 6px 0; }
- .button-info p {
- font-size: 14px; }
ul.column {
float: left;
@@ -897,7 +918,8 @@ button.download-itunes {
------------------------------------------------------------------------------*/
.column:after,
.button-collection:after,
-.clearfix:after {
+.clearfix:after,
+div.project-info:after {
clear: both;
content: ' ';
display: block;
@@ -63,29 +63,69 @@ div.container {
width: 960px;
}
-a {
- color: #333;
- font-weight: bold;
- text-decoration: none;
-}
-
h1 {
color: #333;
- font-size: 38px;
- font-weight: 300;
+ font-size: 34px;
+ font-weight: 700;
margin: 24px 0 12px 0;
}
-h2 {
- color: #666;
- margin: 0 0 24px 0;
+div.project-info {
+ @extend .clearfix;
+
+ div.description {
+ float: left;
+ width: 490px;
+
+ }
+
+ div.info {
+ float: left;
+ margin: 0 0 0 30px;
+ width: 340px;
+
+ ul {
+ position: relative;
+ top: 1px;
+
+ li {
+ color: #444;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 18px;
+ text-transform: uppercase;
+
+ a {
+ &:hover {
+ border-bottom: 1px solid #444;
+ }
+ }
+
+ &:before {
+ content: "\00d7";
+ font-size: 15px;
+ font-weight: 700;
+ left: -2px;
+ position: relative;
+ top: 0px;
+ }
+
+ }
+ }
+ }
+}
+
+a {
+ color: #333;
+ font-weight: bold;
+ text-decoration: none;
}
p {
- color: #555;
+ color: #444;
font-size: 14px;
font-weight: normal;
- line-height: 140%;
+ line-height: 21px;
margin: 0 0 12px 0;
}
@@ -94,7 +134,8 @@ p.credit {
font-size: 14px;
line-height: 140%;
margin: 36px 0 12px 0;
- padding: 6px 0 0 0;
+ padding: 8px 0 0 0;
+ text-align: center;
}
p.where {
@@ -118,10 +159,6 @@ p.where {
font-weight: normal;
margin: 10px 0 6px 0;
}
-
- p {
- font-size: 14px;
- }
}
ul.column {

0 comments on commit 368837b

Please sign in to comment.