diff --git a/nightreign/maris/index.html b/nightreign/maris/index.html
index a7761f9..8fd284c 100644
--- a/nightreign/maris/index.html
+++ b/nightreign/maris/index.html
@@ -36,6 +36,7 @@

120

121
diff --git a/nightreign/site.css b/nightreign/site.css
index fffe80e..9a098ba 100644
--- a/nightreign/site.css
+++ b/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,7 +70,10 @@ 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;
}
@@ -69,35 +81,75 @@ a.plain:link, a.plain:visited, a.plain:hover, a.plain:active {
#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);
+ }
+}
\ No newline at end of file