Skip to content

Commit 78379d9

Browse files
kaixiongkaixiong
committed
Use <section> and <h1> for section titles for better HTML5 outlining, use <small> for footer small print, and add page language information
1 parent 362da17 commit 78379d9

File tree

3 files changed

+58
-62
lines changed

3 files changed

+58
-62
lines changed

‎css/style.css

+19-26
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,6 @@ h1, h2, h3, h4, h5, h6 {
2121
font-weight: normal;
2222
}
2323

24-
h1 {
25-
font-size: 1.8em;
26-
}
27-
28-
h2 {
29-
font-size: 1.6em;
30-
}
31-
32-
h3 {
33-
font-size: 1.4em;
34-
}
35-
3624
p {
3725
margin: 0 0 1em 0;
3826
}
@@ -48,7 +36,7 @@ p {
4836
width: 960px;
4937
margin: 0 auto;
5038
padding: 10px 30px;
51-
background: url('images/background.png?1358312581') no-repeat top center;
39+
background: url('images/background.png?1359126515') no-repeat top center;
5240
}
5341
#page:before, #page:after {
5442
content: "";
@@ -57,6 +45,10 @@ p {
5745
#page:after {
5846
clear: both;
5947
}
48+
#page.front > section > section > h1 {
49+
font-size: 2.333em;
50+
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 5px;
51+
}
6052

6153
header {
6254
clear: both;
@@ -131,6 +123,9 @@ header .current-ver {
131123
margin-bottom: 20px;
132124
height: 200px;
133125
}
126+
#feature > h1 {
127+
display: none;
128+
}
134129

135130
#feature-left {
136131
float: left;
@@ -187,15 +182,18 @@ header .current-ver {
187182
padding: 20px 0;
188183
margin-bottom: 10px;
189184
}
185+
#content > h1 {
186+
display: none;
187+
}
190188
#content .project-name {
191189
color: white;
192190
}
193191

