Skip to content

Commit

Permalink
add box and well patterns, tweak typography margins
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickarlt
patrickarlt committed Jun 20, 2012
1 parent e920955 commit 0f215f5
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 37 deletions.
58 changes: 45 additions & 13 deletions assets/css/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ table {

/* line 49, ../sass/lib/_preboot.scss */
body {
background-image: url("/img/background-pattern.png");
background: #f2f2f2;
color: #2e2e2e;
}
/* line 61, ../../../../../.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2.rc.0/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
Expand Down Expand Up @@ -1444,58 +1444,60 @@ p {
margin-bottom: 1.5em;
font-size: 0.875em;
line-height: 1.714em;
margin-top: 0;
}
/* line 69, ../sass/lib/_typography.scss */
/* line 70, ../sass/lib/_typography.scss */
p.large {
font-size: 1.125em;
line-height: 1.333em;
}
/* line 72, ../sass/lib/_typography.scss */
/* line 73, ../sass/lib/_typography.scss */
p.small {
font-size: 0.813em;
line-height: 1.846em;
}

/* line 79, ../sass/lib/_typography.scss */
/* line 80, ../sass/lib/_typography.scss */
a {
color: #27adec;
text-decoration: none;
}
/* line 82, ../sass/lib/_typography.scss */
/* line 83, ../sass/lib/_typography.scss */
a:hover, a:focus {
color: #55c8fe;
text-decoration: underline;
}

/* line 90, ../sass/lib/_typography.scss */
/* line 91, ../sass/lib/_typography.scss */
ul, ol {
font-size: 0.875em;
line-height: 1.714em;
margin-top: 1.5em;
margin-bottom: 1.5em;
padding-left: 1.25em;
margin-top: 0;
}

/* line 99, ../sass/lib/_typography.scss */
/* line 100, ../sass/lib/_typography.scss */
dl {
font-size: 0.875em;
line-height: 1.714em;
margin-top: 0;
}
/* line 101, ../sass/lib/_typography.scss */
/* line 103, ../sass/lib/_typography.scss */
dl dt {
font-size: 1.125em;
line-height: 1.333em;
color: #1f1f1f;
font-family: "PTSans";
font-weight: 700;
}
/* line 107, ../sass/lib/_typography.scss */
/* line 109, ../sass/lib/_typography.scss */
dl dd {
margin: 0;
margin-bottom: 1.5em;
}

/* line 115, ../sass/lib/_typography.scss */
/* line 117, ../sass/lib/_typography.scss */
code {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
Expand All @@ -1506,7 +1508,7 @@ code {
background: #ebebeb;
padding: .25em;
}
/* line 120, ../sass/lib/_typography.scss */
/* line 122, ../sass/lib/_typography.scss */
code[lang] {
font-size: 0.875em;
line-height: 1.714em;
Expand All @@ -1520,7 +1522,7 @@ code[lang] {
display: block;
}

/* line 133, ../sass/lib/_typography.scss */
/* line 135, ../sass/lib/_typography.scss */
abbr[title] {
cursor: help;
}
Expand Down Expand Up @@ -2448,6 +2450,36 @@ input[type="submit"][class^="icon-"]::before, input[type="submit"][type=search]:
text-shadow: 0 -1px 0 #e37b2f;
}

/* line 89, ../sass/lib/_patterns.scss */
.box, .well {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border-style: solid;
border-width: 0.063em;
padding: 1.438em;
}

/* line 94, ../sass/lib/_patterns.scss */
.box {
-webkit-box-shadow: 0 1px 1px #a6a6a6;
-moz-box-shadow: 0 1px 1px #a6a6a6;
box-shadow: 0 1px 1px #a6a6a6;
background: white;
border-color: #cccccc;
}

/* line 100, ../sass/lib/_patterns.scss */
.well {
-webkit-box-shadow: inset 0 1px 1px #a6a6a6, 0 1px 1px white;
-moz-box-shadow: inset 0 1px 1px #a6a6a6, 0 1px 1px white;
box-shadow: inset 0 1px 1px #a6a6a6, 0 1px 1px white;
background: #ebebeb;
border-color: #cccccc;
}

/* line 1, ../sass/demo.scss */
.row {
width: 100%;
Expand Down
17 changes: 17 additions & 0 deletions assets/sass/lib/_patterns.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,21 @@

.icon-close {
@extend .icon-cancel
}

.box, .well {
@include border-radius(4px);
@include rhythm-borders(1px, 1);
}

.box {
@include box-shadow(0 1px 1px $lightGray);
background: $white;
border-color: $lighterGray;
}

.well {
@include box-shadow(inset 0 1px 1px $lightGray, 0 1px 1px $white);
background: $lightestGray;
border-color: $lighterGray;
}
2 changes: 1 addition & 1 deletion assets/sass/lib/_preboot.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,6 @@ $linkHover: $lightBlue;

body {
@include establish-baseline(16px);
background-image: url("/img/background-pattern.png");
background: #f2f2f2;
color: #2e2e2e;
}
4 changes: 3 additions & 1 deletion assets/sass/lib/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ blockquote {
p {
@include trailer(1);
@include adjust-font-size-to(14px);
margin-top:0;
&.large {
@include adjust-font-size-to(18px);
}
Expand All @@ -89,15 +90,16 @@ a {

ul, ol {
@include adjust-font-size-to(14px);
@include leader(1);
@include trailer(1);
padding-left: 1.25em;
margin-top:0;
li {
}
}

dl {
@include adjust-font-size-to(14px);
margin-top:0;
dt {
@include adjust-font-size-to(18px);
color: $darkestGray;
Expand Down
48 changes: 26 additions & 22 deletions views/index.erubis
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,31 +182,34 @@
<div class="row">
<div class="lists">
<h3 class="divider">Lists</h3>
<dl>
<dt>Dolor sit amet</dt>
<dd>Aliquam tincidunt mauris eu risus.</dd>
<dt>Vestibulum</dt>
<dd>Aliquam tincidunt mauris eu risus.</dd>
<dt>Dapibus neque</dt>
<dd>Consectetuer adipiscing elit.</dd>
</dl>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<div class="well">
<dl>
<dt>Dolor sit amet</dt>
<dd>Aliquam tincidunt mauris eu risus.</dd>
<dt>Vestibulum</dt>
<dd>Aliquam tincidunt mauris eu risus.</dd>
<dt>Dapibus neque</dt>
<dd>Consectetuer adipiscing elit.</dd>
</dl>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</div>
</div>
<div class="paragraphs">
<h3 class="divider">Paragraphs &amp; Code</h3>
<p><abbr title="How should I know?">Pellentesque</abbr> habitant <em>morbi</em> tristique <strong>senectus</strong> et netus et <code>malesuada</code> fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<code class="block" lang="javascript">http.createServer(function (request, response) {
<div class="box">
<p><abbr title="How should I know?">Pellentesque</abbr> habitant <em>morbi</em> tristique <strong>senectus</strong> et netus et <code>malesuada</code> fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<code class="block" lang="javascript">http.createServer(function (request, response) {
path.exists(filePath, function(exists) {
if (exists) {
fs.readFile(filePath, function(error, content) {
Expand All @@ -218,6 +221,7 @@
}
});
}).listen(8125);</code>
</div>
</div>

</div>
Expand Down

0 comments on commit 0f215f5

Please sign in to comment.