diff --git a/data/style/style.css b/data/style/style.css
index 0c482eb122e1..18fce27774fa 100644
--- a/data/style/style.css
+++ b/data/style/style.css
@@ -1,131 +1,98 @@
-a:link    { font-weight:bold; font-style:normal; color:white;   text-decoration:none; }
-a:visited { font-weight:bold; font-style:normal; color:white;   text-decoration:none; }
-a:focus   { font-weight:bold; font-style:normal; color:white;   text-decoration:underline; }
-a:hover   { font-weight:bold; font-style:normal; color:#6a6868; text-decoration:none; }
-
-body{
-  background-color:#5a5858;
-  font-family:trebuchet ms,bitstream vera sans,verdana,helvetica,arial,sans-serif; font-size: 8pt;
+body {
+  background-color: #5a5858;
+  font-family: 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Helvetica, Arial, sans-serif;
+  font-size: 8pt;
   margin: 0;
   padding: 0;
   border: 0;
 }
 
-body.navbody{
-  font-family:trebuchet ms,bitstream vera sans,verdana,helvetica,arial,sans-serif; font-size: 8pt;
-  background-color:#d2d0d0;
-  margin: 0;
-  padding: 0;
-  border: 0;
+header {
+  max-width: 742px;
+  height: 90px;
+  position: relative;
+  margin: 0 auto;
 }
 
-.title{
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 50pt;
-  margin-bottom: -5pt;
-  background-color:#5a5858;
-  color:#d2d0d0;
-  padding: 0pt;
-  font-weight:bold;
-  font-size:20pt;
-  width: 746px; /* width of page + padding. */
-}
-.page{
-  background-color:#d2d0d0;
-  padding: 20pt;
-  padding-bottom: 40pt;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 0pt;
-  margin-bottom: 0pt;
-  width: 692px;
-  counter-reset: section;
-  border-style:solid;
-  border-width:1px;
-  border-color:#222222;
-}
-.footer{
-  background-image:none;
-  background-color:#5a5858;
-  padding: 0pt;
-  text-align:right;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 5pt;
-  margin-bottom: 20pt;
-  width: 692px;
+header h1 {
+  color: #d2d0d0;
+  font-weight: bold;
+  font-size: 26px;
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  margin: 0;
 }
 
-.dia img {
-  align-self: center;
+main {
+  background-color: #d2d0d0;
+  border: 1px solid #222;
+  border-bottom: none;
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  max-width: 700px;
+  margin: 0 auto;
+  padding-inline: 20px;
+  padding-block: 40px;
+  align-items: start;
 }
 
-.page div {
-  height:250px;
-  float:left;
-  max-width:200px;
-  margin:0px;
-  margin-right:30px;
-  margin-bottom:30px;
-}
 
-.page .dia{
-  background-color:#5a5858;
-  margin-right:10pt;
-  margin-bottom:10pt;
-  margin-top:4px;
-  width:200px;
-  height:200px;
-  border-style:solid;
-  border-width:1px;
-  border-color:#222222;
-  display:table-cell;
-  vertical-align:middle;
-  text-align:center;
+figure {
   display: flex;
+  flex-flow: column;
   justify-content: center;
+  text-align: left;
+  margin: 0;
+  padding: 0;
 }
-/* IE/Mac \*//*/
-* html .page a {
-    display: block;
-}
-* html .page a span {
-    display: inline-block;
-    height: 100%;
-    width: 1px;
-}
-/**/
 
-
-.page .dia *{
-  max-width:200px;
-  max-height:200px;
-  border-style:none;
-  vertical-align:middle;
+figure > * {
+  color: #6a6868;
+  margin-inline: 12px;
 }
 
-.headline{
-  position:relative;
-  margin-bottom:10pt;
-  margin-left:2em;
-  color:#6a6868;
-  vertical-align:text-top;
+h2 {
+  margin-block: 4px;
+  font-size: 18px;
 }
-h1, h2{
-  /*position:relative;*/
-  margin-bottom:5pt;
-  color:#6a6868;
-  margin-top:4pt;
-  font-size:12pt;
-  text-align:left;
+
+.thumbnail {
+  background-color: #ababab;
+  border: 1px solid #6a6868;
+  box-shadow: 0 5px 10px #a6a6a6;
+  margin: 12px;
+  height: 200px;
+  object-fit: contain;
+  width: calc(100% - 24px);
 }
 
-br{
-  margin-bottom:1em;
+footer {
+  background-color: #c0c0c0;
+  max-width: 740px;
+  margin: 0 auto;
+  padding-block: 10px;
+  border: 1px solid #222;
+  border-top: none;
+  text-align: right;
 }
 
-.text{
-  line-height:12pt;
-  margin-bottom:20pt;
+footer p {
+  padding: 10px;
+  font-weight: bold;
+  color: #666;
+  font-size: 12px;
+  margin: 0;
 }
+
+footer code {
+  padding: 0.2rem 0.5rem;
+  margin: 5em auto;
+  line-height: 22px;
+  white-space: pre-wrap;
+  background-color: #f1f1f1;
+  color: #585858;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/src/imageio/storage/gallery.c b/src/imageio/storage/gallery.c
index cc096d2b235c..3ecd52b71027 100644
--- a/src/imageio/storage/gallery.c
+++ b/src/imageio/storage/gallery.c
@@ -382,15 +382,21 @@ int store(dt_imageio_module_storage_t *self,
 
   gchar *esc_relfilename = g_strescape(relfilename, NULL);
   gchar *esc_relthumbfilename = g_strescape(relthumbfilename, NULL);
+  char *title_element = title ? g_strdup_printf("<h1>%s</h1>\n", title) : g_strdup("");
+  char *figcaption_element = description ? g_strdup_printf("<figcaption>%s</figcaption>\n",
+                                                            description) : g_strdup("");
 
   snprintf(pair->line, sizeof(pair->line),
            "\n"
-           "      <div><div class=\"dia\">\n"
-           "      <img src=\"%s\" alt=\"img%d\" class=\"img\" onclick=\"openSwipe(%d)\"/></div>\n"
-           "      <h1>%s</h1>\n"
-           "      %s</div>\n",
-           esc_relthumbfilename,
-           num, num-1, title ? title : "&nbsp;", description ? description : "&nbsp;");
+           "      <figure>\n"
+           "      <img class=\"thumbnail\" src=\"%s\" alt=\"img%d\" onclick=\"openSwipe(%d)\">\n"
+           "      %s"
+           "      %s"
+           "      </figure>\n",
+           esc_relthumbfilename, num, num-1, title_element, figcaption_element);
+
+  g_free(title_element);
+  g_free(figcaption_element);
 
   if(res_title)
     g_list_free_full(res_title, &g_free);
@@ -503,13 +509,13 @@ void finalize_store(dt_imageio_module_storage_t *self, dt_imageio_module_data_t
   FILE *f = g_fopen(filename, "wb");
   if(!f) return;
   fprintf(f,
-          "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" "
-          "\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n"
-          "<html xmlns=\"http://www.w3.org/1999/xhtml\">\n"
+          "<!DOCTYPE html>\n"
+          "<html>\n"
           "  <head>\n"
-          "    <meta http-equiv=\"Content-type\" content=\"text/html;charset=UTF-8\" />\n"
-          "    <link rel=\"shortcut icon\" href=\"style/favicon.ico\" />\n"
-          "    <link rel=\"stylesheet\" href=\"style/style.css\" type=\"text/css\" />\n"
+          "    <meta http-equiv=\"Content-type\" content=\"text/html;charset=UTF-8\">\n"
+          "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"
+          "    <link rel=\"shortcut icon\" href=\"style/favicon.ico\">\n"
+          "    <link rel=\"stylesheet\" href=\"style/style.css\" type=\"text/css\">\n"
           "    <link rel=\"stylesheet\" href=\"pswp/photoswipe.css\">\n"
           "    <link rel=\"stylesheet\" href=\"pswp/default-skin/default-skin.css\">\n"
           "    <script src=\"pswp/photoswipe.min.js\"></script>\n"
@@ -517,8 +523,10 @@ void finalize_store(dt_imageio_module_storage_t *self, dt_imageio_module_data_t
           "    <title>%s</title>\n"
           "  </head>\n"
           "  <body>\n"
-          "    <div class=\"title\">%s</div>\n"
-          "    <div class=\"page\">\n",
+          "  <header>\n"
+          "    <h1>%s</h1>\n"
+          "  </header>\n"
+          "    <main>\n",
           title, title);
 
   size_t count = 0;
@@ -529,14 +537,15 @@ void finalize_store(dt_imageio_module_storage_t *self, dt_imageio_module_data_t
     count++;
   }
 
-  fprintf(f, "        <p style=\"clear:both;\"></p>\n"
-             "    </div>\n"
-             "    <div class=\"footer\">\n"
-             "      <script language=\"JavaScript\" type=\"text/javascript\">\n"
-             "      document.write(\"download all: <em>curl -O#  \" + document.documentURI.replace( /\\\\/g, '/' ).replace( /\\/[^\\/]*$/, '' ) + \"/img_[0000-%04zu].jpg</em>\")\n"
-             "      </script><br />\n"
+  fprintf(f, "        </main>\n"
+             "    <footer>\n"
+             "      <p>\n"
              "      created with %s\n"
-             "    </div>\n"
+             "      </p>\n"
+             "      <script>\n"
+             "      document.write(\"<p style='margin: 0 auto;'>download all through the terminal:</p><code>curl -O#  \" + document.documentURI.replace( /\\\\/g, '/' ).replace( /\\/[^\\/]*$/, '' ) + \"/img_[0000-%04zu].jpg</code>\")\n"
+             "      </script>  <br>\n"
+             "    </footer>\n"
              "    <div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n"
              "        <div class=\"pswp__bg\"></div>\n"
              "        <div class=\"pswp__scroll-wrap\">\n"
@@ -577,8 +586,8 @@ void finalize_store(dt_imageio_module_storage_t *self, dt_imageio_module_data_t
              "<script>\n"
              "var pswpElement = document.querySelectorAll('.pswp')[0];\n"
              "var items = [\n",
-          count,
-          darktable_package_string);
+             darktable_package_string,
+             count);
   while(d->l)
   {
     pair_t *p = (pair_t *)d->l->data;