Skip to content

Add CSS for markdown footnotes.#64

Merged
yellowled merged 1 commit intos9y:masterfrom
th-h:thh-footnote-css
Jul 21, 2017
Merged

Add CSS for markdown footnotes.#64
yellowled merged 1 commit intos9y:masterfrom
th-h:thh-footnote-css

Conversation

@th-h
Copy link
Copy Markdown
Member

@th-h th-h commented Jul 16, 2017

CSS is added via addToCSS().

Signed-off-by: Thomas Hochstein thh@inter.net

@th-h
Copy link
Copy Markdown
Member Author

th-h commented Jul 18, 2017

Tested on my live installation.

$eventData .= '
/* Footnotes (generated by serendipity_event_markdown) */

a.footnote-ref:after {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does is have to be a combined selector for specifity or would .footnote-ref:after suffice?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The latter should suffice.

}

.footnotes hr {
border-top: dashed #cccccc;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can always write colors like #cccccc (6 times the same value) in their short form #ccc.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer the long form as I find it easier to read, but will adhere to your suggestion. :)

/* mostly taken from http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ */
.footnotes ol {
counter-reset: li;
margin-top: 0.2em;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If a value in CSS has a zero before the point, you can leave it out, i.e. .2em would suffice.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here - I prefer the leading zero as I find it easier to read, but will change,

margin-left: 1.5em;
padding-left: 0;
}
.footnotes ol > li {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it have to be that specific or would .footnotes li suffice? Do you only want to address direct children of the ordered list here? (Same below.)

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, i just want to address direct children. Perhaps it wouldn't matter in most cases, but the specific selector would allow at least unordered lists in footnotes. I don't know if anyone would do that, but who knows? :)

CSS is added via addToCSS().

Signed-off-by: Thomas Hochstein <thh@inter.net>
@th-h th-h force-pushed the thh-footnote-css branch from 1b1f06c to 617427a Compare July 19, 2017 20:53
@yellowled yellowled merged commit 91ba478 into s9y:master Jul 21, 2017
@th-h th-h deleted the thh-footnote-css branch July 23, 2017 00:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants