multiline support for shout; middle class added for centering anything

This commit is contained in:
Vadim Makeev 2011-08-01 01:42:17 +04:00
parent d01db8506d
commit 2fc8a17b04
4 changed files with 40 additions and 2 deletions

10
en.htm
View File

@ -82,6 +82,14 @@
</ol>
</section>
</div></div>
<div class="slide" id="InTheMiddle"><div>
<section>
<header>
<h2>In the Middle</h2>
</header>
<object data="pictures/semantics.svg" type="image/svg+xml" width="300" height="300" class="middle"></object>
</section>
</div></div>
<div class="slide bg" id="Picture"><div>
<section>
<header>
@ -125,7 +133,7 @@
<div class="slide shout" id="Shout"><div>
<section>
<header>
<h2>Shout!</h2>
<h2>Warning<br>Message</h2>
</header>
</section>
</div></div>

6
pictures/semantics.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256.155 256.155">
<title>HTML5 Semantics Logo</title>
<polygon id="chevron" fill="#0174A7" points="128.106,0 0,64.744 0,107.32 128.106,42.577 256.155,107.32 256.155,64.744"/>
<use xlink:href="#chevron" y="74.316" />
<use xlink:href="#chevron" y="148.653" />
</svg>

After

Width:  |  Height:  |  Size: 375 B

8
ru.htm
View File

@ -82,6 +82,14 @@
</ol>
</section>
</div></div>
<div class="slide" id="InTheMiddle"><div>
<section>
<header>
<h2>Посередине</h2>
</header>
<object data="pictures/semantics.svg" type="image/svg+xml" width="300" height="300" class="middle"></object>
</section>
</div></div>
<div class="slide bg" id="Picture"><div>
<section>
<header>

View File

@ -195,11 +195,15 @@ BODY {
position:absolute;
top:50%;
left:0;
margin:-80px 0 0;
width:100%;
text-align:center;
line-height:1;
font-size:150px;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
.slide.shout H2 A {
margin:0;
@ -208,6 +212,18 @@ BODY {
content:'';
}
/* Middle */
.middle {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
/* List
---------------------------------------- */
.list {