Polish Eagle command reference layout (#8409)

* Polish Eagle command reference layout

* Fix conditional command heading casing
This commit is contained in:
2026-07-10 10:49:07 -07:00
committed by GitHub
parent ecd0d3605b
commit 06c76daba2
3 changed files with 160 additions and 1 deletions
+1
View File
@@ -7,6 +7,7 @@ export default defineConfig({
starlight({
title: "Eagle0pedia",
description: "Reference guide for Eagle0 commands, systems, and game concepts.",
customCss: ["./src/styles/custom.css"],
editLink: {
baseUrl: "https://github.com/nolen777/eagle0/edit/main/docs/eagle0pedia/src/content/docs/",
},
@@ -7,6 +7,8 @@ Eagle commands are the strategic actions a faction can take from a province comm
Most commands belong to the province currently acting this turn. Some are reaction commands, such as resolving diplomacy offers, handling captured heroes, or choosing a battle aftermath decision.
<span class="command-reference-marker" aria-hidden="true"></span>
## Normal Command Phase Commands
Most command phase actions spend the acting province's turn.
@@ -275,7 +277,7 @@ You must use Travel before these commands appear. Once you are traveling, you ca
<b>Selection:</b> choose buy or sell and the amount of food.
## Special And Conditional Commands
## Special and Conditional Commands
These commands appear only when the game is resolving a special situation, response, or pending decision.
+156
View File
@@ -0,0 +1,156 @@
.sl-markdown-content:has(.command-reference-marker) {
--command-border: color-mix(in srgb, var(--sl-color-gray-5), transparent 18%);
--command-surface: color-mix(in srgb, var(--sl-color-bg), var(--sl-color-gray-6) 22%);
--command-surface-strong: color-mix(in srgb, var(--sl-color-bg), var(--sl-color-accent-low) 28%);
--command-muted: var(--sl-color-gray-2);
--command-label: var(--sl-color-accent-high);
}
.command-reference-marker {
display: none;
}
.sl-markdown-content:has(.command-reference-marker) > p:has(.command-reference-marker) {
display: none;
}
.sl-markdown-content:has(.command-reference-marker) > p {
max-width: 68rem;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h2 {
margin-top: 3rem;
padding: 1rem 1.125rem;
border: 1px solid var(--command-border);
border-radius: 0.5rem;
background:
linear-gradient(90deg, var(--sl-color-accent-low), transparent 72%),
var(--command-surface);
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h2 h2 {
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
line-height: 1.2;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h2 + p {
margin-top: 0.75rem;
color: var(--command-muted);
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 {
margin-top: 1.5rem;
margin-bottom: 0;
padding: 1rem 1.125rem 0.875rem;
border: 1px solid var(--command-border);
border-bottom: 0;
border-radius: 0.5rem 0.5rem 0 0;
background: var(--command-surface-strong);
font-size: 1.18rem;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 h3 {
font-size: 1.15rem;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p + p + p {
margin: 0;
padding: 0.75rem 1.125rem;
border-right: 1px solid var(--command-border);
border-left: 1px solid var(--command-border);
background: var(--sl-color-bg);
display: grid;
grid-template-columns: 11.5rem minmax(0, 1fr);
column-gap: 1rem;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p {
padding-top: 1rem;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p + p + p {
padding-bottom: 1rem;
border-bottom: 1px solid var(--command-border);
border-radius: 0 0 0.5rem 0.5rem;
box-shadow: 0 0.7rem 1.6rem color-mix(in srgb, black, transparent 92%);
}
.sl-markdown-content:has(.command-reference-marker) p > b:first-child {
color: var(--command-label);
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h4 {
margin-top: 1rem;
padding: 0.65rem 1rem;
border: 1px solid var(--command-border);
border-radius: 0.45rem;
background: color-mix(in srgb, var(--sl-color-gray-6), transparent 55%);
color: var(--sl-color-white);
font-size: 0.92rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h5 {
margin-top: 1rem;
margin-bottom: 0;
padding: 0.75rem 1rem 0.25rem;
border-top: 1px solid var(--command-border);
color: var(--sl-color-accent-high);
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h5 + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h5 + p + p {
margin: 0;
padding: 0.4rem 1rem;
border-right: 1px solid var(--command-border);
border-left: 1px solid var(--command-border);
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
column-gap: 1rem;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h5 + p + p {
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--command-border);
border-radius: 0 0 0.45rem 0.45rem;
}
@media (max-width: 50rem) {
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h2,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 {
padding-right: 0.875rem;
padding-left: 0.875rem;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p + p + p {
padding-right: 0.875rem;
padding-left: 0.875rem;
}
.sl-markdown-content:has(.command-reference-marker) p > b:first-child {
display: block;
margin-bottom: 0.2rem;
white-space: normal;
}
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h3 + p + p + p + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h5 + p,
.sl-markdown-content:has(.command-reference-marker) .sl-heading-wrapper.level-h5 + p + p {
grid-template-columns: 1fr;
row-gap: 0.2rem;
}
}