sidenote-counter

[linlennypinawa]

I love tufte style, and am learning tufte.css. I had an idea of including related lines of tufte.css for side notes and margin notes in the hugo-book theme (alex-shpak/hugo-book). I implemented the following lines of codes in the file "_main.scss". The problem I have is that the counter is always 0, not 1. I donot know which line(s) of css were missing.

body {
   counter-reset: sidenote-counter;
} 

.sidenote,
.marginnote {
    float: right;
    clear: right;
    margin-right: -55%; /* adjust where the sidenote starts*/
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    vertical-align: baseline;
    position: relative;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}


.sidenote-number:after,
.sidenote:before {
    content: counter(sidenote-counter) " ";
    font-family: et-book-roman-old-style;
    position: relative;
    vertical-align: baseline;
}


.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 1rem;
    top: -0.5rem;
    left: 0.1rem;
}


.sidenote:before {
    content: counter(sidenote-counter) " ";
    top: -0.5rem;
}


label.sidenote-number {
    display: inline-block; /*inline*/
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

@media (max-width: 760px) {
    body {
        width: 100%; /*84*/
        padding-left: 8%;
        padding-right: 8%;
    }
  
    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }
    
    .sidenote,
    .marginnote {
        display: inline;
    }
    
    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative;
    }
    
    label {
        cursor: pointer;
    }
 }

[loikein]

Dear linlennypinawa,

I was having the same problem, and ended up implementing the counting mechanism with Hugo page variable. The upside is that it now counts consistently regardless of the scope, even inside another shortcode.

If you are interested, please take a look at the changes (mainly to layouts/shortcodes/sidenote.html, but also removing the CSS counter, etc) in the following commit: loikein@a881ce9.

Cheers.