3 files changed, 45 insertions, 37 deletions
diff --git a/lib/lsg_web/templates/irc/index.html.eex b/lib/lsg_web/templates/irc/index.html.eex
index 9e4f724..a8544b3 100644
--- a/lib/lsg_web/templates/irc/index.html.eex
+++ b/lib/lsg_web/templates/irc/index.html.eex
@@ -1,19 +1,12 @@
-<style type="text/css">
-.help-entry h1 {
-  font-size: 18px;
-}
-.help-entry h2 {
-  font-size: 16px;
-}
-</style>
-
-<p>
+<div class="hidden sm:block">
+  <nav class="flex flex-wrap content-center">
   <% list =  for {identifier, _} <- @commands do %>
     <% name = String.replace(identifier, "_", " ") %>
-    <%= link(name, to: "##{identifier}") %>
+    <%= link(name, to: "##{identifier}", class: "px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-50") %>
   <% end %>
-  <small><%= Enum.intersperse(list, " - ") %></small>
-</p>
+  <%= list %>
+  </nav>
+</div>
 
 <%= if @members != [] do %>
 <% users = for {_acc, user, nick} <- @members, do: if(user, do: nick, else: content_tag(:i, nick)) %>
@@ -22,10 +15,12 @@
 <% end %>
 <% end %>
 
-<div class="irchelps">
+<div class="irchelps space-y-6">
   <%= for {identifier, help} <- @commands do %>
     <%= if help do %>
-      <div class="help-entry" id="<%= identifier %>"><%= LSGWeb.LayoutView.liquid_markdown(@conn, help) %></div>
+      <div class="bg-white border-b border-gray-200" id="<%= identifier %>">
+        <div class="prose w-auto max-w-full"><%= LSGWeb.LayoutView.liquid_markdown(@conn, help) %></div>
+      </div>
     <% end %>
   <% end %>
 </div>
diff --git a/lib/lsg_web/templates/irc/txt.html.eex b/lib/lsg_web/templates/irc/txt.html.eex
index e9df681..fd4ea00 100644
--- a/lib/lsg_web/templates/irc/txt.html.eex
+++ b/lib/lsg_web/templates/irc/txt.html.eex
@@ -1,15 +1,27 @@
 <style type="text/css">
-ol li {
-  margin-bottom: 5px
+:target {
+  background-color: #ffa;
+  font-weight: bold;
+}
+ol > li > a {
+  display: none;
+}
+ol > li:hover > a {
+  display: inline-block;
+  color: gray;
 }
 </style>
 
-<ol>
+<ol class="prose space-y-3 w-auto max-w-full list-outside list-decimal m-4 leading-loose">
   <%= for {txt, id} <- Enum.with_index(@data) do %>
-    <li id="<%= @name %>-<%= id %>"><%= txt %></li>
+    <li class="text-lg" id="q<%= id+1 %>">
+
+      <%= txt %>
+      <a href="#q<%= id+1 %>" class="text-xs text-gray-500 space-x-3">#</a>
+    </li>
   <% end %>
 </ol>
 
 <p>
-  <a href="/irc/txt/<%= @name %>.txt">télécharger au format texte</a>
+  <a href="/-/txt/<%= @name %>.txt" class="text-xs text-gray-500">télécharger au format texte</a>
 </p>
diff --git a/lib/lsg_web/templates/irc/txts.html.eex b/lib/lsg_web/templates/irc/txts.html.eex
index 5971ffa..66321b5 100644
--- a/lib/lsg_web/templates/irc/txts.html.eex
+++ b/lib/lsg_web/templates/irc/txts.html.eex
@@ -1,25 +1,26 @@
-<style type="text/css">
-.help-entry h1 {
-  font-size: 18px;
-}
-.help-entry h2 {
-  font-size: 16px;
-}
-</style>
-
-<p><strong><%= @lines %></strong> lignes dans <strong><%= @files %></strong> fichiers.
-<a href="#help">Aide</a>.
-</p>
-
-<ul>
+<div>
+  <h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">
+    <strong><%= @lines %></strong> lignes dans <strong><%= @files %></strong> fichiers
+    &mdash;
+    <a href="#help">Aide</a>
+  </h2>
+  <ul class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-4 lg:grid-cols-6">
   <%= for {txt, data} <- @data do %>
     <% base_url = cond do
       @conn.assigns[:chan] -> "/#{@conn.assigns.network}/#{LSGWeb.format_chan(@conn.assigns.chan)}"
       true -> "/-"
     end %>
-    <li><a href="<%= base_url %>/txt/<%= txt %>"><%= txt %></a> <i>(<%= Enum.count(data) %>)</i></li>
+    <li class="col-span-1 flex shadow-sm rounded-m">
+     <div class="flex-1 flex items-center justify-between border-l border-t border-r border-b border-gray-200 bg-white rounded-md truncate">
+        <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
+          <a href="<%= base_url %>/txt/<%= txt %>" class="text-gray-900 text-lg font-medium hover:text-gray-600 transition ease-in-out duration-150"><%= txt %></a>
+          <p class="text-gray-500"><%= Enum.count(data) %> lignes</p>
+        </div>
+      </div>
+    </li>
   <% end %>
-</ul>
+  </ul>
+</div>
 
-<div class="help-entry" id="help"><%= LSGWeb.LayoutView.liquid_markdown(@conn, @doc) %></div>
+<div class="prose" id="help"><%= LSGWeb.LayoutView.liquid_markdown(@conn, @doc) %></div>