larlet-fr-david-cache/cache/2021/b3336418889958b9094059ebb5b761f2/index.md

title: HTML Sketches: Whither Cards?
url: https://www.colophon.cards/notes/whither-cards/
hash_url: b3336418889958b9094059ebb5b761f2

<style>
  .Card {
    --border-color: 0 0% 100%;
    max-width: 80ch;
    padding: 0 0 2rem;
    margin: 2rem auto;
    border: 0.5rem solid hsl(var(--border-color) / 0.5);
    box-shadow: var(--shadow-elevation-medium);
    position: relative;
    display: grid;
    grid-template-columns: 1rem 1fr 1rem;
    background-color: #fafafa;
    background-color: white;
  }

  .Card[data-editing] {
    box-shadow: var(--shadow-elevation-high);
    --border-color: var(--link-normal);
  }

  .CardBody {
    text-align: left;
    hyphens: manual;
    padding: 1rem 0 2rem;
    border: 3px none transparent;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 100%;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    margin: 0;
  }
  .CardTextarea {
    text-align: left;
    hyphens: manual;
    padding: 1rem 0 2rem;
    border: 3px none #d5d5c9;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 100%;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    margin: 0;
    font-variation-settings: inherit;
    font-feature-settings: inherit;
    background-color: white;
    overflow: hidden;
  }

  .CardDate {
    padding: 0.75rem 0rem 0.75rem;
    font-size: 0.85rem;
    color: #555;
    font-variant-caps: all-small-caps;
  }

  .CardEdit {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    display: flex;
  }
  [data-editing] .CardEdit {
    --shadow-color: 0 0% 31%;
    --shadow-elevation-high: 0.1px 0.3px 0.3px hsl(var(--shadow-color) / 0.4),
      0.7px 1.6px 1.8px -0.4px hsl(var(--shadow-color) / 0.39),
      1.3px 3px 3.4px -0.9px hsl(var(--shadow-color) / 0.37),
      2.3px 5.2px 6px -1.3px hsl(var(--shadow-color) / 0.35),
      3.8px 8.6px 9.9px -1.7px hsl(var(--shadow-color) / 0.34),
      6.2px 13.9px 16px -2.1px hsl(var(--shadow-color) / 0.32),
      9.6px 21.6px 24.8px -2.6px hsl(var(--shadow-color) / 0.3),
      14.3px 32.3px 37.1px -3px hsl(var(--shadow-color) / 0.28);
  }

  .CardHeader {
    display: flex;
    justify-content: space-between;
    grid-column: 2 / 2;
    align-items: center;
    color: #555;
  }

  .CardButtons {
    margin: 0;
  }

  .CardTextButton {
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    color: hsl(var(--link-normal));
    font-family: inherit;
    padding: 0.25rem 0.5rem 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-caps: all-small-caps;
    font-weight: 300;
    font-size: 0.85rem;
    cursor: pointer;
    font-variation-settings: "wght" 600, "opsz" 8;
  }
  .CardTextButton:hover {
    color: hsl(var(--link-hover));
  }
  .CardButton:hover {
    background-color: hsl(var(--link-hover));
    color: white;
  }
  .CardButton {
    --border-color: 0 0% 94.1%;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    font-family: inherit;
    padding: 0.45rem 2rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: box-shadow 250ms ease-in-out;
    font-variant-caps: all-small-caps;
    font-weight: 300;
    font-size: 0.85rem;
    cursor: pointer;
    font-variation-settings: "wght" 600, "opsz" 8;
    color: hsl(var(--link-normal));
  }

  .CardButton svg,
  .CardTextButton svg {
    margin-right: 1px;
  }

  [data-editing] .CardButton {
    --border-color: 0 0% 94.1%;
    box-sizing: border-box;
    border: none;
    background-color: hsl(var(--border-color));
    font-family: inherit;
    padding: 0.45rem 2rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-elevation-high);
    transition: box-shadow 250ms ease-in-out;
    font-variant-caps: all-small-caps;
    font-weight: 300;
    font-size: 0.85rem;
    cursor: pointer;
    font-variation-settings: "wght" 600, "opsz" 8;
  }

  .CardButton.Primary {
    --link-color: var(--link-normal);
    background-color: hsl(var(--link-color));
    color: white;
    box-shadow: var(--shadow-elevation-high);
  }
  .CardButton:hover {
    background-color: hsl(var(--link-hover));
    color: white;
  }

  .CardButton:active {
    box-shadow: var(--shadow-elevation-medium);
  }

  /* The Single Mode version */
  .PlainCard {
    --border-color: 0 0% 100%;
    max-width: 80ch;
    width: 100%;
    padding: 0;
    margin: 2rem auto;
    box-shadow: var(--shadow-elevation-medium);
    position: relative;
    display: grid;
    grid-template-columns: 2rem 1fr 1rem;
    background-color: #fafafa;
    background-color: white;
    grid-column-gap: 0.5rem;
    transition: box-shadow 125ms ease-in-out;
  }

  .PlainCard:focus-within {
    box-shadow: var(--shadow-elevation-high);
    outline: 3px solid #eee;
  }
  /* 
  .Card[data-editing] {
    box-shadow: var(--shadow-elevation-high);
    --border-color: var(--link-normal);
  } */

  .PlainCardBody {
    text-align: left;
    hyphens: manual;
    padding: 1rem 2rem 1rem;
    border: 3px none transparent;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 100%;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    margin: 0;
  }
  .PlainCardTextarea {
    text-align: left;
    hyphens: manual;
    padding: 1rem 0 1rem;
    border: 3px none #d5d5c9;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 100%;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    margin: 0;
    font-variation-settings: inherit;
    font-feature-settings: inherit;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    height: 10rem;
  }
  .PlainCardEditable {
    text-align: left;
    hyphens: manual;
    padding: 0;
    border: 3px none #d5d5c9;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 100%;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    margin: 0;
    font-variation-settings: inherit;
    font-feature-settings: inherit;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
  }

  .PlainCardDate {
    padding: 0.75rem 0rem 0.75rem;
    font-size: 0.85rem;
    color: #555;
    font-variant-caps: all-small-caps;
  }

  .PlainCardEdit {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    display: flex;
  }
  [data-editing] .CardEdit {
    --shadow-color: 0 0% 31%;
    --shadow-elevation-high: 0.1px 0.3px 0.3px hsl(var(--shadow-color) / 0.4),
      0.7px 1.6px 1.8px -0.4px hsl(var(--shadow-color) / 0.39),
      1.3px 3px 3.4px -0.9px hsl(var(--shadow-color) / 0.37),
      2.3px 5.2px 6px -1.3px hsl(var(--shadow-color) / 0.35),
      3.8px 8.6px 9.9px -1.7px hsl(var(--shadow-color) / 0.34),
      6.2px 13.9px 16px -2.1px hsl(var(--shadow-color) / 0.32),
      9.6px 21.6px 24.8px -2.6px hsl(var(--shadow-color) / 0.3),
      14.3px 32.3px 37.1px -3px hsl(var(--shadow-color) / 0.28);
  }

  .PlainCardHeader {
    display: flex;
    justify-content: space-between;
    grid-column: 2 / 2;
    align-items: center;
    color: #555;
    font-variation-settings: "wght" 400, "opsz" 8;
  }

  .PlainCardFooter {
    display: flex;
    justify-content: space-between;
    grid-column: 2 / -1;
    align-items: center;
    color: #555;
    padding: 0 1rem;
  }

  .PlainCardButtons {
    margin: 0;
  }

  .PlainCardTextButton {
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    color: hsl(var(--link-normal));
    font-family: inherit;
    padding: 0.25rem 0.5rem 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-caps: all-small-caps;
    font-weight: 300;
    font-size: 0.85rem;
    cursor: pointer;
    font-variation-settings: "wght" 600, "opsz" 8;
  }
  .PlainCardTextButton:hover {
    color: hsl(var(--link-hover));
  }
  .PlainCardButton:hover {
    background-color: hsl(var(--link-hover));
    color: white;
  }
  .PlainCardButton {
    --border-color: 0 0% 94.1%;
    box-sizing: border-box;
    border: none;
    background-color: hsl(var(--border-color));
    font-family: inherit;
    padding: 0.45rem 2rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-elevation-high);
    transition: box-shadow 250ms ease-in-out;
    font-variant-caps: all-small-caps;
    font-weight: 300;
    font-size: 0.85rem;
    cursor: pointer;
    font-variation-settings: "wght" 600, "opsz" 8;
  }

  .PlainCardButton svg,
  .PlainCardTextButton svg {
    margin-right: 1px;
  }
  .PlainCardButton.Primary {
    --link-color: var(--link-normal);
    background-color: hsl(var(--link-color));
    color: white;
    box-shadow: var(--shadow-elevation-high);
  }
  .PlainCardButton:hover {
    background-color: hsl(var(--link-hover));
    color: white;
  }

  .PlainCardButton:active {
    box-shadow: var(--shadow-elevation-medium);
  }
  .PlainCardSidebar {
    grid-column: 1 / 1;
    grid-row: 1 / 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    flex-direction: column;
    padding: 0.5rem 0;
    background-color: rgb(248 248 248);
  }

  .PlainCardGrabHandle {
    width: 0;
    border: none;
    border-left: 4px solid #e1e1e1;
    height: 100%;
    margin: 2.5rem 0;
  }
  .PlainCardGrabHandle:hover {
    cursor: grab;
  }

  .PlainCardHeader.Handle {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .PlainCardGrabHandle.Header {
    width: 5rem;
    border: none;
    margin: 0 auto;
    height: 0.5rem;
    display: inline-flex;
    padding: calc(0.25rem + 4px) 0.5rem 0.25rem;
    border-radius: 8px;
  }
  .PlainCardGrabHandle.Header:hover {
    background-color: #f0f0f0;
  }

  .PlainCardGrabHandle.Header::before {
    content: "";
    border-top: 4px solid #ccc;
    height: 0.25rem;
    width: 100%;
    display: block;
    margin: auto;
  }

  .CardNumber {
    text-align: right;
  }

  /* The Single Mode version */
.FieldCard {
  --border-color: 0 0% 100%;
  max-width: 80ch;
  width: 100%;
  padding: 0;
  margin: 2rem auto;
  box-shadow: var(--shadow-elevation-medium);
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr 1rem;
  background-color: #fafafa;
  background-color: white;
  grid-gap: 0.5rem;
  transition: box-shadow 125ms ease-in-out;
}

.FieldCard:focus-within {
  box-shadow: var(--shadow-elevation-high);
  outline: 3px solid #eee;
}
/* 
.Card[data-editing] {
  box-shadow: var(--shadow-elevation-high);
  --border-color: var(--link-normal);
} */

.FieldCardSummary {
  grid-column: 2 / 2;
}

.FieldCardLabel {
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
  font-variant-caps: all-small-caps;
  display: block;
}

.FieldCardInput {
  text-align: left;
  hyphens: manual;
  padding: 0.25rem;
  border: 1px solid #f0f0f0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
}

.FieldCardBody {
  text-align: left;
  hyphens: manual;
  padding: 1rem 2rem 1rem;
  border: 3px none transparent;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
.FieldCardEditable {
  text-align: left;
  hyphens: manual;
  padding: 0;
  padding: 0.25rem;
  border: 1px solid #f0f0f0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  grid-column: 2 / 2;
  margin: 0;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
}

.FieldCardDate {
  padding: 0.75rem 0rem 0.75rem;
  font-size: 0.85rem;
  color: #555;
  font-variant-caps: all-small-caps;
}

.FieldCardEdit {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  display: flex;
}
[data-editing] .CardEdit {
  --shadow-color: 0 0% 31%;
  --shadow-elevation-high: 0.1px 0.3px 0.3px hsl(var(--shadow-color) / 0.4),
    0.7px 1.6px 1.8px -0.4px hsl(var(--shadow-color) / 0.39),
    1.3px 3px 3.4px -0.9px hsl(var(--shadow-color) / 0.37),
    2.3px 5.2px 6px -1.3px hsl(var(--shadow-color) / 0.35),
    3.8px 8.6px 9.9px -1.7px hsl(var(--shadow-color) / 0.34),
    6.2px 13.9px 16px -2.1px hsl(var(--shadow-color) / 0.32),
    9.6px 21.6px 24.8px -2.6px hsl(var(--shadow-color) / 0.3),
    14.3px 32.3px 37.1px -3px hsl(var(--shadow-color) / 0.28);
}

.FieldCardHeader {
  display: flex;
  justify-content: space-between;
  grid-column: 2 / 2;
  align-items: center;
  color: #555;
  font-variation-settings: "wght" 400, "opsz" 8;
}

.FieldCardFooter {
  display: flex;
  justify-content: space-between;
  grid-column: 2 / -1;
  align-items: center;
  color: #555;
  padding: 0 1rem;
}

.FieldCardButtons {
  margin: 0;
}

.FieldCardTextButton {
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  color: hsl(var(--link-normal));
  font-family: inherit;
  padding: 0.25rem 0.5rem 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-caps: all-small-caps;
  font-weight: 300;
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
}
.FieldCardTextButton:hover {
  color: hsl(var(--link-hover));
}
.FieldCardButton:hover {
  background-color: hsl(var(--link-hover));
  color: white;
}
.FieldCardButton {
  --border-color: 0 0% 94.1%;
  box-sizing: border-box;
  border: none;
  background-color: hsl(var(--border-color));
  font-family: inherit;
  padding: 0.45rem 2rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-elevation-high);
  transition: box-shadow 250ms ease-in-out;
  font-variant-caps: all-small-caps;
  font-weight: 300;
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
}

.FieldCardButton svg,
.FieldCardTextButton svg {
  margin-right: 1px;
}
.FieldCardButton.Primary {
  --link-color: var(--link-normal);
  background-color: hsl(var(--link-color));
  color: white;
  box-shadow: var(--shadow-elevation-high);
}
.FieldCardButton:hover {
  background-color: hsl(var(--link-hover));
  color: white;
}

.FieldCardButton:active {
  box-shadow: var(--shadow-elevation-medium);
}
.FieldCardSidebar {
  grid-column: 1 / 1;
  grid-row: 1 / 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #555;
  flex-direction: column;
  padding: 0.5rem 0;
  background-color: rgb(248 248 248);
}

.FieldCardGrabHandle {
  width: 0;
  border: none;
  border-left: 4px solid #e1e1e1;
  height: 100%;
  margin: 2.5rem 0;
}
.FieldCardGrabHandle:hover {
  cursor: grab;
}

.FieldCardHeader.Handle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.FieldCardGrabHandle.Header {
  width: 5rem;
  border: none;
  margin: 0 auto;
  height: 0.5rem;
  display: inline-flex;
  padding: calc(0.25rem + 4px) 0.5rem 0.25rem;
  border-radius: 8px;
}
.FieldCardGrabHandle.Header:hover {
  background-color: #f0f0f0;
}

.FieldCardGrabHandle.Header::before {
  content: "";
  border-top: 4px solid #ccc;
  height: 0.25rem;
  width: 100%;
  display: block;
  margin: auto;
}

.CardNumber {
  text-align: right;
}

/* The Single Mode version */
.ModeCard {
  --border-color: 0 0% 100%;
  max-width: 80ch;
  width: 100%;
  padding: 0;
  margin: 2rem auto;
  box-shadow: var(--shadow-elevation-medium);
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr 1rem;
  background-color: #fafafa;
  background-color: white;
  grid-gap: 0.5rem;
  transition: box-shadow 125ms ease-in-out;

  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
    0.4px 0.9px 1.1px -1.2px hsl(var(--shadow-color) / 0.11),
    1px 2.1px 2.6px -2.5px hsl(var(--shadow-color) / 0.11);
  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.12),
    0.9px 1.7px 2.2px -0.8px hsl(var(--shadow-color) / 0.12),
    2.1px 4.3px 5.4px -1.7px hsl(var(--shadow-color) / 0.12),
    5.3px 10.5px 13.2px -2.5px hsl(var(--shadow-color) / 0.12);
  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
    1.6px 3.2px 4px -0.4px hsl(var(--shadow-color) / 0.11),
    3px 5.9px 7.4px -0.7px hsl(var(--shadow-color) / 0.11),
    4.9px 9.8px 12.3px -1.1px hsl(var(--shadow-color) / 0.11),
    7.8px 15.7px 19.7px -1.4px hsl(var(--shadow-color) / 0.11),
    12.3px 24.5px 30.8px -1.8px hsl(var(--shadow-color) / 0.11),
    18.7px 37.3px 46.9px -2.1px hsl(var(--shadow-color) / 0.11),
    27.5px 55px 69.2px -2.5px hsl(var(--shadow-color) / 0.11);
}

