Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                    <div id="muteswan">
      <div class="muteswan">
        <header class="header">
          <h1 class="header__text">Mute Swan</h1>
          <a class="logo" href="/"
            ><span class="vh">reload page</span
            ><svg
              width="64"
              height="64"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              <defs>
                <linearGradient
                  x1="69.934%"
                  y1="27.685%"
                  x2="33.613%"
                  y2="88.981%"
                  id="a"
                >
                  <stop stop-color="#FF8C37" offset="0%"></stop>
                  <stop stop-color="#10BAE0" offset="100%"></stop>
                </linearGradient>
              </defs>
              <g fill="none" fill-rule="evenodd">
                <path fill="#202127" d="M0 0h64v64H0z"></path>
                <path
                  stroke="url(#a)"
                  stroke-width="1.75"
                  stroke-linejoin="round"
                  d="M48.72 15.273c-.621-1.07-2.4-3.24-4.918-4.351-1.648-.727-3.602-1.01-5.749-.287-2.797.942-4.828 3.292-5.621 6.3-.727 2.759-.408 6.076 1.353 9.302.82 1.501 1.637 2.899 2.601 4.475l3.288 4.881c-1.703-1.034-3.769-2-5.918-2.308a14.821 14.821 0 00-1.445-.077c-2.43 0-3.86.651-5.238 1.289-1.065.493-2.091.983-3.695 1.006-2.8.039-8.551-3.344-11.734-5.17-.92-.529-1.639-.94-2.037-1.133-.336-.163-.937-.411-1.71-.724.3 1.1.513 1.761.513 1.761s3.491 10.849 8.582 15.62c3.325 3.119 8.006 5.57 12.027 6.84 4.014 1.27 9.903 1.618 16.968.02 1.958-.443 3.437-1.174 4.522-1.974 1.585-1.17 2.345-2.505 2.568-3.415.423-1.728-.966-4.795-1.621-5.912L43.4 27.65c-.641-1.04-2.282-3.686-3.012-5.792-.198-.57-.333-1.093-.27-1.813.748-.523 1.507-.514 2.19-.27 1.347.478 2.443 1.752 2.882 2.315.57.726 2.23 2.754 3.654 3.958.516.435 1.01.766 1.425.936.572.235 1.145.782 2.13-1.576-.056-.341-.221-.833-.606-1.548-.18-.335-.38-.693-.58-1.052-.557-.998-1.146-2.006-1.254-2.508-.033-.154-.059-.393-.093-.688-.134-1.157-.373-3.007-1.146-4.338z"
                ></path>
              </g></svg></a
          ><button type="button" class="icon icon--undo" disabled="">
            <span class="vh">Undo</span
            ><svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L3.71 8.71C3.08 8.08 2 8.52 2 9.41V15c0 .55.45 1 1 1h5.59c.89 0 1.34-1.08.71-1.71l-1.91-1.91c1.39-1.16 3.16-1.88 5.12-1.88 3.16 0 5.89 1.84 7.19 4.5.27.56.91.84 1.5.64.71-.23 1.07-1.04.75-1.72C20.23 10.42 16.65 8 12.5 8z"
              ></path>
            </svg></button
          ><button type="button" class="icon icon--redo" disabled="">
            <span class="vh">Redo</span
            ><svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.16 0-7.74 2.42-9.44 5.93-.32.67.04 1.47.75 1.71.59.2 1.23-.08 1.5-.64 1.3-2.66 4.03-4.5 7.19-4.5 1.95 0 3.73.72 5.12 1.88l-1.91 1.91c-.63.63-.19 1.71.7 1.71H21c.55 0 1-.45 1-1V9.41c0-.89-1.08-1.34-1.71-.71l-1.89 1.9z"
              ></path>
            </svg>
          </button>
        </header>
        <main class="main">
          <div class="timeline timeline--perma">
            <section id="permanent" data-unix="548553600000" class="group">
              <h2 class="date" tabindex="0">
                <time class="date__time" datetime="1987-05-21T00:00:00.000Z"
                  ><span class="date__day"
                    ><span class="vh">Permanent</span></span
                  ><span class="date__num">∞</span></time
                >
              </h2>
              <div class="list">
                <article id="02b8e9ae" class="item">
                  <button class="icon icon--handle" type="button">
                    <span class="vh">Drag</span
                    ><svg
                      width="8"
                      height="13"
                      viewBox="0 0 8 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M3.2 11.375C3.2 12.269 2.48 13 1.6 13 .72 13 0 12.269 0 11.375S.72 9.75 1.6 9.75c.88 0 1.6.731 1.6 1.625zm-1.6-6.5C.72 4.875 0 5.606 0 6.5s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zM1.6 0C.72 0 0 .731 0 1.625S.72 3.25 1.6 3.25c.88 0 1.6-.731 1.6-1.625S2.48 0 1.6 0zm4.8 3.25c.88 0 1.6-.731 1.6-1.625S7.28 0 6.4 0c-.88 0-1.6.731-1.6 1.625S5.52 3.25 6.4 3.25zm0 1.625c-.88 0-1.6.731-1.6 1.625s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zm0 4.875c-.88 0-1.6.731-1.6 1.625S5.52 13 6.4 13c.88 0 1.6-.731 1.6-1.625S7.28 9.75 6.4 9.75z"
                      ></path>
                    </svg>
                  </button>
                  <div class="memo">
                    <label class="vh" for="02b8e9ae-text">Memo</label
                    ><textarea
                      id="02b8e9ae-text"
                      class="memo__text"
                      autocomplete="off"
                      rows="1"
                      style="--height: 66;"
                    >Memos in this list are permanent</textarea>
                  </div>
                  <button
                    aria-pressed="false"
                    class="icon icon--done"
                    type="button"
                  >
                    <span class="vh">Done</span
                    ><svg
                      width="18"
                      height="13"
                      viewBox="0 0 18 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6 10.17L2.53 6.7a.996.996 0 10-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L17.29 1.71A.996.996 0 1015.88.3L6 10.17z"
                      ></path>
                    </svg>
                  </button>
                </article>
              </div>
            </section>
            <svg class="separator">
              <pattern
                id="separator-pattern"
                width="30"
                height="10"
                patternUnits="userSpaceOnUse"
              >
                <path
                  d="M0 1c3 0 4.5 3 7.5 3S12 1 15 1s4.5 3 7.5 3S27 1 30 1"
                  stroke="none"
                  stroke-width="1.5"
                  fill="none"
                  fill-rule="evenodd"
                ></path>
              </pattern>
              <rect
                fill="url(#separator-pattern)"
                width="100%"
                height="100%"
              ></rect>
            </svg>
          </div>
          <div class="timeline timeline--future">
            <section id="416a7c4c" data-unix="1593907200000" class="group">
              <h2 class="date" tabindex="0">
                <time class="date__time" datetime="2020-07-05T00:00:00.000Z"
                  ><span class="date__day">Sunday</span
                  ><span class="date__num">05</span></time
                >
              </h2>
            </section>
            <section id="9a8bbcec" data-unix="1593820800000" class="group">
              <h2 class="date" tabindex="0">
                <time class="date__time" datetime="2020-07-04T00:00:00.000Z"
                  ><span class="date__day">Saturday</span
                  ><span class="date__num">04</span></time
                >
              </h2>
            </section>
            <section
              id="531c69f0"
              data-unix="1593734400000"
              class="group group--today"
            >
              <h2 class="date" tabindex="0">
                <time class="date__time" datetime="2020-07-03T00:00:00.000Z"
                  ><span class="date__day">Friday</span
                  ><span class="date__num">03</span></time
                >
              </h2>
              <div class="list">
                <article id="076a4bfb" class="item">
                  <button class="icon icon--handle" type="button">
                    <span class="vh">Drag</span
                    ><svg
                      width="8"
                      height="13"
                      viewBox="0 0 8 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M3.2 11.375C3.2 12.269 2.48 13 1.6 13 .72 13 0 12.269 0 11.375S.72 9.75 1.6 9.75c.88 0 1.6.731 1.6 1.625zm-1.6-6.5C.72 4.875 0 5.606 0 6.5s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zM1.6 0C.72 0 0 .731 0 1.625S.72 3.25 1.6 3.25c.88 0 1.6-.731 1.6-1.625S2.48 0 1.6 0zm4.8 3.25c.88 0 1.6-.731 1.6-1.625S7.28 0 6.4 0c-.88 0-1.6.731-1.6 1.625S5.52 3.25 6.4 3.25zm0 1.625c-.88 0-1.6.731-1.6 1.625s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zm0 4.875c-.88 0-1.6.731-1.6 1.625S5.52 13 6.4 13c.88 0 1.6-.731 1.6-1.625S7.28 9.75 6.4 9.75z"
                      ></path>
                    </svg>
                  </button>
                  <div class="memo">
                    <label class="vh" for="076a4bfb-text">Memo</label
                    ><div
                      id="076a4bfb-text"
                      class="memo__text"
                      autocomplete="off"
                      rows="1"
                      style="--height: 44;"
                               >Visit <a target="_blank" href="https://muteswan.app">muteswan.app</a> for a live preview!</div>
                  </div>
                  <button
                    aria-pressed="false"
                    class="icon icon--done"
                    type="button"
                  >
                    <span class="vh">Done</span
                    ><svg
                      width="18"
                      height="13"
                      viewBox="0 0 18 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6 10.17L2.53 6.7a.996.996 0 10-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L17.29 1.71A.996.996 0 1015.88.3L6 10.17z"
                      ></path>
                    </svg>
                  </button>
                </article>
                <article id="0768f21f" class="item item--done">
                  <button class="icon icon--handle" type="button">
                    <span class="vh">Drag</span
                    ><svg
                      width="8"
                      height="13"
                      viewBox="0 0 8 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M3.2 11.375C3.2 12.269 2.48 13 1.6 13 .72 13 0 12.269 0 11.375S.72 9.75 1.6 9.75c.88 0 1.6.731 1.6 1.625zm-1.6-6.5C.72 4.875 0 5.606 0 6.5s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zM1.6 0C.72 0 0 .731 0 1.625S.72 3.25 1.6 3.25c.88 0 1.6-.731 1.6-1.625S2.48 0 1.6 0zm4.8 3.25c.88 0 1.6-.731 1.6-1.625S7.28 0 6.4 0c-.88 0-1.6.731-1.6 1.625S5.52 3.25 6.4 3.25zm0 1.625c-.88 0-1.6.731-1.6 1.625s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zm0 4.875c-.88 0-1.6.731-1.6 1.625S5.52 13 6.4 13c.88 0 1.6-.731 1.6-1.625S7.28 9.75 6.4 9.75z"
                      ></path>
                    </svg>
                  </button>
                  <div class="memo">
                    <label class="vh" for="0768f21f-text">Memo</label
                    ><textarea
                      disabled=""
                      id="0768f21f-text"
                      class="memo__text"
                      autocomplete="off"
                      rows="1"
                      style="--height: 44;"
                    >Old memos are kept for a week</textarea>
                  </div>
                  <button
                    aria-pressed="true"
                    class="icon icon--done"
                    type="button"
                  >
                    <span class="vh">Done</span
                    ><svg
                      width="18"
                      height="13"
                      viewBox="0 0 18 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6 10.17L2.53 6.7a.996.996 0 10-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L17.29 1.71A.996.996 0 1015.88.3L6 10.17z"
                      ></path>
                    </svg>
                  </button>
                </article>
              </div>
            </section>
            <svg class="separator">
              <pattern
                id="separator-pattern"
                width="30"
                height="10"
                patternUnits="userSpaceOnUse"
              >
                <path
                  d="M0 1c3 0 4.5 3 7.5 3S12 1 15 1s4.5 3 7.5 3S27 1 30 1"
                  stroke="none"
                  stroke-width="1.5"
                  fill="none"
                  fill-rule="evenodd"
                ></path>
              </pattern>
              <rect
                fill="url(#separator-pattern)"
                width="100%"
                height="100%"
              ></rect>
            </svg>
          </div>
          <div class="timeline timeline--history">
            <section id="19029b54" data-unix="1593648000000" class="group">
              <h2 class="date" tabindex="0">
                <time class="date__time" datetime="2020-07-02T00:00:00.000Z"
                  ><span class="date__day">Thursday</span
                  ><span class="date__num">02</span></time
                >
              </h2>
              <div class="list">
                <article id="76584e52" class="item item--done">
                  <button class="icon icon--handle" type="button">
                    <span class="vh">Drag</span
                    ><svg
                      width="8"
                      height="13"
                      viewBox="0 0 8 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M3.2 11.375C3.2 12.269 2.48 13 1.6 13 .72 13 0 12.269 0 11.375S.72 9.75 1.6 9.75c.88 0 1.6.731 1.6 1.625zm-1.6-6.5C.72 4.875 0 5.606 0 6.5s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zM1.6 0C.72 0 0 .731 0 1.625S.72 3.25 1.6 3.25c.88 0 1.6-.731 1.6-1.625S2.48 0 1.6 0zm4.8 3.25c.88 0 1.6-.731 1.6-1.625S7.28 0 6.4 0c-.88 0-1.6.731-1.6 1.625S5.52 3.25 6.4 3.25zm0 1.625c-.88 0-1.6.731-1.6 1.625s.72 1.625 1.6 1.625c.88 0 1.6-.731 1.6-1.625s-.72-1.625-1.6-1.625zm0 4.875c-.88 0-1.6.731-1.6 1.625S5.52 13 6.4 13c.88 0 1.6-.731 1.6-1.625S7.28 9.75 6.4 9.75z"
                      ></path>
                    </svg>
                  </button>
                  <div class="memo">
                    <label class="vh" for="76584e52-text">Memo</label
                    ><textarea
                      disabled=""
                      id="76584e52-text"
                      class="memo__text"
                      autocomplete="off"
                      rows="1"
                      style="--height: 66;"
                    >Install Mute Swan</textarea>
                  </div>
                  <button
                    aria-pressed="true"
                    class="icon icon--done"
                    type="button"
                  >
                    <span class="vh">Done</span
                    ><svg
                      width="18"
                      height="13"
                      viewBox="0 0 18 13"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6 10.17L2.53 6.7a.996.996 0 10-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L17.29 1.71A.996.996 0 1015.88.3L6 10.17z"
                      ></path>
                    </svg>
                  </button>
                </article>
              </div>
            </section>
            <svg class="separator">
              <pattern
                id="separator-pattern"
                width="30"
                height="10"
                patternUnits="userSpaceOnUse"
              >
                <path
                  d="M0 1c3 0 4.5 3 7.5 3S12 1 15 1s4.5 3 7.5 3S27 1 30 1"
                  stroke="none"
                  stroke-width="1.5"
                  fill="none"
                  fill-rule="evenodd"
                ></path>
              </pattern>
              <rect
                fill="url(#separator-pattern)"
                width="100%"
                height="100%"
              ></rect>
            </svg>
          </div>
        </main>
        <footer class="footer">
          <small
            >v0.7.4 | <span class="vh">Copyright</span> © 2020
            <a
              href="https://dbushell.com/"
              target="_blank"
              rel="noopener noreferrer"
              >David Bushell</a
            ></small
          ><a
            class="badge"
            target="_blank"
            rel="noopener noreferrer"
            href="https://play.google.com/store/apps/details?id=app.muteswan.android"
            ><img
              srcset="
                https://assets.codepen.io/85421/google-play-badge%401x.png,
                https://assets.codepen.io/85421/google-play-badge%402x.png 2x
              "
              src="https://assets.codepen.io/85421/google-play-badge%401x.png"
              alt="Get Mute Swan on Google Play"
              loading="lazy"
              width="282"
              height="84"
          /></a>
        </footer>
      </div>
