Add QoL and fancier CSS

nightreign/adel/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="040.html" class="thumb"><img src="../thumbnail/040.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">040</div></a>
                 <a href="041.html" class="thumb"><img src="../thumbnail/041.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">041</div></a>

nightreign/caligo/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="240.html" class="thumb"><img src="../thumbnail/240.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">240</div></a>
                 <a href="241.html" class="thumb"><img src="../thumbnail/241.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">241</div></a>

nightreign/fulghor/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="200.html" class="thumb"><img src="../thumbnail/200.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">200</div></a>
                 <a href="201.html" class="thumb"><img src="../thumbnail/201.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">201</div></a>

nightreign/gladius/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="000.html" class="thumb"><img src="../thumbnail/000.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">000</div></a>
                 <a href="001.html" class="thumb"><img src="../thumbnail/001.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">001</div></a>

nightreign/gnoster/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="080.html" class="thumb"><img src="../thumbnail/080.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">080</div></a>
                 <a href="081.html" class="thumb"><img src="../thumbnail/081.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">081</div></a>

nightreign/heolstor/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="280.html" class="thumb"><img src="../thumbnail/280.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">280</div></a>
                 <a href="281.html" class="thumb"><img src="../thumbnail/281.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">281</div></a>

nightreign/index.html

@@ -9,8 +9,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Browse all map seeds and placements in Elden Ring Nightreign" />
     <title>Nightreign Map Patterns</title>
-    <link href="site.css" rel="stylesheet">
-    <script src="site.js"></script>
+    <link href="/nightreign/site.css" rel="stylesheet">
+    <script src="/nightreign/site.js"></script>
 </head>
 <body>
     <div id="root" class="column">
@@ -36,14 +36,14 @@ <h2 class="center">SPOILER WARNING</h2>
             <h2>Map patterns by Nightlord</h2>
             <p>Each Nightlord has 40 map patterns: 20 without any Shifting Earth, plus 5 per Shifting Earth.</p>
             <ul>
-                <li><a href="gladius/">Gladius</a></li>
-                <li><a href="adel/">Adel</a></li>
-                <li><a href="gnoster/">Gnoster</a></li>
-                <li><a href="maris/">Maris</a></li>
-                <li><a href="libra/">Libra</a></li>
-                <li><a href="fulghor/">Fulghor</a></li>
-                <li><a href="caligo/">Caligo</a></li>
-                <li><a href="heolstor/">Heolstor</a></li>
+                <li><a href="/nightreign/gladius/">Gladius</a></li>
+                <li><a href="/nightreign/adel/">Adel</a></li>
+                <li><a href="/nightreign/gnoster/">Gnoster</a></li>
+                <li><a href="/nightreign/maris/">Maris</a></li>
+                <li><a href="/nightreign/libra/">Libra</a></li>
+                <li><a href="/nightreign/fulghor/">Fulghor</a></li>
+                <li><a href="/nightreign/caligo/">Caligo</a></li>
+                <li><a href="/nightreign/heolstor/">Heolstor</a></li>
             </ul>
             <h2>Spreadsheet</h2>
             <p><a href="https://docs.google.com/spreadsheets/d/1qZX3MfipvtPbKwPjElyx9Rler4RXLd9CPrOv7c2XOWI/edit?gid=3239137#gid=3239137" target="_blank">Elden Ring Nightreign map patterns<svg width="1em" height="1em" viewBox="0 0 24 24" style="cursor:pointer"><g stroke-width="2.1" stroke="#666" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 13.5 17 19.5 5 19.5 5 7.5 11 7.5"></polyline><path d="M14,4.5 L20,4.5 L20,10.5 M20,4.5 L11,13.5"></path></g></svg></a> contains a dump of all map patterns. I named the map locations mostly based on corresponding Limgrave landmarks.</p>

nightreign/libra/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="160.html" class="thumb"><img src="../thumbnail/160.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">160</div></a>
                 <a href="161.html" class="thumb"><img src="../thumbnail/161.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">161</div></a>

nightreign/maris/index.html

@@ -36,6 +36,7 @@ <h2 class="center">SPOILER WARNING</h2>
                 <input type="radio" name="sort" id="sortid" checked> <label for="sortid">Sort by pattern ID</label>
                 <input type="radio" name="sort" id="sortspawn"> <label for="sortspawn">Sort by spawn point</label>
             </p>