.ModeCard:focus-within {
  box-shadow: var(--shadow-elevation-high);
  outline: 3px solid #eee;
}
/* 
.Card[data-editing] {
  box-shadow: var(--shadow-elevation-high);
  --border-color: var(--link-normal);
} */

.ModeCardSummary {
  grid-column: 2 / 2;
}

.ModeCardLabel {
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
  font-variant-caps: all-small-caps;
  display: block;
}

.ModeCardName {
  font-size: 1rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
  font-variant-caps: normal;
  display: block;
  grid-column: 2 / 2;
  margin: 0.25rem 0 1rem;
}
/* 
.ModeCard input {
  text-align: left;
  hyphens: manual;
  padding: 0;
  border: 1px solid #f0f0f0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
} */

.ModeCardBody {
  text-align: left;
  hyphens: manual;
  padding: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  grid-column: 2 / 2;
  margin-bottom: 1rem;
}
.ModeCardEditable {
  text-align: left;
  hyphens: manual;
  padding: 0;
  padding: 0.25rem;
  border: 1px solid #f0f0f0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  grid-column: 2 / 2;
  margin: 0;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  height: 7rem;
}

.ModeCardDate {
  padding: 0.75rem 0rem 0.75rem;
  font-size: 0.85rem;
  color: #555;
  font-variant-caps: all-small-caps;
}

