diff --git a/template/overall_header.html b/template/overall_header.html index a3e479c..1f1b1cb 100755 --- a/template/overall_header.html +++ b/template/overall_header.html @@ -48,9 +48,6 @@ })(document); - - - + + + + + diff --git a/theme/css/mdui-custom.css b/theme/css/mdui-custom.css index 6054161..af0230a 100644 --- a/theme/css/mdui-custom.css +++ b/theme/css/mdui-custom.css @@ -367,3 +367,61 @@ dl.bg-y-15-percent { } } +.image-gallery { + /* Mobile first */ + display: flex; + flex-direction: column; + gap: 10px; +} + +.image-gallery .column { + display: flex; + flex-direction: column; + gap: 10px; +} + +.image-item img { + width: 100%; + border-radius: 5px; + height: 100%; + object-fit: cover; +} + +@media only screen and (min-width: 768px) { + .image-gallery { + flex-direction: row; + } +} + +/* overlay styles */ + +.image-item { + position: relative; + cursor: pointer; +} + +.overlay { + position: absolute; + width: 100%; + height: 100%; + background: rgba(57, 57, 57, 0.502); + top: 0; + left: 0; + transform: scale(0); + transition: all 0.2s 0.1s ease-in-out; + color: #fff; + /* center overlay content */ + display: flex; + align-items: center; + justify-content: center; +} + +/* hover */ +.image-item:hover .overlay { + transform: scale(1); +} + +/* mdui-typo */ +.mdui-typo code, .mdui-typo kbd, .mdui-typo pre, .mdui-typo pre tt, .mdui-typo samp { + font-family: 'LXGW WenKai Screen',Consolas,Courier,'Courier New',monospace; +}