Custom Styling for Listed Blog πŸ’…

This post outlines how to make a responsive grid layout for your Listed blog
TLDR: You can view the custom CSS used for this blog, here: https://listed.to/p/g3EKNSBcnX

Background

Listed is a minimal blogging platform, built on top of Standard Notes.

When it comes to customizing your blog, Listed has some options for color theming with CSS variables and basic styling with a stylesheet. But you are going to be quite restricted in what you can do (presuming you are using the hosted instance), since you are not able to modify your sites core markup (HTML), nor can you add any interactive behavior (JavaScript), and styles must be written in CSS (no SASS). However, you have got full-reign over the CSS, and the Listed team have structured the blog in a way that makes it nice and easy to make both small theming changes, big layout modifications.

This article isn't a full tutorial on blog styling (the official docs on styles cover this, much better than I ever could), it's just a short explanation on how you start to make some layout changes, and what I did to style my page. I know nothing about UI/UX design, so my blog might not be the prettiest, take this just as an example of what is possible

I've had several people ask to see my stylesheet, and seen a few other blogs pop up using my flexbox homepage design, so I thought I'd make things easier for you! Here is the full stylesheet used for my blog. Feel free to do what you like with it. I would prefer that you modify it slightly, if your going to use it for your blog (I like being unique πŸ€ͺ), but no problem if you don't- it's open source

Screenshot- Light Theme Screenshot- DarkTheme

Getting Started - The Basics

Create Style File

First off, create a note with a .css extension, and add the following lines to the top:

---
metatype: css
---

Modifying Colour Scheme

You can change the blog colour schemes very easily, using the pre-specified variables, for example

:root {
  --background-color: white;
  --body-text-color: black;
  --post-title-color: var(--body-text-color);
  --dimmed-border-color: rgb(233, 233, 233);
  --header-border-color: var(--dimmed-border-color);
}

... A full list of available colour variables can be found here, or through the browser dev tools.

Adding Additional Styles

You can also apply specific styles to any element within the page, by finding it's CSS selector (using the browser dev tools), and adding CSS for it, for example:

.author-post.single-post-show .post-content {
    border: 2px solid --body-text-color;
}

Try to make the selectors as specific as possible, to avoid the styles unintentionally being applied to other elements.

Adding Post-Specific Styles

To apply styles that will display only for that post, you can add a <style></style> tag. You can also write your own HTML markup within a MarkDown note, and specify classes or ID. It's not the neatest solution, but it works


My Styles - Walkthrough

Initial Page Overrides

html {
  overflow-x: hidden;
}
body {
  max-width: none;
  padding: 2%;
}
div#main-container {
    padding: 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

Hide Post Content on Homepage

Since some of my posts are long (and kinda boring), so I did not want them to clutter up the main page, and instead have just the titles and date visible

.author-post .post-body {
  display: none;
}

Display Posts in Grid Layout

The home page post titles are displayed in a responsive flex-box grid, which makes each box the same width, and fills availble space

div#author-posts {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

div#author-posts::before {
  content: '';
  width: 0;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

div#author-posts > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

div.single-post-show.author-post {
    margin: 0.5rem;
  display: inline-block;
    vertical-align: top;    
}

Post Tiles Styling

Each post tile ha a Title and date, and these styles specify how this should be layed out

div.single-post-show.author-post .post-content {
    padding: 0.5rem;
    height: 100%;
    min-height: 140px;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
div.single-post-show.author-post .post-content:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
div.single-post-show.author-post .post-content .post-date {
    position: absolute;
    bottom: 0;
    color: #c6c6c6;
}
div.single-post-show.author-post .post-content .post-title {
    font-weight: normal;
    font-size: 1.25rem;
}
div.single-post-show.author-post .post-content .post-title a:visited {
    color: #888;
}

Dark/ Light Theme

I personally love dark style sites, but I know not everyone does, so I have a dark and light theme, which is applied according on the users device preferences (set by wither their OS or browser). This is done with a media query: @media (prefers-color-scheme: dark)

I kept the light as default and outside of any media query for support for older browsers, and then made an overide for dark mode:

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #0d0e20;
        --body-text-color: #fdfdfd;
        --link-color: #12cdd7;
    }
    .post-content, .navigation .older {
        background: #ffffff0a;
        box-shadow: 
          0 1px 3px rgba(0, 0, 0, 0.83),
          0 1px 2px rgba(0, 0, 0, 0.57);
    }
    .post-content:hover {
        box-shadow:
          0 3px 10px rgba(0, 0, 0, 0.83),
          0 3px 1px rgba(0, 0, 0, 0.57);
    }

    input, textarea {
        border: 1px solid #fff;
        border-radius: 0;
        color: #fff;
        background: #ffffff0a;
    }
}

"Older" Button

Once you have more than 15 posts, a hyperlink will appear linking to Older Posts. I wanted to change the wording, and also make it the same style as the other post tiles.This is done by adding it's selector to the above post tile classes so that they can share styles. And to change the text wording, I just used the ::before / ::after psudo selectors, and then set the visiblily to hidden for the original text

#author-profile #author-posts .navigation {
    margin: 0.5rem !important;
}
#author-posts .navigation .older {
    padding: 0.5rem;
    height: 100%;
    min-height: 140px;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    width: 100%;
    font-size: 1.5rem;
}
#author-posts .navigation .older a {
    visibility: hidden;
}
#author-posts .navigation .older a::before {
  content: "There's more!";
  color: #c6c6c6;
  font-size: 0.9rem;
  display: block;
  visibility: visible;
}
#author-posts .navigation .older a::after {
  content: "Show Older Posts ➑️";
  color: #888;
  font-size: 1.25rem;
  display: block;
  visibility: visible;
}

/* Material Style for Post Containers */
.post-content {
    padding: 1rem;      
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

Code Snippets Styles

code, .prettyprint {
    font-family: courier, monospace !important;
    font-size: 0.75rem;
    line-height: 0.75rem;
    color: #a2266c;
    padding: 4px 8px;
    background-color: #f7f7f9;
    border-radius: 3px;
}
.highlight {
    border-radius: 4px;
    width: min-content;
}

Navbar Buttons

The page links, in the top-right of the navbar looked a bit inconsistant, so I added a box-type style to them

div.pages-menu a.page-link {
    padding: 0.4rem;
    border: 1px solid var(--page-menu-link-color);
    margin: 0.2rem;
    text-decoration: none;
}

Additional Tweeks

After all the above styles were applied, there were a couple of things which didn't look quite right, mostle spacings or little glitchs.


/* Text Highlight Color */
::selection {
  color: #0d0e20;
  background: #12cdd7;
}

/* Additional spacing for ':' in title */
.author-name.path-item:before {
    margin: 0 0.4rem 0 0.1rem;
}

/* Use Monospace for Headers and Titles */
.header-author-info, #page-header, h1, h2, h3 {
    font-family: monospace;
}

/* Leave a bit of space between sections */
h3 {
    margin-top: 1rem;
}

/* Horizontal Rule */
div.post-body hr {
    height: 0;
    padding: 0;
    margin: 1.5rem 0;
    border-bottom: 1px dashed #12cdd757 !important;
}
hr::before {
    content: none;
}



You'll only receive email when Alicia's Notes πŸš€ publishes a new post

More fromΒ Alicia's Notes πŸš€