From 5118e18ebdaf9f2b8d1bd1da618de84c5b5e4575 Mon Sep 17 00:00:00 2001
From: bobmaster <bobmaster@hibobmaster.com>
Date: Sat, 19 Nov 2022 13:00:27 +0800
Subject: [PATCH] :wrench: Add image gallary and adjust `mdui-typo code`
 font-family to lxgw

---
 template/overall_header.html |  8 +++--
 theme/css/mdui-custom.css    | 58 ++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 3 deletions(-)

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);
 </script>
 <!-- ENDIF -->
-<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
-<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
-<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">
 
 <!-- MDUI CSS -->
 <link
@@ -60,6 +57,11 @@
   crossorigin="anonymous"
 />
 
+<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
+<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
+<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">
+
+
 <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
 	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
 <!-- ENDIF -->
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;
+}