I’ve used some class names from Minimal Mistakes since the modals in the original code clashes with Introduction’s mobile responsive card display for projects. If I had know the practice of prepending a CSS class to avoid overiding the CSS properties of other components of a web site, I wouldn’t have mixed this Jekyll theme with my template for nested comments.
Due to my existing work on my SASS file for Staticman + Introduction, I had decided to continue working with the class names in this SASS file. Changing the CSS class names in the JS script was easier than doing so in the SASS file since I was more familiar with the former.
In Minimal Mistakes, each comment is contained a big container that uses
float: left. The width of each comment has to be accurately calculated so
that each comment occupied one whole row.
In Huginn, the datetime of the comment floats on the right, so put it into the
<h3> tag for the comment author. However, putting them in two seperate lines
seems to suit Introduction better. I’ve made some adaptations to my reply
button’s event handler, which makes a simple use of delegated event to simplify
the loading of
.replyName into the comment form.
I’ve learnt to use Font Awesome 5 with (S)CSS so that the arrow between
the comment author and the reply target name is not linked. The
text-decoration: none property of an anchor can be used to disable underlining
of a link when
SASS variables helps me a lot in labeling figures with comprehensible
$avatar-width. This helps the calculations of the comments’ width.
Another useful basic skill is to the border. This helps debugging code.
I was stuck as two silly errors during the setup.
- Inserted three underscores:
comment___content, while there’s only two in Minimal Mistakes, in the main comment but not the comment reply. This tricked me to track the precedence of style rules with Firefox. In fact, it’s just a typo.
- Confusion of class names: it took me an hour to find out that I’d omitted
$('.page__comments-form').submit(...). This caused the submission of
GETrequests when the “Submit” button was clicked, and a 404 Not Found error. Hard-coding the
typeof the AJAX request would result in a 500 Internal Server Error. Finally, it took me another hour to resolve conflicts and to solve the mysterious
Voilà the updated PR: victoriadrake/hugo-theme-introduction#119.