</div>
              
            
!

CSS

              
                /* noto-sans-400 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans'), local('NotoSans'),
    url('https://assets.codepen.io/85421/noto-sans-v9-latin-400.woff2') format('woff2');
}

/* comfortaa-700 - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Comfortaa'),
    url('https://assets.codepen.io/85421/comfortaa-v28-latin-700.woff2') format('woff2');
}

// Mixins
@function rem($px, $base: 16) {
  @return ($px / $base) + rem;
}

@function rem-scale($px, $base: 16) {
  $rem: rem($px, $base);
  @return calc(#{$rem} + var(--text-scale));
}

$bp-small: 420;
$bp-medium: 620;
$bp-large: 720;

:root {
  --dracula-bg-dark: hsl(231, 10%, 14%);
  --dracula-bg-light: hsla(231, 20%, 20%, 70%);
  --dracula-selection: hsl(232, 14%, 31%);
  --dracula-foreground: hsl(60, 30%, 96%);
  --dracula-comment: hsl(225, 17%, 51%);
  --dracula-focus: hsla(225, 17%, 51%, 10%);
  --dracula-cyan: hsl(191, 97%, 77%);
  --dracula-green: hsl(135, 94%, 65%);
  --dracula-orange: hsl(26, 100%, 61%);
  --dracula-purple: hsl(265, 89%, 78%);
  --dracular-red: hsl(0, 100%, 67%);
  --dracula-blue: hsl(191, 87%, 47%);
  --dracula-white: #fff;

  --fonts: 'Noto Sans', sans-serif;
  --display: 'Comfortaa', 'Noto Sans', sans-serif;
  --text-scale: #{rem(0)};
  --text-size: #{rem-scale(16)};
  --text-line: calc(var(--text-size) * 1.35);
  --text-margin: #{rem(4)};
  --text-height: calc(var(--text-line) + (var(--text-margin) * 2));
  --margin: #{rem(15)};

  --drop-margin: #{rem(30)};
  --drop-margin-scale: #{rem-scale(30)};

  --max-width: #{rem($bp-large)};
}

@media screen and (min-width: rem($bp-small)) and (max-aspect-ratio: 4/3) {
  :root {
    --text-scale: calc((100vw - #{rem($bp-small)}) * 0.02);
  }
}

@media screen and (min-width: rem($bp-medium)) and (max-aspect-ratio: 16/9) {
  :root {
    --text-scale: calc(#{rem($bp-medium - $bp-small)} * 0.02);
  }
}

@media screen and (min-width: rem($bp-large)) and (max-aspect-ratio: 2/1) {
  :root {
    --text-scale: calc(#{rem($bp-medium - $bp-small)} * 0.02);
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

button:focus {
  outline: none;
}
button::-moz-focus-inner {
  border: 0;
}

html {
  background: var(--dracula-bg-dark);
  color: var(--dracula-foreground);
  font-family: sans-serif;
  font-size: var(--text-size);
  line-height: var(--text-line);
  text-size-adjust: none;
}

body {
  margin: 0;
}

main {
  padding-top: rem(50);
}

.vh {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.muteswan {
  margin: 0 auto;
  max-width: var(--max-width);
  position: relative;

  // Used by JavaScript to compute the drop margin
  &:after {
    content: '';
    display: none;
    height: var(--drop-margin-scale);
    position: absolute;
  }
}

.muteswan {
  font-family: var(--fonts);
}

.date,
.header__text {
  font-family: var(--display);
}

.muteswan--locked,
.muteswan--drag,
.muteswan--drag * {
  pointer-events: none;
  user-select: none;
}

.muteswan--drag {
  .item,
  .group {
    pointer-events: all;
  }

  .item--preview {
    pointer-events: none;
  }
}

/**
 * Overlay
 */

