Skip to content

Commit f7ea426

Browse files
liabruliabru
committed
prettier demo
1 parent ae0a825 commit f7ea426

File tree

2 files changed

+76
-24
lines changed

2 files changed

+76
-24
lines changed

‎test.css

+58-13
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
}
77

88
body {
9-
background: #222;
9+
background: #033649;
1010
font-family: Georgia, Times, "Times New Roman", serif;
11-
color: #aaa;
11+
color: #fff;
12+
border: 9px solid #fff;
1213
}
1314

1415
h1 {
@@ -29,7 +30,7 @@ h2 {
2930

3031
p, ul li {
3132
margin: 0 0 1em 0;
32-
color: #bbb;
33+
color: #bebebe;
3334
font-size: 12px;
3435
}
3536

@@ -43,7 +44,7 @@ ul {
4344
}
4445

4546
a, a:link, a:visited, a:active, a:hover {
46-
color: #aaa;
47+
color: #ccc;
4748
text-decoration: none;
4849
border-bottom: 1px solid #555;
4950
padding: 0 0 2px 0;
@@ -52,7 +53,7 @@ a, a:link, a:visited, a:active, a:hover {
5253
.container {
5354
width: 80%;
5455
margin: 0 auto;
55-
padding: 80px 20px;
56+
padding: 60px 20px;
5657
}
5758

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

6768
.controls .checkbox {
6869
float: left;
70+
font-size: 13px;
71+
color: #ddd;
6972
margin: 5px 20px 5px 0;
7073
}
7174

7275
.test-remove {
73-
padding: 5px;
74-
margin: -5px 20px;
76+
margin: -8px 20px 0 20px;
77+
line-height: 1;
78+
border: 0;
79+
background: #ddd;
80+
color: #555;
81+
padding: 7px 10px;
7582
}
7683

7784
/* test items */
@@ -86,10 +93,48 @@ a, a:link, a:visited, a:active, a:hover {
8693
display: block;
8794
float: left;
8895
width: 23%;
89-
background: #444;
96+
background: #00A0B0;
97+
}
98+
99+
.item p {
100+
color: rgba(255,255,255,0.6);
101+
line-height: 1.5;
102+
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
103+
}
104+
105+
.item h2,
106+
.item h3,
107+
.item h4 {
90108
color: #fff;
109+
margin: 0 0 1em 0;
110+
font-weight: normal;
91111
}
92112

113+
.item h2 {
114+
font-size: 24px;
115+
}
116+
117+
.item h3 {
118+
font-size: 20px;
119+
}
120+
121+
.item h4 {
122+
font-size: 16px;
123+
}
124+
125+
.item-0 { background: #00A0B0; border-color: #008795 !important; }
126+
.item-1 { background: #6A4A3C; border-color: #52392e !important; }
127+
.item-2 { background: #CC333F; border-color: #ad2b35 !important; }
128+
.item-3 { background: #EB6841; border-color: #ca5938 !important; }
129+
.item-4 { background: #EDC951; border-color: #d8b74a !important; }
130+
.item-5 { background: #00A0B0; border-color: #008795 !important; }
131+
.item-6 { background: #6A4A3C; border-color: #52392e !important; }
132+
.item-7 { background: #CC333F; border-color: #ad2b35 !important; }
133+
.item-8 { background: #EB6841; border-color: #ca5938 !important; }
134+
.item-9 { background: #EDC951; border-color: #d8b74a !important; }
135+
.item-10 { background: #00A0B0; border-color: #008795 !important; }
136+
.item-11 { background: #6A4A3C; border-color: #52392e !important; }
137+
93138
.item img {
94139
display: block;
95140
max-width: 100%;
@@ -130,23 +175,23 @@ a, a:link, a:visited, a:active, a:hover {
130175
/* test a mix of border widths */
131176

132177
.test-border .item {
133-
border: 1px solid #ccc;
178+
border: 1px solid #eee;
134179
}
135180

136181
.test-border .item-2 {
137-
border: 3px solid #ccc;
182+
border: 3px solid #eee;
138183
}
139184

140185
.test-border .item-3 {
141-
border: 6px solid #ccc;
186+
border: 6px solid #eee;
142187
}
143188

144189
.test-border .item-5 {
145-
border: 8px solid #ccc;
190+
border: 8px solid #eee;
146191
}
147192

148193
.test-border .item-8 {
149-
border: 10px solid #ccc;
194+
border: 10px solid #eee;
150195
}
151196

152197
/* test border-box */

‎test.html

+18-11
Original file line numberDiff line numberDiff line change
@@ -86,57 +86,64 @@ <h1>jquery.matchHeight Tests</h1>
8686
</div>
8787
<div class="checkbox">
8888
<label>
89-
<input class="test-remove" type="submit" value="remove all">
89+
<input class="test-remove" type="submit" value="remove matchHeight">
9090
</label>
9191
</div>
9292
</div>
9393

9494
<div class="items-container">
9595
<div class="item item-0">
96-
<p>Lorem ipsum dolor sit amet.</p>
96+
<h2>Lorem ipsum</h2>
9797
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
9898
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
9999
</div>
100100
<div class="item item-1">
101+
<h3>Lorem ipsum dolor</h3>
101102
<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>
102103
</div>
103104
<div class="item item-2">
105+
<h4>Lorem ipsum dolor sit amet.</h4>
104106
<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>
105107
</div>
106108

107109
<div class="item item-3">
110+
<h3>Lorem ipsum dolor</h3>
108111
<p>Aenean semper.</p>
109112
</div>
110113
<div class="item item-4">
114+
<h3>Lorem ipsum dolor</h3>
111115
<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>
112116
</div>
113117
<div class="item item-5">
118+
<h3>Lorem ipsum dolor</h3>
114119
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
115120
</div>
116121
<div class="item item-6">
122+
<h3>Lorem ipsum dolor</h3>
117123
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
118124
</div>
119125
<div class="item item-7">
126+
<h3>Lorem ipsum dolor</h3>
120127
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
121128
</div>
122129

123130
<div class="item item-8">
124-
<img src="http://placehold.it/800x150" alt="a test image">
131+
<img src="http://placehold.it/800x150/fafafa/666" alt="a test image">
125132
</div>
126133
<div class="item item-9">
127-
<img src="http://placehold.it/800x180" alt="a test image">
134+
<img src="http://placehold.it/800x180/fafafa/666" alt="a test image">
128135
</div>
129136
<div class="item item-10">
130-
<img src="http://placehold.it/800x200" alt="a test image">
137+
<img src="http://placehold.it/800x200/fafafa/666" alt="a test image">
131138
</div>
132139
<div class="item item-11">
133-
<img src="http://placehold.it/800x220" alt="a test image">
140+
<img src="http://placehold.it/800x220/fafafa/666" alt="a test image">
134141
</div>
135142
</div>
136143

137144
<div class="items-container big-items">
138145
<div class="item item-0">
139-
<p>Lorem ipsum dolor sit amet.</p>
146+
<h3>Lorem ipsum dolor</h3>
140147
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
141148
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
142149
<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>
@@ -168,19 +175,19 @@ <h1>jquery.matchHeight Tests</h1>
168175

169176
<div class="data-test-items">
170177
<div class="item item-0" data-match-height="items-a">
171-
<p>data-match-height="items-a"</p>
178+
<h3>data-match-height="items-a"</h3>
172179
<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>
173180
</div>
174181
<div class="item item-1" data-match-height="items-a">
175-
<p>data-match-height="items-a"</p>
182+
<h3>data-match-height="items-a"</h3>
176183
<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>
177184
</div>
178185
<div class="item item-2" data-mh="items-b">
179-
<p>data-mh="items-b"</p>
186+
<h3>data-mh="items-b"</h3>
180187
<p>In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
181188
</div>
182189
<div class="item item-3" data-mh="items-b">
183-
<p>data-mh="items-b"</p>
190+
<h3>data-mh="items-b"</h3>
184191
<p>Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
185192
</div>
186193
</div>

0 commit comments

Comments
 (0)