Difference between revisions of "Chandler"

Revision as of 14:26, 17 April 2017

Character Information goes here.

Allies and Contacts go here.

Gallery goes here.

@@ Line 1: / Line 1: @@
-[[File:Chandler pic.jpg]]
+{{#css:
+#panels {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+}
+.tab {
+    font-weight: bold;
+    margin-top: -4em;
+    order: 1;
+    padding-top: 4em;
+}
+#Intro {
+    order: 0;
+}
+.tab a, *:target ~ #Intro a {
+    border-bottom: medium none;
+    display: inline-block;
+    margin: 0 0.5em 0.5em;
+    opacity: 0.5;
+    padding: 0 1em;
+}
+#Intro a, .tab:target a {
+    opacity: 1;
+}
+.panel {
+    display: none;
+    order: 2;
+    text-indent: 1.5em;
+    width: 100%;
+}
+#Intro-panel {
+    display: block;
+}
+:target ~ #Intro-panel {
+    display: none;
+}
+#Intro:target ~ #Intro-panel, #Info:target ~ #Info-panel, #Contacts:target ~ #Contacts-panel, #Gallery:target ~ #Gallery-panel {
+    display: block;
+}
+}}<div id="panels">
+<div id="Info" class="tab" tabindex="0">[[#Info|Character Information]]</div>
+<div id="Contacts" class="tab" tabindex="0">[[#Contacts|Allies & Contacts]]</div>
+<div id="Gallery" class="tab" tabindex="0">[[#Gallery|Gallery]]</div>
+<div id="Intro" class="tab" tabindex="0">[[#Intro|Intro]]</div>
+<div id="Intro-panel" class="panel">
+[[File:Chandler pic.jpg|center]]
+</div>
+<div id="Info-panel" class="panel">
+Character Information goes here.
+</div>
+<div id="Contacts-panel" class="panel">
+Allies and Contacts go here.
+</div>
+<div id="Gallery-panel" class="panel">
+Gallery goes here.
+</div>
+</div>