style

jwoo0122 · Jun 30, 2024 · f689973 · f689973
1 parent ee1dd23
commit f689973
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 1 deletion.
diff --git a/images/podcast-logo.png b/images/podcast-logo.png
diff --git a/index.html b/index.html
@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
+    <link data-trunk rel="tailwind-css" href="/style/tailwind.css" />
+    <link data-trunk rel="copy-dir" href="/images" />
   </head>
   <body></body>
 </html>
diff --git a/src/app/components/banner.rs b/src/app/components/banner.rs
@@ -0,0 +1,15 @@
+use leptos::*;
+
+#[component]
+pub fn Banner() -> impl IntoView {
+    view! {
+        <div class="flex flex-col items-center justify-center">
+            <div class="flex justify-center items-center w-28 h-28 bg-neutral-900 rounded-2xl shadow-lg pl-1 shrink-0">
+                <img src="/images/podcast-logo.png" alt="podcast-logo" class="w-20"/>
+            </div>
+            <div class="text-white text-3xl font-title font-bold mt-6 text-center">
+                "NEVER STOP LEARNING."
+            </div>
+        </div>
+    }
+}
diff --git a/src/app/components/episodes.rs b/src/app/components/episodes.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Episodes() -> impl IntoView {
+    view! {
+        <div class="mt-12">
+            <span class="text-neutral-100 font-mono">Coming soon...</span>
+        </div>
+    }
+}
diff --git a/src/app/components/mod.rs b/src/app/components/mod.rs
@@ -0,0 +1,2 @@
+pub mod banner;
+pub mod episodes;
diff --git a/src/app/mod.rs b/src/app/mod.rs
@@ -0,0 +1,15 @@
+use leptos::*;
+
+mod components;
+use components::banner::*;
+use components::episodes::*;
+
+#[component]
+pub fn App() -> impl IntoView {
+    view! {
+        <div class="w-screen h-screen bg-gradient-to-br from-red-950 to-red-600 flex flex-col justify-center items-center px-6">
+            <Banner />
+            <Episodes />
+        </div>
+    }
+}
diff --git a/src/main.rs b/src/main.rs
@@ -1,6 +1,8 @@
 use leptos::*;
+mod app;
+use app::*;
 
 fn main() {
     console_error_panic_hook::set_once();
-    mount_to_body(|| view! { <p>"Hello, world!"</p> })
+    mount_to_body(|| view! { <App /> })
 }
diff --git a/style/tailwind.css b/style/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: {
+    files: ["*.html", "./src/**/*.rs"],
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        title: ["Silkscreen", "san-serif"],
+      },
+    },
+  },
+  plugins: [],
+};