From cdc6e5ddcf78e0dfb23ecbf627dcd8c17f8761ae Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Sat, 25 Jul 2020 13:59:33 +0200
Subject: [PATCH] put index link titles as inline text for not (hover)

---
 style/shiny/base.css  |  1 +
 style/shiny/index.css | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/style/shiny/base.css b/style/shiny/base.css
index a92136a..6e2fe23 100644
--- a/style/shiny/base.css
+++ b/style/shiny/base.css
@@ -15,6 +15,7 @@
         hsl(155deg, 57%, 62%)
       );
   background: var(--gradient) fixed;
+  margin: 1em;
 
   --nsfw-sticker-rotate: 15deg;
 }
diff --git a/style/shiny/index.css b/style/shiny/index.css
index 3150fb3..c1b6005 100644
--- a/style/shiny/index.css
+++ b/style/shiny/index.css
@@ -33,14 +33,11 @@ header h1::after {
 @media screen {
   .nsfw::after {
     content: url(../18_plus_white.svg);
-    display: inline-block;
-    height: 0.8em;
-    width: 0.8em;
+    height: 1em;
+    width: 1em;
     transform: rotate(var(--nsfw-sticker-rotate));
-    vertical-align: top;
-    opacity: 80%;
     mix-blend-mode: hard-light;
-    padding-left: 0.25em;
+    margin-left: 0.3em;
   }
 }
 
@@ -69,7 +66,7 @@ header h1::after {
   margin: 0;
   padding: 0;
   grid-template-columns: 50% 50%;
-  grid-gap: 1em 0;
+  grid-gap: 1em 1.5em;
   align-items: center;
   justify-content: center;
 
@@ -79,6 +76,10 @@ header h1::after {
 .list li {
   list-style: none;
   text-align: center;
+  display: grid;
+  grid-template-columns: auto min-content;
+  align-items: center;
+  justify-content: center;
 }
 
 .list a {
@@ -96,3 +97,11 @@ main {
     grid-gap: 1em;
   }
 }
+
+@media not (hover) {
+  .list a::after {
+    content: attr(title);
+    display: block;
+    font-size: 60%;
+  }
+}