improved display of different resolutions

[serve0] / style.css

diff --git a/style.css b/style.css
index ce9813a760137237fc1a5475020b58ed63a248c3..168ff409d9460871c6e641f12b36c06fdd64ef6d 100644 (file)
--- a/style.css
+++ b/style.css
@@ -55,18 +55,44 @@ body {
   -padding: 0 .25em;
   margin: 0 .5%;
   margin-bottom: 1em;
+  overflow: hidden;
 }
-@media(min-width:  20em) { .itemlist .list { max-width: 49%; } }
-@media(min-width:  40em) { .itemlist .list { max-width: 32%; } }
-@media(min-width:  60em) { .itemlist .list { max-width: 24%; } }
-@media(min-width:  80em) { .itemlist .list { max-width: 19%; } }
-@media(min-width: 100em) { .itemlist .list { max-width: 19em; } }
 
 .itemlist .list img {
-  width: 100%; height: 11em;
+  width: 1000%; height: 11em;
+  max-width: unset;
   background-color: #111;
-  object-fit: contain;
+  object-fit: fill;
+  transform: translate(-00%, 0);
+}
+.itemlist .list img:hover {
+  animation-name: thumbscroll;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+}
+@keyframes thumbscroll {
+   0%   { transform: translate(-00%, 0); }
+   9.99% { transform: translate(-00%, 0); }
+  10%   { transform: translate(-10%, 0); }
+  19.99% { transform: translate(-10%, 0); }
+  20%   { transform: translate(-20%, 0); }
+  29.99% { transform: translate(-20%, 0); }
+  30%   { transform: translate(-30%, 0); }
+  39.99% { transform: translate(-30%, 0); }
+  40%   { transform: translate(-40%, 0); }
+  49.99% { transform: translate(-40%, 0); }
+  50%   { transform: translate(-50%, 0); }
+  59.99% { transform: translate(-50%, 0); }
+  60%   { transform: translate(-60%, 0); }
+  69.99% { transform: translate(-60%, 0); }
+  70%   { transform: translate(-70%, 0); }
+  79.99% { transform: translate(-70%, 0); }
+  80%   { transform: translate(-80%, 0); }
+  89.99% { transform: translate(-80%, 0); }
+  90%   { transform: translate(-90%, 0); }
+ 100%   { transform: translate(-90%, 0); }
 }
+
 .itemlist .list label {
   display: block;
   font-weight: bolder;
@@ -141,7 +167,7 @@ body {
   word-break: break-word;
 }
 
-/* ====== ADVSEARCH PANEL ====== */
+/* ====== ADVSEARCH / FILTER PANEL ====== */
 
 #advsearch:target {
   display: block; position: fixed;
@@ -171,10 +197,11 @@ body {
 }
 #advsearch fieldset.select {
   display: inline-block;
-  width: 18em; max-width: 100%;
-  margin: 0 .5em; padding: 0 .375em;
+  width: 99%;
+  margin: 0 .5%; margin-bottom: .75em; padding: 0 .375em;
   box-shadow: .125em .125em .25em #000;
 }
+
 #advsearch fieldset.select > label.head {
   display: none;
   width: 40%;
@@ -205,9 +232,13 @@ body {
 #advsearch input.and { display: none; }
 #advsearch input.and + label { display: none; }
 #advsearch input.and + label + fieldset { display: none; }
-#advsearch input.and:checked + label + fieldset { display: inline-block; }
-#advsearch input.and:checked + label + fieldset + input + label { display: inline-block; }
+#advsearch input.and:checked + label + fieldset,
+#advsearch input.and:first-of-type + label + fieldset { display: inline-block; }
+#advsearch input.and:checked + label + fieldset + input + label,
+#advsearch input.and:first-of-type + label + fieldset + input + label { display: inline-block; }
 #advsearch input.and:checked + label + fieldset + input:checked + label { display: none; }
+#advsearch input.and:first-of-type + label + fieldset + input:checked + label { display: none; }
+
 
 /* ====== MULTITAG DIALOG ====== */
 
@@ -230,11 +261,6 @@ body {
   width: 99%;
   margin: 0 .5%; margin-top: 1em;
 }
-@media(min-width:  20em) { #multitag fieldset { max-width: 49%; } }
-@media(min-width:  40em) { #multitag fieldset { max-width: 32%; } }
-@media(min-width:  60em) { #multitag fieldset { max-width: 24%; } }
-@media(min-width:  80em) { #multitag fieldset { max-width: 19%; } }
-@media(min-width: 100em) { #multitag fieldset { max-width: 19em; } }
 
 #multitag fieldset select {
   width: 100%; height: 10em;
@@ -266,3 +292,12 @@ body#view .tag {
   padding: 0 .25em;
   border-radius: 1pt;
 }
+
+
+/* ====== SCALE BLOCK ELEMENTS ====== */
+
+@media(min-width:  20em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 49%; } }
+@media(min-width:  40em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 32%; } }
+@media(min-width:  60em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 24%; } }
+@media(min-width:  80em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19%; } }
+@media(min-width: 100em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19em; } }