Merge commit 'b931bbd0c30907b9cc956d3707b26b449bf41f76'

[serve0] / style.css

diff --git a/style.css b/style.css
index fe06de10f9b4ac30ab459149ca368268b22275ff..79ddfe81e46ca885862212b56571779851331291 100644 (file)
--- a/style.css
+++ b/style.css
@@ -55,18 +55,25 @@ 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: cover;
+  transform: translate(-05%, 0);
+  margin-left: 50%;
+}
+.itemlist .list:hover img {
+  animation: thumbscroll 8s steps(10, end) infinite;
+}
+@keyframes thumbscroll {
+  from { transform: translate(-05%, 0);}
+  to   { transform: translate(-105%, 0);}
 }
+
 .itemlist .list label {
   display: block;
   font-weight: bolder;
@@ -133,15 +140,25 @@ body {
 }
 
 #bookmarks label {
-  display: block;
+  display: inline;
   font-weight: bold;
   font-size: 1.125em;
   margin-left: 0;
   margin-top: .75em;
   word-break: break-word;
 }
+#bookmarks label:before,
+#bookmarks a.conjunct:after {
+  content: '\0a';
+  white-space: pre;
+}
+#bookmarks label:before {
+  line-height: 2.5em;
+  vertical-align: top;
+}
+
 
-/* ====== ADVSEARCH PANEL ====== */
+/* ====== ADVSEARCH / FILTER PANEL ====== */
 
 #advsearch:target {
   display: block; position: fixed;
@@ -171,10 +188,11 @@ body {
 }
 #advsearch fieldset.select {
   display: inline-block;
-  width: 18em; max-width: 100%;
-  margin: 0 .5em; margin-bottom: .75em; 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%;
@@ -234,11 +252,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;
@@ -252,6 +265,9 @@ body {
   display: block;
   white-space: pre;
 }
+#multitag fieldset textarea[name=newtag] + label {
+  display: block;
+}
 
 
 /* ====== VIEW PAGE ====== */
@@ -270,3 +286,16 @@ body#view .tag {
   padding: 0 .25em;
   border-radius: 1pt;
 }
+
+body#view .itemlist {
+  margin-top: 2em;
+}
+
+
+/* ====== 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; } }