Palette Challenge 2017 of Glass and Steel

Status
Not open for further replies.

Alteras

The Sleepy Prisoner
Administrator
Supporter
Prose
Shadows of the Librarian
Act 1 - The Empty Abyss and the Realm of Knowledge

wwwwThe howling echo of the wind swept through Ru Ling’s senses. Moments went by before the same howl came again, slowing bringing her to consciousness. She felt the cold touch of stone on the tips of her fingers. Slowly that feeling spread throughout her entire backside as she began to realize it wasn't soft and plush feel of her bed. Opening her eyes and sitting straight up, Ru was hit by the cold wind once more. Her light jacket fell onto her lap, revealing a petite dress of black and white frills. Looking around her, she began to take in the sight, massive structures floating the infinite space. Above her were more and more of these structures, walls, stairs, archways, ceilings, pillars, each one casting a dull shadow down onto the one below it. Ru was on a floating platform below all the structures with only a long staircase going up. As she turned her head in wonder, she noticed a marble lectern at the end of the platform opposite of the staircase. She got up and before a step in, bumped her foot into something. Looking down she saw her gauntlet wrapped in her red scarf by her foot. Putting the glove on and wrapping the scarf around her, Ru felt a bit more comfortable, knowing that her weapon of choice is with her once more and not with the Syndicate. That being said, she doesn’t know how neither the gauntlet nor her came to this place. She flexed her fingers and did some quick jabs to make sure that fit on just snug. The light sound of fabric and metal moving to her actions brought more relief to her.

wwwwJust as Ru was about to continue her impromptu training session, a gust of wind hit her, heavier than the previous ones, once again reminding her that she was in an unknown place. She looked over the edge and into the abyss, an abyss that glowed blue. She turned once more to the lectern and approached it. It was made out of white stone carved in the gothic style. On it appeared to be a leather-bound book, large in size and small in depth, like the old picture books she had as a child. As she got closer to it, blue light began to travel up the crevices up to the book, illuminating the cover. Leaning forward, Ru tried to read the title, if it could even be called that. The title was in multiple languages, some recognizable, others incomprehensible, all blurred together, with the different scripts shifting in and out of focus.

wwwwShe hesitantly lifted her right hand up and tapped the blurry text. Instantly a glow of bright blue shined, causing her to flinch back. The text then began to dim, revealing an unchanging title in both Mandarin and English, “Guest Book.” After staring at it for sometime, she slowly opened the book, pausing to see if something would happen before laying the pages inside bare. The pages had a parchment feel and was stained a golden yellow. The signatures on the first few pages were in faded blue, a testament to how old it is. They were all in a variety of languages, some she knew were real, others that seemed to be alien. The dates were all wrong as well, in different chronological systems. The more pages she flipped through, the more clear the ink became. Some names have been strikethrough, or rubbed out of existence. The signatures stopped several pages in. Naturally feeling inclined to sign her name in the book, she began to look for a writing tool. She looked around the book, then around the lectern, before noticing that there was still the bright blue at the tip of her gauntlet. With a bit of thinking, she connected two and two together, realizing her finger tip is her writing tool. With a face of hesitation, she brought her finger close to the paper. She wasn’t too comfortable with the idea of using her finger as a stylus, remembering the pain of signing her name on those touch screens that more and more of the high end stores are using. She barely touched paper when her signature suddenly signed itself, along with a date and time that she knew.

"Ru Ling - Sept. 8, 2028"

wwwwRu slowly lifted her hand back up. The blue glow was no longer on her, but she was more focused on the magical signature that had appeared. It followed the flow and rhythm of her handwriting perfectly. After several moments of intrigue and staring, she slowly closed the book, having taken it in. The blue light faded away and the title returned to its blurred state. She took it in, but she was barely processing it all. Her thoughts were finally catching up to her, and along with it the shock, she is not in Guangzhou, or China, or even the earth she knows. She began to wonder how she got there, why she was there, how she would get out, and much much more.

