task-list display unexpected

[jimhall]

Hello!

Like this theme. Using markdown to create a task list has unexpected results.

So something like this:

- [x] blah blah blah
- [x] foo foo foo

Results in a browser display that has the ">>" icon for an unordered lists in front of the "checkbox" icon.

My issue is that the ">>" is displayed, I believe it is redundant.

Now I would certainly accept that this is a design choice, but the only thing that makes me think it is not and it is a bug is that there is an undefined class in the list, see:

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />blah blah</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />foo foo foo</li>
</ul>

I cannot find task-list or task-list-item defined in the css. Maybe I just need a breadcrumb to where that is defined? Is it Jekyll defaults?

Thanks for taking a peak and I really like the theme.

[jimhall]

Hi all -

Here is my workaround after reading some css guides. I changed my _layouts/post.html and added the following style:

<!-- https://www.w3schools.com/howto/howto_css_bullet_color.asp -->
<style>
ul.task-list {
  list-style: none; /* Remove default bullets */
}
ul.task-list li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #151515; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -3em; /* Also needed for space (tweak if needed) */
}
li.task-list-item {
  list-style-image: url("{{ '/assets/images/black-dot.png' | relative_url }}");
}
</style>

I basically created a small black svg from a screen grab of hacker default background and then the css above changed the bullet color to the same color as the background. Threw in some liquid tag to make the svg relative.

Let me know if you think there is a fix that is not so "hacky".

Thanks for the theme again!

JIM

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.