.overlay {
  align-items: center;
  background: var(--dracula-bg-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  min-height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
  user-select: none;
  z-index: 9000;

  & > * {
    flex: 0 0 auto;
    max-width: 100%;
    position: relative;
  }
}

.overlay__form {
  max-width: rem(300);

  .muteswan--locked & {
    pointer-events: all;
  }
}

.overlay__background {
  background: var(--dracula-bg-dark);
  height: 100%;
  opacity: 0.8;
  position: absolute;
  width: 100%;
}

.overlay__text {
  color: var(--dracula-blue);
  font-size: rem(16);
  margin: rem(10) 0 rem(-5) rem(10) 0;
}

input[type='password'] {
  background: var(--dracula-bg-light);
  border: rem(2) solid var(--dracula-blue);
  color: var(--dracula-foreground);
  font-size: rem(16);
  outline: none;
  padding: rem(5) rem(7);
  transition: border 150ms, color 150ms;

  &[disabled] {
    border-color: var(--dracula-comment);
    color: var(--dracula-comment);
  }

  &[aria-invalid='true'] {
    border-color: var(--dracular-red);
  }
}

/**
 * Spinner
 */

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  display: block;
  height: rem(70);
  width: rem(70);
}

.spinner__circle {
  fill: var(--dracula-selection);
  opacity: 0.5;
}

