177 lines
2.8 KiB
CSS
177 lines
2.8 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
background: var(--color-brand-canvas);
|
|
font-family: var(--font-sans-serif);
|
|
font-size: 14px;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
body {
|
|
grid-auto-rows: min-content min-content min-content auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.grid-layout-main {
|
|
display: grid;
|
|
container-type: inline-size;
|
|
row-gap: var(--row-gap);
|
|
grid-template-columns:
|
|
[screen-start] var(--screen-padding)
|
|
[totalbleed-start] 1fr [bleed-start] var(--bleed-outer-width)
|
|
[main-column-start] var(--column-padding)
|
|
[content-start left-half-start] var(--half-width)
|
|
[left-half-end] var(--margin-between-halves) [right-half-start] var(--half-width)
|
|
[content-end right-half-end] var(--column-padding)
|
|
[main-column-end] var(--bleed-outer-width)
|
|
[bleed-end] 1fr [totalbleed-end] var(--screen-padding)
|
|
[screen-end];
|
|
margin: 0;
|
|
padding: 0;
|
|
--total-available-space: 100cqw;
|
|
--row-gap: 16px;
|
|
--column-padding: 16px;
|
|
--target-column-width: 800px;
|
|
--screen-padding: 16px;
|
|
--margin-between-halves: 8px;
|
|
--total-horizontal-spacing: 2 * var(--screen-padding) - 2 * var(--column-padding) -
|
|
var(--margin-between-halves);
|
|
--half-width: min(
|
|
calc((var(--total-available-space) - var(--total-horizontal-spacing)) / 2),
|
|
calc(
|
|
(
|
|
var(--target-column-width) - var(--margin-between-halves) -
|
|
var(--column-padding) * 2
|
|
) /
|
|
2
|
|
)
|
|
);
|
|
--bleed-outer-width: min(
|
|
150px,
|
|
max(
|
|
0px,
|
|
calc(
|
|
(
|
|
var(--total-available-space) - var(--target-column-width) -
|
|
var(--total-horizontal-spacing)
|
|
) /
|
|
2
|
|
)
|
|
)
|
|
);
|
|
background: var(--color-brand-text-bg);
|
|
color: var(--color-brand-text-fg);
|
|
|
|
@container (max-width: 800px) {
|
|
--screen-padding: 8px;
|
|
}
|
|
|
|
@container (max-width: 600px) {
|
|
--screen-padding: 0px;
|
|
}
|
|
|
|
@container (max-width: 400px) {
|
|
--column-padding: 8px;
|
|
}
|
|
|
|
& > * {
|
|
grid-column: content;
|
|
}
|
|
}
|
|
|
|
.subgrid-layout {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: screen-start / screen-end;
|
|
row-gap: var(--row-gap);
|
|
|
|
& > * {
|
|
grid-column: content;
|
|
}
|
|
}
|
|
|
|
.delete-button {
|
|
height: 1rem;
|
|
line-height: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
|
|
ul {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-left: 0;
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.jdd-editor {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-brand-link-fg);
|
|
}
|
|
|
|
.sealious-list__actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
text-wrap: pretty;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
|
|
@container (max-width: 450px) {
|
|
font-size: 1.6em;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5em;
|
|
|
|
@container (max-width: 450px) {
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.17em;
|
|
|
|
@container (max-width: 450px) {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.17em;
|
|
|
|
@container (max-width: 450px) {
|
|
font-size: 1.05em;
|
|
}
|
|
}
|