From 0cbb4751e10fb0c39e132c3bdded55ac389929b6 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Lukas=20H=C3=A4gele?= Date: Sun, 10 Nov 2024 11:13:55 +0100 Subject: [PATCH] add responsive styling --- src/html.c | 8 ++++ src/main.c | 32 +++++++------- style.css | 119 ++++++++++++++++++++++++++++++++++++----------------- 3 files changed, 105 insertions(+), 54 deletions(-) diff --git a/src/html.c b/src/html.c index e11256c..972249f 100644 --- a/src/html.c +++ b/src/html.c @@ -199,6 +199,13 @@ html_appendArticleSection(html* Html, html_element* Section) html_appendChild(Article, Section); } +static inline void +html_setArticleClass(html* Html, str ClassName, arena* Arena) +{ + html_element* Article = Html->Article; + html_prependAttribute(Article, STR_LITERAL("class"), ClassName, Arena); +} + static inline void html_appendTagListToArticle(html* Html, str TagsDir, arena* Arena) { @@ -491,6 +498,7 @@ static html* html_parseMarkdown(str Source, arena* Arena) { html* Html = html_createDefault(Arena); + html_setArticleClass(Html, STR_LITERAL("detail"), Arena); b32 Frontmatter = 0; b32 ExpectShebang = 0; diff --git a/src/main.c b/src/main.c index d8f660c..2ebcc7d 100644 --- a/src/main.c +++ b/src/main.c @@ -504,34 +504,34 @@ main(int ArgumentCount, char** Arguments) { /* todo: compress site creation? */ html* MainPage = html_createDefault(&Context.MainArena); + html_setArticleClass(MainPage, STR_LITERAL("overview"), &Context.MainArena); + + /* recipes */ { - /* recipes */ html_element* Recipes = html_createElement(HTML_ELEMENT_NAME_h2, &Context.MainArena); + html_appendArticleSection(MainPage, Recipes); + html_appendContent(Recipes, STR_LITERAL("Rezepte"), &Context.MainArena); + + html_element* RecipeList = html_createElement(HTML_ELEMENT_NAME_ul, &Context.MainArena); { - html_appendArticleSection(MainPage, Recipes); - html_appendContent(Recipes, STR_LITERAL("Rezepte"), &Context.MainArena); + html_appendArticleSection(MainPage, RecipeList); + html_prependAttribute(RecipeList, STR_LITERAL("class"), STR_LITERAL("recipes"), &Context.MainArena); - html_element* RecipeList = html_createElement(HTML_ELEMENT_NAME_ul, &Context.MainArena); + for (recipe* Recipe = Context.Recipes->Next; + Recipe != Context.Recipes; + Recipe = Recipe->Next) { - html_appendArticleSection(MainPage, RecipeList); - html_prependAttribute(RecipeList, STR_LITERAL("class"), STR_LITERAL("recipes"), &Context.MainArena); - - for (recipe* Recipe = Context.Recipes->Next; - Recipe != Context.Recipes; - Recipe = Recipe->Next) + html_element* RecipeElement = html_createElement(HTML_ELEMENT_NAME_li, &Context.MainArena); { - html_element* RecipeElement = html_createElement(HTML_ELEMENT_NAME_li, &Context.MainArena); - { - html_appendChild(RecipeList, RecipeElement); - appendRecipeLink(RecipeElement, Recipe, &Context.MainArena); - } + html_appendChild(RecipeList, RecipeElement); + appendRecipeLink(RecipeElement, Recipe, &Context.MainArena); } } } /* tags */ - html_element* Tags = html_createElement(HTML_ELEMENT_NAME_h2, &Context.MainArena); { + html_element* Tags = html_createElement(HTML_ELEMENT_NAME_h2, &Context.MainArena); html_appendArticleSection(MainPage, Tags); html_appendContent(Tags, STR_LITERAL("Tags"), &Context.MainArena); diff --git a/style.css b/style.css index 3c6518c..93b0351 100644 --- a/style.css +++ b/style.css @@ -5,8 +5,7 @@ } body { - display: flex; - flex-direction: column; + background-color: rgb(21 21 21); margin: 0px; } @@ -15,57 +14,101 @@ header { color: var(--header-color); display: flex; justify-content: center; -} - -header > h1 { - margin-top: 1rem; - margin-bottom: 1rem; -} -header a:link, a:visited, a:hover { - color: var(--header-color); - text-decoration: none; -} - -main { - background-color: rgb(21 21 21); - display: flex; - justify-content: center; + a:link, a:visited, a:hover { + color: var(--header-color); + text-decoration: none; + } } h1, h2, h3 { color: var(--header-color); - text-align: center; } ul { color: var(--text-color); - justify-content: center; - max-width: 1000px; -} -ul.recipes { - column-count: 3; -} + a:link { + color: var(--text-color); + } -ul.tags { - column-count: 4; -} + a:hover { + text-decoration: none; + } -li { - margin-top: 0.5rem; - margin-bottom: 0.5rem; + a:visited { + color: var(--visited-color); + } } -ul a:link { - color: var(--text-color); -} +/* desktop */ +@media (min-width: 1000px) { + body { + display: flex; + flex-direction: column; + } -ul a:hover { - text-decoration: none; -} + main { + display: flex; + justify-content: center; + } + + header > h1 { + margin-top: 1rem; + margin-bottom: 1rem; + } + + article { + display: flex; + flex-direction: column; + } + + h1, h2, h3 { + + /* parent: article.overview, children: h1 h2 h3 */ + article.overview & { + text-align: center; + } + + /* parent: article.detail, children: h1 h2 h3 */ + article.detail & { + text-align: left; + } + } -ul a:visited { - color: var(--visited-color); + ul { + justify-content: center; + width: 1000px; + } + + ul.recipes { + column-count: 3; + } + + ul.tags { + column-count: 4; + } + + li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } } +/* mobile */ +@media (max-width: 1000px) { + + main { + margin: 0.5rem; + } + + header > h1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } +} -- 2.39.5