Permalink
Browse files

Update style

  • Loading branch information...
1 parent b962d5d commit 1baa2994a09938a8244f103b8df97e3b639bee10 @jrmehle committed Jan 8, 2011
Showing with 172 additions and 52 deletions.
  1. +2 −2 app.rb
  2. +151 −36 public/stylesheets/layout.css
  3. +19 −14 views/layout.erb
View
4 app.rb
@@ -14,7 +14,7 @@
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
- <h2>Header Level 2</h2>
+ <h2>Header Level 2 - Ordered List</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
@@ -23,7 +23,7 @@
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
- <h3>Header Level 3</h3>
+ <h3>Header Level 3 - Unordered List</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
@@ -1,9 +1,10 @@
html {
- background: #222 none;
+ background: #222;
}
body {
- background: #222 none;
+ background: #222;
font-family: Arial, "MS Trebuchet", sans-serif;
+ font-size: 62.5%;
line-height: 1.25em;
}
@@ -14,17 +15,57 @@ blockquote {
padding: 0.5em;
color: #333;
}
+
h1, h2, h3, h4, h5, h6, strong { font-weight: bold; }
h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
}
+
h1 { font-size: 160%; }
h2 { font-size: 150%; }
h3 { font-size: 140%; }
h4 { font-size: 130%; }
+h4 { font-size: 130%; }
h5 { font-size: 120%; }
h6 { font-size: 110%; }
+a {
+ color: #222;
+ text-decoration: underline;
+}
+a:hover {
+ color: #59715F;
+ text-decoration: none;
+ -webkit-transition: all .2s linear;
+ -moz-transition: all .2s linear;
+}
+a:active {
+ text-shadow: 0 0 3px #CCC;
+}
+
+p, ol, ul, dd, dt {
+ margin: 1em 0;
+}
+
+ol li, ul li {
+ padding: .2em 0;
+ margin-left: .9em;
+}
+ol li {
+ list-style-type: decimal;
+ margin-left: 2.25em;
+}
+
+blockquote {
+ padding: .3em 1em;
+ color: #454545;
+ font-size: 1.25em;
+ line-height: 1.5em;
+}
+
+code {
+ font-size: 1.25em;
+}
/* PositionisEverything Clearfix
http://www.positioniseverything.net/easyclearing.html
@@ -45,57 +86,131 @@ h6 { font-size: 110%; }
/* End hide from IE-mac */
-#header,
-#content,
-#nav,
-#footer {
- margin: 0 auto;
- width: 960px;
+
+#site_wrapper {
+ position: relative;
+ width: auto;
+ min-height: 100%;
+ font-size: 1.25em;
}
+#page_wrapper {
+ padding: 1.5em 1.5em 9em;
+}
-#header .container,
-#content .container,
-#footer .container {
- padding: 0.75em 1em;
+#content_wrapper {
+ -webkit-background-clip: padding-box;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -moz-box-shadow: 1px 1px 4px #444;
+ -webkit-box-shadow: 1px 1px 4px #444;
+ box-shadow: 1px 1px 4px #444;
}
#header {
- height: 180px;
- background: #DDD none;
+ background: #999;
+ position: relative;
+ padding: 0.75em 1em;
+ border-bottom: 1px solid #444;
+ -webkit-border-top-right-radius: 4px;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-right-radius: 4px;
+ border-top-left-radius: 4px;
+ color: #222;
}
-#header .container { position: relative; }
+#nav {
+ background: #AAA;
+ width: 100%;
+ padding: 0;
+ font-size: 1.5em;
+}
+#nav ul {
+ margin: 0;
+ padding: 0;
+}
#nav li {
- padding: 0.5em;
float: left;
}
-#nav li a {
- display: block;
- color: #F3F3F3;
+#nav a,
+#nav span {
+ display: inline-block;
+ padding: .4em;
text-decoration: none;
- padding: 0.4em;
+ -webkit-background-clip: padding-box;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+#nav a {
+ color: #666;
+ background-color: #DDD;
}
-#nav li a:hover {
+#nav a:hover {
+ color: #7A6A53;
text-decoration: none;
- background-color: #F3F3F3;
- color: #222;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
+ background-color: #FFF;
+}
+#nav .current {
+ color: #D6E6D6;
+ background-color: #59715F;
+}
+#nav #subnav {
+ margin: 0;
+ font-size: 75%;
+ border-top: 1px solid #AAA;
+}
+#subnav a {
+ padding: .2em .3em;
}
+
#content {
- background: #F3F3F3 none;
- -moz-box-shadow: 1px 1px 4px #000; /* FF3.5+ */
- -webkit-box-shadow: 1px 1px 4px #000; /* Saf3.0+, Chrome */
- box-shadow: 1px 1px 4px #000; /* Opera 10.5, IE 9.0 */
+ background: #DDD none;
+ color: #222;
+ border-top: 1px solid #8EAC91;
+ line-height: 1.25em;
+ padding: 2em 5em;
+ -webkit-border-bottom-right-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
}
+
#footer {
- clear: both;
- height: 130px;
- margin-bottom: 1.25em;
- background: #333 none;
- color: #FFF;
-}
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ color: #999;
+ border-top: 1px solid #444;
+ background-color: #555;
+ text-shadow: 1px 1px 2px #222;
+}
+#footer .container {
+ position: relative;
+ margin: 1em 1.5em 2.5em 1.5em;
+}
+
+
+#content table {
+ width: 100%;
+ margin: 1em 0;
+}
+#content table th {
+ font-weight: bold;
+ padding-bottom: 3px;
+ border-bottom: 2px solid #222;
+}
+#content table td {
+ border-bottom: 1px solid #AAA;
+ padding: 0.3em 0 0.5em 0;
+}
+#content table tr.last td {
+ border-bottom: none;
+}
View
@@ -12,20 +12,23 @@
</head>
<body>
- <div id="wrapper">
- <div id="header">
- <div class="container">
- Header
- </div>
- </div>
- <div id="nav">
- <ul class="clearfix">
- <li><a href="/">Home</a></li>
- </ul>
- </div>
- <div id="content" class="clearfix">
- <div class="container">
- <%= yield %>
+ <div id='site_wrapper'>
+ <div id='page_wrapper'>
+ <div id='content_wrapper'>
+ <div id='header'>
+ <div class='container'>
+ <h1>Header</h1>
+ </div>
+ </div>
+ <div id="nav">
+ <ul class="clearfix">
+ <li><a href="/">Home</a></li>
+ <li><a href="/#other">Other Page</a></li>
+ </ul>
+ </div>
+ <div id="content" class="clearfix">
+ <%= yield %>
+ </div>
</div>
</div>
<div id="footer">
@@ -34,5 +37,7 @@
</div>
</div>
</div>
+
+ <!-- JS goes here -->
</body>
</html>

0 comments on commit 1baa299

Please sign in to comment.