Index of the various Setpoints in the game, taking place at different times and places.
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
[nobr]
[comment]
Author: [USER=7055]@Lexielai[/USER]
[/comment]
[comment][font=Roboto]font reference[/font][font="Source Sans Pro"]font reference[/font][font="Roboto Condensed"]font reference[/font][font=Share]font reference[/font][font="Anton"]font reference[/font][font=Open Sans]font reference[/font][/comment]
[comment]setup divs[/comment]
[comment]maintains width and height ratio through different resolutions[/comment]
[class name=aspectRatio]
display: block;
position: relative;
width: 100%;
padding-top: 60%;
[/class]
[class name=aspectRatio maxWidth=1200px]
display: block;
width: 100%;
padding-top: 0px;
[/class]
[comment]establishes design space and primary background[/comment]
[class name=root]
display: block;
position: absolute;
height: 100%;
width: 100%;
margin: auto;
overflow: hidden;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: 0px;
left: 0px;
right: 0px;
bottom 0px;
[/class]
[class name=root maxWidth=1200px]
display: block;
position: relative;
height: auto;
min-height: 100%;
[/class]
[comment]layout divs[/comment]
[comment]contains all primary flex objects[/comment]
[class name=mainFlexContainer]
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
z-index: 2;
[/class]
[comment]establishes space for the information you want this design to show[/comment]
[class name=primaryBox]
display: block;
position: relative;
height: 85%;
width: 80%;
box-sizing: border-box;
margin: 30px;
background-color: var(--primaryBoxColor);
box-shadow: var(--primaryBoxShadow);
overflow: hidden;
flex: 1 0 auto;
z-index: 3;
[/class]
[class name=primaryBox maxWidth=1200px]
display: block;
width: 90%;
height: auto;
margin: 5%;
[/class]
[class name=diagonal]
position: absolute;
height: 100%;
width: 180%;
background-color: var(--diagonalColor);
color: var(--transparent);
transform: rotate(-5deg);
transform-origin: 100% 150%;
overflow: hidden;
z-index: 4;
[/class]
[class name=hexRender]
position: absolute;
height: 125%;
width: 125%;
background-image: var(--bgHexImage);
background-position: var(--bgHexPosition);
background-size: var(--bgHexSize);
background-repeat: var(--bgHexRepeat);
z-index: 4;
[/class]
[class name=characterName]
position: relative;
width: 80%;
height: var(--characterNameHeight);
box-sizing: border-box;
padding: 20px 0px 0px 40px;
z-index: 5;
[/class]
[class name=characterName maxWidth=1200px]
width: 100%;
[/class]
[comment]large info box divs[/comment]
[class name=infoFlexContainer]
display: flex;
position: relative;
height: 80%;
width: 100%;
box-sizing: border-box;
flex-flow: column wrap;
justify-content: space-around;
align-items: center;
align-content: center;
flex: 1 1 auto;
overflow: hidden;
z-index: 6;
[/class]
[class name=infoFlexContainer maxWidth=1200px]
width: 100%;
[/class]
[class name=infoContainer]
position: relative;
width: var(--columnTwoWidth);
height: 60%;
box-sizing: border-box;
padding: 20px;
border-right: var(--infoBoxBorderStyle);
border-bottom: var(--infoBoxBorderStyle);
border-left: var(--infoBoxBorderStyle);
background: var(--infoBoxColor);
flex: 1 1 auto;
[/class]
[class name=infoContainer maxWidth=1200px]
width: 100%;
[/class]
[class name=menuContainer]
width: var(--columnTwoWidth);
height: 10%;
box-sizing: border-box;
border-top: var(--infoBoxBorderStyle);
border-right: var(--infoBoxBorderStyle);
border-left: var(--infoBoxBorderStyle);
background: var(--infoBoxColor);
[/class]
[class name=menuContainer maxWidth=1200px]
width: 100%;
[/class]
[class name=menuFlexContainer]
display: flex;
width: 100%;
height: 100%;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
[/class]
[class name=menuFlexContainer maxWidth=1200px]
flex-flow: column wrap;
[/class]
[class name=menuButton]
position: relative;
width: var(--menuButtonWidth);
height: 90%;
box-sizing: border-box;
padding: 5px;
flex: 1 1 auto;
background: var(--menuButtonBgColor);
transition: background var(--transitionFunction), color var(--transitionFunction);
cursor: pointer;
color: var(--menuButtonColor);
[/class]
[class name=menuButton maxWidth=1200px]
width: 100%;
[/class]
[class name=menuButton state=hover]
background-color: var(--menuButtonHoverBgColor);
color: var(--menuButtonHoverColor);
transition: background var(--transitionFunction), color var(--transitionFunction);
[/class]
[class name=tabName]
display: none;
[/class]
[comment]gradient divider between menu buttons and text[/comment]
[class name=menuDivider]
width: 90%;
min-height: 3px;
margin: auto;
background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent));
flex: 3 0 auto;
color: var(--transparent);
[/class]
[comment]profile box[/comment]
[class name=profileContainer]
position: relative;
width: var(--columnOneWidth);
height: 96%;
box-sizing: border-box;
padding: 0px;
margin-right: 1%;
border: var(--infoBoxBorderStyle);
background: var(--infoBoxColor);
flex: 1 0 auto;
[/class]
[class name=profileContainer maxWidth=1200px]
width: 100%;
margin: 0%;
[/class]
[class name=profileImageContainer]
display: block;
position: relative;
max-width: 95%;
height: 50%;
box-sizing: border-box;
margin: 10px;
background-image: var(--profileImage);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
overflow: hidden;
[/class]
[class name=profileInfoFlexContainer]
display: flex;
height: 45%;
width: auto;
justify-content: space-between;
align-content: space-between;
align-items: center;
flex-flow: row wrap;
border: 1px sold white;
[/class]
[class name=profileInfoBox]
display: flex;
justify-content: space-around;
align-content: center;
align-items: center;
position: relative;
width: 100%;
max-height: 15%;
box-sizing: border-box;
padding: 2px;
margin: 4px;
overflow: hidden;
[/class]
[class name=standardInfoBox]
display: flex;
justify-content: space-around;
align-content: center;
align-items: center;
position: relative;
width: 48%;
max-height: 10%;
box-sizing: border-box;
padding: 2px;
margin: 4px;
overflow: hidden;
[/class]
[class name=profileLabelBox]
position: relative;
max-width: 20%;
box-sizing: border-box;
padding: 2px;
margin: 3px;
flex: 1 0 auto;
background-color: var(--diagonalColor);
[/class]
[class name=standardLabelBox]
position: relative;
width: 30%;
max-width: 30%;
box-sizing: border-box;
padding: 2px;
margin: 3px;
flex: 1 0 auto;
background-color: var(--diagonalColor);
[/class]
[class name=profileInfo]
display: block;
position: relative;
max-width: auto;
box-sizing: border-box;
padding: 2px;
margin: 3px;
flex: 3 0 auto;
[/class]
[comment]text formatting[/comment]
[class name=mainText]
display: block;
position: relative;
box-sizing: border-box;
padding-left: 20px;
padding-bottom: 10px;
text-align: justify;
font-family: var(--mainFont);
font-size: var(--mainTextSize);
letter-spacing: 1px;
color: var(--mainTextColor);
[/class]
[class name=mainHeader]
display: block;
position: relative;
box-sizing: border-box;
padding: 3px;
margin-bottom: 10px;
background: var(--diagonalColor);
font-family: var(--headerFont);
font-size: 3em;
letter-spacing: 0px;
text-transform: uppercase;
color: var(--infoBoxColor);
[/class]
[class name=mainSubheader]
display: block;
position: relative;
width: 50%;
box-sizing: border-box;
margin-left: 10px;
margin-bottom: 10px;
border-bottom: 2px solid var(--mainAccent);
font-family: var(--mainFont);
font-size: 1.1em;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--mainTextColor);
[/class]
[class name=indent]
text-indent: 40px;
[/class]
[class name=characterNameText]
font-family: var(--nameFont);
font-size: 4em;
text-transform: uppercase;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
letter-spacing: 5px;
color: var(--nameColor);
[/class]
[class name=profileInfoText]
font-family: var(--profileFont);
font-size: var(--profileTextSize);
text-transform: uppercase;
letter-spacing: 0px;
[/class]
[class name=profileLabelText]
text-align: center;
color: var(--infoBoxColor);
letter-spacing: 1px;
[/class]
[class name=profileText]
text-align: left;
color: var(--mainAccent);
letter-spacing: 2px;
[/class]
[comment]text settings for menu buttons. the color of the text changes with hovering so color parameters have been moved to menuButton[/comment]
[class name=menuText]
text-align: center;
font-family: var(--menuFont);
font-size: var(--menuTextSize);
text-transform: uppercase;
letter-spacing: 2px;
[/class]
[comment]invisible scrollbox[/comment]
[class name=scrollBox]
display: block;
position: relative;
height: 90%;
width: 100%;
max-height: 500vh;
padding-right: 100px;
padding-left: 5px;
overflow-x: hidden;
overflow-y: scroll;
[/class]
[class name=scrollBox maxWidth=1200px]
width: 100%;
height: auto;
max-height: 150vmax;
overflow-x: hidden;
overflow-y: auto;
[/class]
[comment]scripts[/comment]
[comment]initial state hides everything except the center button[/comment]
[script class="menuButton" version=2]
(= currentTab "one")
(hide "two")
(hide "three")
(hide "four")
[/script]
[comment]changes tabs by finding the tabName of the button clicked[/comment]
[script class="menuButton" on=click version=2]
(fadeOut 500 currentTab)
(= currentTab (trim (index (split (getText) "TAB") 0)))
(setTimeout 0.5 (fadeIn 100 currentTab))
[/script]
[comment]variables[/comment]
[class=variables]
--mainFont: 'Open Sans', sansserif;
--mainTextSize: 0.85em;
--mainTextColor: rgb(210, 210, 210);
--headerFont: 'Share', sansserif;
--menuFont: 'Roboto Condensed', sansserif;
--menuTextSize: 1em;
--menuTextColor: #c2c2ca;
--menuTextHoverColor: #d6d6db;
--menuButtonWidth: 25%;
--menuButtonColor: rgba(210, 210, 210, 1);
--menuButtonBgColor: rgba(20, 20, 20, 0.7);
--menuButtonHoverBgColor: rgba(21, 67, 96, 0.9);
--menuButtonHoverColor: rgba(210, 210, 210, 0.9);
--menuBorder: rgba(210, 210, 210, 0.5);
--nameFont: 'Anton', 'sansserif';
--nameColor: rgb(240, 240, 240);
--profileFont: 'Roboto', sansserif;
--profileTextSize: 0.8em;
--profileImage: url(https://i.imgur.com/nzqQd7Q.jpg);
--infoBoxColor: rgba(20, 20, 20, 0.8);
--infoBoxBorderColor: rgba(120, 120, 120, 0.5);
--infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor);
--mainAccent: rgb(210, 210, 210);
--transparent: rgba(0, 0, 0, 0);
--primaryBoxColor: rgb(130, 20, 40);
--diagonalColor: rgba(220, 220, 220, 1);
--primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6);
--transitionFunction: 0.3s ease-in-out 0s;
--textTransitionFunction: 0.8s ease-in-out 0s;
--columnOneWidth: 30%;
--columnTwoWidth: 65%;
--profileHeight: 90%;
--nameHeight: 10%;
--bgHexImage: url(https://i.imgur.com/N0uts0y.png);
--bgHexPosition: center center;
--bgHexSize: auto;
--bgHexRepeat: repeat;
[/class]
[div class="variables"]
[div class="aspectRatio"]
[div class="root"]
[div class="mainFlexContainer"]
[div class="primaryBox"]
[div class="diagonal"]
Lexielai
[/div]
[div class=hexRender][/div]
[div class="characterName characterNameText"]
The Character Sheet
[/div]
[div class=infoFlexContainer]
[div class=profileContainer]
[div class=profileImageContainer]
[/div] [comment]*Keep this div empty. Image will be here. Check the VARIABLES section and look for "profileImage" to insert link*[/comment]
[div class=scrollBox]
[div class=profileInfoFlexContainer]
[div class="profileInfoBox"]
[div class="profileLabelBox profileInfoText profileLabelText"]
Name
[/div]
[div class="profileInfo profileInfoText profileText"]
Full Name
[/div]
[/div] [comment]*profileInfoBox*[/comment]
[div class="profileInfoBox"]
[div class="profileLabelBox profileInfoText profileLabelText"]
Aliases
[/div]
[div class="profileInfo profileInfoText profileText"]
Titles or Pseudonyms
[/div]
[/div] [comment]*profileInfoBox*[/comment]
[div class="profileInfoBox"]
[div class="profileLabelBox profileInfoText profileLabelText"]
Age
[/div]
[div class="profileInfo profileInfoText profileText"]
16+
[/div]
[/div] [comment]*profileInfoBox*[/comment]
[div class="profileInfoBox"]
[div class="profileLabelBox profileInfoText profileLabelText"]
Gender
[/div]
[div class="profileInfo profileInfoText profileText"]
Any
[/div]
[/div] [comment]*profileInfoBox*[/comment]
[div class="profileInfoBox"]
[div class="profileLabelBox profileInfoText profileLabelText"]
Race
[/div]
[div class="profileInfo profileInfoText profileText"]
Manu, Deva, Asura, Hybrid, Cyborg
[/div]
[/div] [comment]*profileInfoBox*[/comment]
[div class="profileInfoBox"]
[div class="profileLabelBox profileInfoText profileLabelText"]
District
[/div]
[div class="profileInfo profileInfoText profileText"]
Your Home District
[/div]
[/div] [comment]*profileInfoBox*[/comment]
[/div][/div][/div] [comment]*profileInfoFlexContainer, scrollBox, profileContainer*[/comment]
[div class=menuContainer]
[div class=menuFlexContainer]
[div class="menuButton menuText"]
[div class="tabName"]oneTAB[/div]
Dossier
[/div]
[div class="menuButton menuText"]
[div class="tabName"]twoTAB[/div]
Psych Eval
[/div]
[div class="menuButton menuText"]
[div class="tabName"]threeTAB[/div]
Capabilities
[/div]
[div class="menuButton menuText"]
[div class="tabName"]fourTAB[/div]
Associates
[/div]
[div class=menuDivider]
[/div]
[/div][/div][comment]*menuFlexContainer, menuContainer*[/comment]
[div class="infoContainer"]
[div class="scrollBox one"]
[div class=mainHeader]
Background
[/div]
[div class=mainSubheader]
Pre-Awakening
[/div]
[div class=mainText]
Introduce us to your life before your Awakening.
[/div]
[div class=mainSubheader]
Post-Awakening
[/div]
[div class=mainText]
Explain how your Awakening has changed your life.
[/div]
[div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
Appearance
[/div]
[div class=mainText]
Describe your appearance.
[/div]
[/div]
[div class="scrollBox two"]
[div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
Characteristics
[/div]
[div class=mainSubheader]
Personality
[/div]
[div class=mainText]
Give us a brief description of your personality.
[/div]
[div class=mainSubheader]
Fatal Flaws
[/div]
[div class=mainText]
What do you struggle with? What parts of your personality are less than ideal? What personal qualities are you not satisfied with?
[/div]
[div class=mainSubheader]
Motivations and Values
[/div]
[div class=mainText]
What is your dream/motivation? What is important to you? Why?
[/div]
[div class=mainSubheader]
Fears and Taboos
[/div]
[div class=mainText]
You may be eight feet tall and shoot fireballs, but everyone is afraid of something. What frightens you? What line will you never cross?
[/div]
[/div] [comment]*scrollBox*[/comment]
[div class="scrollBox three"]
[div class=mainHeader]
Astra Abilities
[/div]
[div class=mainSubheader]
Power
[/div]
[div class=mainText]
What is your special power? What does it do? You may have ONE for now.
[/div]
[div class=mainSubheader]
Limitations
[/div]
[div class=mainText]
What are the limits of your ability? Choose THREE ways in which it is not very effective.
[/div]
[div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
Skills
[/div]
[div class=mainText]
Outside of your Astra Powers, what else can you do? What other qualifications, skills, or abilities do you have?
[/div]
[/div] [comment]*scrollBox*[/comment]
[div class="scrollBox four"]
[div class=mainHeader]
Outside Opinions
[/div]
[div class=mainSubheader]
Quotes (Optional)
[/div]
[div class=mainText]
Quotes about you from other people's perspectives.
[/div]
[div class=mainSubheader]
Reputation (Optional)
[/div]
[div class=mainText]
What are you known for? How well known are you?
[/div]
[div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
Relationships
[/div]
[div class=mainSubheader]
Allies (Optional)
[/div]
[div class=mainText]
Who are your allies? Your friends, your family, or your mentors? What is your relationship like with them?
[/div]
[div class=mainSubheader]
Enemies (Optional)
[/div]
[div class=mainText]
Who do you not get along with? Why?
[/div]
[div class=mainSubheader]
Organizations (Optional)
[/div]
[div class=mainText]
What organizations are you a part of, or have ties to?
[/div]
[/div] [comment]*scrollBox*[/comment]
[/div][/div] [comment]*infoContainer, infoFlexContainer*[/comment]
[/div][/div][comment]*primaryBox, mainFlexContainer*[/comment]
[/div][/div][/div] [comment]*root, aspectRatio, variables*[/comment]
[/nobr]