}
body {
+ font-family: sans-serif;
padding: 2em 1em 6em 1em;
background-color: #555;
text-align: center;
display: inline-block;
position: relative;
vertical-align: top;
- #margin-left: 2em;
font-size: 6pt;
width: 20em; line-height: 15em;
color: rgba(0, 0, 0, 0);
/* ==== Slide Appearance ==== */
div.slide {
- padding: 0 1em;
- background-color: #FFF;
+ background: #FFF no-repeat center;
text-align: center;
+ line-height: 1.5em;
}
div.slide:after {
}
div.slide > * {
- vertical-align: middle;
+ margin-top: 1em;
text-align: left;
+ max-width: 100%;
+ z-index: 3;
}
-div.slide h1 {
- left: 0; right: 0;
+div.slide h1, div.slide h2 {
display: block;
+ background-color: #EEE;
text-align: center;
font-size: 1.5em;
- background-color: #EEE;
+ margin-top: 0;
+ margin-bottom: 1em;
+ width: 100%;
+}
+
+div.slide h1 {
+ position: absolute;
+ top: 50%; left: 0; right: 0;
+ transform: translate(0, -50%);
+ padding: .5em 2em;
+ z-index: 0;
+}
+
+div.slide h2 {
padding: .25em 1em;
- margin-left: -1em;
- margin-right: -1em;
}
div.slide ul,
position: fixed;
z-index: 2;
top: 0; bottom: 0; left: 0; right: 0;
- width: auto; height: auto;
+ width: auto; height: 100%;
margin: 0;
border: none;
font-size: 24pt;
:target + a + a:before { right: 0; }
:target + a + a:before { content: '\22d9'; }
-:target .uncover { color: #DDD; }
-:target .uncover:hover { color: #000; }
-:target .uncover *:first-child { height: 0; }
-:target .uncover *:first-child:before,
-:target .uncover *:hover:before,
-:target .uncover *:active + *:before {
- content: ' ';
+.uncover[type="checkbox"] + * { opacity: .2; }
+.uncover[type="checkbox"]:checked + * { opacity: 1; }
+
+.uncover[type="checkbox"] {
position: fixed;
- top: 0; bottom: 0;
- left: 0; right: 0;
+ top: 0; bottom: 0; left: 0; right: 0;
+ width: 100%; height: 100%;
+ opacity: 0;
}
-:target .uncover *:hover ~ * { color: #DDD; }
-:target .uncover *:active:before { display: none; }
+
+.uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
+.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
+.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
+.uncover[type="checkbox"]:checked { display: none; }
+