Jason Zimdars
a3b81af1da
* main: (284 commits) Polish closed stamp Add new card button to considering column Let's leave inside the menu for now Improve terminal history behavior More space between Add a navigation hint, make "All collections" link navigate like the others Reorder methods Fix: dismiss notifications from comments Fix card icons Filter collections menus, add keyboard shortcuts Style Space between Remove debug Consistent sizing Configure deployment for load balancing Configure the autoclose period at the collection level Rename to avoid using the same name Add brakeman rule Collections can be private now too Not used outside the class anymore ...
140 lines
2.9 KiB
CSS
140 lines
2.9 KiB
CSS
@layer components {
|
|
/* Coluns
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
/* Card contents are resized via container queries. We're using #main here as
|
|
the primary container so all cards have the same container reference */
|
|
#main:has(.card-columns) {
|
|
container-type: inline-size;
|
|
max-inline-size: 1400px;
|
|
}
|
|
|
|
.card-columns {
|
|
border-block-start: 1px solid var(--color-ink-lighter);
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 50%);
|
|
margin: auto;
|
|
max-inline-size: 1080px;
|
|
|
|
.cards:first-child {
|
|
border-inline-end: var(--border);
|
|
padding-inline-end: var(--cards-gap);
|
|
}
|
|
|
|
.cards:last-child {
|
|
padding-inline-start: var(--cards-gap);
|
|
}
|
|
}
|
|
|
|
/* Cards
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.cards {
|
|
--cards-gap: 2cqi;
|
|
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cards-gap);
|
|
justify-content: start;
|
|
padding-block: var(--cards-gap);
|
|
|
|
.card {
|
|
--block-space: 1em;
|
|
--block-space-half: 0.5em;
|
|
--text-xx-large: 2em;
|
|
|
|
/* Set lower limit for font size */
|
|
font-size: clamp(0.45rem, 0.85cqi, 100px);
|
|
}
|
|
|
|
.card__title {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card__link {
|
|
z-index: 1;
|
|
}
|
|
|
|
.card__hide-on-index {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.cards__heading {
|
|
display: inline-flex;
|
|
font-size: var(--text-medium);
|
|
inline-size: 100%;
|
|
justify-content: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Considering
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.cards--considering {
|
|
.card {
|
|
--text-xx-large: 1.6em;
|
|
--text-small: 1.1em;
|
|
|
|
background-color: var(--color-canvas);
|
|
box-shadow: 0 0 0 1px var(--color-ink-lighter);
|
|
line-height: 1.2;
|
|
|
|
.avatar {
|
|
block-size: 2.75em;
|
|
inline-size: 2.75em;
|
|
}
|
|
}
|
|
|
|
.card--drafted {
|
|
--card-color: var(--color-ink-medium) !important;
|
|
|
|
border-color: var(--card-color) !important;
|
|
border-style: dashed !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.card__background {
|
|
display: none;
|
|
}
|
|
|
|
.card__title {
|
|
margin-block-start: 0.1em;
|
|
min-block-size: 0;
|
|
}
|
|
|
|
.card__people-label {
|
|
display: none;
|
|
}
|
|
|
|
.card__body {
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.card__tags {
|
|
font-size: var(--text-small);
|
|
}
|
|
}
|
|
|
|
/* Closed
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.cards--closed {
|
|
border-block-start: 1px solid var(--color-ink-lighter);
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
inline-size: 100%;
|
|
margin: 0 auto;
|
|
|
|
.card {
|
|
inline-size: calc((100% - var(--cards-gap) * 2) / 3);
|
|
|
|
@media (max-width: 960px) {
|
|
inline-size: calc((100% - var(--cards-gap)) / 2);
|
|
}
|
|
}
|
|
}
|
|
}
|