wwwwAs if to knock her out of her mild panic, a gust of wind hit her, almost knocking her off her feet, in the direction of the stairs opposite the lectern. Ru Ling could only see one way to go in her position, and that would be up the stairs.
BBcode
Code:
[div=position: relative; display:block; --message-width: calc(80vw - 255px); --message-height: calc( var(--message-width) * 914 / 1625 - 45px); --background-color-text:rgba(224,251,252,.6); --message-min-width:calc((70vw + 300px) / 2); --message-min-height:calc( var(--message-min-width) * 914 / 1625 - 45px)][div=position: absolute;][div=position:absolute;top:0em; width:3em; height:0em; padding:0px;  transform:rotate(-90deg) skewY(20deg) translateY(-3em); transform-origin: 100% 0%; background-color:#253237][border=0px solid transparent][accordion=100%]{slide=[bg=#253237; text-align:CENTER][COLOR=#e0fbfc][fa]fa-plus[/fa][/COLOR][/bg]}[bg=#253237][div=margin:0px 0px 0px -6.5px; width:1.6em; visibility:hidden;][accordion=100%]{slide=right|[bg=#5c6b73;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 1[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-8.75em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black;]

Slide 1

[/div]{/ slide}

{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 2[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-14em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 2

[/div]{/ slide}
{slide=right|[bg=#c2dfe3;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 3[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-19.25em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 3

[/div]{/ slide}[/accordion][/div][/bg]{/ slide}[/accordion][/border][/div][/div][div=pointer-events:none;][comment]BBcode by @Alteras[/comment][IMG]Picture Here[/IMG][/div][/div]

Please note that the ending tag for slide has been broken up due to interference with the actual accordion.

Author
Author's Note
wwwwHello! Alteras Alteras here. This is what I have so aptly named "of Glass and Steel" since I can't think of anything else. The intention of the BBcode is to create a tab-text system with a high priority of preserving a mood setting image. Many considerations were made in the creation of this entry.

The BBcode

wwwwThe biggest consideration was the need to preserve the content in a format that is readable and clean on practically any screen, whether it be in appropriate scaling or flex design for when the elements don't fit. I have been able to achieve that with mild success. Mobile users will get the short end of the stick as the content is restricted to the size of the image. For screen sizes of a phablet (yes, a tablet-phone, a phablet) and above, you'll get a nicer screen size. I find that the best orientation to view this BBcode is in landscape mode, the way all screens should be.

wwwwMy second largest consideration was the ability to use this with any image and color palette. This means that the formulas for scaling and the image could easily be changed. CSS allows for the use of variables in the following format:

--variable-name-can-be-anything​

The use of the variable just has to follow this format:

var(--variable-name)​

wwwwI have used this with the formula, but decided against it in the use of color, as the primary purpose of a CSS variable is to save space. At the same time, there is a large reliance on em, vh, and more dynamic lengths to achieve the flexibility this does on different resolutions despite the content effectively being positioned absolute. One problem that you might notice if you are in another theme, is the fact that the text box size is larger. This is due to the differences in sizes from default and color me. Message posts aren’t directly defined, but rather flexed into a shape defined by its surroundings, so that means somewhere a margin or a padding isn’t the same between the two themes, they are minuscule differences, but clearly enough to throw the text box size off by 10 pixels.

wwwwMy third major consideration was the ability to make the tabs look ~cool. This was achieved through the use of Transform:. I probably could've achieved the same feel of this design using normal accordions, but by god does Transform really open up the possibilities of BBcode design. You can do so many more things with it, and it's quite powerful too. Skewing content, warping content, doing 3D stuff with it. It is incredible.

wwwwMany more considerations were made, however this BBcode was made primarily as a proof of concept, that responsive design (in terms of scaling) can be used with powerful div boxes while preserving BBcode design within the content. I intend to create a more comprehensive resource page of both CSS variables and Transform in the near future.

wwwwTo add more tabs, just copy and paste this while adjusting the translateX( ) portion. As it currently stands, you need to add 5.25em to the previous one of it. So that means (-8.75em) - (Slide number - 1)(5.25em).
Code:
{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(OVER HERE); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]
[/div]{/s lide}

The Story

wwwwSo the story is made by me. I didn’t want the place holder text to be lore ipsum, so I made a semi plausible rp intro post about a realm that connects to other worlds focused solely on, you guessed it, Shadows of the Librarian, a group of people who go between worlds doing… something… with… knowledge… I haven’t worked that part out yet. Anyway, the character here is Ru Ling, from an alternate world in the future, doing something. Yep, my imagination at its finest. That’s all! I might make it an actual RP, idk.

Thank you for taking the time to look at this entry.

With sincere wishes,
wwww Alteras Alteras
full
 
Last edited:
Curse you code slide tag glitch!

The post has been edited on tab author due to a glitch. There is now more stuff after the code block.
 
I really like this because at first, I wasn't sure what I was looking at xD I couldn't figure it out until I took a closer look. I like the cleanness of it, but it is a little confusing to the not so savvy bystander xD
The RP idea is beautiful! Good luck, mate! :)
 
Status
Not open for further replies.

Users who are viewing this thread

Back
Top