.ModeCardEdit {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  display: flex;
}
[data-editing] .CardEdit {
  --shadow-color: 0 0% 31%;
  --shadow-elevation-high: 0.1px 0.3px 0.3px hsl(var(--shadow-color) / 0.4),
    0.7px 1.6px 1.8px -0.4px hsl(var(--shadow-color) / 0.39),
    1.3px 3px 3.4px -0.9px hsl(var(--shadow-color) / 0.37),
    2.3px 5.2px 6px -1.3px hsl(var(--shadow-color) / 0.35),
    3.8px 8.6px 9.9px -1.7px hsl(var(--shadow-color) / 0.34),
    6.2px 13.9px 16px -2.1px hsl(var(--shadow-color) / 0.32),
    9.6px 21.6px 24.8px -2.6px hsl(var(--shadow-color) / 0.3),
    14.3px 32.3px 37.1px -3px hsl(var(--shadow-color) / 0.28);
}

.ModeCardHeader {
  display: flex;
  justify-content: space-between;
  grid-column: 2 / 2;
  align-items: center;
  color: #555;
  font-variation-settings: "wght" 400, "opsz" 8;
}

.ModeCardFooter {
  display: flex;
  justify-content: space-between;
  grid-column: 2 / 2;
  align-items: center;
  color: #555;
  padding: 0;
}

