fixes for mobiles & tablets

make-pages/IndexPage.hs

@@ -16,6 +16,8 @@ make' root (IndexInfo {title, desc, galleries, links, footer}) = [b|@0
     <link rel=stylesheet href=/style/shiny/index.css>
     <link rel=icon href=/style/niss.svg>
 
+    <meta name=viewport content="width=1200,viewport-fit=cover">
+
     <meta property=og:type content=og:website>
     <meta property=og:title content="$title">
     <meta property=og:site_name content="$title">

style/shiny/gallery.css

@@ -197,7 +197,7 @@ footer {
 }
 
 
-@media (hover) {
+@media (hover) and (pointer: fine) {
   .item:hover .date, .item:hover .title,
   .item:hover::before, .item:hover::after {
     filter: opacity(20%);
@@ -228,7 +228,7 @@ footer {
   }
 }
 
-@media (hover: none) {
+@media (not hover), (pointer: coarse) {
   .item:not(.year-marker) {
     height: min-content;
   }
@@ -237,6 +237,13 @@ footer {
     position: initial;
   }
 
+  figcaption .date {
+    border-bottom: none;
+  }
+  figcaption .title {
+    border-top: none;
+  }
+
   figcaption .date::after {
     content: ':';
   }

style/shiny/index.css

@@ -97,7 +97,7 @@ main {
   }
 }
 
-@media not (hover) {
+@media (not hover), (pointer: coarse) {
   .list a::after {
     content: attr(title);
     display: block;

style/shiny/nsfw-warning.css

@@ -53,6 +53,9 @@
 .dialog-buttons {
   grid-area: buttons;
   justify-self: center;
+
+  display: flex;
+  justify-content: center;
 }
 
 .dialog button + button {
@@ -76,3 +79,9 @@ button.yes {
 button.no {
   background: hsl(5deg, 70%, 80%);
 }
+
+@media (pointer: coarse) {
+  button {
+    font-size: 150%;
+  }
+}