diff --git a/README.md b/README.md index af42a65..227a299 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,8 @@ Each section has the following components: - `title`: The title of the section (e.g., "Projects") - `description`: A brief description of the section (e.g., "Here are some of my projects") +- `direction`: The direction of the section: "row" or "column" (e.g., "row") +- `item_style`: The style of the items in the section: "outline" or "filled" (e.g., "outline") - `items`: The items associated with the section. Each item is defined using `[[sections.items]]`. Each item within a section has the following components: diff --git a/data.toml b/data.toml index 79c26bc..920a21b 100644 --- a/data.toml +++ b/data.toml @@ -10,6 +10,8 @@ gtag_id = "G-33WB8LVHR6" [[sections]] title = "Movies" description = "Here are some of my movies" +direction = "column" +item_style = "outline" [[sections.items]] title = "Nightcrawler" description = "A mesmerizing thriller delving into the dark world of crime journalism" @@ -26,9 +28,17 @@ url = "https://www.imdb.com/title/tt1392214/" [[sections]] title = "Links" description = "Look for me on these websites" +direction = "row" +item_style = "filled" [[sections.items]] title = "Instagram" url = "https://www.instagram.com/jakegyllenhaal" [[sections.items]] title = "IMDb" url = "https://www.imdb.com/name/nm0350453/" +[[sections.items]] +title = "Wikipedia" +url = "https://en.wikipedia.org/wiki/Jake_Gyllenhaal" +[[sections.items]] +title = "Rotten Tomatoes" +url = "https://www.rottentomatoes.com/celebrity/jake_gyllenhaal" diff --git a/dist/css/style.css b/dist/css/style.css index 10e0711..17c4be5 100644 --- a/dist/css/style.css +++ b/dist/css/style.css @@ -10,6 +10,14 @@ margin-bottom: var(--block-spacing-vertical); } +.items { + display: flex; + column-gap: var(--spacing); + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + [role="button"] > hgroup { margin-bottom: 0; } diff --git a/script.py b/script.py index 99e48bd..7f17035 100644 --- a/script.py +++ b/script.py @@ -11,21 +11,25 @@ h("h3")(section.get("title")), h("p")(section.get("description")), ), - ( - h("div", klass="item")( + h( + "div", + klass="items", + style=f"flex-direction: {section.get('direction', 'column')}", + )( + h( + "div", + klass="item", + style=f"width: {'100%' if section.get('direction', 'column') == 'column' else 'unset'}", + )( h( "a", role="button", - klass="outline", + klass=f"{'outline' if section.get('item_style', 'outline') == 'outline' else ''}", href=item.get("url"), target="_blank", )( h("hgroup")( - h("h4")(item.get("title")), - h("h5")(item.get("description")) - if item.get("description") - else None, - "", + h("h4")(item.get("title")), h("h5")(item.get("description")) ), ), )