mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-24 11:58:22 +02:00
🔤UI
This commit is contained in:
parent
e2df9705d1
commit
e1f2b32736
@ -229,7 +229,7 @@ pre code {
|
||||
/* Main content */
|
||||
body > main {
|
||||
grid-area: content;
|
||||
padding: 2rem;
|
||||
padding-block: 2rem;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
@ -259,45 +259,44 @@ body > main .page-title {
|
||||
/* Section headings with better visual hierarchy */
|
||||
body > main h2, body > main h3 {
|
||||
scroll-margin-top: calc(var(--header-height) + 1rem);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body > main h3 {
|
||||
border-left: 3px solid var(--primary);
|
||||
position: relative;
|
||||
left: -1.5rem;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
/* Make clickable heading links for better navigation */
|
||||
.heading-anchor {
|
||||
position: absolute;
|
||||
color: var(--text-light);
|
||||
left: -2rem;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
h2:hover .heading-anchor,
|
||||
h3:hover .heading-anchor {
|
||||
opacity: 0.8;
|
||||
opacity: .4;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover { opacity: .8; }
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body > main {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
body > main h2, body > main h3 {
|
||||
left: 1rem;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
.heading-anchor {
|
||||
opacity: 0.4;
|
||||
/* Boxes */
|
||||
.comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.comparison {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Example boxes */
|
||||
.good-practice, .bad-practice {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
border-top: 4px solid var(--practice-color);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.good-practice {
|
||||
--practice-color: hsl(145, 63%, 49%); }
|
||||
.bad-practice {
|
||||
--practice-color: hsl(340, 82%, 52%); }
|
||||
|
||||
.example {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
@ -337,49 +336,116 @@ h3:hover .heading-anchor {
|
||||
}
|
||||
|
||||
/* Information blocks */
|
||||
.note, .tip, .warning {
|
||||
.note, .tip, .warning, .callout, .troubleshooting {
|
||||
padding: 1rem 1.25rem;
|
||||
margin: 1.5rem 0;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.note {
|
||||
border-left: 4px solid var(--primary);
|
||||
background-color: var(--bg-sidebar);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||
}
|
||||
--block-color: var(--primary);
|
||||
border-left: 4px solid var(--block-color);
|
||||
|
||||
h4 { margin-top: 0; }
|
||||
}
|
||||
.tip {
|
||||
border-left: 4px solid hsl(145, 63%, 49%);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||
}
|
||||
|
||||
--block-color: hsl(145, 63%, 49%); }
|
||||
.warning {
|
||||
border-left: 4px solid hsl(48, 89%, 50%);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||
}
|
||||
--block-color: hsl(48, 89%, 50%); }
|
||||
|
||||
.note::before, .tip::before, .warning::before {
|
||||
.callout {
|
||||
--block-color: hsl(231, 48%, 70%); }
|
||||
|
||||
.troubleshooting {
|
||||
--block-color: hsl(340, 82%, 52%); }
|
||||
|
||||
.note::before, .tip::before, .warning::before, .callout::before, .troubleshooting::before {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--block-color);
|
||||
}
|
||||
|
||||
.note::before {
|
||||
content: "Note";
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.tip::before {
|
||||
content: "Tip";
|
||||
color: hsl(145, 63%, 49%);
|
||||
}
|
||||
|
||||
content: "Note"; }
|
||||
.warning::before {
|
||||
content: "Warning";
|
||||
color: hsl(48, 89%, 50%);
|
||||
content: "Warning"; }
|
||||
|
||||
/* Function table styling */
|
||||
.function-table {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
background-color: var(--bg-sidebar);
|
||||
}
|
||||
|
||||
.function-table h4 {
|
||||
margin-top: 0;
|
||||
color: var(--primary);
|
||||
font-family: var(--font-mono);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.function-table dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.function-table dt {
|
||||
font-weight: 600;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.function-table dd {
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Tabs styling */
|
||||
.tabs {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
margin: 1.5rem 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tab:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.tab h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
min-width: 50%;
|
||||
border-top: none;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tab:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prev/Next buttons */
|
||||
|
||||
@ -150,7 +150,7 @@ function MyComponent() {
|
||||
el("p", t`Manually update the DOM in response to events:`),
|
||||
el(code, { src: fileURL("./components/examples/scopes/imperative.js"), page_id }),
|
||||
),
|
||||
el("div", { className: "tab", "data-tab": "imperative" }).append(
|
||||
el("div", { className: "tab", "data-tab": "mixed" }).append(
|
||||
el("h4", t`❌ Mixed Approach`),
|
||||
el("p", t`Just AVOID:`),
|
||||
el(code, { src: fileURL("./components/examples/scopes/mixed.js"), page_id }),
|
||||
|
||||
@ -184,13 +184,13 @@ export function page({ pkg, info }){
|
||||
|
||||
el("div", { className: "callout" }).append(
|
||||
el("h4", t`How S.observedAttributes Works`),
|
||||
el("p").append(...T`
|
||||
1. Takes each attribute listed in static observedAttributes
|
||||
2. Creates a DDE signal for each one
|
||||
3. Automatically updates these signals when attributes change
|
||||
4. Passes the signals to your component function
|
||||
5. Your component reacts to changes through signal subscriptions
|
||||
`)
|
||||
el("ol").append(
|
||||
el("li", t`Takes each attribute listed in static observedAttributes`),
|
||||
el("li", t`Creates a DDE signal for each one`),
|
||||
el("li", t`Automatically updates these signals when attributes change`),
|
||||
el("li", t`Passes the signals to your component function`),
|
||||
el("li", t`Your component reacts to changes through signal subscriptions`)
|
||||
)
|
||||
),
|
||||
|
||||
el(h3, t`Working with Shadow DOM`),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user