form > ul {
display: table;
- border-spacing: 0 2px;
}
form > ul > li {
display: table-row;
}
#convertpreview {
width: 300px;
+ height: 200px;
align-self: start;
flex-shrink: 0;
+ position: relative;
+ overflow: hidden;
}
.popup {
display: flex;
flex-wrap: wrap;
- align-items: end;
+ justify-content: space-evenly;
+ gap: 1em;
position: fixed;
left: 0;
top: 0;
+ max-width: 100%;
+ max-height: 100%; /* scroll */
margin: auto;
- max-height: 90%;
- max-width: 90%;
overflow: auto;
background: rgba(0, 0, 0, .8);
border: 1px solid #CCC;
+ z-index: 1;
}
-img.popup {
- height: 100%; /* max assuming landscape */
- width: auto; /* keep aspect */
+.popup img {
+ height: 20vh;
+ width: auto;
+}
+img {
+ max-width: 100%;
+ object-fit: contain;
}
h1 {
margin: 0 -1ex; /* inner gap */
}
.inline > * {
- margin: 0 1ex;
+ margin: 1px 1ex;
}
.inline .inline {
display: flex;
margin: 1ex 0;
display: inline-block;
}
+
+#nav {
+ position: relative;
+}
+form#search {
+ display: block;
+ position: absolute;
+ width: 100%;
+ text-align: right;
+ top: -7ex;
+}
+#search input {
+ width: 100%;
+ transition: all .5s ease-in;
+}
+#search:not(:focus-within) input {
+ width: 0;
+ padding-left: 0;
+ padding-right: 0;
+ visibility: hidden;
+}
+#search button {
+ position: absolute;
+ right: 0;
+ height: 100%; /* like input */
+ border: 0;
+ background: none;
+ color: inherit;
+ font: inherit;
+ cursor: pointer;
+}