add responsive styling

diff --git a/src/html.c b/src/html.c
index e11256c4e9323bfbaa57f287d7ea1b4f2dc9d7b5..972249fb01965014d11018034ededdd645c3d802 100644 (file)
--- 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 d8f660c0c3d0cf2ed7e5d973459d6d113d4618e5..2ebcc7d6bcb14e0c83108337aae5be5349280190 100644 (file)
--- 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 3c6518c1e1d09cebac087f0fdb952ec2c9e79d6b..93b0351951cce201ae2b14d5ae3e5fc847ad0651 100644 (file)
--- 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;
+    }
+}