As I've written on the blog “Titan” is first of all a new design for Elevenfour - the fourth for those counting. 
And the new design is what's essentially part 1 of Project Titan. But it won't stop here, because I'm also planning to remove Fireball CMS from this site - but at this point it's not clear if I'd succeed doing that. So let's rather talk about
The New Design
While the previous redesign (Sovereign Backdrop) mostly focused on adding a few changes here and there and moving to the dark side of design (see what I did there?) but essentially keeping the feeling of the version before that (Sovereign) things might have escalated a little bit this time.
The plan was to be more modern, both in code and design, and to reduce visual overload while still keeping some eye candy. So, for the first time, I've had something similar to a design system (build in Sketch) from the beginning and I've also build a plugin that's aiming to help me stay consistent with design. As you might have seen, Elevenfour's branding colors - blue, green and purple - are still around. But they now have friends.
With that being out of the way, you now know what mostly influenced the new design - like it or not. Let's take a look at some of
The Details
If you've visited Elevenfour a long time ago - when WCF 2.x was still a thing - you might remember that the header of the page prominently featured the headline and the description (if available) of the current page. Back than this was achieved by the magic of jQuery. But when I decided that I wanted to bring this back I also challenged myself to not rely on jQuery again and I am happy to say that I succeeded. And this is what it looks like:
The header will carry at least the page title. If available it will also carry the description of that page and on selected pages, articles for example, you will also find some meta data included.
I also build a way to bring back icons to selected pages like we used to have them in Burning Board 3 - not the exact same way and without the functionality. If you have an eye on it, you'll most likely see it.
On some pages the color of the header will also change - the default color is an anthracite grey, articles are purple and the support area is green - more things might come with Project Titan part 2.
More Curves Please
When I said earlier that this new design is inspired by macOS Big Sur and Windows 11 this does also mean, that you will see a more curved design. Not everywhere but here and there. We've always had border-radius in use here at Elevenfour but this time it's more and it's more consistent - where ever possible. The basic rule I made for myself was outside 8px and inside 4px - this works often, but as that indicates not always. So for
Buttons
for example I've decided that, in most cases, they will have a border-radius of 4px - no matter if they are inside of something or not. And they I also thought it might be cool if the icons on buttons do have a different color than the text label.
Fancy Cards
Another, rather big part part, of the redesign are cards. I have cards for some time around and even WoltLab has them around in WoltLab Suite, too. But one thing always bothered me: They've never been consistent throughout WoltLab Suite, somewhat ugly (that's highly subjective, mind you) and had some usability issues (that's objective). And by usability issues I mean that WoltLab's approach of linking almost the entire card makes in nearly impossible to select text. I'm not claiming that I found the ultimate solution for card design but at least it doesn't cause pain for myself.
Cards are also the part that brings most of the eye candy to the design - if you're on a modern browser. Before I talk about it here's a screenshot for you.
A quick not first: In reality these cards are not next to each other, that's why they don't match in size.
What you can see in that screenshot is an article card (of that very article you're reading but still unfinished) next to a forum card. The basic design of both cards is mostly the same with some deviations to match the needs of their respective purposes.
The previous design had images only for the background of the cards, the design still has that but they're behind "frosted dark, glass" and the same image sits also on top of the card.
The Tech Stuff
Most of the new things tech wise will be in part 2 of Project Titan. But some new tech already found its way to Elevenfour. Some of that is related to design.
Staying consistent while keeping flexibility
Say that three times fast.
As I've mentioned at the beginning of this article I've build myself a plugin to help me stay consistent while redesigning Elevenfour. That plugin is called TitanX and in its first iteration is basically a collection of SCSS files that provide the new grid system, e.g. the cards and some other basic CSS declarations. But it's also build to be flexible so that cards can be a little narrower, like the members cards, or can even carry different amounts and types of content without falling apart. It does also come with some options so I can easily change the look of Elevenfour with the click of a button. You might know this feature from some of Elevenfour's styles that are available to use on our website.
VieCode Forms
That's a thing here now, too. I've bought this plugin shortly after its release - always with the intention to use it for easier product reviews. But for some reason I never could agree with myself on how to do it. But I did now. So, if your using one of Elevenfour's plugins and/ or styles maybe you would like to write a review. You can do this now. And I would appreciate that a lot. 
Browser Support
Let me get to this quickly: You need to use a modern browser. If you're here on this website, you're most likely an administrator of a WoltLab Suite installation (or an aspiring administrator). If you don't have that, you better change it right away. No point of discussion, sorry.
If you're using Safari 14 on macOS Catalina you won't see some of the images on this website. Since Apple for some obscure reason decided that webp support is only for Safari 14 on macOS Big Sur (and above). But if you're using Edge or Firefox on Catalina you're good to go.
Speaking of Firefox: If you have issues seeing the frosted glass effect shown above you might need to change your browser's configuration. Type about:config into the URL bar and than say that you're careful (of cause you are). Then first search for layout.css.backdrop-filter.enabled and change the value to true and second search for gfx.webrender.all to true. If you still can't see it, you might need to restart Firefox. I did this a while ago, so I don't remember exactly if I had to restart. And I also don't know if it's still necessary. But I guess it still is.
Coming next
If you're still here reading this then thank you very much. I know that's a lot to read. And I didn't even talk about everything.
Part 1 means there should be a part 2. But I don't know when that will be (and if ever).
If you have any questions or got anything else to say, please feel free to leave a comment below. If you'd like to say more, you can also write in Elevenfour's Feedback forum - that's also the place to go if you found a bug.
Thanks again for reading.
