|
|
| (21 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| __NOTOC__
| | |
| {{#css:
| |
| @import 'https://fonts.googleapis.com/css2?family=Aboreto';
| |
| @import 'https://fonts.googleapis.com/css2?family=Open+Sans';
| |
| .bg-black {background-color:#000;}
| |
| .bg-white {background-color:#FFF;}
| |
| .bg-grey {background-color:#808080;}
| |
| .bg-lavender {background-color:#E6E6FA;}
| |
| .fg-black {color:#000;}
| |
| .fg-white {color:#FFF;}
| |
| .fg-grey {color:#808080;}
| |
| .fg-lavender {color:#E6E6FA;}
| |
| .feature-title {
| |
| font-size: 1.75rem;
| |
| }
| |
| .feature-subtitle {
| |
| font-size: 1.25rem;
| |
| }
| |
| .small-title {
| |
| font-weight: bold;
| |
| }
| |
| .text-center {
| |
| text-align: center;
| |
| }
| |
| .text-right {
| |
| text-align: right;
| |
| }
| |
| .photo-header {
| |
| width: calc(100% - 2rem);
| |
| margin: auto;
| |
| padding: 0px;
| |
| border-top: 1px #E6E6FA solid;
| |
| border-left: 1px #E6E6FA solid;
| |
| border-right: 1px #E6E6FA solid;
| |
| }
| |
| .character-name {
| |
| font-family: "Aboreto",serif;
| |
| font-size: 3rem;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| width: calc(100% - 2rem);
| |
| margin: auto;
| |
| border-left: 1px #E6E6FA solid;
| |
| border-right: 1px #E6E6FA solid;
| |
| }
| |
| /* calc function to fill available space minus 2rem on either side */
| |
| .container {
| |
| font-family: "Open Sans", sans-serif;
| |
| width: calc(100% - 2rem);
| |
| margin: auto;
| |
| height: auto;
| |
| overflow: auto;
| |
| border-left: 1px #E6E6FA solid;
| |
| border-right: 1px #E6E6FA solid;
| |
| border-bottom: 1px #E6E6FA solid;
| |
| }
| |
| .quote-banner {
| |
| background-color: #141414;
| |
| border-top: 1px #E6E6FA solid;
| |
| border-bottom: 1px #E6E6FA solid;
| |
| width:100%;
| |
| }
| |
| .img-responsive {
| |
| width: 100%;
| |
| height: auto;
| |
| }
| |
| .hooks {
| |
| background-image: url('https://media.istockphoto.com/id/1091733134/vector/black-tartan-plaid-seamless-pattern-background.jpg?s=612x612&w=0&k=20&c=5wbejag1txdnW5apGBQFbDCFZ_gIgK61GOU08lR-irg=');
| |
| padding: 1.0rem 0.5rem;
| |
| }
| |
| .hooks-table {
| |
| width: 100%;
| |
| padding: 1.0rem 0.5rem;
| |
| }
| |
| .hook-name {
| |
| width: 25%;
| |
| }
| |
| .hook-note {
| |
| width: 75%;
| |
| }
| |
| .stats {
| |
| padding: 1.5rem 0.5rem;
| |
| }
| |
| .stats-table {
| |
| width: 100%;
| |
| padding: 1.0rem 0.25rem;
| |
| }
| |
| .stat-name {
| |
| width: 50%;
| |
| }
| |
| .stat-note {
| |
| width: 50%;
| |
| }
| |
| .contacts-table {
| |
| width: 100%;
| |
| background-image: url('https://media.istockphoto.com/id/1091733134/vector/black-tartan-plaid-seamless-pattern-background.jpg?s=612x612&w=0&k=20&c=5wbejag1txdnW5apGBQFbDCFZ_gIgK61GOU08lR-irg=');
| |
| padding: 1.0rem 0.1rem;
| |
| }
| |
| .contact-name {
| |
| width: 20%;
| |
| }
| |
| .contact-note {
| |
| width: 80%;
| |
| }
| |
| .music {
| |
| list-style: none;
| |
| padding: 1.0rem 0.25rem!important;
| |
| margin:0;
| |
| }
| |
| /* flex box toolkit taken from W3C reference */
| |
| .flex-container {
| |
| display: flex;
| |
| flex-direction: row;
| |
| text-align: left;
| |
| }
| |
| .flex-container > .flex-33 {
| |
| flex: 33%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .flex-25 {
| |
| flex: 25%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .flex-50 {
| |
| flex: 50%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .demographics {
| |
| flex: 40%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .introduction {
| |
| flex: 60%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-gallery {
| |
| display: flex;
| |
| flex-direction: row;
| |
| justify-content: center;
| |
| }
| |
| .flex-gallery .gal-img {
| |
| flex: 33%;
| |
| margin: auto;
| |
| padding: 0.5rem 0.5rem;
| |
| }
| |
| .hidden {
| |
| display: none;
| |
| }
| |
| .col-33 {
| |
| width: 33%;
| |
| }
| |
| .col-25 {
| |
| width: 25%;
| |
| }
| |
| .col-50 {
| |
| width: 50%;
| |
| }
| |
| .col-100 {
| |
| width: 100%;
| |
| }
| |
| .m-0 {
| |
| margin: 0px;
| |
| }
| |
| .m-1 {
| |
| margin: 1px;
| |
| }
| |
| .m-2 {
| |
| margin: 2px;
| |
| }
| |
| .m-3 {
| |
| margin: 3px;
| |
| }
| |
| .m-4 {
| |
| margin: 4px;
| |
| }
| |
| .m-5 {
| |
| margin: 5px;
| |
| }
| |
| .m-auto {
| |
| margin: auto;
| |
| }
| |
|
| |
| .p-0 {
| |
| padding: 0px;
| |
| }
| |
|
| |
| .p-1 {
| |
| padding: 1px;
| |
| }
| |
|
| |
| .p-2 {
| |
| padding: 2px;
| |
| }
| |
|
| |
| .p-3 {
| |
| padding: 3px;
| |
| }
| |
|
| |
| .p-4 {
| |
| padding: 4px;
| |
| }
| |
|
| |
| .p-5 {
| |
| padding: 5px;
| |
| }
| |
|
| |
| .py-0 {
| |
| padding-top: 0px;
| |
| padding-bottom: 0px;
| |
| }
| |
|
| |
| .py-1 {
| |
| padding-top: 1px;
| |
| padding-bottom: 1px;
| |
| }
| |
| .py-2 {
| |
| padding-top: 2px;
| |
| padding-bottom: 2px;
| |
| }
| |
| .py-3 {
| |
| padding-top: 3px;
| |
| padding-bottom: 3px;
| |
| }
| |
| .py-4 {
| |
| padding-top: 4px;
| |
| padding-bottom: 4px;
| |
| }
| |
| .py-5 {
| |
| padding-top: 5px;
| |
| padding-bottom: 5px;
| |
| }
| |
| .v-top {
| |
| vertical-align: top;
| |
| }
| |
| #MainBody a,#MainBody a:hover,#MainBody a:visited {color:#E6E6FA;}
| |
| #rpg-logs a,#rpg-logs a:hover,#rpg-logs a:visited {color:#FFF!important;}
| |
| #info-table {
| |
| border-right: 1px #808080 solid;
| |
| }
| |
| #rpg-logs {
| |
| padding: 1rem 0.5rem;
| |
| }
| |
| /* DPL plugin formatting */
| |
| #rpg-logs ul {
| |
| display: flex;
| |
| flex-direction: row;
| |
| text-align: left;
| |
| padding: 1.0rem 0.5rem;
| |
| }
| |
| #rpg-logs li {
| |
| flex: 33%;
| |
| }
| |
| /* adjustments for mobile screen size */
| |
| @media (max-width: 650px) {
| |
| .flex-gallery {
| |
| flex-direction: column;
| |
| }
| |
| .gal-img {
| |
| flex:100%;
| |
| }
| |
| .flex-container {
| |
| flex-direction: column;
| |
| }
| |
| .flex-33 {
| |
| flex: 100%;
| |
| }
| |
| .demographics {
| |
| flex: 100%;
| |
| }
| |
| .introduction {
| |
| flex: 100%;
| |
| }
| |
| .character-name {
| |
| font-size: 2rem;
| |
| }
| |
| #info-table {
| |
| border: 0px;
| |
| }
| |
| .hooks {
| |
| padding: 0rem;
| |
| }
| |
| .hooks-table {
| |
| flex: 100%;
| |
| padding: 0.25rem 1.0rem;
| |
| }
| |
| .hook-note {
| |
| padding-left: 0.5rem;
| |
| }
| |
| .stats {
| |
| padding: 0rem;
| |
| }
| |
| .stats-table {
| |
| flex: 100%;
| |
| padding: 0rem;
| |
| }
| |
| .stat-name {
| |
| flex: 50%;
| |
| }
| |
| .stat-note {
| |
| flex: 50%;
| |
| }
| |
| .contacts-table {
| |
| flex: 100%;
| |
| padding: 0rem;
| |
| }
| |
| .contact-name {
| |
| flex: 25%;
| |
| }
| |
| .contact-note {
| |
| flex: 75%;
| |
| }
| |
| .quote-banner {
| |
| flex:100%;
| |
| }
| |
| .feature-title {
| |
| text-align: center;
| |
| }
| |
| br {
| |
| display: none;
| |
| }
| |
| #rpg-logs ul {
| |
| flex-direction: column;
| |
| }
| |
| #rpg-logs li {
| |
| flex: 100%;
| |
| }
| |
| }
| |
| }}
| |
| <div class="photo-header bg-black" id="charbit-header">[[Image:Ninja.jpg|class=img-responsive|link=]]</div>
| |
| <div class="character-name bg-black fg-grey" id="charbit-name">Joe Sakai</div>
| |
| <div class="container bg-black" id="MainBody">
| |
| <div class="flex-container fg-white" id="DemoIntro">
| |
| <div class="demographics" id="demo">
| |
| <table class="col-100" id="info-table">
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Appears As:</td>
| |
| <td class="col-50 v-top">Joe</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Apparent Age:</td>
| |
| <td class="col-50" v-top>Mid Twenties</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Pronouns:</td>
| |
| <td class="col-50" v-top>He/Him</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Demeanor:</td>
| |
| <td class="col-50 v-top">Loner</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title">Occupation:</td>
| |
| <td class="col-50 v-top">Problem Solver</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="introduction" id="intro">
| |
| <div class="feature-title fg-lavender p-2">Life's an Ashtray</div>
| |
| <p class="p-2">Character's background will go here soon.</p>
| |
| </div>
| |
| </div>
| |
| <div class="hooks" id="rpg-hooks">
| |
| <div class="feature-title fg-lavender p-2 text-center">RP Hooks</div>
| |
| <table class="hooks-table fg-white">
| |
| <tr>
| |
| <td class="hook-name fg-lavender v-top py-5">Focused, Driven</td>
| |
| <td class="hook-note v-top py-5">Enjoys practicing martial arts.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="hook-name fg-lavender v-top py-5">Motivated, Direct</td>
| |
| <td class="hook-note v-top py-5">Has a small, robust garden, tended often.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="hook-name fg-lavender v-top py-5">Energetic, Sharp</td>
| |
| <td class="hook-note v-top py-5">Passionate about street racing.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="m-0 p-0" id="skyline-deco">[[Image:JosephSkylineBanner.jpg|class=img-responsive|link=]]</div>
| |
| <div class="flex-container fg-white" id="misc1">
| |
| <div class="flex-33 stats">
| |
| <div class="feature-title text-center fg-lavender p-2">Public Stats</div>
| |
| <table class="stats-table">
| |
| <tr>
| |
| <td class="stat-name fg-lavender v-top">SKILL</td>
| |
| <td class="stat-note v-top">🔴🔴🔴🔴🔴</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="stat-name fg-lavender v-top">SKILL</td>
| |
| <td class="stat-note v-top">⚫️⚫️⚫️⚫️⚫️</td>
| |
| </tr>
| |
| <td class="stat-name fg-lavender v-top">Merits</td>
| |
| <td class="stat-note v-top">NAME OF MERIT</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="stat-name fg-lavender v-top">Flaws</td>
| |
| <td class="stat-note v-top">NAME OF FLAW</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="flex-33">
| |
| <!-- [[Image:OccultMoth.png|class=img-responsive m-auto|link=]] -->
| |
| [[Image:JosephGif.gif|class=img-responsive m-auto|link=]]</div>
| |
| <div class="flex-33" style="min-height:100%;">
| |
| <div class="feature-title text-center fg-lavender p-2">Music</div>
| |
| <ul class="Music">
| |
| <li>[https://www.youtube.com/watch?v=g1ahaQDFZnA Phototropic] -Kyuss</li>
| |
| </ul>
| |
| </br></br></br></br></br></br></br>
| |
| </div>
| |
| </div>
| |
| <div class="quote-banner fg-white text-center py-5">
| |
| <blockquote>Give me a lever and a place to stand and I will move the earth.</blockquote>
| |
| <small>Archimedes</small>
| |
| </div>
| |
| <div class="fg-white py-5" id="contacts">
| |
| <div class="feature-title fg-lavender p-5 text-center">Contacts</div>
| |
| <div class="flex-container">
| |
| <div class="flex-33">
| |
| <p class="feature-subtitle text-center">Group A</p>
| |
| <table class="contacts-table">
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="flex-33">
| |
| <p class="feature-subtitle text-center">Group B</p>
| |
| <table class="contacts-table">
| |
| <tr>
| |
| <td class="contact-name v-top">Test</td>
| |
| <td class="contact-note v-top">Test.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="flex-33">
| |
| <p class="feature-subtitle text-center">Group C</p>
| |
| <table class="contacts-table">
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="fg-white" id="galleryRow1">
| |
| <div class="feature-title fg-lavender p-2 text-center">Gallery</div>
| |
| <div class="flex-container p-2">
| |
| <div class="flex-33 text-center">[[Image:JosephB2.png|250px]]</div>
| |
| <div class="flex-33 text-center">[[Image:JosephB3.png|250px]]</div>
| |
| <div class="flex-33 text-center">[[Image:JosephB4.png|250px]]</div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="fg-white" id="rpg-logs">
| |
| <div class="feature-title fg-lavender p-2 text-center">Logs</div>
| |
| {{#dpl:
| |
| |linksto={{PAGENAME}}
| |
| |category=Logs
| |
| |columns=3
| |
| |noresultsheader=<p class="text-center p-5">No logs have been uploaded or attributed to this page.</p>
| |
| }}
| |
| </div>
| |
| <div class="m-0 p-0" id="footer">[[Image:Joemotor.jpg|class=img-responsive|link=]]</div>
| |
| </div>
| |
| [[Category:Characters]][[Category:Active]][[Category:PC]]
| |
