diff --git a/daprdocs/assets/js/theme-toggle.js b/daprdocs/assets/js/theme-toggle.js new file mode 100644 index 00000000000..4dfb9bbcaff --- /dev/null +++ b/daprdocs/assets/js/theme-toggle.js @@ -0,0 +1,15 @@ +// Dapr docs theme toggle. +// +// Flips `data-bs-theme` on between "light" and "dark" and persists the +// choice in localStorage under "dapr-theme". The initial theme (OS +// preference vs. stored choice) is set by an inline no-flash script in +// hooks/head-end.html, which runs before this bundle loads. +const root = document.documentElement; +function set(theme) { + root.setAttribute("data-bs-theme", theme); + try { localStorage.setItem("dapr-theme", theme); } catch (e) {} +} +const btn = document.getElementById("dapr-theme-toggle"); +if (btn) btn.addEventListener("click", () => { + set(root.getAttribute("data-bs-theme") === "dark" ? "light" : "dark"); +}); diff --git a/daprdocs/assets/scss/_buttons.scss b/daprdocs/assets/scss/_buttons.scss new file mode 100644 index 00000000000..ff415b96b32 --- /dev/null +++ b/daprdocs/assets/scss/_buttons.scss @@ -0,0 +1,16 @@ +// +// buttons +// + +// Text CTA buttons only. Exclude Docsy's icon-only copy button +// (button.td-click-to-copy is also `.btn`): applying --font-head here overrode +// Font Awesome's font-family and rendered the copy glyph as tofu, and the CTA +// padding/radius bloated it. +.td-content a.btn:not(.td-click-to-copy), .td-content .btn:not(.td-click-to-copy) { + font-family: var(--font-head); font-weight: 600; font-size: .86rem; + border-radius: 8px; padding: 10px 16px; text-decoration: none; border: none; +} +.td-content a.btn-tertiary, .td-content .btn-tertiary { background: var(--d-orange); color: var(--d-on-accent); } +.td-content a.btn-tertiary:hover { filter: brightness(1.06); color: var(--d-on-accent); } +.td-content .btn-primary { background: var(--d-blue); color: var(--d-on-accent); } +.td-content .btn-secondary { background: var(--d-sky); color: var(--d-on-sky); } diff --git a/daprdocs/assets/scss/_callouts.scss b/daprdocs/assets/scss/_callouts.scss new file mode 100644 index 00000000000..7383d1239df --- /dev/null +++ b/daprdocs/assets/scss/_callouts.scss @@ -0,0 +1,14 @@ +// +// callouts +// + +.td-content .alert { + border: 1px solid var(--d-border); border-left: 3px solid var(--d-sky); + background: color-mix(in srgb, var(--d-sky) 7%, var(--d-ground)); + color: var(--d-body); border-radius: 0 var(--d-radius) var(--d-radius) 0; padding: 13px 15px; +} +.td-content .alert-warning { border-left-color: var(--d-orange); background: color-mix(in srgb, var(--d-orange) 7%, var(--d-ground)); } +.td-content .alert-primary { border-left-color: var(--d-blue); background: color-mix(in srgb, var(--d-blue) 8%, var(--d-ground)); } +.td-content .alert-success { border-left-color: var(--d-success); } +.td-content .alert-danger { border-left-color: var(--d-danger); } +.td-content .alert a { color: var(--d-link); } diff --git a/daprdocs/assets/scss/_cards.scss b/daprdocs/assets/scss/_cards.scss new file mode 100644 index 00000000000..b69a44081fa --- /dev/null +++ b/daprdocs/assets/scss/_cards.scss @@ -0,0 +1,43 @@ +// +// cards +// + +// Project card grid (used by section-index.html for card-forward section landings) +.d-card-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin:12px 0; } +@media (min-width:1180px){ .d-card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } } +@media (max-width:560px){ .d-card-grid { grid-template-columns:1fr; } } + +.d-card { + display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--d-body); + border:1px solid var(--d-border); border-top-width:2px; border-radius:var(--d-radius); + padding:15px; background:var(--d-ground); transition:border-color .13s, transform .1s, box-shadow .13s; +} +.d-card:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(15,21,34,.08); text-decoration:none; } +[data-bs-theme="dark"] .d-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.4); } +.d-card .d-card-title { font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--d-heading); } +.d-card .d-card-desc { font-size:.8rem; color:var(--d-muted); flex:1; } +.d-card .d-card-more { font-family:var(--font-head); font-size:.76rem; font-weight:600; color:var(--d-link); } +// Optional icon slot. When present it's grouped with the title in .d-card-head +// so the icon and title sit on the same row. Brand logos keep their own colors; +// a fixed height keeps the grid aligned regardless of each logo's aspect ratio. +.d-card .d-card-head { display:flex; align-items:center; gap:10px; } +.d-card .d-card-icon { height:36px; width:auto; max-width:56px; object-fit:contain; flex:0 0 auto; } +.d-card.c-blue{border-top-color:var(--d-blue);} +.d-card.c-sky{border-top-color:var(--d-sky);} +.d-card.c-orange{border-top-color:var(--d-orange);} +.d-card.c-gold{border-top-color:var(--d-gold);} + +// Docsy built-in cards (used e.g. by cardpane/card shortcodes in SDK docs) +.td-content { + .card { + border:1px solid var(--d-border); + border-radius:var(--d-radius); + background:var(--d-ground); + color:var(--d-body); + } + .card-body { color:var(--d-body); } + .card-title { + font-family:var(--font-head); + color:var(--d-heading); + } +} diff --git a/daprdocs/assets/scss/_chroma.scss b/daprdocs/assets/scss/_chroma.scss new file mode 100644 index 00000000000..15e852c8e61 --- /dev/null +++ b/daprdocs/assets/scss/_chroma.scss @@ -0,0 +1,184 @@ +// +// Syntax highlighting (Chroma, class-based; requires markup.highlight.noClasses=false). +// BOTH palettes are theme-scoped so neither leaks into the other: tango under +// [data-bs-theme="light"], github-dark under [data-bs-theme="dark"]. (Previously +// the light palette was unscoped and its .p/.n = #000 rendered black-on-dark in +// dark mode.) The no-flash script in head-end.html always sets data-bs-theme +// before paint. Baked backgrounds are stripped; the code-block background comes +// from --d-code-bg. Regenerate with: hugo gen chromastyles --style=. +// + +[data-bs-theme="light"] { + /* PreWrapper */ .chroma { -webkit-text-size-adjust:none; } + /* Other */ .chroma .x { color:#000 } + /* Error */ .chroma .err { color:#a40000 } + /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } + /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } + /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } + /* LineHighlight */ .chroma .hl { } + /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } + /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } + /* Line */ .chroma .line { display:flex; } + /* Keyword */ .chroma .k { color:#204a87;font-weight:bold } + /* KeywordConstant */ .chroma .kc { color:#204a87;font-weight:bold } + /* KeywordDeclaration */ .chroma .kd { color:#204a87;font-weight:bold } + /* KeywordNamespace */ .chroma .kn { color:#204a87;font-weight:bold } + /* KeywordPseudo */ .chroma .kp { color:#204a87;font-weight:bold } + /* KeywordReserved */ .chroma .kr { color:#204a87;font-weight:bold } + /* KeywordType */ .chroma .kt { color:#204a87;font-weight:bold } + /* Name */ .chroma .n { color:#000 } + /* NameAttribute */ .chroma .na { color:#c4a000 } + /* NameClass */ .chroma .nc { color:#000 } + /* NameConstant */ .chroma .no { color:#000 } + /* NameDecorator */ .chroma .nd { color:#5c35cc;font-weight:bold } + /* NameEntity */ .chroma .ni { color:#ce5c00 } + /* NameException */ .chroma .ne { color:#c00;font-weight:bold } + /* NameLabel */ .chroma .nl { color:#f57900 } + /* NameNamespace */ .chroma .nn { color:#000 } + /* NameOther */ .chroma .nx { color:#000 } + /* NameProperty */ .chroma .py { color:#000 } + /* NameTag */ .chroma .nt { color:#204a87;font-weight:bold } + /* NameBuiltin */ .chroma .nb { color:#204a87 } + /* NameBuiltinPseudo */ .chroma .bp { color:#3465a4 } + /* NameVariable */ .chroma .nv { color:#000 } + /* NameVariableClass */ .chroma .vc { color:#000 } + /* NameVariableGlobal */ .chroma .vg { color:#000 } + /* NameVariableInstance */ .chroma .vi { color:#000 } + /* NameVariableMagic */ .chroma .vm { color:#000 } + /* NameFunction */ .chroma .nf { color:#000 } + /* NameFunctionMagic */ .chroma .fm { color:#000 } + /* Literal */ .chroma .l { color:#000 } + /* LiteralDate */ .chroma .ld { color:#000 } + /* LiteralString */ .chroma .s { color:#4e9a06 } + /* LiteralStringAffix */ .chroma .sa { color:#4e9a06 } + /* LiteralStringBacktick */ .chroma .sb { color:#4e9a06 } + /* LiteralStringChar */ .chroma .sc { color:#4e9a06 } + /* LiteralStringDelimiter */ .chroma .dl { color:#4e9a06 } + /* LiteralStringDoc */ .chroma .sd { color:#8f5902;font-style:italic } + /* LiteralStringDouble */ .chroma .s2 { color:#4e9a06 } + /* LiteralStringEscape */ .chroma .se { color:#4e9a06 } + /* LiteralStringHeredoc */ .chroma .sh { color:#4e9a06 } + /* LiteralStringInterpol */ .chroma .si { color:#4e9a06 } + /* LiteralStringOther */ .chroma .sx { color:#4e9a06 } + /* LiteralStringRegex */ .chroma .sr { color:#4e9a06 } + /* LiteralStringSingle */ .chroma .s1 { color:#4e9a06 } + /* LiteralStringSymbol */ .chroma .ss { color:#4e9a06 } + /* LiteralNumber */ .chroma .m { color:#0000cf;font-weight:bold } + /* LiteralNumberBin */ .chroma .mb { color:#0000cf;font-weight:bold } + /* LiteralNumberFloat */ .chroma .mf { color:#0000cf;font-weight:bold } + /* LiteralNumberHex */ .chroma .mh { color:#0000cf;font-weight:bold } + /* LiteralNumberInteger */ .chroma .mi { color:#0000cf;font-weight:bold } + /* LiteralNumberIntegerLong */ .chroma .il { color:#0000cf;font-weight:bold } + /* LiteralNumberOct */ .chroma .mo { color:#0000cf;font-weight:bold } + /* Operator */ .chroma .o { color:#ce5c00;font-weight:bold } + /* OperatorWord */ .chroma .ow { color:#204a87;font-weight:bold } + /* OperatorReserved */ .chroma .or { color:#ce5c00;font-weight:bold } + /* Punctuation */ .chroma .p { color:#000;font-weight:bold } + /* Comment */ .chroma .c { color:#8f5902;font-style:italic } + /* CommentHashbang */ .chroma .ch { color:#8f5902;font-style:italic } + /* CommentMultiline */ .chroma .cm { color:#8f5902;font-style:italic } + /* CommentSingle */ .chroma .c1 { color:#8f5902;font-style:italic } + /* CommentSpecial */ .chroma .cs { color:#8f5902;font-style:italic } + /* CommentPreproc */ .chroma .cp { color:#8f5902;font-style:italic } + /* CommentPreprocFile */ .chroma .cpf { color:#8f5902;font-style:italic } + /* Generic */ .chroma .g { color:#000 } + /* GenericDeleted */ .chroma .gd { color:#a40000 } + /* GenericEmph */ .chroma .ge { color:#000;font-style:italic } + /* GenericError */ .chroma .gr { color:#ef2929 } + /* GenericHeading */ .chroma .gh { color:#000080;font-weight:bold } + /* GenericInserted */ .chroma .gi { color:#00a000 } + /* GenericOutput */ .chroma .go { color:#000;font-style:italic } + /* GenericPrompt */ .chroma .gp { color:#8f5902 } + /* GenericStrong */ .chroma .gs { color:#000;font-weight:bold } + /* GenericSubheading */ .chroma .gu { color:#800080;font-weight:bold } + /* GenericTraceback */ .chroma .gt { color:#a40000;font-weight:bold } + /* GenericUnderline */ .chroma .gl { color:#000;text-decoration:underline } + /* TextWhitespace */ .chroma .w { color:#f8f8f8 } +} + +[data-bs-theme="dark"] { + /* PreWrapper */ .chroma { color:#e6edf3;-webkit-text-size-adjust:none; } + /* Error */ .chroma .err { color:#f85149 } + /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } + /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } + /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } + /* LineHighlight */ .chroma .hl { } + /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 } + /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 } + /* Line */ .chroma .line { display:flex; } + /* Keyword */ .chroma .k { color:#ff7b72 } + /* KeywordConstant */ .chroma .kc { color:#79c0ff } + /* KeywordDeclaration */ .chroma .kd { color:#ff7b72 } + /* KeywordNamespace */ .chroma .kn { color:#ff7b72 } + /* KeywordPseudo */ .chroma .kp { color:#79c0ff } + /* KeywordReserved */ .chroma .kr { color:#ff7b72 } + /* KeywordType */ .chroma .kt { color:#ff7b72 } + /* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold } + /* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold } + /* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold } + /* NameEntity */ .chroma .ni { color:#ffa657 } + /* NameException */ .chroma .ne { color:#f0883e;font-weight:bold } + /* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold } + /* NameNamespace */ .chroma .nn { color:#ff7b72 } + /* NameOther */ .chroma .nx { color:#e6edf3 } + /* NameProperty */ .chroma .py { color:#79c0ff } + /* NameTag */ .chroma .nt { color:#7ee787 } + /* NameVariable */ .chroma .nv { color:#79c0ff } + /* NameVariableClass */ .chroma .vc { color:#79c0ff } + /* NameVariableGlobal */ .chroma .vg { color:#79c0ff } + /* NameVariableInstance */ .chroma .vi { color:#79c0ff } + /* NameVariableMagic */ .chroma .vm { color:#79c0ff } + /* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold } + /* NameFunctionMagic */ .chroma .fm { color:#d2a8ff;font-weight:bold } + /* Literal */ .chroma .l { color:#a5d6ff } + /* LiteralDate */ .chroma .ld { color:#79c0ff } + /* LiteralString */ .chroma .s { color:#a5d6ff } + /* LiteralStringAffix */ .chroma .sa { color:#79c0ff } + /* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff } + /* LiteralStringChar */ .chroma .sc { color:#a5d6ff } + /* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff } + /* LiteralStringDoc */ .chroma .sd { color:#a5d6ff } + /* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff } + /* LiteralStringEscape */ .chroma .se { color:#79c0ff } + /* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff } + /* LiteralStringInterpol */ .chroma .si { color:#a5d6ff } + /* LiteralStringOther */ .chroma .sx { color:#a5d6ff } + /* LiteralStringRegex */ .chroma .sr { color:#79c0ff } + /* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff } + /* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff } + /* LiteralNumber */ .chroma .m { color:#a5d6ff } + /* LiteralNumberBin */ .chroma .mb { color:#a5d6ff } + /* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff } + /* LiteralNumberHex */ .chroma .mh { color:#a5d6ff } + /* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff } + /* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff } + /* LiteralNumberOct */ .chroma .mo { color:#a5d6ff } + /* Operator */ .chroma .o { color:#ff7b72;font-weight:bold } + /* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold } + /* OperatorReserved */ .chroma .or { color:#ff7b72;font-weight:bold } + /* Comment */ .chroma .c { color:#8b949e;font-style:italic } + /* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic } + /* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic } + /* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic } + /* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic } + /* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic } + /* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic } + /* GenericDeleted */ .chroma .gd { color:#ffa198; } + /* GenericEmph */ .chroma .ge { font-style:italic } + /* GenericError */ .chroma .gr { color:#ffa198 } + /* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold } + /* GenericInserted */ .chroma .gi { color:#56d364; } + /* GenericOutput */ .chroma .go { color:#8b949e } + /* GenericPrompt */ .chroma .gp { color:#8b949e } + /* GenericStrong */ .chroma .gs { font-weight:bold } + /* GenericSubheading */ .chroma .gu { color:#79c0ff } + /* GenericTraceback */ .chroma .gt { color:#ff7b72 } + /* GenericUnderline */ .chroma .gl { text-decoration:underline } + /* TextWhitespace */ .chroma .w { color:#6e7681 } +} + +// Themed code-block background via token (beats any generated .chroma bg). +.td-content .highlight pre, +.td-content .highlight pre.chroma { + background: var(--d-code-bg); +} diff --git a/daprdocs/assets/scss/_code-tabs.scss b/daprdocs/assets/scss/_code-tabs.scss new file mode 100644 index 00000000000..2aa32a5b3e0 --- /dev/null +++ b/daprdocs/assets/scss/_code-tabs.scss @@ -0,0 +1,26 @@ +// +// code-tabs +// + +.td-content { + .nav-tabs { + border-bottom: 1px solid var(--d-border); gap: 2px; flex-wrap: nowrap; overflow-x: auto; + scrollbar-width: none; margin-bottom: 0; + } + .nav-tabs::-webkit-scrollbar { display: none; } + .nav-tabs .nav-item { margin-bottom: -1px; } + .nav-tabs .nav-link { + font-family: var(--font-head); font-size: .8rem; font-weight: 500; color: var(--d-muted); + background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; + padding: 7px 12px; white-space: nowrap; + } + .nav-tabs .nav-link:hover { color: var(--d-body); border-bottom-color: color-mix(in srgb, var(--d-orange) 35%, transparent); } + .nav-tabs .nav-link.active { + color: var(--d-heading); font-weight: 600; background: none; border-bottom-color: var(--d-orange); + } + // Blend the tab body with regular .td-content — no distinct panel background + // or border. Code blocks inside keep their own .highlight background. + .tab-content { background: transparent; border: none; max-width: 100%; } + .tab-content .tab-pane { background: transparent; border: none; padding: .5rem 0 0; } + .tab-content pre { overflow-x: auto; max-width: 100%; font-size: .82rem; line-height: 1.6; } +} diff --git a/daprdocs/assets/scss/_content.scss b/daprdocs/assets/scss/_content.scss index e502fa5c68e..8f7194e6c4f 100644 --- a/daprdocs/assets/scss/_content.scss +++ b/daprdocs/assets/scss/_content.scss @@ -4,20 +4,37 @@ .td-content { order: 1; + color: var(--d-body); + font-size: .95rem; + line-height: 1.65; p, li, td { font-weight: $font-weight-body-text; } > h1 { - font-weight: $font-weight-bold; + font-weight: 600; margin-bottom: .5rem; - color: $secondary; + color: var(--d-heading); } > h2 { font-weight: $font-weight-bold; margin-bottom: 1rem; + color: var(--d-heading); + border-bottom: 1px solid var(--d-border); + padding-bottom: .4rem; + position: relative; + } + + > h2::after { + content: ""; + position: absolute; + left: 0; + bottom: -1px; + width: 42px; + height: 2px; + background: var(--d-gold); } > h2:not(:first-child) { @@ -47,16 +64,20 @@ } > blockquote { - padding: 0 0 0 1rem; + padding: .2rem 0 .2rem 1rem; margin-bottom: $spacer; - color: $gray-600; - border-left: 6px solid $secondary; + color: var(--d-muted); + border-left: 3px solid var(--d-sky); } > ul li, > ol li { margin-bottom: .25rem; } + > ul li::marker, > ol li::marker { + color: var(--d-sky); + } + strong { font-weight: $font-weight-bold; } @@ -66,33 +87,29 @@ } a, a:visited { - color: $secondary; + color: var(--d-link); text-decoration: none; + border-bottom: 1px solid color-mix(in srgb, var(--d-link) 35%, transparent); } a:hover { - color: $primary; - text-decoration: none;; - } - - .alert { - background-color: white; - border-color: $highlight2; - } - - a.btn { + border-bottom-color: var(--d-link); text-decoration: none; - color: white; } - // Buttons are orange by default. The button shortcode's `color` parameter - // defaults to "tertiary", so a button without an explicit color renders - // orange. Specifying e.g. color="secondary" or color="primary" falls - // through to Bootstrap's theme colors instead. - a.btn-tertiary { - background-color: $highlight1; + p code, li code, td code { + font-family: var(--font-mono); + font-size: .82em; + background: var(--d-panel); + border: 1px solid var(--d-border); + border-radius: 4px; + padding: 1px 5px; + color: var(--d-heading); } + // .alert base/variant styling now owned by _callouts.scss (Task 6). + // a.btn / a.btn-tertiary styling now owned by _buttons.scss (Task 8). + .alert:not(:first-child) { margin-top: 2 * $spacer; margin-bottom: 2 * $spacer; @@ -103,35 +120,31 @@ font-weight: $font-weight-bold; } - .highlight i.fas { - // To prevent the margin change when doing mouseover. - display: inline !important; - } - + // Generous breathing room around code blocks (Docsy's default is 2rem; an + // earlier 0.5rem override crowded the surrounding text). .highlight { - margin: 0.5rem 0; + margin: 1.75rem 0; } -} -.text-white a, .text-white a:visited { - color: white; - text-decoration: none; + // Docsy's built-in copy button (injected by Docsy's js/click-to-copy.js as + // `button.td-click-to-copy`). We rely on this ONE copy affordance — the + // redundant custom copy-code-button.js was removed. Tint it with our tokens + // and force the Font Awesome solid weight so the glyph renders as an icon. + .highlight pre button.td-click-to-copy { + color: var(--d-muted); + font-weight: 900; + } + .highlight pre button.td-click-to-copy:hover { + color: var(--d-heading); + background: var(--d-panel); + } } -.text-white a:hover { - color: white; - text-decoration: underline; -} +// .text-white a / .text-white a:hover styling (previously hardcoded to raw +// `white`) now owned by _footer.scss (Task 12) — `.text-white` is only ever +// used inside the site footer. -.td-breadcrumbs a, .td-breadcrumbs a:visited { - color: $secondary; - text-decoration: none; -} - -.td-breadcrumbs a:hover { - color: $primary; - text-decoration: none; -} +// .td-breadcrumbs styling now owned by _page-extras.scss (Task 12). .td-title { margin-top: 1rem; @@ -181,18 +194,7 @@ nav#TableOfContents { margin-top: 1.5em; } -.tab-content { - - max-width: 100% !important; - - .tab-pane { - background-color: white !important; - max-width: 100% !important; - border-left: none !important; - border-right: none !important; - border-bottom: none !important; - } -} +// .tab-content / .tab-pane styling now owned by _code-tabs.scss (Task 5). .img-scarf { height: 1px ; diff --git a/daprdocs/assets/scss/_footer.scss b/daprdocs/assets/scss/_footer.scss new file mode 100644 index 00000000000..c6a451e905d --- /dev/null +++ b/daprdocs/assets/scss/_footer.scss @@ -0,0 +1,40 @@ +// +// footer +// +// The forked layouts/_partials/footer.html renders