新的 CSS Logo - 第3版

            
            /*  
  注意事项:
  - light/pink 版本使用 text-stroke 以匹配深色logo的粗体效果
  - 深色logo不需要描边，因为视觉上已经足够粗了
  - div 是嵌套的，所以它可以适应容器大小
  - p 是嵌套的，这样 <sup> 可以与语言标识叠加并共享盒子内边距
*/

web-logo {
  container-type: inline-size;
  overflow: hidden;

  /* 仅用于测试 */
  /*   resize: inline; */  

  aspect-ratio: 1;

  .box {
    --_text: #2b2729;
    --_surface: gray;

    font-variation-settings: "wdth" 75, "slnt" 0, "wght" 900;

    color: var(--_text);
    background: var(--_surface);

    aspect-ratio: 1;
    height: 100%;
    /* for safari */
    padding: 7.5cqi;
    font-size: 46cqi;

    display: grid;
    place-items: end;

    &.css {
      border-radius: 0 15cqi 15cqi;
      --_text: white;
      --_surface: #E1137C;
      --s: #B30F62;
      /*       --_surface: color(display-p3 100% 35% 80%); */

      &.light {
        --_surface: white;
        --_text: black;
        --s: #ddd;
      }

      &.dark {
        --_surface: black;
        --_text: white;
        --s: #222;
      }
    }

    &.ts {
      --_surface: #5286C6;
      --_text: white;
    }

    &.js {
      --_surface: #EFDE72;
    }

    &.wa {
      --_surface: #5F51DF;
      --_text: white;
      font-size: 45cqi;
      mask: radial-gradient(circle at center top, #0000, 20%, #000 0);
      letter-spacing: -0.125em;
      padding-inline-end: calc(7.5cqi + 0.125em);
    }

    &.html {
      --_surface: #dc6e3c;
      --_text: white;
      font-size: 40cqi;
    }

    >* {
      grid-area: 1/1;
      line-height: 1;
    }

    &:is(.js, .ts, .wa)>p {
      margin-block-end: -.5ex;
    }

    >p {
      /* 此行代码需要在 Canary 或 Safari 技术预览版中开启功能标志 */
      /*       text-box: trim-both cap alphabetic; */ 
      margin-block-end: -.25ex;

      /*       @supports not (text-box: trim-both cap alphabetic) {
    margin-block-end: -.5ex;
  } */
    }

    >sup {
      /*       text-box: trim-both cap alphabetic; */
      margin-block-start: -.25ex;
      font-variation-settings: "wght" 900;

      font-size: 40cqi;
      place-self: start end;

      /*       @supports not (text-box: trim-both cap alphabetic) {
    margin-block-start: -.5ex;
  } */

      text-shadow: 0px 0px 0 var(--s), 1px 1px 0 var(--s), 2px 2px 0 var(--s), 3px 3px 0 var(--s), 4px 4px 0 var(--s), 5px 5px 0 var(--s), 6px 6px 0 var(--s), 7px 7px 0 var(--s), 8px 8px 0 var(--s), 9px 9px 0 var(--s), 10px 10px 0 var(--s), 11px 11px 0 var(--s), 12px 12px 0 var(--s), 13px 13px 0 var(--s), 14px 14px 0 var(--s), 15px 15px 0 var(--s), 16px 16px 0 var(--s), 17px 17px 0 var(--s), 18px 18px 0 var(--s), 19px 19px 0 var(--s), 20px 20px 0 var(--s), 21px 21px 0 var(--s), 22px 22px 0 var(--s), 23px 23px 0 var(--s), 24px 24px 0 var(--s), 25px 25px 0 var(--s), 26px 26px 0 var(--s), 27px 27px 0 var(--s), 28px 28px 0 var(--s), 29px 29px 0 var(--s), 30px 30px 0 var(--s), 31px 31px 0 var(--s), 32px 32px 0 var(--s), 33px 33px 0 var(--s), 34px 34px 0 var(--s), 35px 35px 0 var(--s), 36px 36px 0 var(--s), 37px 37px 0 var(--s), 38px 38px 0 var(--s), 39px 39px 0 var(--s), 40px 40px 0 var(--s), 41px 41px 0 var(--s), 42px 42px 0 var(--s), 43px 43px 0 var(--s), 44px 44px 0 var(--s), 45px 45px 0 var(--s), 46px 46px 0 var(--s), 47px 47px 0 var(--s), 48px 48px 0 var(--s), 49px 49px 0 var(--s), 50px 50px 0 var(--s), 51px 51px 0 var(--s), 52px 52px 0 var(--s), 53px 53px 0 var(--s), 1px 1px 0 rgba(255, 83, 80, 0.98182), 2px 2px 0 rgba(255, 83, 80, 0.96364), 3px 3px 0 rgba(255, 83, 80, 0.94545), 4px 4px 0 rgba(255, 83, 80, 0.92727), 5px 5px 0 rgba(255, 83, 80, 0.90909), 6px 6px 0 rgba(255, 83, 80, 0.89091), 7px 7px 0 rgba(255, 83, 80, 0.87273), 8px 8px 0 rgba(255, 83, 80, 0.85455), 9px 9px 0 rgba(255, 83, 80, 0.83636), 10px 10px 0 rgba(255, 83, 80, 0.81818), 11px 11px 0 rgba(255, 83, 80, 0.8), 12px 12px 0 rgba(255, 83, 80, 0.78182), 13px 13px 0 rgba(255, 83, 80, 0.76364), 14px 14px 0 rgba(255, 83, 80, 0.74545), 15px 15px 0 rgba(255, 83, 80, 0.72727), 16px 16px 0 rgba(255, 83, 80, 0.70909), 17px 17px 0 rgba(255, 83, 80, 0.69091), 18px 18px 0 rgba(255, 83, 80, 0.67273), 19px 19px 0 rgba(255, 83, 80, 0.65455), 20px 20px 0 rgba(255, 83, 80, 0.63636), 21px 21px 0 rgba(255, 83, 80, 0.61818), 22px 22px 0 rgba(255, 83, 80, 0.6), 23px 23px 0 rgba(255, 83, 80, 0.58182), 24px 24px 0 rgba(255, 83, 80, 0.56364), 25px 25px 0 rgba(255, 83, 80, 0.54545), 26px 26px 0 rgba(255, 83, 80, 0.52727), 27px 27px 0 rgba(255, 83, 80, 0.50909), 28px 28px 0 rgba(255, 83, 80, 0.49091), 29px 29px 0 rgba(255, 83, 80, 0.47273), 30px 30px 0 rgba(255, 83, 80, 0.45455), 31px 31px 0 rgba(255, 83, 80, 0.43636), 32px 32px 0 rgba(255, 83, 80, 0.41818), 33px 33px 0 rgba(255, 83, 80, 0.4), 34px 34px 0 rgba(255, 83, 80, 0.38182), 35px 35px 0 rgba(255, 83, 80, 0.36364), 36px 36px 0 rgba(255, 83, 80, 0.34545), 37px 37px 0 rgba(255, 83, 80, 0.32727), 38px 38px 0 rgba(255, 83, 80, 0.30909), 39px 39px 0 rgba(255, 83, 80, 0.29091), 40px 40px 0 rgba(255, 83, 80, 0.27273), 41px 41px 0 rgba(255, 83, 80, 0.25455), 42px 42px 0 rgba(255, 83, 80, 0.23636), 43px 43px 0 rgba(255, 83, 80, 0.21818), 44px 44px 0 rgba(255, 83, 80, 0.2), 45px 45px 0 rgba(255, 83, 80, 0.18182), 46px 46px 0 rgba(255, 83, 80, 0.16364), 47px 47px 0 rgba(255, 83, 80, 0.14545), 48px 48px 0 rgba(255, 83, 80, 0.12727), 49px 49px 0 rgba(255, 83, 80, 0.10909), 50px 50px 0 rgba(255, 83, 80, 0.09091), 51px 51px 0 rgba(255, 83, 80, 0.07273), 52px 52px 0 rgba(255, 83, 80, 0.05455), 53px 53px 0 rgba(255, 83, 80, 0.03636), 55px 55px 0 rgba(255, 83, 80, 0);

      @container (width < 75px) {
        display: none;
      }
    }
  }
}



@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;

    background-color: light-dark(#ccc, #111);
    background-image:
      radial-gradient(circle at center, #0000, light-dark(#ccc, #111)),
      radial-gradient(circle at 1px 1px,
        light-dark(#0007, #fff4) 1px,
        #0000 0);
    background-size: 200px 200px, 40px 40px;
    background-repeat: round, space;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 10vmin;
    padding-block: 10vmin;
  }

  section {
    display: grid;
    gap: 1rem;

    >div {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 15vw;
      gap: 1rem;

      &.sm {
        grid-auto-columns: 24px;
      }

      @media (width < 480px) or (orientation: portrait) {
        grid-auto-flow: row;
        grid-auto-columns: 50vw;
      }
    }
  }
}