#1

Best for writing while listening to NightRide.FM
Let me know what you think. Feedback and requests are welcome!


1841×1080 172 KB
12 Likes
Meta Post - CSS Themes Showcase
#2

This theme is excellent. I just added it after looking at it since you dropped it in.

#3

Phenomenal :clap:

#5

@death.au Sorry for the noob question, but I’m still learning CSS and only know enough to be dangerous. Where can I place this to get ordered lists with APA styling? I’ve tried and put it in the wrong place, so I get overlaid list item identifiers. I think I messed-up something with the reset function too.

screenshots:
sublime code css

overlay

#6

I saw your post on the Discord and was a bit confused, glad I looked on the forums first!

This is something specific I’ve done with my theme to change the colours of the list items. I couldn’t figure out how to style the list numbers directly, so I set list-style: none; and added my own ::before elements to replace the numbers.

If you’re willing to give up the blue glowy numbers in favour of the APA styling, just remove the whole section marked /* numbered lists */ (around line 189-211). This bit:

/* numbered lists */
ol {list-style: none; counter-reset: li}
ol > li {
    counter-increment: li;
}
ol > li:not(.task-list-item)::before,
ul ol > li:not(.task-list-item)::before,
ul ul ol > li:not(.task-list-item)::before,
ul ul ul ol > li:not(.task-list-item)::before {
    content: "." counter(li);
    color:  var(--accent-2);
    font-weight:normal;
    display: inline-block;
    width: 1em;
    margin-left: -1.5em;
    margin-right: 0.5em;
    text-align: right;
    direction: rtl;
    word-wrap: none;
    overflow: visible;
    word-break: keep-all;
    text-shadow: 0 0 0.5em var(--accent-2);
}
#7

Thanks, I’ve tried that. It’s close, but the numbering doesn’t reset with each new sub-section. I take full responsibility for the error – not implying it’s your code. I’m just out of my depth.

I posted a question earlier this evening at stack-overflow to see if anyone over there could help as well. I know there’s something basic I’m missing. Either that or something complex and I’m trying to be too simple in the approach.

Not sure if it will help, but here’s a larger view of the web inspector:

inspector view 2
inspector view 2554×979 76 KB

#8

That’s weird. Maybe something in your counter-increment/counter-reset has gone wrong? I just tested with the following:

ol { list-style-type: upper-roman; }
ol ol { list-style-type: upper-alpha; }
ol ol ol { list-style-type: decimal; }
ol ol ol ol { list-style-type: lower-greek; }
ol ol ol ol ol { list-style-type: lower-roman; }
ol ol ol ol ol ol { list-style-type: disc; }

(after removing the stuff from my previous post)
And ended up with this:

image
image271×513 2.94 KB

#10

This is such a fun theme. Thank you :slight_smile:

#11

This is great! And I didn’t know about NightRide.fm either. This will give my SO a break from hearing Gunship on repeat. Thank you!

#12

Just did some minor updates to fix checkbox alignment, and while I was there I decided to update the screenshot and add a bonus CRT flickering feature I’d been sitting on for a while.
I doubt anyone will want it on full-time, so I’ve left it commented out in the CSS, but there’s a section at the bottom that you can uncomment to get this effect:

https://github.com/deathau/80s-Neon-for-Obsidian.md/raw/master/animation.gif(image larger than 4096KB)

2 Likes
#13

haha, oh wow, the magician continues magical work

1 Like
#14

Totally rad.

2 Likes
#15

Rad as it gets! Well done:) The CRT effect is nostalgic.

1 Like