kacaii.dev
💻 My personal website
blog.kacaii.dev/
blog
gleam
lustre
:lipstick: add marquee view
+15
input.css
+15
input.css
···
1
1
@import "tailwindcss";
2
2
@import "@catppuccin/tailwindcss/mocha.css";
3
+
4
+
5
+
@theme {
6
+
--animate-marquee: marquee 40s linear infinite;
7
+
8
+
@keyframes marquee {
9
+
0% {
10
+
transform: translateX(0%)
11
+
}
12
+
13
+
100% {
14
+
transform: translateX(-100%)
15
+
}
16
+
}
17
+
}
+5
-1
src/blog/page/home.gleam
+5
-1
src/blog/page/home.gleam
···
1
1
import blog/page/footer
2
+
import blog/page/marquee
2
3
import blog/page/navbar
3
4
import blog/page/recent_posts
4
5
import blog/root
···
16
17
17
18
let content = [
18
19
navbar.view(),
19
-
html.main([main_style], [recent_posts.view(ctx.posts)]),
20
+
html.main([main_style], [
21
+
marquee.view([]),
22
+
recent_posts.view(ctx.posts),
23
+
]),
20
24
footer.view(),
21
25
]
22
26
+15
src/blog/page/marquee.gleam
+15
src/blog/page/marquee.gleam
···
1
+
import gleam/list
2
+
import lustre/attribute.{class}
3
+
import lustre/element
4
+
import lustre/element/html
5
+
6
+
pub fn view(elements: List(element.Element(_))) {
7
+
let track = {
8
+
use item <- list.map(elements)
9
+
html.span([class("inline-block")], [item])
10
+
}
11
+
12
+
html.div([class("overflow-x-hidden w-full")], [
13
+
html.div([class("flex gap-2 animate-marquee")], track),
14
+
])
15
+
}