multiline support for shout; middle class added for centering anything
This commit is contained in:
parent
d01db8506d
commit
2fc8a17b04
10
en.htm
10
en.htm
|
@ -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>
|
||||
|
|
|
@ -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
8
ru.htm
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue