mirror of
https://github.com/nolen777/eagle0.git
synced 2026-07-28 22:35:42 +00:00
Polish Eagle command reference layout (#8409)
* Polish Eagle command reference layout * Fix conditional command heading casing
This commit is contained in:
@@ -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.
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user