Difference between revisions of "Lescrowe"
Jump to navigation
Jump to search
imported>Saryn |
imported>Felix |
||
Line 1: | Line 1: | ||
− | + | {{#css: | |
− | {{ : | + | .slider { |
− | + | height: 450px; | |
− | + | margin: 2em auto; | |
− | + | position: relative; | |
− | + | text-indent: 0; | |
− | + | width: 400px; | |
− | + | } | |
− | + | .slider > ul { | |
− | + | border: 2px solid black; | |
− | + | box-sizing: border-box; | |
− | + | height: 400px; | |
− | + | margin: 0; | |
− | + | max-width: 400px; | |
− | + | padding: 1em; | |
− | + | position: absolute; | |
− | + | width: 400px; | |
− | + | } | |
− | + | .prev, .next { | |
− | + | background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; | |
− | + | border-radius: 25px; | |
− | + | font-size: 3em; | |
− | + | left: -51px; | |
− | + | padding: 10px; | |
− | + | position: absolute; | |
− | + | top: 180px; | |
− | + | } | |
− | + | .next { | |
− | + | left: auto; | |
− | + | right: -52px; | |
− | + | } | |
− | + | .prev a, .next a { | |
− | + | color: white; | |
+ | left: -2px; | ||
+ | position: relative; | ||
+ | top: 1px; | ||
+ | } | ||
+ | .next a { | ||
+ | left: 2px; | ||
+ | } | ||
+ | .prev a:hover, .next a:hover, .prev a:focus, .next a:focus, .prev a:active, .next a:active { | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #panels { | ||
+ | display: flex; | ||
+ | flex-flow: row wrap; | ||
+ | justify-content: center; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .tab { | ||
+ | font-weight: bold; | ||
+ | margin-top: -4em; | ||
+ | order: 1; | ||
+ | padding-top: 4em; | ||
+ | } | ||
+ | .first.tab { | ||
+ | order: 0; | ||
+ | } | ||
+ | .tab a, | ||
+ | :target ~ .first.tab a { | ||
+ | border-bottom: medium none; | ||
+ | display: inline-block; | ||
+ | margin: 0 0.5em 0.5em; | ||
+ | opacity: 0.5; | ||
+ | padding: 0 1em; | ||
+ | } | ||
+ | .first.tab a, | ||
+ | .first.anchor:target ~ .first.tab a, | ||
+ | .second.anchor:target ~ .second.tab a, | ||
+ | .third.anchor:target ~ .third.tab a, | ||
+ | .fourth.anchor:target ~ .fourth.tab a, | ||
+ | .fifth.anchor:target ~ .fifth.tab a, | ||
+ | .sixth.anchor:target ~ .sixth.tab a { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .panel { | ||
+ | display: none; | ||
+ | order: 2; | ||
+ | text-indent: 1.5em; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #First-panel, | ||
+ | .panel .slider .slide:first-of-type { | ||
+ | display: block; | ||
+ | } | ||
+ | :target ~ #First-panel, | ||
+ | :target ~ .panel .slider .slide:first-of-type, | ||
+ | .anchor, | ||
+ | .slide { | ||
+ | display: none; | ||
+ | } | ||
+ | .first:target ~ #First-panel, | ||
+ | .second:target ~ #Second-panel, | ||
+ | .third:target ~ #Third-panel, | ||
+ | .fourth:target ~ #Fourth-panel, | ||
+ | .fifth:target ~ #Fifth-panel, | ||
+ | .sixth:target ~ #Sixth-panel, | ||
+ | .main:target ~ .panel .slider .slide:first-of-type, | ||
+ | div[id$="-1"]:target ~ .panel .slider .slide:first-of-type, | ||
+ | div[id$="-2"]:target ~ .panel .slider .slide:nth-of-type(2), | ||
+ | div[id$="-3"]:target ~ .panel .slider .slide:nth-of-type(3), | ||
+ | div[id$="-4"]:target ~ .panel .slider .slide:nth-of-type(4), | ||
+ | div[id$="-5"]:target ~ .panel .slider .slide:nth-of-type(5) { | ||
+ | display: block; | ||
+ | } | ||
}} | }} | ||
+ | <div id="panels"> | ||
+ | <div id="second-1" class="second anchor"></div> | ||
+ | <div id="second-2" class="second anchor"></div> | ||
+ | <div id="second-3" class="second anchor"></div> | ||
+ | <div id="second-4" class="second anchor"></div> | ||
+ | <div id="second-5" class="second anchor"></div> | ||
+ | <div id="Puppet Maker" class="main second anchor" tabindex="0"></div> | ||
+ | <div id="Second-tab" class="second tab" tabindex="0">[[#Puppet Maker|Puppet Maker]]</div> | ||
+ | <div id="third-1" class="third anchor"></div> | ||
+ | <div id="third-2" class="third anchor"></div> | ||
+ | <div id="third-3" class="third anchor"></div> | ||
+ | <div id="third-4" class="third anchor"></div> | ||
+ | <div id="third-5" class="third anchor"></div> | ||
+ | <div id="Sin Eater" class="main third anchor" tabindex="0"></div> | ||
+ | <div id="Third-tab" class="third tab" tabindex="0">[[#Sin Eater|Sin Eater]]</div> | ||
+ | <div id="fourth-1" class="fourth anchor"></div> | ||
+ | <div id="fourth-2" class="fourth anchor"></div> | ||
+ | <div id="fourth-3" class="fourth anchor"></div> | ||
+ | <div id="fourth-4" class="fourth anchor"></div> | ||
+ | <div id="fourth-5" class="fourth anchor"></div> | ||
+ | <div id="Hell Dancer" class="main fourth anchor" tabindex="0"></div> | ||
+ | <div id="Fourth-tab" class="fourth tab" tabindex="0">[[#Hell Dancer|Hell Dancer]]</div> | ||
+ | <div id="fifth-1" class="fifth anchor"></div> | ||
+ | <div id="fifth-2" class="fifth anchor"></div> | ||
+ | <div id="fifth-3" class="fifth anchor"></div> | ||
+ | <div id="fifth-4" class="fifth anchor"></div> | ||
+ | <div id="fifth-5" class="fifth anchor"></div> | ||
+ | <div id="Secret Master" class="main fifth anchor" tabindex="0"></div> | ||
+ | <div id="Fifth-tab" class="fifth tab" tabindex="0">[[#Secret Master|Secret Master]]</div> | ||
+ | <div id="sixth-1" class="sixth anchor"></div> | ||
+ | <div id="sixth-2" class="sixth anchor"></div> | ||
+ | <div id="sixth-3" class="sixth anchor"></div> | ||
+ | <div id="sixth-4" class="sixth anchor"></div> | ||
+ | <div id="sixth-5" class="sixth anchor"></div> | ||
+ | <div id="Gate Keeper" class="main sixth anchor" tabindex="0"></div> | ||
+ | <div id="Sixth-tab" class="sixth tab" tabindex="0">[[#Gate Keeper|Gate Keeper]]</div> | ||
+ | <div id="first-1" class="first anchor"></div> | ||
+ | <div id="first-2" class="first anchor"></div> | ||
+ | <div id="first-3" class="first anchor"></div> | ||
+ | <div id="first-4" class="first anchor"></div> | ||
+ | <div id="first-5" class="first anchor"></div> | ||
+ | <div id="Ghost Walker" class="main first anchor" tabindex="0"></div> | ||
+ | <div id="First-tab" class="first tab" tabindex="0">[[#Ghost Walker|Ghost Walker]]</div> | ||
+ | <div id="First-panel" class="first panel"> | ||
+ | This is some information in the first panel. | ||
+ | <div class="slider"> | ||
+ | <ul> | ||
+ | <li class="first-1" class="slide"> | ||
+ | Slide 1-1 | ||
+ | <div class="prev">[[#first-5|<]]</div> | ||
+ | <div class="next">[[#first-2|>]]</div> | ||
+ | </li> | ||
+ | <li class="first-2" class="slide"> | ||
+ | Slide 1-2 | ||
+ | <div class="prev">[[#first-1|<]]</div> | ||
+ | <div class="next">[[#first-3|>]]</div> | ||
+ | </li> | ||
+ | <li class="first-3" class="slide"> | ||
+ | Slide 1-3 | ||
+ | <div class="prev">[[#first-2|<]]</div> | ||
+ | <div class="next">[[#first-4|>]]</div> | ||
+ | </li> | ||
+ | <li class=first-4" class="slide"> | ||
+ | Slide 1-4 | ||
+ | [[File:FelixGraffiti.jpg]] | ||
+ | <div class="prev">[[#first-3|<]]</div> | ||
+ | <div class="next">[[#first-5|>]]</div> | ||
+ | </li> | ||
+ | <li class="first-5" class="slide"> | ||
+ | Slide 1-5 | ||
+ | <div class="prev">[[#first-4|<]]</div> | ||
+ | <div class="next">[[#first-1|>]]</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="Second-panel" class="second panel"> | ||
+ | Here's some info in the second panel. | ||
+ | <div class="slider"> | ||
+ | <ul> | ||
+ | <li class="second-1" class="slide"> | ||
+ | Slide 2-1 | ||
+ | <div class="prev">[[#second-5|<]]</div> | ||
+ | <div class="next">[[#second-2|>]]</div> | ||
+ | </li> | ||
+ | <li class="second-2" class="slide"> | ||
+ | Slide 2-2 | ||
+ | <div class="prev">[[#second-1|<]]</div> | ||
+ | <div class="next">[[#second-3|>]]</div> | ||
+ | </li> | ||
+ | <li class="second-3" class="slide"> | ||
+ | Slide 2-3 | ||
+ | <div class="prev">[[#second-2|<]]</div> | ||
+ | <div class="next">[[#second-4|>]]</div> | ||
+ | </li> | ||
+ | <li class=second-4" class="slide"> | ||
+ | Slide 2-4 | ||
+ | <div class="prev">[[#second-3|<]]</div> | ||
+ | <div class="next">[[#second-5|>]]</div> | ||
+ | </li> | ||
+ | <li class="second-5" class="slide"> | ||
+ | Slide 2-5 | ||
+ | <div class="prev">[[#second-4|<]]</div> | ||
+ | <div class="next">[[#second-1|>]]</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="Third-panel" class="third panel"> | ||
+ | Third panel info would go here, if I had any. | ||
+ | <div class="slider"> | ||
+ | <ul> | ||
+ | <li class="third-1" class="slide"> | ||
+ | Slide 3-1 | ||
+ | <div class="prev">[[#third-5|<]]</div> | ||
+ | <div class="next">[[#third-2|>]]</div> | ||
+ | </li> | ||
+ | <li class="third-2" class="slide"> | ||
+ | Slide 3-2 | ||
+ | <div class="prev">[[#third-1|<]]</div> | ||
+ | <div class="next">[[#third-3|>]]</div> | ||
+ | </li> | ||
+ | <li class="third-3" class="slide"> | ||
+ | Slide 3-3 | ||
+ | <div class="prev">[[#third-2|<]]</div> | ||
+ | <div class="next">[[#third-4|>]]</div> | ||
+ | </li> | ||
+ | <li class=third-4" class="slide"> | ||
+ | Slide 3-4 | ||
+ | <div class="prev">[[#third-3|<]]</div> | ||
+ | <div class="next">[[#third-5|>]]</div> | ||
+ | </li> | ||
+ | <li class="third-5" class="slide"> | ||
+ | Slide 3-5 | ||
+ | <div class="prev">[[#third-4|<]]</div> | ||
+ | <div class="next">[[#third-1|>]]</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="Fourth-panel" class="fourth panel"> | ||
+ | And then this would be the fourth panel's spot. | ||
+ | <div class="slider"> | ||
+ | <ul> | ||
+ | <li class="fourth-1" class="slide"> | ||
+ | Slide 4-1 | ||
+ | <div class="prev">[[#fourth-5|<]]</div> | ||
+ | <div class="next">[[#fourth-2|>]]</div> | ||
+ | </li> | ||
+ | <li class="fourth-2" class="slide"> | ||
+ | Slide 4-2 | ||
+ | <div class="prev">[[#fourth-1|<]]</div> | ||
+ | <div class="next">[[#fourth-3|>]]</div> | ||
+ | </li> | ||
+ | <li class="fourth-3" class="slide"> | ||
+ | Slide 4-3 | ||
+ | <div class="prev">[[#fourth-2|<]]</div> | ||
+ | <div class="next">[[#fourth-4|>]]</div> | ||
+ | </li> | ||
+ | <li class=fourth-4" class="slide"> | ||
+ | Slide 4-4 | ||
+ | <div class="prev">[[#fourth-3|<]]</div> | ||
+ | <div class="next">[[#fourth-5|>]]</div> | ||
+ | </li> | ||
+ | <li class="fourth-5" class="slide"> | ||
+ | Slide 4-5 | ||
+ | <div class="prev">[[#fourth-4|<]]</div> | ||
+ | <div class="next">[[#fourth-1|>]]</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="Fifth-panel" class="fifth panel"> | ||
+ | And then this would be the fifth panel's spot. | ||
+ | <div class="slider"> | ||
+ | <ul> | ||
+ | <li class="fifth-1" class="slide"> | ||
+ | Slide 5-1 | ||
+ | <div class="prev">[[#fifth-5|<]]</div> | ||
+ | <div class="next">[[#fifth-2|>]]</div> | ||
+ | </li> | ||
+ | <li class="fifth-2" class="slide"> | ||
+ | Slide 5-2 | ||
+ | <div class="prev">[[#fifth-1|<]]</div> | ||
+ | <div class="next">[[#fifth-3|>]]</div> | ||
+ | </li> | ||
+ | <li class="fifth-3" class="slide"> | ||
+ | Slide 5-3 | ||
+ | <div class="prev">[[#fifth-2|<]]</div> | ||
+ | <div class="next">[[#fifth-4|>]]</div> | ||
+ | </li> | ||
+ | <li class=fifth-4" class="slide"> | ||
+ | Slide 5-4 | ||
+ | <div class="prev">[[#fifth-3|<]]</div> | ||
+ | <div class="next">[[#fifth-5|>]]</div> | ||
+ | </li> | ||
+ | <li class="fifth-5" class="slide"> | ||
+ | Slide 5-5 | ||
+ | <div class="prev">[[#fifth-4|<]]</div> | ||
+ | <div class="next">[[#fifth-1|>]]</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="Sixth-panel" class="sixth panel"> | ||
+ | And then this would be the sixth panel's spot. | ||
+ | <div class="slider"> | ||
+ | <ul> | ||
+ | <li class="sixth-1" class="slide"> | ||
+ | Slide 6-1 | ||
+ | <div class="prev">[[#sixth-5|<]]</div> | ||
+ | <div class="next">[[#sixth-2|>]]</div> | ||
+ | </li> | ||
+ | <li class="sixth-2" class="slide"> | ||
+ | Slide 6-2 | ||
+ | <div class="prev">[[#sixth-1|<]]</div> | ||
+ | <div class="next">[[#sixth-3|>]]</div> | ||
+ | </li> | ||
+ | <li class="sixth-3" class="slide"> | ||
+ | Slide 6-3 | ||
+ | <div class="prev">[[#sixth-2|<]]</div> | ||
+ | <div class="next">[[#sixth-4|>]]</div> | ||
+ | </li> | ||
+ | <li class=sixth-6" class="slide"> | ||
+ | Slide 6-4 | ||
+ | <div class="prev">[[#sixth-3|<]]</div> | ||
+ | <div class="next">[[#sixth-5|>]]</div> | ||
+ | </li> | ||
+ | <li class="sixth-6" class="slide"> | ||
+ | Slide 6-5 | ||
+ | <div class="prev">[[#sixth-4|<]]</div> | ||
+ | <div class="next">[[#sixth-1|>]]</div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> |
Revision as of 00:57, 24 April 2017
This is some information in the first panel.
Here's some info in the second panel.
Third panel info would go here, if I had any.
And then this would be the fourth panel's spot.
And then this would be the fifth panel's spot.
And then this would be the sixth panel's spot.