add artwork from Tony Zhang & rework gallery layout

apernet · May 14, 2024 · e68096d · e68096d
1 parent a7193c0
commit e68096d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 6 deletions.
diff --git a/docs/assets/artworks/tonyzhang.png b/docs/assets/artworks/tonyzhang.png
diff --git a/docs/docs/Artworks.md b/docs/docs/Artworks.md
@@ -7,8 +7,16 @@ hide:
 
 ## ✨ Meet Ayaha Hideri, the official anime mascot of Hysteria ⚡️
 
-![Ayaha Hideri](../assets/artworks/hc_name.png)
+### Official artworks
 
-![Ayaha Hideri Q](../assets/artworks/hc_q.png)
+<div class="artworks-gal">
+    <img src="/assets/artworks/hc_name.png">
+    <img src="/assets/artworks/hc_q.png">
+    <img src="/assets/artworks/ebiblue.png">
+</div>
 
-![Ayaha Hideri Dark](../assets/artworks/ebiblue.png)
+### Fan artworks
+
+<div class="artworks-gal">
+    <img src="/assets/artworks/tonyzhang.png">
+</div>
diff --git a/docs/docs/Artworks.zh.md b/docs/docs/Artworks.zh.md
@@ -7,8 +7,16 @@ hide:
 
 ## ✨ 彩羽ひでり - Hysteria 官方形象 ⚡️
 
-![Ayaha Hideri](../assets/artworks/hc_name.png)
+### 官方作品
 
-![Ayaha Hideri Q](../assets/artworks/hc_q.png)
+<div class="artworks-gal">
+    <img src="/assets/artworks/hc_name.png">
+    <img src="/assets/artworks/hc_q.png">
+    <img src="/assets/artworks/ebiblue.png">
+</div>
 
-![Ayaha Hideri Dark](../assets/artworks/ebiblue.png)
+### 同人作品
+
+<div class="artworks-gal">
+    <img src="/assets/artworks/tonyzhang.png">
+</div>
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -70,3 +70,25 @@
 #wiggle-logo {
   animation: wiggle 2s infinite;
 }
+
+.artworks-gal {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  width: 100%;
+  margin: auto;
+}
+
+@media (min-width: 600px) {
+  .artworks-gal {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.artworks-gal img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+}