+            <span class="centerLink"><a href="/index.html">Up</a></span>
             <div id="idgrid" style="display: none;">
                 <a href="120.html" class="thumb"><img src="../thumbnail/120.jpg" style="grid-row: 1; grid-column: 1;" /><div class="id">120</div></a>
                 <a href="121.html" class="thumb"><img src="../thumbnail/121.jpg" style="grid-row: 1; grid-column: 2;" /><div class="id">121</div></a>

nightreign/site.css

@@ -10,7 +10,8 @@ body {
 #root {
   margin: 20px auto 20px auto;
   padding: 0.05px 20px 20px 20px;
-  background-color: #e9e5f2;
+  /*background-color: #e9e5f2;*/
+  background-image: linear-gradient(110deg, #e6e6e6, #dfdfdf);
 }
 #root.column {
   max-width: 1100px;
@@ -34,10 +35,18 @@ body {
   margin: 0.5em 0 0.2em 0;
   text-align: center;
 }
+
+.centerLink {
+  display: block;
+  margin: 0.5em 0 0.2em 0;
+  text-align: center;
+}
+
 .bosssort {
   margin: 0.5em 0 0.5em 0;
   text-align: center;
 }
+
 .nav {
   margin: 0 0 0.2em 0;
   text-align: center;
@@ -61,43 +70,86 @@ p {
   margin: 0.5em 0;
 }
 
-a.plain:link, a.plain:visited, a.plain:hover, a.plain:active {
+a.plain:link, 
+a.plain:visited, 
+a.plain:hover, 
+a.plain:active {
   color: inherit;
   text-decoration: none;
 }
 
 #idgrid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  grid-column-gap: 7px;
+  grid-column-gap: 20px;
+  grid-row-gap: 25px;
   margin-bottom: 15px;
+  margin-top: 25px;
+}
+#idgrid .thumb {
+  animation: gridbox-hover-down-filter 0.4s ease-in-out both;
+  filter: saturate(95%) brightness(95%);
+}
+#idgrid .thumb:hover,
+#idgrid .thumb:focus {
+  animation: gridbox-hover-up-filter 0.4s ease-in-out both;
 }
-
 #idgrid .thumb img {
   width: 100%;
   vertical-align: middle;
+  padding: 2px;
+  border: 2px solid black;
+  box-shadow: 5px 5px black;
 }
-
-.thumb div.id {
+#idgrid .thumb img:hover,
+#idgrid .thumb img:focus {
+  box-shadow: 5px 5px black;
+}
+#idgrid .thumb div.id {
   text-align: center;
   vertical-align: bottom;
+  margin-top: 3px;
 }
 
 #spawngrid {
   display: flex;
   flex-wrap: wrap;
 }
-
+#spawngrid .thumb {
+  animation: gridbox-hover-down-filter 0.4s ease-in-out both;
+  filter: saturate(95%) brightness(95%);
+  margin: auto;
+}
+#spawngrid .thumb:hover,
+#spawngrid .thumb:focus {
+  animation: gridbox-hover-up-filter 0.4s ease-in-out both;
+}
 #spawngrid .thumb img {
   width: 100%;
-  max-width: 22vw;
+  max-width: 20vw;
   vertical-align: middle;
+  padding: 2px;
+  margin: 1.5px 3px;
+  border: 2px solid black;
+  box-shadow: 5px 5px black;
+}
+#spawngrid .thumb div.id {
+  text-align: center;
+  vertical-align: bottom;
+  margin-top: 3px;
 }
 
 .spawnset {
   display: flex;
   column-gap: 7px;
   max-width: 100%;
+  min-height: fit-content;
+}
+
+@media only screen and (min-width: 1101px) {
+  .spawnset {
+    padding: 13px;
+  }
 }
 
 .viewer {
@@ -118,3 +170,24 @@ a.plain:link, a.plain:visited, a.plain:hover, a.plain:active {
   margin: auto;
   cursor: zoom-out;
 }
+
+@keyframes gridbox-hover-up-filter {
+  0% {
+    transform: translate(0px, 0px);
+    filter: saturate(95%) brightness(95%);
+  }
+  100% {
+    transform: translate(0px, -10px);
+    filter: saturate(120%) brightness(105%);
+  }
+}
+
+@keyframes gridbox-hover-down-filter {
+  0% {
+    transform: translate(0px, 0px);
+    filter: saturate(95%) brightness(95%);
+  }
+  100% {
+    transform: translate(0px, 10px);
+  }
+}