Skip to content

Commit

Permalink
🎨 Light mode callout title contrast
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebullient
ebullient committed Oct 27, 2022
1 parent be5ca5e commit 765bf6c
Showing 1 changed file with 150 additions and 100 deletions.
250 changes: 150 additions & 100 deletions src/fragments/08-blockquote-callouts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,84 +50,186 @@ body {
border-radius: var(--callout-radius);
}

.rendered-widget,
.markdown-rendered,
.markdown-preview-section {
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
--callout-color: var(--ebw-callout-abstract);
}
.callout[data-callout="note"] {
--callout-color: var(--ebw-callout-note);
}
.callout[data-callout="info"],
.callout[data-callout="todo"] {
--callout-color: var(--ebw-callout-info);
}
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="important"] {
--callout-color: var(--ebw-callout-tip);
}
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
--callout-color: var(--ebw-callout-success);
}
.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"] {
--callout-color: var(--ebw-callout-question);
}
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
--callout-color: var(--ebw-callout-warning);
}
.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"] {
--callout-color: var(--ebw-callout-failure);
}
.callout[data-callout="danger"],
.callout[data-callout="error"] {
--callout-color: var(--ebw-callout-danger);
}
.callout[data-callout="bug"] {
--callout-color: var(--ebw-callout-bug);
}
.callout[data-callout="example"] {
--callout-color: var(--ebw-callout-example);
}
.callout[data-callout="excerpt"],
.callout[data-callout="quote"],
.callout[data-callout="cite"] {
--callout-color: var(--ebw-callout-quote);
}
.callout[data-callout="reference"] {
--callout-color: var(--ebw-callout-reference);
}
.callout[data-callout="toc"] {
--callout-color: var(--ebw-callout-toc);
}
.theme-light {
.callout[data-callout="info"],
.callout[data-callout="todo"],
.callout[data-callout="note"],
.callout[data-callout="excerpt"],
.callout[data-callout="quote"],
.callout[data-callout="cite"] {
--callout-title-color: var(--blue-5);
}
.callout[data-callout="bug"],
.callout[data-callout="example"],
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
--callout-color: var(--ebw-callout-abstract);
}
.callout[data-callout="note"] {
--callout-color: var(--ebw-callout-note);
}
.callout[data-callout="info"],
.callout[data-callout="todo"] {
--callout-color: var(--ebw-callout-info);
--callout-title-color: var(--purple-5);
}
.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"],
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="important"] {
--callout-color: var(--ebw-callout-tip);
--callout-title-color: var(--teal-5);
}
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
--callout-color: var(--ebw-callout-success);
}
.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"] {
--callout-color: var(--ebw-callout-question);
--callout-title-color: var(--green-5);
}
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
--callout-color: var(--ebw-callout-warning);
--callout-title-color: var(--yellow-5);
}
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"] {
--callout-color: var(--ebw-callout-failure);
}
.callout[data-callout="danger"],
.callout[data-callout="error"] {
--callout-color: var(--ebw-callout-danger);
}
.callout[data-callout="bug"] {
--callout-color: var(--ebw-callout-bug);
}
.callout[data-callout="example"] {
--callout-color: var(--ebw-callout-example);
}
.callout[data-callout="excerpt"],
.callout[data-callout="quote"],
.callout[data-callout="cite"] {
--callout-color: var(--ebw-callout-quote);
--callout-title-color: var(--red-5);
}
.callout[data-callout="toc"],
.callout[data-callout="reference"] {
--callout-color: var(--ebw-callout-reference);
}
.callout[data-callout="toc"] {
--callout-color: var(--ebw-callout-toc);
--callout-title-color: var(--gray-dark-4);
}
}
.callout-title {
font-family: var(--ebw-font-callout-title);
}
.callout-title-inner {
flex: 2;
}
.callout-content {
background-color: var(--background-primary);

.callout-title {
font-family: var(--ebw-font-callout-title);
> :first-child {
margin-top: 0.5em;
}
.callout-title-inner {
flex: 2;
> :last-child {
margin-bottom: 0.5em;
}
}

// ------------------------------------------------------
// Reference Admonition
// Create callout of type 'reference' (book icon suggested)
// ```ad-reference
// Title:: Title of referenced thing
// Source:: https://....
// ```
// ------------------------------------------------------
.callout[data-callout="reference"] {
.callout-content {
background-color: var(--background-primary);
white-space: pre-wrap;
font-family: var(--font-monospace);
font-size: var(--font-smallest);
color: var(--text-muted);

> :first-child {
margin-top: 0.5em;
p {
margin-block: 0;
}
> :last-child {
margin-bottom: 0.5em;

p:not(:first-child) {
margin-block-end: .5em;
}
}
}
// ------------------------------------------------------
// TOC Admonition
// List with compressed padding that floats to the right
// Create callout of type 'toc' (outline icon suggested)
// ```ad-toc
// - List of links to document sections
// ```
// ------------------------------------------------------
.callout[data-callout="toc"] {
&.callout {
float: right;
margin-left: .5em;
min-width: 150px;
}
.callout-content {
padding-right: .5em;

ul {
display: block;
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 30px;
}
}
}
.admonition {
margin: 1em 0;
padding: var(--callout-padding);
}

.rendered-widget,
.markdown-rendered,
.markdown-preview-section {
blockquote {
overflow-x: auto;
padding: var(--callout-content-padding);
Expand All @@ -139,58 +241,6 @@ body {
margin-bottom: 0.5em;
}
}

// ------------------------------------------------------
// Reference Admonition
// Create callout of type 'reference' (book icon suggested)
// ```ad-reference
// Title:: Title of referenced thing
// Source:: https://....
// ```
// ------------------------------------------------------
.callout[data-callout="reference"] {
.callout-content {
white-space: pre-wrap;
font-family: var(--font-monospace);
font-size: var(--font-smallest);
color: var(--text-muted);

p {
margin-block: 0;
}

p:not(:first-child) {
margin-block-end: .5em;
}
}
}
// ------------------------------------------------------
// TOC Admonition
// List with compressed padding that floats to the right
// Create callout of type 'toc' (outline icon suggested)
// ```ad-toc
// - List of links to document sections
// ```
// ------------------------------------------------------
.callout[data-callout="toc"] {
&.callout {
float: right;
margin-left: .5em;
min-width: 150px;
}
.callout-content {
padding-right: .5em;

ul {
display: block;
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 30px;
}
}
}
}
div.popover {
.callout[data-callout="toc"] {
Expand Down

0 comments on commit 765bf6c

Please sign in to comment.