.spinner__indicator {
  animation: 600ms rotate linear infinite;
  fill: var(--dracula-foreground);
  transform-origin: 50% 50%;
}

.spinner__icon {
  path {
    fill: var(--dracula-blue);
  }
}

/**
 * Header
 */

.header {
  align-items: center;
  background: var(--dracula-bg-dark);
  display: flex;
  height: rem(50);
  justify-content: flex-end;
  max-width: var(--max-width);
  padding: 0 var(--margin);
  position: fixed;
  width: 100%;
  z-index: 8000;

  & > {
    flex: 0 0 auto;
  }

  .icon {
    &:not([disabled]) {
      color: var(--dracula-blue);
    }

    &:last-child {
      margin-right: rem(10);
    }
  }
}

.header__text {
  font-size: rem(18);
  font-weight: 700;
  letter-spacing: rem(0.25);
  margin: 0;
  order: 4;
}

.logo {
  background: var(--dracula-bg-dark);
  display: block;
  margin-right: auto;
  margin: 0 auto 0 rem(-5);
  max-width: max-content;
  position: relative;

  svg {
    display: block;
    height: auto;
    width: rem(40);
  }

  .header--offline & {
    filter: saturate(0);
  }
}

/**
 * Footer
 */

.footer {
  padding: rem(30) var(--margin);
  color: var(--dracula-comment);
  text-align: right;

  a {
    color: inherit;
  }

  small {
    display: block;
    font-size: rem(12);
    letter-spacing: rem(0.25);
    line-height: rem(20);
  }
}

