💻 My personal website blog.kacaii.dev/
blog gleam lustre

:iphone: add basic responsiveness to the root view

+11 -29
-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 - }
+1 -1
priv/posts/uses.md
··· 22 22 ### Version Control 23 23 24 24 - [Tangled](https://tangled.org/): I recently moved away from Github, 25 - because of their recent decisions, tangled feels like breath of fresh air. 25 + tangled feels like breath of fresh air. 26 26 - [Jujutsu](https://www.jj-vcs.dev): Feels a lot more flexible and intuitive than Git, 27 27 Also tangled has support for it!
+1 -6
src/blog/page/content.gleam
··· 35 35 jot.Document(..post.body, content:) 36 36 |> jot.document_to_html 37 37 38 - let style = 39 - class( 40 - "grid grid-cols-1 gap-4" 41 - <> " mx-auto max-w-md sm:max-w-lg md:max-w-2xl" 42 - <> " text-pretty post-content w-full", 43 - ) 38 + let style = class("grid grid-cols-1 gap-4 w-full text-pretty post-content") 44 39 45 40 element.fragment([element.unsafe_raw_html("", "article", [style], post_body)]) 46 41 }
+1 -3
src/blog/page/home.gleam
··· 8 8 import wisp 9 9 10 10 pub fn handle_request(ctx: web.Context) -> wisp.Response { 11 - let main_style = 12 - "grid grid-cols-1 gap-4 mx-auto w-full" 13 - <> " max-w-md sm:max-w-lg md:max-w-2xl" 11 + let main_style = "grid grid-cols-1 gap-4 mx-auto w-full" 14 12 15 13 let elements = [ 16 14 recent_posts.view(ctx.posts),
+1 -1
src/blog/page/navbar.gleam
··· 3 3 import lustre/element/html 4 4 5 5 pub fn view(attributes: List(attr.Attribute(_))) { 6 - let style = class("flex gap-6 justify-center mx-auto") 6 + let style = class("flex gap-6 justify-center mx-auto w-full") 7 7 8 8 html.nav([style, ..attributes], [ 9 9 anchor(icon: "nf-fa-home", href: "/", label: "Home"),
+1 -1
src/blog/page/posts.gleam
··· 13 13 import wisp 14 14 15 15 pub fn handle_request(ctx: web.Context) -> wisp.Response { 16 - let ul_styles = class("grid grid-cols-1 gap-4 mx-auto max-w-lg md:max-w-2xl") 16 + let ul_styles = class("grid grid-cols-1 gap-4 mx-auto w-full") 17 17 let posts = list.filter(ctx.posts, fn(post) { post.meta.title != "uses" }) 18 18 19 19 let content = [
+6 -2
src/blog/root.gleam
··· 21 21 let style = 22 22 class( 23 23 "grid grid-cols-1 gap-4" 24 - <> " px-12 my-8 mx-auto font-sans bg-ctp-base" 24 + <> " px-12 my-8 bg-ctp-base" 25 25 <> " text-ctp-text text-lg selection:bg-ctp-surface0" 26 - <> " [font-family: Inter, sans-serif]", 26 + <> " [font-family: Inter, sans-serif]" 27 + // Responsive Design 28 + <> " mx-auto max-w-sm " 29 + <> " sm:max-w-md md:max-w-lg" 30 + <> " lg:max-w-2xl 2xl:max-w-3xl", 27 31 ) 28 32 29 33 html.html([attr.lang("en")], [head, html.body([style], content)])