Initial commit

Striven

yesterday c538c151c7462ad0395ff2c15c5e11e89e362aa8

 quartz/styles/callouts.scss

@@ -7,11 +7,16 @@
  border-radius: 5px;
  padding: 0 1rem;
  overflow-y: hidden;
  transition: max-height 0.3s ease;
  box-sizing: border-box;

  & > *:nth-child(2) {
    margin-top: 0;
  & > .callout-content {
    display: grid;
    transition: grid-template-rows 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
    overflow: hidden;

    & > :first-child {
      margin-top: 0;
    }
  }

  --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
@@ -113,14 +118,34 @@
    --callout-icon: var(--callout-icon-quote);
  }

  &.is-collapsed > .callout-title > .fold-callout-icon {
    transform: rotateZ(-90deg);
  &.is-collapsed {
    & > .callout-title > .fold-callout-icon {
      transform: rotateZ(-90deg);
    }

    .callout-content {
      & > * {
        transition:
          height 0.1s cubic-bezier(0.02, 0.01, 0.47, 1),
          margin 0.1s cubic-bezier(0.02, 0.01, 0.47, 1),
          padding 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
        overflow-y: clip;
        height: 0;
        margin-bottom: 0;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 0;
      }
      & > :first-child {
        margin-top: -1rem;
      }
    }
  }
}

.callout-title {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 5px;
  padding: 1rem 0;
  color: var(--color);
@@ -131,8 +156,6 @@
    transition: transform 0.15s ease;
    opacity: 0.8;
    cursor: pointer;
    width: var(--icon-size);
    height: var(--icon-size);
    --callout-icon: var(--callout-icon-fold);
  }

@@ -145,6 +168,7 @@
  & .fold-callout-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size);

    // icon support
    background-size: var(--icon-size) var(--icon-size);
@@ -154,9 +178,10 @@
    mask-size: var(--icon-size) var(--icon-size);
    mask-position: center;
    mask-repeat: no-repeat;
    padding: 0.2rem 0;
  }

  .callout-title-inner {
    font-weight: $boldWeight;
    font-weight: $semiBoldWeight;
  }
}