doctype html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" title Index of #{@titlepath} css: * { box-sizing: border-box; } body { font-family: Segoe UI, sans-serif; font-size: 14px; } h1 { margin: 5px; } th:first-child, td:first-child { width: 100%; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; } tr { position: relative; } th, td { white-space: nowrap; padding: 2px 5px; } @media (min-width: 768px) { th { background: #ccc; } tr:nth-child(even) { background: #eee; } tr:hover { background: #ddd; } } @media (max-width: 767px) { table { border-spacing: 0 10px; } th { display: none; } tr { background: #eee; } td { display: inline-block; } td:first-child { background: #ddd; padding: 5px; } table a { font-size: 18px; display: block; } } body h1 ' Index of - @breadcrumbs.each do |b| a href=e(b[:path]) = b[:name] | / table thead tr th File th Size th Date tbody - if @path != "" tr: td colspan=3 a href=".." .. - @directories.each do |d| tr td: a href=e(d) = d td colspan=2 [dir] - @files.each do |f| tr td: a href=e(f[:name]) = f[:name] td = human_size(f[:size]) td = f[:mtime] footer hr em ' Running a href="https://bitbucket.org/edogawaconan/dirlist" dirlist | . Powered by #{RUBY_DESCRIPTION} and Sinatra #{Sinatra::VERSION}