web: improve styles for ingredients
This commit is contained in:
parent
b54df49eae
commit
a6353699df
|
@ -11,7 +11,7 @@ export function PageLayout(ctx: Context, children: AnyNode[]): Elem {
|
|||
}
|
||||
|
||||
export function Header(ctx: Context): AnyNode {
|
||||
return E("header", classNames("header"), [
|
||||
return E("header", classNames("header gap-v-1x5"), [
|
||||
E("div", classNames("content-width"), [HeaderNav(ctx)]),
|
||||
]);
|
||||
}
|
||||
|
@ -31,7 +31,7 @@ function navLink(href: string, ctx?: Context): Attrs {
|
|||
}
|
||||
|
||||
export function Footer(): AnyNode {
|
||||
return E("footer", classNames("footer"), [
|
||||
return E("footer", classNames("footer gap-v-1x5"), [
|
||||
E("div", classNames("content-width"), [
|
||||
Link("Исходный код", {
|
||||
href: "https://notabug.org/pleshevskiy/recipes",
|
||||
|
|
|
@ -57,14 +57,12 @@ ul, ol {
|
|||
flex: 1 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
.gap-v-1x5 {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-top: solid 1px var(--color-gray);
|
||||
}
|
||||
|
||||
|
|
|
@ -16,13 +16,19 @@ export function IngredientsPage(
|
|||
return PageLayout(ctx, [
|
||||
E("div", classNames("content-width"), [
|
||||
H3("Ингредиенты"),
|
||||
E("div", [], data.ingredients.map(IngredientItem)),
|
||||
IngredientList(data.ingredients),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
export function IngredientList(ingrs: Ingredient[]): AnyNode {
|
||||
return E("div", classNames("responsive-typography"), [
|
||||
E("ul", classNames("gap-v-1x5"), ingrs.map(IngredientItem)),
|
||||
]);
|
||||
}
|
||||
|
||||
export function IngredientItem(ingr: Ingredient): AnyNode {
|
||||
return E("div", [], [
|
||||
return E("li", [], [
|
||||
ingr.name,
|
||||
// E("a", { href: `/ingredients/${ingr.key}` }, ingr.name),
|
||||
]);
|
||||
|
|
Loading…
Reference in New Issue