<div class="d-block d-md-none">
  <h2>I'm sorry</h2>

  <p class="reading-font">
    Whereas most of this website is available for smaller screens, this graph does not display properly when viewed at this screen size. Please increase your screen size above 768px.
  </p>
</div>

<div class="d-none d-md-block">
  <table class="table table-responsive language-timeline">
    <thead>
      <td></td>

      <% all_languages.each do |language_data| %>
        <td class="language-name">
          <%= language_data[:name] %>
        </td>
      <% end %>
    </thead>

    <tbody>
      <% timeline.each do |year, languages| %>
        <%= render(
            view_component(
              ProjectTimelineYearComponent,
              year:, languages: languages_for_year(languages)
            )
          )
        %>
      <% end %>
    </tbody>

    <caption>
      Greetings! This text would like to inform you that this graph is not yet feature-complete.
    </caption>
  </table>
</div>