.badge {
  display: block;
  margin: rem(15) 0 0 auto;
  max-width: rem(120);

  img {
    display: block;
    height: auto;
    max-width: 100%;
  }
}

/**
 * Icon
 */
/*
.icon {
  --width: 24;
  --height: 24;
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--dracula-blue);
  cursor: pointer;
  display: flex;
  height: rem(30);
  justify-content: center;
  width: rem(30);
  margin: 0;
  outline: none;
  padding: 0;
  transition: color 150ms;

  &[disabled] {
    color: var(--dracula-comment);
    pointer-events: none;
  }

  * {
    pointer-events: none;
  }

  svg {
    fill: currentColor;
    max-width: rem(20);
  }

  .header & {
    &:last-child {
      margin-right: rem(10);
    }
  }
}
*/

/**
 * Date
 */

.date {
  color: var(--dracula-blue);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 rem(10) 0;
  max-width: max-content;
  padding: 0 var(--margin);
  outline: none;

  &:last-child {
    margin-bottom: 0;
  }

  .group--today & {
    color: var(--dracula-orange);
  }

  .timeline--perma &,
  .timeline--history & {
    color: var(--dracula-comment);
  }
}

.date__time {
  display: flex;
  flex-direction: column;
}

.date__day {
  border: none;
  font-size: rem(10);
  letter-spacing: rem(1.5);
  order: 2;
  text-transform: uppercase;
  text-decoration: none;
}