.ModeCardButtons {
  margin: 0;
}

.ModeCardTextButton {
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  color: hsl(var(--link-normal));
  font-family: inherit;
  padding: 0.25rem 0.5rem 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-caps: all-small-caps;
  font-weight: 300;
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
}
.ModeCardTextButton:hover {
  color: hsl(var(--link-hover));
}
.ModeCardButton:hover {
  background-color: hsl(var(--link-hover));
  color: white;
}
.ModeCardButton {
  --border-color: 0 0% 94.1%;
  box-sizing: border-box;
  border: none;
  background-color: hsl(var(--border-color));
  font-family: inherit;
  padding: 0.45rem 2rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-elevation-high);
  transition: box-shadow 250ms ease-in-out;
  font-variant-caps: all-small-caps;
  font-weight: 300;
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
}

.ModeCardButton svg,
.ModeCardTextButton svg {
  margin-right: 1px;
}
.ModeCardButton.Primary {
  --link-color: var(--link-normal);
  background-color: hsl(var(--link-color));
  color: white;
  box-shadow: var(--shadow-elevation-high);
}
.ModeCardButton:hover {
  background-color: hsl(var(--link-hover));
  color: white;
}

.ModeCardButton:active {
  box-shadow: var(--shadow-elevation-medium);
}
.ModeCardSidebar {
  grid-column: 1 / 1;
  grid-row: 1 / 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #555;
  flex-direction: column;
  padding: 0.5rem 0;
  background-color: rgb(248 248 248);
}

