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 {
|
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)]),
|
E("div", classNames("content-width"), [HeaderNav(ctx)]),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
@ -31,7 +31,7 @@ function navLink(href: string, ctx?: Context): Attrs {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Footer(): AnyNode {
|
export function Footer(): AnyNode {
|
||||||
return E("footer", classNames("footer"), [
|
return E("footer", classNames("footer gap-v-1x5"), [
|
||||||
E("div", classNames("content-width"), [
|
E("div", classNames("content-width"), [
|
||||||
Link("Исходный код", {
|
Link("Исходный код", {
|
||||||
href: "https://notabug.org/pleshevskiy/recipes",
|
href: "https://notabug.org/pleshevskiy/recipes",
|
||||||
|
|
|
@ -57,14 +57,12 @@ ul, ol {
|
||||||
flex: 1 0;
|
flex: 1 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.gap-v-1x5 {
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
padding-top: 1.5rem;
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
border-top: solid 1px var(--color-gray);
|
border-top: solid 1px var(--color-gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,13 +16,19 @@ export function IngredientsPage(
|
||||||
return PageLayout(ctx, [
|
return PageLayout(ctx, [
|
||||||
E("div", classNames("content-width"), [
|
E("div", classNames("content-width"), [
|
||||||
H3("Ингредиенты"),
|
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 {
|
export function IngredientItem(ingr: Ingredient): AnyNode {
|
||||||
return E("div", [], [
|
return E("li", [], [
|
||||||
ingr.name,
|
ingr.name,
|
||||||
// E("a", { href: `/ingredients/${ingr.key}` }, ingr.name),
|
// E("a", { href: `/ingredients/${ingr.key}` }, ingr.name),
|
||||||
]);
|
]);
|
||||||
|
|
Loading…
Reference in New Issue