.date__num {
  font-size: rem(26);
  letter-spacing: rem(1);
  margin-bottom: rem(2);
  order: 1;
}

/**
 * Timeline
 */

.timeline {
  background: var(--dracula-bg-dark);
  padding: rem(30) 0;
  position: relative;
}

.timeline--future {
  background: var(--dracula-bg-light);
}

.separator {
  bottom: rem(-2.5);
  display: block;
  height: rem(5);
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;

  path {
    stroke: var(--dracula-purple);
  }
}

/**
 * Group
 */

.group {
  padding-bottom: rem(20);
  position: relative;

  &:last-of-type {
    padding-bottom: rem(5);
  }

  &[style*='--group-height'] {
    height: calc((1px * var(--group-height)) + var(--drop-margin));
    padding-bottom: 0;
  }
}

/**
 * List
 */

.list {
  width: 100%;

  .group[style*='--group-height'] & {
    position: absolute;
  }
}

/**
 * Icon
 */

.icon {
  --height: 24;
  --width: 24;
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--dracula-comment);
  cursor: pointer;
  display: flex;
  height: var(--text-height);
  justify-content: center;
  width: var(--text-height);
  margin: 0;
  outline: none;
  opacity: 1;
  padding: 0;
  transition: color 150ms, opacity 150ms;

  &[disabled] {
    pointer-events: none;
  }

  &:first-child {
    margin-left: rem(-5);
  }

  * {
    pointer-events: none;
  }

  svg {
    fill: currentColor;
    height: calc(#{rem(1)} * var(--height));
    width: calc(#{rem(1)} * var(--width));
  }
}

.icon--handle {
  --width: 8;
  --height: 13;

  &[disabled] {
    opacity: 0.5;
  }
}

.icon--done {
  --width: 18;
  --height: 13;

  &:not([aria-pressed='true']) {
    color: var(--dracula-green);
  }
}

.icon--delete {
  --width: 14;
  --height: 14;
  color: var(--dracular-red);
}

/**
 * Item
 */

.item {
  align-items: flex-start;
  display: flex;
  padding: 0 var(--margin);
  position: relative;
  transition: padding-bottom 150ms linear, padding-top 150ms linear;

  &:focus-within {
    &:not(.item--drag) {
      background: var(--dracula-focus);
    }
  }

  .memo {
    flex: 1 1 auto;
  }

  &[style*='--drop'] {
    will-change: padding;
  }

  &[style*='--drop:-1'],
  &[style*='--drop: -1'] {
    padding-top: var(--drop-margin);
  }

  &[style*='--drop:1'],
  &[style*='--drop: 1'] {
    padding-bottom: var(--drop-margin);
  }
}

.item--drag {
  .icon {
    color: var(--dracula-purple) !important;
  }
}

.item--preview {
  background: var(--dracula-bg-dark);
  left: auto;
  max-width: var(--max-width);
  position: fixed;
  pointer-events: none;
  right: auto;
  top: 0;
  width: 100%;
  will-change: transform;
  z-index: 9000;

  &:not([style*='transform']) {
    display: none;
  }

  .memo {
    color: var(--dracula-comment);
    padding-right: rem(30);
    width: 100%;
  }

  .memo__text {
    height: auto;
    white-space: pre-wrap;
  }
}

/**
 * Memo
 */

.memo {
  color: var(--dracula-foreground);
  padding: 0;
  padding-left: rem(5);
}

.memo__text {
  --height: auto;
  background: transparent;
  border: 0;
  display: block;
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  font-size: #{rem(16)};
  height: calc(1px * var(--height));
  line-height: var(--text-line);
  margin: var(--text-margin) 0;
  outline: 0;
  overflow: hidden;
  padding: 0;
  resize: none;
  transition: color 150ms;
  width: 100%;

  &:focus {
    color: var(--dracula-white);
  }

  a {
    color: inherit;
  }

  .item--done & {
    color: var(--dracula-comment);
    text-decoration: line-through;
  }

  .item--drag & {
    color: var(--dracula-purple);
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console