Work on the index page

web/static/index.css

@@ -2,6 +2,13 @@ body {
     background: #EEF2FF;
 }
 
+#clavis {
+    display: block;
+    width: 300px;
+    margin: 10px auto;
+    margin-bottom: 50px;
+}
+
 #boardList {
     font-size: 12px;
 }
@@ -14,3 +21,25 @@ body {
 #boardList a:hover {
     color: #ff0000;
 }
+
+.container {
+    width: 600px;
+    margin: auto;
+}
+
+.box {
+    font-size: 12px;
+    border: 1px solid black;
+    background-color: #eceff6;
+}
+
+.box h2 {
+    padding: 5px;
+    margin: 0;
+    background-color: #00007F;
+    color: #FFF;
+}
+
+.box p {
+    padding: 10px;
+}

web/views/index.templ

@@ -3,9 +3,17 @@ package views
 import "github.com/dominicf2001/comfychan/web/views/shared"
 
 templ Index() {
-	@shared.Layout() {
-		<section style="margin-top: 100px;">
-			<div>Index</div>
-		</section>
-	}
+@shared.Layout() {
+<section class="container">
+	<img id="clavis" src="/static/img/clavis.png" />
+	<div class="box">
+		<h2>Welcome to Comfychan</h2>
+		<div>
+			<p>
+				<strong>Comfychan</strong> is place to share comfy images and videos.
+			</p>
+		</div>
+	</div>
+</section>
+}
 }

web/views/index_templ.go

@@ -43,7 +43,7 @@ func Index() templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section style=\"margin-top: 100px;\"><div>Index</div></section>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"container\"><img id=\"clavis\" src=\"/static/img/clavis.png\"><div class=\"box\"><h2>Welcome to Comfychan</h2><div><p><strong>Comfychan</strong> is place to share comfy images and videos.</p></div></div></section>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}