lyrics.html.pug

doctype html
html(lang="en")
head
  meta(charset="UTF-8")
  title(Dyrics)
  link(rel="stylesheet" href="stylesheets/dyrics.css")
  meta(content="width=device-width, initial-scale=1.0" name="viewport")
  link( rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" )
  link( rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" )

body( data-chords )
  .content


    nav.nav
      style(id="searchStyle")
      input(type="text" id="searchbar" placeholder="Filter by Song or Artist ... ")

      .label-list
        each song, i in songs
          - if (song.active)
            - var forName = "toggle-" + (i+1)
            label.toggle(data-clue=song.clue)
              div.artist= song.artist 
              div.songName= song.title

    section.song-list
      label.action-label#nav-toggler( onclick="document.body.classList.toggle('nav-toggled');")
      label.action-label#columns-toggler( onclick="document.body.classList.toggle('columns-toggled');")
      label.action-label#chords-toggler( onclick="document.body.classList.toggle('chords-toggled');")
      label.action-label#source-toggler( onclick="toggleDataChords();")

      article.song#song
        h1 Hello
        h2 Features
        ul
          li Togglable display between column and row (<span>default: column</span>)
          li Togglable chords in tabs (<span>default: displayed</span>)
          li Togglable menu with searchbar and a list of predefined tabs (<span>default: displayed</span>)
script(src="dyrics.js")