Tambahan - Sidenote

Intro #

Supaya blog lebih personal, saya menambahkan beberapa fitur pelengkap. Tulisan ini adalah dokumentasi yang akan memuat fitur yang sudah dan akan saya tambahkan di kemudian hari.

Mengutak-atik CSS ternyata seru! Sekadar informasi, CSS atau Cascading Stylesheet adalah bahasa pemrograman yang digunakan untuk menampilkan elemen-elemen sebuah situs di layar. Walau saya tidak paham tentang perkodingan, tapi banyak situs dan dokumentasi yang memudahkan seperti MDN  dan webcode.tools  .

Sidenote #

Fitur sidenote ¹1. Sidenote sama seperti footnote. Hanya saja, sidenote memanfaatkan ruang kosong di sebelah kanan sebuah blog, yang biasanya kosong. adalah fitur yang saya tambahkan sendiri agar sisi bagian kanan tidak terlalu kosong. Selain itu, footnote di layar komputer tidak sepraktis di buku cetak karena dapat mengganggu alur membaca. Berikut kode yang saya pakai:

{{/* Get and increment a page-scoped counter */}} {{ .Page.Scratch.Add
"sidenoteCounter" 1 }} {{ $sidenoteCounter := .Page.Scratch.Get
"sidenoteCounter" }} {{/* Output the superscript callout number in the text */}}
<sup id="sidenote-ref-{{ $sidenoteCounter }}" class="sidenote-number">{{ $sidenoteCounter }}</sup>
<span class="sidenote" id="sidenote-{{ $sidenoteCounter }}">
  <small>{{ $sidenoteCounter }}. {{ .Inner | .Page.RenderString }}</small>
</span>

Kode di atas dimasukkan ke dalam file /layouts/shortcodes/sidenote.html. Setelah itu, tampilan sidenote dimodifikasi dengan membuat kode CSS ke dalam file /assets/css/custom.css atau /assets/css/sidenote.css. Berikut kode CSS yang saya gunakan:

span.sidenote {
/* hide sidenotes in mobile are hidden for now.*/
    display: none;
    
/* sidenotes in desktop */
    @media (min-width: 900px) {
        display: block;
        position: relative;
        float: right;
        clear: right;
        transform: translateY(-50%);

        width: 28%;
        margin: 0;
        margin-bottom: 1.1rem;
        margin-top: 1.1rem;
        margin-right: -35%;
        padding: 0.5rem;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
        text-align: left;
        background-color: initial;

        /* Use a slighly smaller font and the secondary text color.*/
        font-size: 80%;
        line-height: 150%;
        color: $global-font-secondary-color;

        /* Add a vertical bar on the left side of the comment.*/
        border: none;
        border-left-color: #888;
        border-left-style: solid;
        border-left-width: 1px;
    }
}

sup.sidenote-number {
    font-weight: bold;
    font-size: 0.7em;
    vertical-align: super;
    position: relative;
    top: -0.4em;
    line-height: 1;
    margin-left: 0px;
}

span.sidenote small {
    font-size: 100%;
}

/* Don't show sidenotes on the home page. */
.home.posts .content .sidenote {
    display: none;
}

Lalu diakhiri dengan memasukkan baris di bawah ke dalam /layouts/partials/head/css.html

{{
$CSS := slice
...
(resources.Get "css/sidenote.css")
...
}}

Tambahan

Setelah saya mengecek perubahan, ternyata urutan sidenote akan dilanjutkan pada halaman-halaman lain. Untuk itu, ada tambahan kode pada /layouts/_default/baseof.html untuk mengatur ulang angka sidenote mulai dari 0 ya mulai dari 1 lagi pada halaman baru. Kode di bawah diletakkan pada baris pertama yang berarti kode ini akan dijalankan sebelum proses lain.

{{ .Page.Scratch.Set "sidenoteCounter" 0 }}

Beberapa catatan yaitu

• Sidenote hanya akan muncul pada layar berukuran minimal 900 pixel secara horizontal. Saya masih bingung bagaimana menyelesaikan masalah sidenote untuk layar ponsel.
• Ukuran tulisan di sidenote sengaja dibuat lebih kecil agar tidak mencuri perhatian dari fokus utama yaitu tulisan, dapat menghemat tempat, dan sebagai pembeda.
  • Pekerjaan rumah: Tidak berhubungan dengan CSS sih, tapi saya ingin membuat angka pada sidenote bisa diklik sehingga mengarah pada sidenote dan tulisan yang dituju, seperti footnote pada umumnya.
• Saya menggunakan border satu sisi di bagian kiri, seperti tampilan Series. Menurut saya, border seperti ini terlihat elegan. Tidak terlalu kaku seperti border di semua sisi, tapi tetap dapat menunjukkan batas-batas yang jelas.
• Sidenote tidak ditampilkan di halaman Home.