scarlie
WT Wiki✦ Knowledgebase Web Design
Technical Limitations
The Mediawiki framework, used by Wikipedia, uses CSS that is coded using LESS, a CSS compiler. LESS generates CSS that can sometimes come out with a high specificity, making it difficult to override with normal CSS, which is the only option for wiki administrators who wish to style their wiki.
Developing a workflow for this project was a challenge, since all of the content was already written, and most of the HTML was untouchable. In addition, like many data resources, the wiki is very table-heavy. This made mobile optimization an exciting task. CSS was used to reformat and rearrange the various tables responsively.
Dark Mode
Mediawiki and the Cosmos Skin, which was adapted for the wiki's layout, styled the framework specifically to have light backgrounds and dark text. Combined with overriding LESS, this made creating a dark mode version of the website tricky, and it required a lot of trial and error. When something was fixed, another thing broke as a result.
Eventually, we worked out the kinks and made the whole website legible in both light and dark mode, as well as aesthetically pleasing and clear to navigate.
Home Page
Responsive Tables
It is in fact possible to rearrange HTML tables, using the table-layout property. I
converted tables to flex or grid elements and reordered the cells in the clearest way
possible.
Logo Redesign
The logo redesign aimed to make it a more compact image with a color related to the series, which was later used in the website's color scheme. Cubes, particularly glowing ones, are a central feature of World Trigger and were incorporated with the text.
Visit the live website.