thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 02:41:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add categories for docs template

Browse Source
This commit is contained in:
thiloho
2024-08-27 16:39:29 +02:00
parent 0753345bba
commit 1b1767c0f7
24 changed files with 651 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web-app/template-styles/common-styles.css
View File

@@ -108,6 +108,7 @@ select,
[role="button"],
[role="option"],
label[for="toggle-mobile-preview"],
label[for="toggle-sidebar"],
summary {
cursor: pointer;
}
@@ -118,6 +119,7 @@ textarea,
select,
a[role="button"],
label[for="toggle-mobile-preview"],
label[for="toggle-sidebar"],
summary {
font: inherit;
color: inherit;
@@ -146,7 +148,6 @@ input[type="color"] {
}
a[role="button"] {
display: inline-block;
max-inline-size: fit-content;
text-decoration: none;
}
@@ -158,16 +159,23 @@ summary {
button,
a[role="button"],
label[for="toggle-mobile-preview"],
label[for="toggle-sidebar"],
summary {
background-color: var(--bg-secondary);
}
:is(button, a[role="button"], label[for="toggle-mobile-preview"], summary):hover {
:is(
button,
a[role="button"],
label[for="toggle-mobile-preview"],
label[for="toggle-sidebar"],
summary
):hover {
background-color: var(--bg-tertiary);
}
:is(button, input, textarea, select, a, summary, pre):focus,
#toggle-mobile-preview:checked + label {
:is(#toggle-mobile-preview, #toggle-sidebar):checked + label {
outline: 0.125rem solid var(--color-accent);
outline-offset: 0.25rem;
}
@@ -314,7 +322,6 @@ table {
th,
td {
text-align: start;
padding-inline: var(--space-2xs);
padding-block: var(--space-3xs);
padding: var(--space-2xs);
border: var(--border-primary);
}

58
web-app/template-styles/docs-styles.css Normal file
View File

@@ -0,0 +1,58 @@
.container {
margin-inline: auto;
inline-size: min(100% - var(--space-m), 75ch);
}
nav {
position: sticky;
block-size: var(--space-xl);
display: flex;
align-items: center;
inset-block-start: 0;
background-color: var(--bg-primary);
border-block-end: var(--border-primary);
}
nav > .container {
display: flex;
align-items: center;
gap: var(--space-2xs);
}
header > .container {
display: flex;
flex-direction: column;
gap: var(--space-s);
}
nav,
header,
main,
footer {
padding-block: var(--space-s);
}
section {
scroll-margin-block-start: var(--space-xl);
}
label[for="toggle-sidebar"] {
display: inline-grid;
place-content: center;
}
@media (min-width: 1525px) {
#table-of-contents {
position: fixed;
inset-inline-start: calc(50% + 37.5ch + var(--space-m));
inset-block-start: calc(var(--space-xl) + var(--space-s));
max-inline-size: 35ch;
padding: var(--space-s);
background-color: var(--bg-primary);
border: var(--border-primary);
}
#table-of-contents + section {
margin-block-start: 0;
}
}