Solaris CSS

 
by Annie Stein
Welcome to Solaris, traveller! Let me get you up to speed.
Solaris is a soft science fiction webcomic set in our own universe, kind of. Learn more by continuing to read, or click here to be taken to the comic.
Q:Where am I?   You're still in the system known as Sol. Except this time each planet is habitable and developed its own life. The people are humanoid, mostly.
Q:I heard something about a comic?   Oh yes! The main comic is still in development, but you can read the first few pages of Little Blue if you click here.  
Q:What's going on?   Sol is invading. The resentful sun sends its angelic armies: the Scourge. For now, they're being held back at Mercury by Penumbra.
by Annie Stein
A repository of CSS snippets created for Solaris.   Feel free to use and adapt the provided code snippets for your own world. Also, if you would like me to talk about other elements of Solaris' CSS and add them to the repository, please let me know in a comment on this article.

CSS 101

  Terminology
#id .class element {
property: value;
}

Collapse Sidebar

  This code is Mobile First. This means that it first styles things to look correct on small screens like mobile. Then we adapt the css for wider screens later with media rules.   The code snippet here widens the article and the sidebar so that the sidebar migrates to the bottom of the page.
Collapse Sidebar Code
.user-css .article-content-right,
.user-css .article-content-left {
 width: 100%;
}
 

Floating Sidebar

  This code fixes the position of the sidebar to the left of your screen when the screen is wide enough to support it. It also makes it scroll down with you as you read.   As it is right now, it is currently not set up for long sidebars. It will probably need extra code to make it look nice if the sidebar is longer than 80% of the page height.  
Floating Scrolling Sidebar Code
@media screen and (min-width: 1750px) {
 .user-css .article-content-right {
  position: fixed;
  top: 10%;
  right: 0px; 
  max-width: 300px;
  max-height: 80%;
 }
}
I've placed my breadcrumbs in the Global Article Introduction Block. You can find this in Settings > Design > Global Content. To make sure I affect the entire breadcrumb, I wrapped my breadcrumbs in a container called breadbox.   If you rename or decide not to use the provided bb code you will have to change all the breadcrumb css.
Global Article Introduction Block BB Code
[container:breadbox][breadcrumb][/container]
 

Reordering the Header

  This code uses flex to reorder the content in the header. By default, the header features the title, the author, and then any content placed in the global field. We want to migrate our breadcrumb above the header, and this is how you can do that.   First we set the article-title, the header itself, to display as a flex container. We set it to display these elements below eachother with the flex direction. Once the container that holds the elements is set to flex, we can reorder them. 1 will be the first, 2 second, and so on. You can play around with this!
Moving the breadcrumbs over the title.
.user-css .article-title {
 display: flex;
 flex-direction: column;
}
 
.user-css .breadbox {
 order: 1;
}
 
.user-css .article-title .m-b-0 {
 order: 2;
}
 
.user-css .article-title-author {
 order: 3;
}
 

Stacking Back to Homepage and Breadcrumbs

  Now that we've reordered the header so that the breadcrumbs are above the header, you might notice it already overlaps slightly with our "Back to Homepage" button. I decided to stack them, after all, there's no point in repeating a link back to your homepage.   To do this I move the Back button over the breadcrumb, and then I add a margin and padding to the breadcrumb so the breadcrumb itself isn't hidden.  
CSS TIP: Unless you're doing tricky stuff with negative values, you can combine properties like margin-top, margin-bottom into one line.   If you put two values in, it'll use the first number for the top and bottom, and the second value for the left and right.   If you put four values in, the order is always
top, right, bottom, left.
Stacking the Back To Homepage
.user-css .backtoworld a {
 top: 0px;
 left: -10px;
 height: 42px;
 width: 210px;
}
Nudge breadcrumb to the left
.user-css .breadbox .breadcrumb {
 padding: 0 0 0 65px;
 height: 42px;
}
Nudge breadbox to the left
.user-css .breadbox {
 margin: 0 -25px 0 125px;
}
Hide the breadcrumb homepage
.user-css .breadbox .breadcrumb-world-link-wrapper {
 display: none;
}
 

Hide on Mobile

  The breadcrumb is handy, but screen real estate is very limited on mobile. This code hides the breadcrumb on small screens and makes it show up only when there's enough space for it.
Hide on Mobile
 
.user-css .breadbox .breadcrumb {
  display: none;
}
 
@media screen and (min-width: 992px) {
 .user-css .breadbox .breadcrumb {
  display: block;
 }
}

Numbered Table of Contents

  Ever wanted a numbered table of content like Wikipedia? Well, it is doable on world anvil, but it takes some kinda advanced CSS. Thankfully for you, I already wrote it!   To fudge it we need to use the pseudoelement ::before. Typically, css only styles what's already there, but with before and after we can add new stuff, like pictures or shapes! It's often used to add written labels like "info", but we can't use it to add text on world anvil. Content had to be slightly nerfed on world anvil to protect the site against harmful code injections.   It's still a very powerful tool. Here, we use it to count for us. Counters are a bit tricky to set up, because we need to remember to reset them. Code can't really intuit things like "oh, I should start this subheader count fresh now that we've got a new header". So we have to tell it, hey, each time you see a header, reset this and that counter.
Setting up the counters for each tier
.user-css div.articletoc {
 counter-reset: toc0;
}
 
.user-css .articletoc .article-toc-indent-0 {
 counter-reset: toc1;
}
 
.user-css div.articletoc .article-toc-indent-1 {
 counter-reset: toc2;
}
 
.user-css div.articletoc .article-toc-indent-2 {
 counter-reset: toc3;
}
  Now that we've made sure it'll start anew when it's supposed to, we can add the counters themselves. I'm telling it to add a count before the numbers. It automatically tallies stuff up for us and shows the number.   You might be curious why there's a link in here. That's because I can't add writing, but I can add images. So to get a period in my article table of contents, I have to put in an image of a period. That's slightly janky, but, well, I'd rather we have to write slightly janky code than leave the site vulnerable.
Adding the counters
.user-css .articletoc .article-toc-indent-0::before {
 counter-increment: toc0;
 content: counter(toc0) 
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png);
 margin-right: 10px;
}
 
.user-css .articletoc .article-toc-indent-1::before {
 counter-increment: toc1;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1);
 margin-right: 10px;
}
 
.user-css .articletoc .article-toc-indent-2::before {
 counter-increment: toc2;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2);
 margin-right: 10px;
}
 
.user-css .articletoc .article-toc-indent-3::before {
 counter-increment: toc3;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc3);
 margin-right: 10px;
}

CSS Repository

Table of Contents
This article is a stub . It will be expanded upon later.


Comments

Please Login in order to comment!