Skip to content

Commit

Permalink
prettier demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@liabru
liabru committed May 20, 2014
1 parent ae0a825 commit f7ea426
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 24 deletions.
71 changes: 58 additions & 13 deletions test.css
View file
Expand Up @@ -6,9 +6,10 @@
}

body {
background: #222;
background: #033649;
font-family: Georgia, Times, "Times New Roman", serif;
color: #aaa;
color: #fff;
border: 9px solid #fff;
}

h1 {
Expand All @@ -29,7 +30,7 @@ h2 {

p, ul li {
margin: 0 0 1em 0;
color: #bbb;
color: #bebebe;
font-size: 12px;
}

Expand All @@ -43,7 +44,7 @@ ul {
}

a, a:link, a:visited, a:active, a:hover {
color: #aaa;
color: #ccc;
text-decoration: none;
border-bottom: 1px solid #555;
padding: 0 0 2px 0;
Expand All @@ -52,7 +53,7 @@ a, a:link, a:visited, a:active, a:hover {
.container {
width: 80%;
margin: 0 auto;
padding: 80px 20px;
padding: 60px 20px;
}

.nav-sep {
Expand All @@ -66,12 +67,18 @@ a, a:link, a:visited, a:active, a:hover {

.controls .checkbox {
float: left;
font-size: 13px;
color: #ddd;
margin: 5px 20px 5px 0;
}

.test-remove {
padding: 5px;
margin: -5px 20px;
margin: -8px 20px 0 20px;
line-height: 1;
border: 0;
background: #ddd;
color: #555;
padding: 7px 10px;
}

/* test items */
Expand All @@ -86,10 +93,48 @@ a, a:link, a:visited, a:active, a:hover {
display: block;
float: left;
width: 23%;
background: #444;
background: #00A0B0;
}

.item p {
color: rgba(255,255,255,0.6);
line-height: 1.5;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.item h2,
.item h3,
.item h4 {
color: #fff;
margin: 0 0 1em 0;
font-weight: normal;
}

.item h2 {
font-size: 24px;
}

.item h3 {
font-size: 20px;
}

.item h4 {
font-size: 16px;
}

.item-0 { background: #00A0B0; border-color: #008795 !important; }
.item-1 { background: #6A4A3C; border-color: #52392e !important; }
.item-2 { background: #CC333F; border-color: #ad2b35 !important; }
.item-3 { background: #EB6841; border-color: #ca5938 !important; }
.item-4 { background: #EDC951; border-color: #d8b74a !important; }
.item-5 { background: #00A0B0; border-color: #008795 !important; }
.item-6 { background: #6A4A3C; border-color: #52392e !important; }
.item-7 { background: #CC333F; border-color: #ad2b35 !important; }
.item-8 { background: #EB6841; border-color: #ca5938 !important; }
.item-9 { background: #EDC951; border-color: #d8b74a !important; }
.item-10 { background: #00A0B0; border-color: #008795 !important; }
.item-11 { background: #6A4A3C; border-color: #52392e !important; }

.item img {
display: block;
max-width: 100%;
Expand Down Expand Up @@ -130,23 +175,23 @@ a, a:link, a:visited, a:active, a:hover {
/* test a mix of border widths */

.test-border .item {
border: 1px solid #ccc;
border: 1px solid #eee;
}

.test-border .item-2 {
border: 3px solid #ccc;
border: 3px solid #eee;
}

.test-border .item-3 {
border: 6px solid #ccc;
border: 6px solid #eee;
}

.test-border .item-5 {
border: 8px solid #ccc;
border: 8px solid #eee;
}

.test-border .item-8 {
border: 10px solid #ccc;
border: 10px solid #eee;
}

/* test border-box */
Expand Down
29 changes: 18 additions & 11 deletions test.html
View file
Expand Up @@ -86,57 +86,64 @@ <h1>jquery.matchHeight Tests</h1>
</div>
<div class="checkbox">
<label>
<input class="test-remove" type="submit" value="remove all">
<input class="test-remove" type="submit" value="remove matchHeight">
</label>
</div>
</div>

<div class="items-container">
<div class="item item-0">
<p>Lorem ipsum dolor sit amet.</p>
<h2>Lorem ipsum</h2>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
</div>
<div class="item item-1">
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
</div>
<div class="item item-2">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel. Nullam odio eros, sagittis vitae lectus id, pretium viverra lectus. Etiam auctor dolor non dui ultricies pulvinar.</p>
</div>

<div class="item item-3">
<h3>Lorem ipsum dolor</h3>
<p>Aenean semper.</p>
</div>
<div class="item item-4">
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
</div>
<div class="item item-5">
<h3>Lorem ipsum dolor</h3>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
</div>
<div class="item item-6">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="item item-7">
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
</div>

<div class="item item-8">
<img src="http://placehold.it/800x150" alt="a test image">
<img src="http://placehold.it/800x150/fafafa/666" alt="a test image">
</div>
<div class="item item-9">
<img src="http://placehold.it/800x180" alt="a test image">
<img src="http://placehold.it/800x180/fafafa/666" alt="a test image">
</div>
<div class="item item-10">
<img src="http://placehold.it/800x200" alt="a test image">
<img src="http://placehold.it/800x200/fafafa/666" alt="a test image">
</div>
<div class="item item-11">
<img src="http://placehold.it/800x220" alt="a test image">
<img src="http://placehold.it/800x220/fafafa/666" alt="a test image">
</div>
</div>

<div class="items-container big-items">
<div class="item item-0">
<p>Lorem ipsum dolor sit amet.</p>
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
Expand Down Expand Up @@ -168,19 +175,19 @@ <h1>jquery.matchHeight Tests</h1>

<div class="data-test-items">
<div class="item item-0" data-match-height="items-a">
<p>data-match-height="items-a"</p>
<h3>data-match-height="items-a"</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
</div>
<div class="item item-1" data-match-height="items-a">
<p>data-match-height="items-a"</p>
<h3>data-match-height="items-a"</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
</div>
<div class="item item-2" data-mh="items-b">
<p>data-mh="items-b"</p>
<h3>data-mh="items-b"</h3>
<p>In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
</div>
<div class="item item-3" data-mh="items-b">
<p>data-mh="items-b"</p>
<h3>data-mh="items-b"</h3>
<p>Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
</div>
</div>
Expand Down

0 comments on commit f7ea426

Please sign in to comment.