Visual demarcation between links in library

[peterfremlin]

Some links in the library are one paragraph, some multiple paragraphs.

Good to add styling to show divisions between links. Only needed if there is another link below, not if there is a section below. Best not to use \<hr> as that creates burden for screenreaders (so a visual-only solution)

[cathysarisky]

I'll need your help on what sort of separating you have in mind. This looks a page that you're writing in the Ghost editor. You could use an extra line break in the editor to separate more, and we could style that extra line break to look like something visual (empty p with a border, for example?).

[peterfremlin]

I was thinking something like an <hr> created by a bottom border on <p> tags? I can mark each individual link as a <div> of a certain class?

[cathysarisky]

Sure, if you put a div around each link section, then I'd just put a bottom border on that div. This is something you're generating, right? So I just need to add the styling to the theme?

[peterfremlin]

Yes that's great. Div would be called "databrief-link" and I would love a horizontal line, centered, maybe 50% width?

[cathysarisky]

Half the width of the page, or half the width of the content the div encloses?

On Mon, Aug 14, 2023 at 11:07 AM peterfremlin @.***> wrote:

Yes that's great. Div would be called "databrief-link" and I would love a horizontal line, centered, maybe 50% width?

— Reply to this email directly, view it on GitHub https://github.com/peterfremlin/Disability-Debrief/issues/8#issuecomment-1677513967, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKCXDVU2WXIVRU64BLQOQ2LXVI5L5ANCNFSM6AAAAAA3C5IHXI . You are receiving this because you commented.Message ID: @.***>

[peterfremlin]

Half the width of the content sorry

[cathysarisky]

[image: image.png]

Style needed (just capturing it here until I'm ready to edit your theme):

1. border-image-source: radial-gradient(circle, rgba(189,183,183,1) 0%, rgba(189,183,183,1) 50%, rgba(255,255,255,1) 50%);
2. border-image-slice: 1;
3. border-style: none none solid;
4. border-width: 1px ;
5. padding-bottom: 16px ;
6. margin-bottom: 16px ;

On Mon, Aug 14, 2023 at 11:36 AM peterfremlin @.***> wrote:

Half the width of the content sorry

— Reply to this email directly, view it on GitHub https://github.com/peterfremlin/Disability-Debrief/issues/8#issuecomment-1677571075, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKCXDVQLY6CP3OJL744T6IDXVJAZPANCNFSM6AAAAAA3C5IHXI . You are receiving this because you commented.Message ID: @.***>

[peterfremlin]

Is this in the theme?

[cathysarisky]

It is now. :) (Well, it will be when I push you the new batch of code, I mean.)

[cathysarisky]

[cathysarisky]

Text appears strictly when there are two .databrief-link divs adjacent.

[peterfremlin]

Nicely done! Exactly what I asked for.