Permalink
Browse files

Stripy background, moving to the body element.

  • Loading branch information...
1 parent 4490b3a commit 8cd3bb17594b6f4eeca61bfeee0802ea6a1025a5 @brianloveswords committed Jan 23, 2011
Showing with 63 additions and 44 deletions.
  1. +14 −8 css/main.css
  2. +16 −8 css/main.less
  3. +33 −28 showcase.html
View
@@ -17,6 +17,7 @@ em[role="highlight-4"] {
color: #ffec40;
}
body {
+ background: url('/images/bg.stripy.png');
margin: 0;
padding: 0;
color: #5a6579;
@@ -44,10 +45,8 @@ nav[role="language"] a {
margin: 0 0 0 5px;
}
header[role="main"] {
- background: url('/images/bg.stripy.png');
font-size: 17px;
height: 218px;
- margin: 0 0 20px;
/* end nav > ul*/
}
@@ -153,7 +152,8 @@ body[role="inner"] header[role="main"] h1 {
z-index: 2;
}
section[role="masthead"] {
- margin-bottom: 40px;
+ background: #fff;
+ padding: 20px 0 40px;
}
section[role="masthead"] nav {
float: right;
@@ -206,6 +206,7 @@ section[role="masthead"] p {
line-height: 30px;
}
section[role="course-search"] {
+ background: #fff;
padding-bottom: 85px;
}
section[role="course-search"] input::-webkit-input-placeholder {
@@ -290,9 +291,6 @@ section[role="course-search"] nav a.active {
section[role="course-search"] nav a:hover {
background: #cef200;
}
-section[role="courses"] {
- background: url('/images/bg.stripy.png');
-}
section[role="courses"] nav a {
width: 30px;
background: #ffffff url('/images/icon.back.png') no-repeat center 0;
@@ -342,20 +340,22 @@ section[role="courses"] ul[role="course-list"] li p {
line-height: 22px;
}
section[role="suggestion"] {
+ background: #fff;
clear: both;
line-height: 160px;
text-align: center;
font-size: 20px;
}
section[role="suggestion"] h2 {
font-weight: normal;
+ margin: 0;
}
section[role="suggestion"] a {
color: #36cdc4;
text-decoration: underline;
}
footer[role="main"] {
- background: url('/images/bg.stripy.png');
+ clear: both;
}
footer[role="main"] ul {
margin-left: 104px;
@@ -413,7 +413,8 @@ header[role="title"] h2 {
color: #5a6579;
}
section[role="press-sidebar"] {
- background: url('/images/bg.stripy.png');
+ float: right;
+ width: 300px;
}
section[role="press-sidebar"] blockquote {
font-size: 16px;
@@ -422,3 +423,8 @@ section[role="press-sidebar"] blockquote {
margin: 0;
padding-top: 30px;
}
+div[role="maincontent"] {
+ margin: auto;
+ width: 1000px;
+ min-height: 400px;
+}
View
@@ -37,6 +37,7 @@ em[role="highlight-3"] { color: @orange; }
em[role="highlight-4"] { color: @yellow; }
body {
+ background: url('/images/bg.stripy.png');
margin: 0; padding: 0;
color: @main-text-color;
font-family: "Arvo", "Helvetica";
@@ -61,10 +62,8 @@ nav[role="language"] {
}
header[role="main"] {
- background: url('/images/bg.stripy.png');
font-size: 17px;
height: 218px;
- margin: 0 0 20px;
input::-webkit-input-placeholder { color: #fff;}
input:-moz-placeholder { color: #fff; }
h1 { .image-replace('/images/logo.png', 262px, 218px); position: absolute; z-index: 2;}
@@ -150,7 +149,8 @@ body[role="inner"] {
}
section[role="masthead"] {
- margin-bottom: 40px;
+ background: #fff;
+ padding: 20px 0 40px;
nav {
float: right;
text-align: left;
@@ -201,6 +201,7 @@ section[role="masthead"] {
}
section[role="course-search"] {
+ background: #fff;
padding-bottom: 85px;
input::-webkit-input-placeholder { color: #fff;}
input:-moz-placeholder { color: #fff; }
@@ -259,7 +260,6 @@ section[role="course-search"] {
}
section[role="courses"] {
- background: url('/images/bg.stripy.png');
nav {
a {
width: 30px;
@@ -309,18 +309,19 @@ section[role="courses"] {
}
}
section[role="suggestion"] {
+ background: #fff;
clear: both;
line-height: 160px;
text-align: center;
font-size: 20px;
- h2 { font-weight: normal; }
+ h2 { font-weight: normal; margin: 0;}
a {
color: @blue;
text-decoration: underline;
}
}
footer[role="main"] {
- background: url('/images/bg.stripy.png');
+ clear: both;
ul {
margin-left: 104px;
padding-bottom: 50px;
@@ -363,12 +364,19 @@ header[role="title"] {
}
section[role="press-sidebar"] {
- background: url('/images/bg.stripy.png');
+ float: right;
+ width: 300px;
blockquote {
font-size: 16px;
font-family: Georgia;
background: url('/images/icon.quote.png') no-repeat;
margin: 0;
padding-top: 30px;
}
-}
+}
+div[role="maincontent"] {
+ margin: auto;
+ width: 1000px;
+ min-height: 400px;
+}
+
View
@@ -69,34 +69,39 @@
<section role="stories">
</section>
- <section role="press-sidebar">
- <h2>What the press says about us</h2>
- <ul>
- <li>
- <blockquote>
- Queres aprender a desenvolver ambientes de experiência de
- usuário a serem aplicados a vários sistemas? #webcraft #p2pu
- </blockquote>
- <cite>El País, Spain</cite>
- </li>
-
- <li>
- <blockquote>
- Queres aprender a desenvolver ambientes de experiência de
- usuário a serem aplicados a vários sistemas? #webcraft #p2pu
- </blockquote>
- <cite>El País, Spain</cite>
- </li>
-
- <li>
- <blockquote>
- Queres aprender a desenvolver ambientes de experiência de
- usuário a serem aplicados a vários sistemas? #webcraft #p2pu
- </blockquote>
- <cite>El País, Spain</cite>
- </li>
- </ul>
- </section>
+ <div role="maincontent">
+
+ <section role="press-sidebar">
+ <h2>What the press says about us</h2>
+ <ul>
+ <li>
+ <blockquote>
+ Queres aprender a desenvolver ambientes de experiência de
+ usuário a serem aplicados a vários sistemas? #webcraft #p2pu
+ </blockquote>
+ <cite>El País, Spain</cite>
+ </li>
+
+ <li>
+ <blockquote>
+ Queres aprender a desenvolver ambientes de experiência de
+ usuário a serem aplicados a vários sistemas? #webcraft #p2pu
+ </blockquote>
+ <cite>El País, Spain</cite>
+ </li>
+
+ <li>
+ <blockquote>
+ Queres aprender a desenvolver ambientes de experiência de
+ usuário a serem aplicados a vários sistemas? #webcraft #p2pu
+ </blockquote>
+ <cite>El País, Spain</cite>
+ </li>
+ </ul>
+ </section>
+
+ </div>
+
<footer role="main">
<div role="container">

0 comments on commit 8cd3bb1

Please sign in to comment.