Creating a Grid Layout Dark Theme for Listed.to (Old Version)
May 3, 2021•1,345 words
Note: This relates to a previous version of Listed. For a similar theme for the new version, see here
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
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;
}
Use a Custom Font
I am using the Hack typeface, by Source Foundry. It's open source, and looks a little cleaner than Courier, which is the backup font family.
@import url(https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css);
body {
font-family: 'Hack', Consolas, courier, monospace;
}
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;
}