💄 Make homepage banner responsive

nwingt · nwingt · commit fc1219d3110f · 2025-02-05T15:21:19.000+08:00
diff --git a/homepage.html b/homepage.html
@@ -15,19 +15,33 @@
 <title>Liker Land 書店</title>
 <style>
 body {
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
 }
 a img {
   width: 100%;
   height: 100%;
   display: block;
   border: none;
 }
+a::after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition-duration: 1500ms;
+  transition: all .4s;
+}
+a:hover::after {
+  background-color: rgba(0, 0, 0, 0.3);
+}
 img {
-  object-fit: contain;
+  object-fit: cover;
 }
 </style>
 </head>
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>法庭線 Ads Demo</title>
+</head>
+<body>
+<style>
+body {
+  margin: 0;
+  padding: 5px;
+}
+iframe {
+  border: none;
+}
+</style>
+<h1>法庭線 Ads Demo</h1>
+<section>
+  <h2><a href="homepage.html">Homepage</a></h2>
+  <div style="position:relative;width:100%;max-width:570px;min-height:200px;"><iframe src="homepage.html" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe></div>
+</section>
+<section style="max-width: 375px">
+  <h2><a href="article.html">Article</a></h2>
+  <div style="position:relative;width:100%;padding-top:75%"><iframe src="article.html" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe></div>
+</section>
+</body>
+</html>