.ModeCardGrabHandle {
  width: 0;
  border: none;
  border-left: 4px solid #e1e1e1;
  height: 100%;
  margin: 2.5rem 0;
}
.ModeCardGrabHandle:hover {
  cursor: grab;
}

.ModeCardHeader.Handle {
  display: grid;
  grid-template-columns: 1fr 5.5rem;
}

.ModeCardGrabHandle.Header {
  width: 5rem;
  border: none;
  margin: 0 auto;
  height: 0.5rem;
  display: inline-flex;
  padding: calc(0.25rem + 4px) 0.5rem 0.25rem;
  border-radius: 8px;
}
.ModeCardGrabHandle.Header:hover {
  background-color: #f0f0f0;
}

.ModeCardGrabHandle.Header::before {
  content: "";
  border-top: 4px solid #ccc;
  height: 0.25rem;
  width: 100%;
  display: block;
  margin: auto;
}

.CardNumber {
  text-align: right;
}

.ModeCardLinks {
  grid-column: 2 / 2;
  padding: 0.25rem 0.25rem;
}

.ModeCardAttachments {
  grid-column: 2 / 2;
  padding: 0;
}

.ModeCardLink {
  box-shadow: var(--shadow-elevation-low);
  padding: 0.5rem;
  padding-left: 4rem;
  background-color: #f9f9f9;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  margin: 0.5rem 0;
}
.ModeCardLink.Internal {
  background-color: white;
  border-radius: 0px;
}

.ModeCardLink.Attachment {
  background-color: white;
  border-radius: 0px;
  margin: 0.5rem -0.5rem;
  margin-right: -1.5rem;
}

/** --------------------------------------------------------------------

  ARIA Switch Toggle Button

--------------------------------------------------------------------- */
.switch-toggle {
  background: none;
  border: none;
  cursor: default;
  display: block;
  font-size: inherit;
  line-height: 1;
  margin: 1em 0 0;
  padding: 0.5em 0;
  position: relative;
  text-align: left;
  transition: box-shadow 0.2s ease-in-out;
  width: 100%;
}

.switch-toggle:focus {
  outline: none;
}

/* negate 'flash' of text color when pressing a button in some browsers */
.switch-toggle:active {
  color: inherit;
}

