Add landing page for kjol, documentation
This commit is contained in:
@@ -5,15 +5,15 @@ import "kjol/vdom"
|
||||
// Port of web/kit/Cards.tsx. The `ui-card`/`no-flex` marker classes are kept so
|
||||
// any page CSS targeting them still applies; baseline styling is Tailwind.
|
||||
|
||||
const cardBase = "ui-card bg-white shadow-sm rounded-default w-full"
|
||||
const cardBase = "ui-card bg-surface shadow-sm rounded-default w-full"
|
||||
const cardWithPadding = cardBase + " p-5 flex-1"
|
||||
const cardNoFlex = cardBase + " no-flex p-5"
|
||||
const cardNoPaddingNoFlex = cardBase + " no-padding no-flex"
|
||||
const borderCard = "border border-neutral-300 rounded-default p-5 w-full"
|
||||
const borderCard = "border border-line-strong rounded-default p-5 w-full"
|
||||
|
||||
// cutCornerCard uses two clip-path pseudo-elements to notch opposite corners.
|
||||
const cutCornerCard = "relative isolate p-5 w-full " +
|
||||
"before:content-[''] before:absolute before:inset-0 before:bg-neutral-300 before:-z-20 " +
|
||||
"before:content-[''] before:absolute before:inset-0 before:bg-surface-strong before:-z-20 " +
|
||||
"before:[clip-path:polygon(16px_0,100%_0,100%_calc(100%_-_16px),calc(100%_-_16px)_100%,0_100%,0_16px)] " +
|
||||
"after:content-[''] after:absolute after:inset-[1px] after:bg-white after:-z-10 " +
|
||||
"after:[clip-path:polygon(15px_0,100%_0,100%_calc(100%_-_15px),calc(100%_-_15px)_100%,0_100%,0_15px)]"
|
||||
@@ -47,7 +47,7 @@ func BorderCutCornerCard(class string, children ...*vdom.VNode) *vdom.VNode {
|
||||
return cardDiv(cutCornerCard, class, children)
|
||||
}
|
||||
|
||||
const cardHeader = "text-xl tracking-tight text-black mb-5"
|
||||
const cardHeader = "text-xl tracking-tight text-ink mb-5"
|
||||
const cardHeaderHR = "text-neutral-200 mt-1 mb-3"
|
||||
|
||||
// CardHeader renders a card title followed by a divider.
|
||||
@@ -66,7 +66,7 @@ func CardHeaderTextCenter(class string, children ...*vdom.VNode) *vdom.VNode {
|
||||
|
||||
// CardSubheader renders a smaller secondary heading.
|
||||
func CardSubheader(class string, children ...*vdom.VNode) *vdom.VNode {
|
||||
return vdom.Div(kids([]vdom.Mod{vdom.Attr("class", cx("text-lg tracking-tight text-black mb-2", class))}, children)...)
|
||||
return vdom.Div(kids([]vdom.Mod{vdom.Attr("class", cx("text-lg tracking-tight text-ink mb-2", class))}, children)...)
|
||||
}
|
||||
|
||||
// CardSpacer is vertical spacing between cards.
|
||||
|
||||
Reference in New Issue
Block a user