194192
#content-left {
195193
float: left;
196-
width: 33.33333%;
194+
width: 33.333%;
197195
margin-left: 0%;
198-
margin-right: -33.33333%;
196+
margin-right: -33.333%;
199197
padding-left: 10px;
200198
padding-right: 10px;
201199
-moz-box-sizing: border-box;
@@ -210,9 +208,9 @@ header .current-ver {
210208

211209
#content-middle {
212210
float: left;
213-
width: 33.33333%;
214-
margin-left: 33.33333%;
215-
margin-right: -66.66667%;
211+
width: 33.333%;
212+
margin-left: 33.333%;
213+
margin-right: -66.667%;
216214
padding-left: 10px;
217215
padding-right: 10px;
218216
-moz-box-sizing: border-box;
@@ -227,8 +225,8 @@ header .current-ver {
227225

228226
#content-right {
229227
float: left;
230-
width: 33.33333%;
231-
margin-left: 66.66667%;
228+
width: 33.333%;
229+
margin-left: 66.667%;
232230
margin-right: -100%;
233231
padding-left: 10px;
234232
padding-right: 10px;
@@ -242,11 +240,6 @@ header .current-ver {
242240
_overflow-y: visible;
243241
}
244242

245-
.block .title {
246-
font-size: 2.333em;
247-
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 5px;
248-
}
249-
250243
footer {
251244
clear: both;
252245
float: left;
@@ -263,7 +256,6 @@ footer {
263256
_display: inline;
264257
_overflow: hidden;
265258
_overflow-y: visible;
266-
font-size: 0.8666em;
267259
padding-top: 20px;
268260
padding-bottom: 20px;
269261
}
@@ -283,6 +275,7 @@ footer {
283275
}
284276
.image-anim-container .image-anim-frame {
285277
position: absolute;
278+
overflow: hidden;
286279
right: 0;
287280
bottom: 0;
288281
}

‎css/style.scss

+13-12
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@ h1, h2, h3, h4, h5, h6 {
4848
font-weight: normal;
4949
}
5050

51-
h1 { font-size: 1.8em; }
52-
h2 { font-size: 1.6em; }
53-
h3 { font-size: 1.4em; }
54-
5551
p {
5652
margin: 0 0 1em 0;
5753
}
@@ -68,6 +64,11 @@ p {
6864
margin: 0 auto;
6965
padding: 10px 30px;
7066
background: image-url('background.png') no-repeat top center;
67+
68+
&.front > section > section > h1 {
69+
font-size: 2.333em;
70+
@include text-shadow(rgba(black, 0.7) 0px 0px 5px);
71+
}
7172
}
7273

7374
header {
@@ -114,6 +115,10 @@ header {
114115

115116
margin-bottom: 20px;
116117
height: 200px; // FIXME: Remove hard-coded height
118+
119+
& > h1 {
120+
display: none;
121+
}
117122
}
118123

119124
#feature-left { @include zen-grid-item(6,1); }
@@ -127,6 +132,10 @@ header {
127132
padding: 20px 0;
128133
margin-bottom: 10px;
129134

135+
& > h1 {
136+
display: none;
137+
}
138+
130139
.project-name {
131140
color: white;
132141
}
@@ -136,18 +145,10 @@ header {
136145
#content-middle { @include zen-grid-item(4,5); }
137146
#content-right { @include zen-grid-item(4,9); }
138147

139-
.block {
140-
.title {
141-
font-size: 2.333em;
142-
@include text-shadow(rgba(black, 0.7) 0px 0px 5px);
143-
}
144-
}
145-
146148
footer {
147149
@include zen-clear(both);
148150
@include zen-grid-item(12,1);
149151

150-
font-size: 0.8666em;
151152
padding: { top: 20px; bottom: 20px; }
152153
}
153154

‎index.html

+26-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22

3-
<html class="no-js">
3+
<html lang="en" class="no-js">
44

55
<head>
66
<title>Libvisual - Make your music pretty</title>
@@ -25,45 +25,47 @@
2525

2626
<body>
2727

28-
<div id="page">
28+
<div id="page" class="front">
2929
<header>
3030
<a id="site-name" title="Homepage" href="/"><h1>Libvisual</h1></a>
3131
<p class="tagline">Make your music pretty</p>
3232
<p class="download"><span class="current-ver">0.5.0</span> beta &gt; <a href="https://github.com/Libvisual/libvisual">download</a></p>
3333
</header>
3434

35-
<div id="feature">
36-
<div id="feature-left" class="block">
37-
<h3 class="title">We are back!</h3>
35+
<section id="feature">
36+
<h1>Featured</h1>
37+
<section id="feature-left">
38+
<h1>We are back!</h1>
3839
<p>After a 5-year hiatus, we are back! Progress is moving
3940
swiftly on the next stable release 0.5.0. Among the
4041
changes already made are, a new CMake build system,
4142
Android support, and a new commandline tool for running
4243
visualizations. We also have a new
4344
Wiki <a target="lv-wiki"
4445
href="https://github.com/Libvisual/libvisual/wiki">here</a>.</p>
45-
</div>
46-
<div id="feature-right" class="block">
47-
<h3 class="title">Working with LV</h3>
46+
</section>
47+
<section id="feature-right">
48+
<h1>Working with LV</h1>
4849
<p>We are now on <a target="lv-github-page" href="https://github.com/Libvisual/libvisual">GitHub</a> and use Git for versioning.</p>
4950
<p class="code" style="letter-spacing:-0.025em;">git clone https://github.com/Libvisual/libvisual.git
5051
cd libvisual; cmake . &amp;&amp; make install</p>
51-
</div>
52-
</div> <!-- feature -->
52+
</section>
53+
</section> <!-- feature -->
5354

54-
<div id="content">
55-
<div id="content-left" class="block">
56-
<h2 class="title">About <span class="project-name">LV</span></h2>
55+
<section id="content">
56+
<h1>Information</h1>
57+
<section id="content-left">
58+
<h1>About <span class="project-name">LV</span></h1>
5759
<p>Libvisual instantly transforms your favourite music into
5860
psychedelic art. It works by running audio streams through
5961
an impressive array of
6062
<a href="#">effects</a> that crunches the waveform into pixels. With the right
6163
<a href="#">drivers</a>, you can display visuals on just about anything.
6264
</p>
63-
</div> <!-- content-left -->
65+
</section> <!-- content-left -->
6466

65-
<div id="content-middle" class="block">
66-
<h2 class="title">Use <span class="project-name">LV</span></h2>
67+
<section id="content-middle">
68+
<h1>Use <span class="project-name">LV</span></h1>
6769
<p>Get a taste of Libvisual by trying out the latest
6870
development snapshot off
6971
our <a href="https://github.com/Libvisual/libvisual">GitHub
@@ -73,11 +75,11 @@ <h2 class="title">Use <span class="project-name">LV</span></h2>
7375
be found in the
7476
<a href="https://github.com/Libvisual/libvisual/wiki/UserGuide">user
7577
guide.</a>
76-
</p>
77-
</div> <!-- content-middle -->
78+
</p>
79+
</section> <!-- content-middle -->
7880

79-
<div id="content-right" class="block">
80-
<h2 class="title">Develop <span class="project-name">LV</span></h2>
81+
<section id="content-right">
82+
<h1>Develop <span class="project-name">LV</span></h1>
8183
<p>We need all the help we can get to bring Libvisual to the
8284
next level. Areas that need always work
8385
are <a href="#">coding</a>,
@@ -86,12 +88,12 @@ <h2 class="title">Develop <span class="project-name">LV</span></h2>
8688
our <a href="#">mailing list</a>, or drop by our IRC channel
8789
on FreeNode <a href="irc://freenode.org/libvisual">#libvisual</a>.
8890
</p>
89-
</div> <!-- content-right -->
90-
</div>
91+
</section> <!-- content-right -->
92+
</section>
9193

9294
<footer>
93-
<span id="credits">Libvisual is Free, Open Source Software.</span>
94-
<span id="copyright">Copyleft 2005-2013 All Rights Preserved.</span>
95+
<small id="credits">Libvisual is Free, Open Source Software.</small>
96+
<small id="copyright">Copyleft 2005-2013 All Rights Preserved.</small>
9597
</footer>
9698

9799
</div> <!-- page -->

0 commit comments

Comments
 (0)