Skip to content

M
my-cucumbers-ru-github-io
Commit 81c1e19f authored by Vadim Makeev's avatar Vadim Makeev
Browse files
Options

webkit and firefox extra space bug fixed

parent 0efa58cc
Show whitespace changes
Inline Side-by-side
Showing with 170 additions and 174 deletions
index.htm
View file @ 81c1e19f
...@@ -17,15 +17,15 @@ ...@@ -17,15 +17,15 @@
<h1>Shower Presentation Template</h1> <h1>Shower Presentation Template</h1>
<p>Vadim Makeev, Opera Software</p> <p>Vadim Makeev, Opera Software</p>
</header> </header>
<div class="slide bg" id="Cover"> <div class="slide bg" id="Cover"><div>
<section> <section>
<header> <header>
<h2>Shower Presentation Template</h2> <h2>Shower Presentation Template</h2>
</header> </header>
<img src="pictures/cover.jpg" alt=""> <img src="pictures/cover.jpg" alt="">
</section> </section>
</div> </div></div>
<div class="slide" id="Header"> <div class="slide" id="Header"><div>
<section> <section>
<header> <header>
<h2>Header</h2> <h2>Header</h2>
...@@ -33,16 +33,16 @@ ...@@ -33,16 +33,16 @@
<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#TwoLinesHeader">next slide</a> may or may not crash <em>your</em> browser…</p> <p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#TwoLinesHeader">next slide</a> may or may not crash <em>your</em> browser…</p>
<p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p> <p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
</section> </section>
</div> </div></div>
<div class="slide" id="TwoLinesHeader"> <div class="slide" id="TwoLinesHeader"><div>
<section> <section>
<header> <header>
<h2>Two rows.<br>Mighty heading</h2> <h2>Two rows.<br>Mighty heading</h2>
</header> </header>
<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#Header">previous slide</a> may or may not crash <em>your</em> browser…</p> <p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#Header">previous slide</a> may or may not crash <em>your</em> browser…</p>
</section> </section>
</div> </div></div>
<div class="slide" id="UnorderedList"> <div class="slide" id="UnorderedList"><div>
<section> <section>
<header> <header>
<h2>Unordered List</h2> <h2>Unordered List</h2>
...@@ -60,8 +60,8 @@ ...@@ -60,8 +60,8 @@
<li>Erase your hard drive…</li> <li>Erase your hard drive…</li>
</ul> </ul>
</section> </section>
</div> </div></div>
<div class="slide" id="OrderedList"> <div class="slide" id="OrderedList"><div>
<section> <section>
<header> <header>
<h2>Ordered List</h2> <h2>Ordered List</h2>
...@@ -79,16 +79,16 @@ ...@@ -79,16 +79,16 @@
<li>Erase your hard drive…</li> <li>Erase your hard drive…</li>
</ol> </ol>
</section> </section>
</div> </div></div>
<div class="slide bg progress-off" id="Picture"> <div class="slide bg progress-off" id="Picture"><div>
<section> <section>
<header> <header>
<h2>Picture</h2> <h2>Picture</h2>
</header> </header>
<img src="pictures/picture.jpg" alt=""> <img src="pictures/picture.jpg" alt="">
</section> </section>
</div> </div></div>
<div class="slide" id="CodeSample"> <div class="slide" id="CodeSample"><div>
<section> <section>
<header> <header>
<h2>Code Sample</h2> <h2>Code Sample</h2>
...@@ -103,8 +103,8 @@ ...@@ -103,8 +103,8 @@
<code><em>&lt;/head&gt;</em></code> <code><em>&lt;/head&gt;</em></code>
</pre> </pre>
</section> </section>
</div> </div></div>
<div class="slide" id="CodeNotes"> <div class="slide" id="CodeNotes"><div>
<section> <section>
<header> <header>
<h2>Code Notes</h2> <h2>Code Notes</h2>
...@@ -118,22 +118,22 @@ ...@@ -118,22 +118,22 @@
</pre> </pre>
<p class="note">Lock up your machine</p> <p class="note">Lock up your machine</p>
</section> </section>
</div> </div></div>
<div class="slide shout" id="Shout"> <div class="slide shout" id="Shout"><div>
<section> <section>
<header> <header>
<h2>Shout!</h2> <h2>Shout!</h2>
</header> </header>
</section> </section>
</div> </div></div>
<div class="slide shout" id="Demo"> <div class="slide shout" id="Demo"><div>
<section> <section>
<header> <header>
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2> <h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
</header> </header>
</section> </section>
</div> </div></div>
<div class="slide" id="BlockQuote"> <div class="slide" id="BlockQuote"><div>
<section> <section>
<header> <header>
<h2>Block Quote</h2> <h2>Block Quote</h2>
...@@ -142,8 +142,8 @@ ...@@ -142,8 +142,8 @@
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive…</p> <p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive…</p>
</blockquote> </blockquote>
</section> </section>
</div> </div></div>
<div class="slide" id="ThankYou"> <div class="slide" id="ThankYou"><div>
<section> <section>
<header> <header>
<h2>Shower Presentation Template</h2> <h2>Shower Presentation Template</h2>
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
</ul> </ul>
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p> <p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
</section> </section>
</div> </div></div>
<div class="progress"><div></div></div> <div class="progress"><div></div></div>
<script src="scripts/script.js"></script> <script src="scripts/script.js"></script>
</body> </body>
......
themes/ribbon/styles/style.css
View file @ 81c1e19f
...@@ -6,151 +6,9 @@ BODY { ...@@ -6,151 +6,9 @@ BODY {
counter-reset:paging; counter-reset:paging;
} }
/* List
---------------------------------------- */
.list {
padding:80px 0 80px 100px;
background:#585A5E url(../images/linen.png);
}
.list:after {
display:block;
clear:both;
content:'';
}
/* Caption */
.list .caption {
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
}
.list .caption H1 {
font:bold 50px/1 'PT Sans Narrow', sans-serif;
}
/* Slide */
.list .slide {
position:relative;
float:left;
margin:0 50px 0 0;
padding:80px 0 0;
width:512px;
height:320px;
}
.list .slide:after {
position:absolute;
bottom:-45px;
left:57px;
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
line-height:1;
font-weight:bold;
font-size:25px;
}
.list .slide:target:after {
text-shadow:0 -1px 1px #1F3F60;
color:#4B86C2;
}
.list .slide SECTION {
box-shadow:0 0 100px #3C3D40;
border-radius:1px;
background:#FFF;
-webkit-transform-origin:0 0;
-webkit-transform:scale(0.5);
-moz-transform-origin:0 0;
-moz-transform:scale(0.5);
-ms-transform-origin:0 0;
-ms-transform:scale(0.5);
-o-transform-origin:0 0;
-o-transform:scale(0.5);
transform-origin:0 0;
transform:scale(0.5);
}
.list .slide SECTION:after {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
content:'';
}
.list .slide SECTION:hover {
box-shadow:
0 0 0 20px rgba(60, 61, 64, 0.6),
0 0 100px #3C3D40;
}
.list .slide:target SECTION {
box-shadow:
0 0 0 1px #305F8D,
0 0 0 20px #3C7CBD,
0 0 100px #3C3D40;
}
.list .slide.bg SECTION {
background:rgba(0, 0, 0, 0.4);
}
/* Full
---------------------------------------- */
.full {
position:absolute;
top:50%;
left:50%;
overflow:hidden;
margin:-320px 0 0 -512px;
width:1024px;
height:640px;
background:#000;
}
.full .caption {
display:none;
}
.full .slide {
position:absolute;
margin-left:200%;
background:#FFF;
}
.full .slide:target {
margin-left:0;
}
.full .slide:after {
position:absolute;
bottom:85px;
left:120px;
color:#BBB;
line-height:1;
}
.full .slide.bg:after,
.full .slide.shout:after {
content:'';
}
/* Progress */
.full .progress {
position:absolute;
right:118px;
bottom:49px;
left:118px;
border-radius:7px;
border:2px solid rgba(255, 255, 255, 0.2);
}
.full .progress DIV {
width:0;
height:10px;
border-radius:5px;
background:rgba(177, 177, 177, 0.4);
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-ms-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.full .progress-off {
z-index:1;
}
/* Slide /* Slide
---------------------------------------- */ ---------------------------------------- */
.slide { .slide {
color:#000;
} }
.slide:after { .slide:after {
counter-increment:paging; counter-increment:paging;
...@@ -160,6 +18,8 @@ BODY { ...@@ -160,6 +18,8 @@ BODY {
padding:80px 120px 0; padding:80px 120px 0;
width:784px; width:784px;
height:560px; height:560px;
background:#FFF;
color:#000;
} }
.slide SECTION:before { .slide SECTION:before {
position:absolute; position:absolute;
...@@ -307,13 +167,13 @@ BODY { ...@@ -307,13 +167,13 @@ BODY {
} }
/* Background */ /* Background */
.slide.bg { .slide.bg SECTION {
background:transparent; background:transparent;
} }
.slide.bg SECTION:before { .slide.bg SECTION:before {
display:none; display:none;
} }
.slide.bg IMG { .slide.bg IMG {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;
...@@ -343,3 +203,139 @@ BODY { ...@@ -343,3 +203,139 @@ BODY {
.slide.shout H2 A:after { .slide.shout H2 A:after {
content:''; content:'';
} }
/* List
---------------------------------------- */
.list {
float:left;
padding:80px 0 80px 100px;
background:#585A5E url(../images/linen.png);
}
/* Caption */
.list .caption {
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
}
.list .caption H1 {
font:bold 50px/1 'PT Sans Narrow', sans-serif;
}
/* Slide */
.list .slide {
position:relative;
float:left;
margin:0 50px 0 0;
padding:80px 0 0;
}
.list .slide:after {
position:absolute;
bottom:-45px;
left:57px;
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
line-height:1;
font-weight:bold;
font-size:25px;
}
.list .slide:target:after {
text-shadow:0 -1px 1px #1F3F60;
color:#4B86C2;
}
.list .slide > DIV {
position:relative;
overflow:hidden;
width:512px;
height:320px;
box-shadow:0 0 50px #3C3D40;
border-radius:1px;
}
.list .slide:hover > DIV {
box-shadow:
0 0 0 10px rgba(60, 61, 64, 0.6),
0 0 50px #3C3D40;
}
.list .slide:target > DIV {
box-shadow:
0 0 0 1px #305F8D,
0 0 0 10px #3C7CBD,
0 0 50px #3C3D40;
}
.list .slide SECTION {
-webkit-transform-origin:0 0;
-webkit-transform:scale(0.5);
-moz-transform-origin:0 0;
-moz-transform:scale(0.5);
-ms-transform-origin:0 0;
-ms-transform:scale(0.5);
-o-transform-origin:0 0;
-o-transform:scale(0.5);
transform-origin:0 0;
transform:scale(0.5);
}
.list .slide SECTION:after {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
content:'';
}
/* Full
---------------------------------------- */
.full {
position:absolute;
top:50%;
left:50%;
overflow:hidden;
margin:-320px 0 0 -512px;
width:1024px;
height:640px;
background:#000;
}
.full .caption {
display:none;
}
.full .slide {
position:absolute;
margin-left:200%;
}
.full .slide:target {
margin-left:0;
}
.full .slide:after {
position:absolute;
bottom:85px;
left:120px;
color:#BBB;
line-height:1;
}
.full .slide.bg:after,
.full .slide.shout:after {
content:'';
}
/* Progress */
.full .progress {
position:absolute;
right:118px;
bottom:49px;
left:118px;
border-radius:7px;
border:2px solid rgba(255, 255, 255, 0.2);
}
.full .progress DIV {
width:0;
height:10px;
border-radius:5px;
background:rgba(177, 177, 177, 0.4);
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-ms-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.full .progress-off {
z-index:1;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment