Showing off my CSS skills (or lack thereof) :)

[ghansali]

You can find my garden here: https://gh.roam.garden/
(I recommend the light version for a better experience).

Below is my CSS:

body.dark-mode {
    --main-bg: #000;
    --note-bg: #0a0d11;
    --text: #fafafc;
    --separator: #252525;
    --shadow: hsla(0,0%,100%,0.1);
    --link: #3da1ff;
    --references-bg: #17181a;
    --references-bg-80: rgba(23,24,26,0.8);
    --references-bg-0: rgba(23,24,26,0);
    --references-text: #8c9fbb;
    --references-highlight: #b3cbf0;
    --references-block-h5: whitesmoke;
}

body.light-mode {
    --main-bg: #fafafc;
    --note-bg: #fff;
    --text: #1a202c;
    --separator: #e2e8f0;
    --shadow: rgba(0,0,0,0.1);
    --link: #3182ce;
    --references-bg: #ebf4ff;
    --references-bg-80: rgba(235,244,255,0.8);
    --references-bg-0: rgba(235,244,255,0);
    --references-text: #718096;
    --references-highlight: #4a5568;
    --references-block-h5: black;
}

h1  {
    font-weight: 300;
    margin: 20px 0 10px 0;
}

h2, h3 {
    font-weight: 500;
}

li {
    padding: 8px 0 0 0;
}

.note-content > ul {
    padding-inline-start: 0px;
}

.note-content > ul > li {
    list-style-type: none;
    padding: 10px 0 0 0;
    margin: 0;
}

.note-content > ul > li > h2  {
    margin: 10px 0 5px 0;
}

.references-block h3 {
    color: var(--references-text)
}

.references-block h5 {
    color: var(--references-block-h5)
}

.references-block li {
    font-style: italic;
}

.reference-content > ul {
    padding-inline-start: 0px;
}

.reference-content > ul > li {
    list-style-type: none;
    padding: 10px 0 0 0;
    margin: 0;
}

.reference-content > ul > li > h2  {
    margin: 10px 0 5px 0;
}

.block-reference {
    border-left: revert;
    border-bottom-style: inset;
}

blockquote {
    padding-left: revert;
    border-left: revert;
    background-color: inherit;
    border-top-right-radius: revert;
    border-bottom-right-radius: revert;
}

blockquote > p {
    font-style: italic;
    padding: 10px 10px 10px 20px;
    margin: 0;
    border-left: .15em solid;
    background-color: var(--references-bg-80);
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

a[title="hashtag_public"] {
    display: none;
}

[Stvad]

A good contender for "Better Roam Garden" :). It does not radically change the foundation, but has a bunch of subtle improvements to the default theme

[tombarys]

Perfect! Thanks!

[Stvad]

Nit: the "remove list signifies for first order items" does not seem to apply in live preview

[ghansali]

Just made the modification by adding:

.references-block h3 {
color: var(--references-text)
}

.references-block h5 {
color: var(--references-block-h5)
}

.references-block li {
font-style: italic;
}

It looks much nicer indeed!

[ghansali]

[Stvad]

Nice!
that css snippet seems unrelated to list decorations though :p

[ghansali]

Oops! Wrong snippet :)

.reference-content > ul {
padding-inline-start: 0px;
}

.reference-content > ul > li {
list-style-type: none;
padding: 10px 0 0 0;
margin: 0;
}

.reference-content > ul > li > h2 {
margin: 10px 0 5px 0;
}

[tombarys]

Nice! Thanks!

[halilakin]

Love it (I find the original template padding very dense, this seems way better). Trying now. Thanks!

[xdaniellin]

Hi, I'm getting errors (and unable to apply CSS changes) for every line that uses "revert"

Thank you for sharing!

[Stvad]

Hmm, interesting, you can probably replace the occurrences of revert with unset

[ybalkind]

Not sure why this isn't working for me. I have the same errors as Xdeniellin above. I changed "revert" to "unset", that clear the errors. But my site is not showing any style changes. As if my custom CSS isn't getting read..

[Stvad]

hmm, did you re-publish your garden after updating CSS?

[Stvad]

also as far as I can see some style changes have been applied (e.g. header styles). what specific changes are you looking for?

[ybalkind]

Thanks for having a look.
Yes I have republished.
The main changes that I'm looking for are that in https://gh.roam.garden/ it does NOT show a bullet for every block. My garden shows a feint bullet point for each block.

And also I think https://gh.roam.garden/ hides the first bullet point of each page if I'm not mistaken? I've managed to do this by ammending the last bit of CSS to match the tag I use for public notes, but now it shows an empty bullet on top of each of my notes. So I'm not getting the same style as the sample site..

[Stvad]

ah, for those changes, I think the CSS is just old and hasn't been updated to account for the new structure of the page that came out with #23

[ybalkind]

Perhaps @ghansali will update soon ?

@Stvad would be cool to encourage more users to share their CSS and to curate this in once place :)

[sazovsky]

I pasted the CSS code and the roam wrote:

[Stvad]

I believe it's the same thing as discussed in #17 (comment)

[Stvad]

For people looking to remove a first level of bullets with the new structure - something like the following should work:

.note-content > .block > .block-controls {
    display: none;
}