Amerikia1126
Occasionally Active
Code:
[nobr]
[div class=scrollHelp]
[div class=dumpMain]
[div class=topBanner][/div]
[div class=topBar]
[div class=menuButton][fa]fa-bars[/fa][/div]
Sample Roleplay - An Info Dump
[/div]
[div class=dumpHolder]
[div class=menuHolder]
[div class=menuHolderII]
[div class=menuMain]
Filter by
[div class=menuSelect]
[div class="menuItem menuActive filterItemAll"]All[/div]
[div class="menuItem filterItemChar"]Characters[/div]
[div class="menuItem filterItemLoc"]Locations[/div]
[div class="menuItem filterItemEvent"]Events[/div]
[/div]
[/div]
[/div]
[/div]
[div class=dumpBody]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 1[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 2[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 3[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 4[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 5[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 6[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 7[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 8[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 9[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[div class=infoBox]
[div class=infoBoxTop]
[div class=infoBoxIcon][fa]fa-user-o[/fa][/div]
Header 10[/div]
[div class=infoBoxSubtitle]Subtitle[/div]
[div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div]
[div class=infoBoxBottom]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-one[/div]
[div class=infoBoxBottomTag][fa]fa-hashtag[/fa]tag-two[/div]
[/div]
[/div]
[/div]
[div style="visibility: hidden;"].[/div]
[/div]
[/div]
[/div]
[div class=footer]Background image found [url=https://am-markussen.deviantart.com/art/Sun-City-429157440][color=#8b8949]here[/color][/url].[/div]
[div style="display: none;"]----------------------------CLASS CODE STARTS HERE-----------------------------------[/div]
[div style="display: none;"][font=Khula].[/font][/div]
[div style="display: none;"][font=Antic].[/font][/div]
[class name=scrollHelp]
overflow: hidden;
height: 800px;
width: 1200px;
margin: auto;
box-sizing: border-box;
border-radius: 3px;
[/class]
[class name=dumpMain]
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
background: #fdfdfd;
color: #5e5e5e;
font-family: Khula, Calibri, sans-serif;
font-size: 11pt;
padding-right: 20px;
[/class]
[class name=topBanner]
background: url(https://pre00.deviantart.net/1f55/th/pre/f/2014/024/4/2/sun_city_by_am_markussen-d73ic00.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 20%;
min-height: 250px;
margin-right: -20px;
[/class]
[class name=topBar]
font-family: Antic, 'Courier New', serif;
font-size: 18pt;
color: #fdfdfd;
font-weight: 600;
padding: 5px 15px 5px 15px;
position: sticky;
top: 0px;
letter-spacing: .5px;
word-spacing: -2px;
line-height: 150%;
background: #8b8949;
box-shadow: 0px 10px 20px 2px rgba(222, 222, 222, .95);
text-align: justify;
z-index: 2;
margin-right: -20px;
[/class]
[class name=menuButton]
display: inline;
margin-right: 10px;
cursor: pointer;
transition-duration: 200ms;
[/class]
[class name=menuButton state=hover]
color: #dedede;
[/class]
[class name=menuHolder]
position: relative;
min-height: 100%;
max-height: 100%;
max-width: 30%;
[/class]
[class name=menuHolderII]
position: absolute;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
background: #fdfdfd;
border-radius: 0px 0px 3px 0px;
box-shadow: 10px 10px 20px 2px rgba(222, 222, 222, .95);
[/class]
[class name=menuMain]
position: sticky;
top: 43px;
z-index: 1;
font-family: Khula, Calibri, sans-serif;
font-size: 14pt;
max-width: 90%;
min-height: 100%;
max-height: 300px;
margin: auto;
padding-top: 20px;
[/class]
[class name=menuSelect]
font-family: Khula, Calibri, sans-serif;
font-size: 12pt;
font-weight: normal;
border-top: 1px solid #c9c9c9;
border-bottom: 2px solid #c9c9c9;
margin-bottom: 46px;
[/class]
[class name=menuItem]
border-top: 1px solid #c9c9c9;
user-select: none;
padding: 5px;
transition-duration: 350ms;
[/class]
[class name=menuItem state=hover]
background: #f9f9f9;
letter-spacing: .5px;
[/class]
[class name=menuActive]
background: #efefef !important;
letter-spacing: 1px !important;
[/class]
[class name=dumpHolder]
height: 100%;
width: 100%;
[/class]
[class name=dumpBody]
height: 100%;
width: 100%;
margin-right: -20px;
padding: 20px;
columns: 4 200px;
column-gap: 10px;
column-rule: 1px solid #f9f9f9;
[/class]
[class name=infoBox]
break-inside: avoid;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 3px;
box-shadow: 0px 2px 2px 2px rgba(222, 222, 222, .5);
padding: 20px;
[/class]
[class name=footer]
width: 1200px;
margin: auto;
font-family: Khula, Calibri, sans-serif;
color: #5e5e5e;
text-align: right;
margin-top: 2px;
font-size: 10pt;
[/class]
[div style="display: none;"]----------------------------SCRIPT CODE STARTS HERE-----------------------------------[/div]
[script class=menuHolder]
hide menuHolder
hide menuHolderII
hide menuMain
set clickCount 0
[/script]
[script class=menuButton on=click]
inc clickCount 1
if (eq ${clickCount} 1) (fadeIn 0 menuHolder)
if (eq ${clickCount} 1) (fadeIn 0 menuHolderII)
if (eq ${clickCount} 1) (slideDown 650 menuMain)
if (eq ${clickCount} 2) (set clickCount 0)
if (eq ${clickCount} 0) (slideUp 650 menuMain)
if (eq ${clickCount} 0) (fadeOut 650 menuHolder)
if (eq ${clickCount} 0) (fadeOut 650 menuHolderII)
[/script]
[/nobr]First, the stickiness for topBar wasn't working, so I fixed that. Then I put the menu in and everything in the dumpMain started flickering, so I fixed that by putting an invisible dot in dumpHolder. Then it wouldn't scroll when needed, so I fixed that, killing the usability for smaller screens. Now the menu is broken again because it disappears when you scroll too low and extends way too far when scrolled too high and it's pushing everything down again. And content is getting cut off and everything is just a giant mess.
[div class=scrollHelp] [div class=dumpMain] [div class=topBanner][/div] [div class=topBar] [div class=menuButton][/div] Sample Roleplay - An Info Dump [/div] [div class=dumpHolder] [div class=menuHolder] [div class=menuHolderII] [div class=menuMain] Filter by [div class=menuSelect] [div class="menuItem menuActive filterItemAll"]All[/div] [div class="menuItem filterItemChar"]Characters[/div] [div class="menuItem filterItemLoc"]Locations[/div] [div class="menuItem filterItemEvent"]Events[/div] [/div] [/div] [/div] [/div] [div class=dumpBody] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 1[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 2[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 3[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 4[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 5[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 6[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 7[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 8[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 9[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [div class=infoBox] [div class=infoBoxTop] [div class=infoBoxIcon][/div] Header 10[/div] [div class=infoBoxSubtitle]Subtitle[/div] [div class=infoBoxBody]Lorem ipsum I am typing this manually this was a bad idea I even have a copy pasta in another tab but here I am not using it, oh boy what a genius I am.[/div] [div class=infoBoxBottom] [div class=infoBoxBottomTag]tag-one[/div] [div class=infoBoxBottomTag]tag-two[/div] [/div] [/div] [/div] [div style="visibility: hidden;"].[/div] [/div] [/div] [/div] [div class=footer]Background image found here.[/div] [div style="display: none;"]----------------------------CLASS CODE STARTS HERE-----------------------------------[/div] [div style="display: none;"].[/div] [div style="display: none;"].[/div] [class name=scrollHelp] overflow: hidden; height: 800px; width: 1200px; margin: auto; box-sizing: border-box; border-radius: 3px; [/class] [class name=dumpMain] height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; background: #fdfdfd; color: #5e5e5e; font-family: Khula, Calibri, sans-serif; font-size: 11pt; padding-right: 20px; [/class] [class name=topBanner] background: url(https://pre00.deviantart.net/1f55/th/pre/f/2014/024/4/2/sun_city_by_am_markussen-d73ic00.jpg) no-repeat; background-size: cover; background-attachment: fixed; background-position: 20%; min-height: 250px; margin-right: -20px; [/class] [class name=topBar] font-family: Antic, 'Courier New', serif; font-size: 18pt; color: #fdfdfd; font-weight: 600; padding: 5px 15px 5px 15px; position: sticky; top: 0px; letter-spacing: .5px; word-spacing: -2px; line-height: 150%; background: #8b8949; box-shadow: 0px 10px 20px 2px rgba(222, 222, 222, .95); text-align: justify; z-index: 2; margin-right: -20px; [/class] [class name=menuButton] display: inline; margin-right: 10px; cursor: pointer; transition-duration: 200ms; [/class] [class name=menuButton state=hover] color: #dedede; [/class] [class name=menuHolder] position: relative; min-height: 100%; max-height: 100%; max-width: 30%; [/class] [class name=menuHolderII] position: absolute; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; background: #fdfdfd; border-radius: 0px 0px 3px 0px; box-shadow: 10px 10px 20px 2px rgba(222, 222, 222, .95); [/class] [class name=menuMain] position: sticky; top: 43px; z-index: 1; font-family: Khula, Calibri, sans-serif; font-size: 14pt; max-width: 90%; min-height: 100%; max-height: 300px; margin: auto; padding-top: 20px; [/class] [class name=menuSelect] font-family: Khula, Calibri, sans-serif; font-size: 12pt; font-weight: normal; border-top: 1px solid #c9c9c9; border-bottom: 2px solid #c9c9c9; margin-bottom: 46px; [/class] [class name=menuItem] border-top: 1px solid #c9c9c9; user-select: none; padding: 5px; transition-duration: 350ms; [/class] [class name=menuItem state=hover] background: #f9f9f9; letter-spacing: .5px; [/class] [class name=menuActive] background: #efefef !important; letter-spacing: 1px !important; [/class] [class name=dumpHolder] height: 100%; width: 100%; [/class] [class name=dumpBody] height: 100%; width: 100%; margin-right: -20px; padding: 20px; columns: 4 200px; column-gap: 10px; column-rule: 1px solid #f9f9f9; [/class] [class name=infoBox] break-inside: avoid; margin: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 3px; box-shadow: 0px 2px 2px 2px rgba(222, 222, 222, .5); padding: 20px; [/class] [class name=footer] width: 1200px; margin: auto; font-family: Khula, Calibri, sans-serif; color: #5e5e5e; text-align: right; margin-top: 2px; font-size: 10pt; [/class] [div style="display: none;"]----------------------------SCRIPT CODE STARTS HERE-----------------------------------[/div] [script class=menuHolder] hide menuHolder hide menuHolderII hide menuMain set clickCount 0 [/script] [script class=menuButton on=click] inc clickCount 1 if (eq ${clickCount} 1) (fadeIn 0 menuHolder) if (eq ${clickCount} 1) (fadeIn 0 menuHolderII) if (eq ${clickCount} 1) (slideDown 650 menuMain) if (eq ${clickCount} 2) (set clickCount 0) if (eq ${clickCount} 0) (slideUp 650 menuMain) if (eq ${clickCount} 0) (fadeOut 650 menuHolder) if (eq ${clickCount} 0) (fadeOut 650 menuHolderII) [/script]
