Capacities-like index card callout

!Description.md

Usage

1. Download and use the capacities-cards.css as a snippet
2. Copy the raw value of the capacities-index.md file and paste it in your obsidian note

3. Edit the callout to your liking

Callouts

capacities-card: Base container for the card

capacities-index: Container for side index

capacities-index-prop: Property values that go inside the index

Design advice

• Use --- hr dividers after every property
• Use #### h4 headings for a property declaration
• Use ## h2 headings for index card headings
• use ![capacities-index-prop|link] if you want your links to have a neat icon in front of them

capacities-cards.css

.callout[data-callout=sidebar-right] {
  float: right;
  top: 0;
  margin-block: 0;
  border: 1px solid var(--background-modifier-border);
  margin-right: 20px;
  background-color: transparent;
  right: 0;
  position: fixed;
}
.callout[data-callout=sidebar-right] > .callout-title {
  display: none;
}

.callout[data-callout=capacities-card],
.callout[data-callout=capacities-index],
.callout[data-callout=capacities-index-prop] {
  mix-blend-mode: none;
  --mix-highlight-blend-mode: normal;
}
.callout[data-callout=capacities-card] > .callout-title,
.callout[data-callout=capacities-index] > .callout-title,
.callout[data-callout=capacities-index-prop] > .callout-title {
  display: none;
}
.callout[data-callout=capacities-card] > .callout-content,
.callout[data-callout=capacities-index] > .callout-content,
.callout[data-callout=capacities-index-prop] > .callout-content {
  overflow-x: hidden;
}

.callout[data-callout=capacities-card] {
  border: 1px solid var(--background-modifier-border);
  background-color: transparent;
  padding: 0 0 0 10px;
}
.callout[data-callout=capacities-card] p {
  font-size: calc(var(--font-text-size) - 2px);
}
.callout[data-callout=capacities-card] h2 {
  margin-block-end: 6px;
}

.callout[data-callout=capacities-index] {
  border: 1px solid var(--background-modifier-border);
  padding: 0 0 5px 0;
  margin: -1px -1px -1px 10px;
  max-width: 30%;
  min-width: 200px;
  border-width: 0 0 0 1px;
  border-radius: 0;
  background-color: var(--background-secondary);
  margin-block: 0;
  float: right;
}
.callout[data-callout=capacities-index] .internal-embed {
  margin: 0 auto;
  float: none;
}
.callout[data-callout=capacities-index] img {
  margin: 5px auto;
  max-width: 100%;
  mix-blend-mode: none;
}
.callout[data-callout=capacities-index] hr {
  margin: 0;
  --hr-thickness: 1px;
}
.callout[data-callout=capacities-index] p {
  width: inherit;
  padding: 0 10px;
  font-size: calc(var(--font-text-size) - 3px);
}
.callout[data-callout=capacities-index] > .callout-content {
  width: inherit;
}
.callout[data-callout=capacities-index] h4 {
  color: var(--text-faint);
  font-size: var(--font-text);
  padding: 0 8px;
  margin-block: 3px;
}

.callout[data-callout=capacities-index-prop] {
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  margin-block: 3px;
  margin: 0 10px 10px 10px;
  padding: 3px 0;
}
.callout[data-callout=capacities-index-prop] p {
  margin-block: 0;
}
.callout[data-callout=capacities-index-prop][data-callout-metadata=link] a {
  color: var(--font-normal);
}
.callout[data-callout=capacities-index-prop][data-callout-metadata=link] a::before {
  width: 0;
  padding-right: var(--font-text-size);
  margin-right: 3px;
  height: 0;
  content: " ";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-card-text' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/%3E%3Cpath d='M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
}
.theme-dark .callout[data-callout=capacities-index-prop][data-callout-metadata=link] a::before {
  filter: invert(100%);
}

capacities-index.md

[!capacities-card]

[!capacities-index] ![[PaxAmericana.png|brightness-unset]]

---

Related

[!capacities-index-prop|link] [[Black Swan Event]] [[Known Knowns]]

---

Created

[!capacities-index-prop|link] November 26th, 2022

Pax Americana

#misc

Pax Americana is a term applied to the concept of relative peace in the Western Hemisphere and later in the world after the end of World War II in 1945, when the United States became the world's dominant economic and military power.

The Marshall Plan, which spent $13 billion after World War II to rebuild the economies of Western Europe, has been described as "the launching of the Pax Americana".