<section>
<h2>Classic</h2>
<div>
<web-logo>
<div class="box css">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark">
<p>CSS</p>
</div>
</web-logo>
</div>
<div class="sm">
<web-logo>
<div class="box css">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark">
<p>CSS</p>
</div>
</web-logo>
</div>
</section>
<section>
<h2>Plus Levels</h2>
<div>
<web-logo>
<div class="box css">
<p>CSS</p>
<sup>5</sup>
</div>
</web-logo>
<web-logo>
<div class="box css light">
<p>CSS</p>
<sup>6</sup>
</div>
</web-logo>
<web-logo>
<div class="box css dark">
<p>CSS</p>
<sup>7</sup>
</div>
</web-logo>
</div>
</section>
<section>
<h2>With Friends</h2>
<div>
<web-logo>
<div class="box css">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box js">
<p>JS</p>
</div>
</web-logo>
<web-logo>
<div class="box ts">
<p>TS</p>
</div>
</web-logo>
<web-logo>
<div class="box wa">
<p>WA</p>
</div>
</web-logo>
<web-logo>
<div class="box html">
<p>HTML</p>
</div>
</web-logo>
</div>
</section>/*
Notes:
- light/pink have text-stroke to match the nice boldness in the dark logo
- dark logo doesnt have the stroke, it's already perceptually bolder
- div is nested so it can adapt to the container
- p is nested so the <sup> can stack with the language and share box padding
*/
@font-face {
font-family: DINish;
src: url(https://assets.codepen.io/2585/DINish.woff2);
}
@font-face {
font-family: Geist Mono;
src: url(https://assets.codepen.io/2585/GeistMono-wght-.ttf);
}
@font-face {
font-family: Neutraface;
src: url(https://assets.codepen.io/2585/Neutraface+Text+Bold.otf);
}
web-logo {
container-type: inline-size;
overflow: hidden;
/* testing only */
/* resize: inline; */
aspect-ratio: 1;
.box {
--_text: #2b2729;
--_surface: gray;
font-family: DINish;
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: 55cqi;
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;
font-family: Neutraface;
}
&.js {
--_surface: #EFDE72;
font-family: Neutraface;
}
&.wa {
--_surface: #5F51DF;
--_text: white;
font-family: Neutraface;
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 {
/* this LOC needs Canary or Safari TP with the feature flag on */
/* text-box: trim-both cap alphabetic; */
font-kerning: none;
margin-block-end: -.25ex;
/* @supports not (text-box: trim-both cap alphabetic) {
margin-block-end: -.5ex;
} */
}
> sup {
font-family: Geist Mono;
/* 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;
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.