thelippyj of Bolster
8/31/2018 - 3:10 AM

Artist Lineup with dots

A list with a dot seperator that won't show at the end of a line.

styles
content_copyfile_download
.lineup{
  max-width: 800px;
  margin: auto;
  text-align: center;
  font-size: 30px;
  
  .artist{
    display: inline;
    &:after{
      content: " "; //Important to use a space here
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>"); //Can use any SVG background image
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: 0.3em;
      letter-spacing: 0.4em; //This controls the spacing between artist names
    }
    .artist-name{
      white-space: nowrap; //This keeps large artist names on the same line
    }
  }
}
lineup
content_copyfile_download
<div class="lineup">
  <div class="artist"><span class="artist-name">Artist</span></div> <!-- Important to have this render with no spaces use {% spaceless %}{% endspaceless %} -->
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Long Artist Name that is annoying to use</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Long Artist Name that is annoying to use</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
  <div class="artist"><span class="artist-name">Artist</span></div>
</div>