/* using the before/after pseudo elements of the span to create the "switch" */
.switch-toggle span:before,
.switch-toggle span:after {
  border: 1px solid #565656;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* styling specific to the knob of the switch */
.switch-toggle span:after {
  background: #fff;
  border-radius: 100%;
  height: 1.5em;
  right: 1.5em;
  transition: right 0.1825s ease-in-out;
  width: 1.5em;
}

/* styling specific to the knob "container" */
.switch-toggle span:before {
  background: #eee;
  border-radius: 1.75em;
  height: 1.75em;
  right: 0.25em;
  transition: background 0.2s ease-in-out;
  width: 2.75em;
}

.switch-toggle span {
  pointer-events: none;
}

.switch-toggle:not([data-keep-disabled]):hover span:before,
.switch-toggle:not([data-keep-disabled]):focus span:before {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* change the position of the knob to indicate it has been checked*/
.switch-toggle[aria-checked="true"] span:after {
  right: 0.25em;
}

/* update the color of the "container" to further visually indicate state */
.switch-toggle[aria-checked="true"] span:before {
  background: #2196f3;
}

.switch-toggle[disabled] span,
.switch-toggle[aria-disabled="true"] span {
  opacity: 0.65;
}

/**
 * Toggle switch modifications for displaying On/Off labels
 */
.switch-toggle .show-labels:before {
  content: "Off";
  color: rgba(10, 10, 10, 1);
  line-height: 1.6;
  text-indent: 1.625em;
  width: 3.5em;
}

.switch-toggle[aria-checked="false"] .show-labels:after {
  right: 2.2em;
}

.switch-toggle[aria-checked="true"] .show-labels:before {
  color: rgba(255, 255, 255, 1);
  content: "On";
  text-indent: 0.25em;
  text-shadow: 0 0 1px #000;
}

@media screen and (-ms-high-contrast: active) {
  .switch-toggle span:after {
    background-color: windowText;
  }
}

/* containing label */
.check-switch {
  display: block;
  overflow: hidden;
  padding: 0.5em 0;
  position: relative;
}

/* using the before/after pseudo elements of the span to create the "switch" */
.check-switch span:before,
.check-switch span:after {
  border: 1px solid #565656;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* styling specific to the knob of the switch */
.check-switch span:after {
  background: #fff;
  border-radius: 100%;
  height: 1.5em;
  right: 1.5em;
  transition: right 0.1825s ease-in-out;
  width: 1.5em;
}

/* styling specific to the knob "container" */
.check-switch span:before {
  background: #eee;
  border-radius: 1.75em;
  height: 1.75em;
  right: 0.25em;
  transition: background 0.2s ease-in-out;
  width: 2.75em;
}

/* hide the actual checkbox from view, but not from keyboards or ATs.
   Instead of standard visually hidden styling, instead set opacity to
   to 0 and set to full height/width of container element so that VO focus
   ring outlines the component, instead of a tiny box within the component.
   This will also allow for the checkbox input to be discovered if someone
   were to search by touch.
*/
.check-switch input {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.check-switch input:disabled + span,
.check-switch input[aria-disabled="true"] + span {
  opacity: 0.65;
}

.check-switch:hover input:not([data-keep-disabled]) + span:before,
.check-switch input:not([data-keep-disabled]):focus + span:before {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* change the position of the knob to indicate it has been checked*/
.check-switch input:checked + span:after {
  right: 0.25em;
}

/* update the color of the "container" to further visually indicate state */
.check-switch input:checked + span:before {
  background: #2196f3;
}

/* 'color in' the switch knob in high contrast mode by giving it
   a large border */
@media screen and (-ms-high-contrast: active) {
  .check-switch span:after {
    background-color: windowText;
  }
}

</style>

<p><strong>Warning: this post contains mockups done in HTML and CSS which aren’t likely to work well in feed readers.</strong></p>
<p>The list in the previous post has a lot of <a href="https://www.colophon.cards/notes/10-questions/">open questions</a> related to cards. Now, there are a lot of approaches to answering these sorts of questions—research, surveys, testing—but in this specific context I think it would be a mistake to dive right into one of those.</p>
<ul>
<li>I’ve already done a lot of research on this, it’s been a big part of my life for the past five years</li>
<li>I’ve deliberately chosen a target audience of which I am somewhat representative (knowledge worker in tech or publishing)</li>
<li>I may have the questions I need answered but I don’t have the questions I need to ask</li>
</ul>
<p>It’s the last one that’s tricky. If you ask questions that people don’t know the answer to or is outside of their expertise, most of the time you’re just going to get whatever they think you want to hear. The best thing to do is to observe their behaviour as they are doing the work you are aiming to help with. See what problems crop up. Things get difficult if you can’t do that but you can somewhat make do if, say, you are a part of the audience you are aiming to serve. But you still need to figure out if the audience understands the conceptual model of the UIs you are planning to use, if it actually does the job it’s supposed to, if the job it’s supposed to do actually solves the problem they have.</p>
<p>To do that I need to be clearer about what I’m asking. I need to clarify, in my mind, what <em>I</em> mean when I say ‘card’.</p>
<p>This is where sketches come in. Some use special apps for doing these kind of sketch mockups. Some just sketch it, literally. I like to sketch in HTML and CSS as that’s a lot quicker and simpler for me than most of these other tools.</p>
<p>So, the goal is to sketch out a few approaches and iteratively inch my way towards a cohesive card concept that will then become the basis of future testing, research, and work.</p>
<h2>Plain text with modes</h2>
<p>First up is plain text, first line of the card body serves as a summary, the rest is the card detail. Separate modes <em>on card</em> for editing and viewing.</p>
<div class="Card">

  
<p class="CardBody">This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will plaintext do?
 
Is markdown a useful compromise?
</p></div>
<div class="Card" data-editing>

  
<p class="CardBody">This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will plaintext do?
 
Is markdown a useful compromise?</p>
</div>
<p>Ugh.</p>
<p>How about we just assume I get autosaving working and skip the whole “Cancel” and “Save” thing?</p>
<div class="Card" data-editing>

<p class="CardBody">This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will plaintext do?
 
Is markdown a useful compromise?</p>
</div>
<p>Then the issue is <em>how do you exit the edit mode?</em> Automatically exiting edit mode whenever the card loses focus might be one way, but that would get frustrating quickly.</p>
<h2>Plain text, always edit</h2>
<p>What about just having the card always in edit mode? That’s how most native apps work. You don’t have to click ‘edit’ anywhere in Bear to edit a note.</p>
<p>So, plain text, first line of the card body serves as a summary, the rest is the card detail. Always editing but with autosave of some sort.</p>
<p>Always being in the edit mode has issues when it comes to interacting with links and references but, provided that it’s the right overall direction, I think we might be able to get around that using link previews much like you see in Facebook’s posting widget or by using tooltips like Google Docs. It would be <em>hassle</em> and make accessibility a bit more complicated, but overall doable.</p>
<p><em>If</em> the single-mode direction is worth it, overall.</p>
<p>So…</p>
<p class="PlainCard" data-editing>
  


</p>
<p>This feels a bit cluttered but most of the buttons are just guesses at the sort of functionality a card might have. But, one notion that I think might be a useful guide here is <a href="https://www.taskpaper.com/">Taskpaper’s idea</a> that the note’s text is the API so links are just links in the text. Possibly extracted and presented with preview widgets as you see on Twitter or Facebook. But either way it doesn’t need a button. And the star thing was just a whim. Let’s drop both and clean things up a little bit.</p>
<p>I can tweak the implementation of the textarea a bit as well. Use a simple <code>contenteditable</code> to make it autogrowing.</p>
<div class="PlainCard" data-editing>
  

<p class="PlainCardEditable" contenteditable>This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will plaintext do?
 
Is markdown a useful compromise?</p>
</div>
<p>How to handle deletes, archiving, or trashing of a card is its own set of problems. But I’m thinking that it might actually belong in the margin or outside the card in some way.</p>
<p>Something like this (if you’ll excuse the poor snap):</p>
<img src="https://www.colophon.cards/assets/trash-sketch.jpg" alt="Quick sketch of trash button in the sidebar next to a card. Shows that the idea is that the card would animate out into the margin when the button is pressed">
<p>So:</p>
<div class="PlainCard" data-editing>
  

<p class="PlainCardEditable" contenteditable>This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will plaintext do?
 
Is markdown a useful compromise?</p>
</div>
<p>The idea with the grab handle is that you should be able to rearrange the order of the cards in a thread/stack and even drag it out into the sidebar and position as you wish. You need it as the card body itself is always editable so you can’t make the <em>whole</em> card draggable. This feels like a core affordance for the app so, until testing reveals otherwise, I’m going to keep it in the sketches.</p>
<p>But it doesn’t have to be where it is here. It could be placed in the empty space in the header.</p>
<div class="PlainCard" data-editing>

<p class="PlainCardEditable" contenteditable>This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will plaintext do?
 
Is markdown a useful compromise?</p>
</div>
<p>This could work but I honestly don’t think it’s objectively superior to the margin grab handle.</p>
<p>Either way, the grab handle isn’t even close to being an intuitive affordance and will need a complete rethink and design but this will do while sketching to get a feel for the card problem and figure out what to test.</p>

<h2>But, wait, this doesn’t work</h2>
<p>All of the above is useful for hashing out certain themes and directions</p>
<p>Now I know that I need to:</p>
<ul>
<li>Avoid the Edit → Save cycle. Maybe not avoid the edit mode, per se.</li>
<li>Avoid <code>save</code> gestures and loops in general. Autosave needs to work.</li>
<li>Use the card’s text as an API surface for links, much like social media does. (Leverage familiarity.)</li>
<li>Consider trash, archiving, and delete <em>in context</em>, which means we need to tackle it in the thread/stack view.</li>
<li>The grab handle needs more work, probably in the thread context, like deletions.</li>
</ul>
<p>The problem with the above sketches is that they wouldn’t work with the app’s concept as I’ve planned it.</p>
<p>Namely, the concept is that it’s a ‘find first’ UI. Each card is supposed to have a unique name or summary. With a single body card, the first 500 or so characters* would serve as the card’s summary.</p>
<aside>
<p><em>* Still a guess but, based on the DB and indexes available, the responsiveness this kind of UI needs, and the fact that with emojis even bog standard English needs to support multi-byte characters, ~500 characters is the ballpark maximum. I could go over but that’d either limit my DB choices when it comes to implementation or throw internationalisation out of the window or limit the find feature to just the first 500 or so characters of the summary.</em></p>
</aside>
<p>The problem with single-body cards is that the app needs to validate the card’s summary: it has to be unique. There’s also the question as to whether you’d allow <code>null</code> or anonymous cards. These would have an internal DB identifier but no external name/summary. Basically, these would be cards that you could only find through a full-text search at some point down the line or by scrolling to its position in the thread. Anonymous cards <em>could</em> be useful. But it could potentially make a clumsy ‘select all’ disastrous. I semi-regularly delete an entire file’s contents by accident this way. Not much of an issue when you have undos and version control but a major issue if doing so made the file <em>unfindable</em>. It’s much harder to revert changes to a file <em>if you can’t find it</em>.</p>
<p>It’s likely that we’re going to need a separate field for the name or summary and it’s certain that this field is going to need stricter validation than the details or body field.</p>
<p>I’m going to need to sketch out a slightly more realistic card.</p>

<p>Even without links, attachments, or cross-references, this feels more clunky. You could finesse the design, streamline it here and there, but if we’re going to have the card always editable then this would mean a fairly high inherent ‘clunkiness’ baseline that you can’t avoid.</p>
<p>I think it’s clear that we’ll need an edit mode. Can the edit mode be made nicer if we assume I can get autosaving to work nicely?</p>
<h2>Revisiting the “Edit Mode” and makig it nicer</h2>
<p>Having separate “read/browse” and “edit” modes gives me a little bit more freedom when designing each version. I still think they need to be very similar, for usability’s sake. This one’s using <a href="https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/">Scott O’Hara’s switch component</a> though since this is just an HTML mockup it doesn’t do anything.</p>

<div class="ModeCard" data-editing>

  
<h3 class="ModeCardName">You'll use this to find this card</h3>
<div class="ModeCardBody"><p>This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will </p><a href="#">plaintext</a><p> do?
 
Is markdown a useful compromise?</p></div>
</div>
<p>One issue that this card sketch doesn’t highlight is that the card-and-thread model is supposed to offer similar affordances as many social media services, like Twitter or Facebook. Those services have both highly optimised posting flows (they want to make it really, really easy for you to post quickly) and are also familiar to many. But the creation of a full card with title <em>feels</em> a bit off for a default in this context. You pretty much need to be able to create the simple kind of plain text cards that I sketched up above but without the anonymity issue that would prevent cards from being found or referred to.</p>
<p>This is why I prefer the summary label for the card’s ‘name’, at least for the moment. It implies a potentially longer text than ‘name’. (<a href="https://twitter.com/John_Pettigrew/status/1466008916307894277">Thanks for the suggestion, John!</a>) So, I could support a slightly different style for cards that only have a summary and no text in the body.</p>
<div class="ModeCard" data-editing>

  
<p class="ModeCardBody">This is a card summary. As a summary it would work more like a tweet would and wouldn't support Markdown or rich text.</p>
</div>
<p>With edit mode on:</p>

<p>Edit mode would need to validate the summary on the fly, make sure it isn’t empty and that it is unique. And it could lock the card in edit mode if you enter an invalid summary.</p>
<p>This is aesthetically a bit rough but it feels right as an initial conceptual model. But I need to see it with more ‘stuff’ to be sure. Some links and attachments.</p>
<div class="ModeCard" data-editing>

  
<h3 class="ModeCardName">You'll use this to find this card</h3>
<div class="ModeCardBody"><p>This is a card body. Or card text. What does this look like? What does this feel like? How does this work? Does it need rich text? Will </p><a href="#">plaintext</a><p> do?
 
Is markdown a useful compromise?</p></div>
<div class="ModeCardLinks">
<div class="ModeCardLink">
  
  <p class="LinkDescription">With an example description of that link</p>
</div>
<div class="ModeCardLink Internal">
  
  <p class="LinkDescription">With an example description of that card</p>
</div>
<div class="ModeCardLink">
  
  <p class="LinkDescription">With an example description of that file</p>
</div>
</div>
</div>
<p>Even though I haven’t bothered to add the images to the link previews this feels like the right track. This doesn’t work as the final design, of course. But it would work as an initial sketch that can inform initial testing. Specifically, I need to do some testing to see if the conceptual model of the app is something that prospective users can figure out, what terms and labels make sense for them, that sort of thing. There’s nothing worse than testing a sketch or an idea for an UI and then figuring out afterwards that the basic design was never going to work for other reasons.</p>
<h2>This is not the final design</h2>
<p>The final design would have to be a lot less rough around the edges but an actual design for implementation needs to answer quite a few questions that this sketch doesn’t:</p>
<ul>
<li>Does it reuse the apps other, pre-existing affordances?</li>
<li>How does drag and drop work, of the card and on the card? How do you indicate draggability? Does a grab handle work?</li>
<li>Does it match the overall app’s design and UI?</li>
<li>How much does it lean on OS conventions? Web conventions?</li>
<li>Does it use rich text, markdown, syntax highlighting?</li>
<li>How do we animate behaviours and transitions?</li>
<li>How does it work with keyboard controls?</li>
<li>What does it sound like to a screen reader?</li>
<li>How do you distinguish links, cross-references, and attachments? How are they alike? How do they behave differently?</li>
<li>How are the summary-only cards different? Does having a different style for these cards work? Will it be confusing or break the user’s mental model of what’s happening?</li>
<li>Does this all make sense and fit together for the intended audience?</li>
<li>How should the card’s summary reflect the current ‘find’ text?</li>
</ul>
<p>And so many more. But this is a first step.</p>