Created
May 12, 2023 02:24
-
-
Save astrit/83f7cb0bf5664fa8d6eb3b4f7aea2ded to your computer and use it in GitHub Desktop.
color-mix theming card
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article role="article" aria-label="Card title"> | |
<h2>I am a card</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<a href="#" aria-label="Read more">Read more</a> | |
</article> | |
<article role="article" aria-label="Card title" blue> | |
<h2>I am a card</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<a href="#" aria-label="Read more">Read more</a> | |
</article> | |
<article role="article" aria-label="Card title" yellow> | |
<h2>I am a card</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<a href="#" aria-label="Read more">Read more</a> | |
</article> | |
<article role="article" aria-label="Card title" teal> | |
<h2>I am a card</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<a href="#" aria-label="Read more">Read more</a> | |
</article> | |
<article role="article" aria-label="Card title" purple> | |
<h2>I am a card</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<a href="#" aria-label="Read more">Read more</a> | |
</article> | |
<article role="article" aria-label="Card title" salmon> | |
<h2>I am a card</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<a href="#" aria-label="Read more">Read more</a> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@layer core, shell, sets; | |
@layer core { | |
:root { | |
--alpha: 80%; | |
--mix: color-mix(in srgb, currentColor, transparent var(--alpha)); | |
} | |
html { | |
color-scheme: dark; | |
} | |
body { | |
display: grid; | |
gap: 8ch; | |
padding: 12ch; | |
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); | |
margin: unset; | |
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, | |
Arial, sans-serif; | |
font-style: normal; | |
line-height: 1.47059; | |
font-weight: 400; | |
letter-spacing: -0.022em; | |
font-synthesis: none; | |
-moz-font-feature-settings: "kern"; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
h2, | |
p { | |
margin: unset; | |
} | |
article a { | |
background: color-mix(in srgb, currentColor, transparent 90%); | |
color: currentColor; | |
border-radius: 200px; | |
border: 1px solid color-mix(in srgb, currentColor, transparent 40%); | |
padding: 1ex 2ch; | |
text-underline-offset: 14px; | |
outline-offset: 6px; | |
outline-width: 1px; | |
outline-color: currentColor; | |
&:hover { | |
color: white; | |
} | |
} | |
} | |
@layer sets { | |
[yellow] { | |
color: yellow; | |
&:hover { | |
color: red; | |
} | |
} | |
[blue] { | |
color: crimson; | |
&:hover { | |
color: purple; | |
} | |
} | |
[teal] { | |
color: teal; | |
&:hover { | |
color: orange; | |
} | |
} | |
[purple] { | |
color: mediumpurple; | |
&:hover { | |
color: orange; | |
} | |
} | |
[salmon] { | |
color: darksalmon; | |
&:hover { | |
color: blue; | |
} | |
} | |
} | |
@layer shell { | |
article { | |
display: flex; | |
flex-direction: column; | |
align-items: flex-start; | |
min-width: clamp(34ch, 2.6rem, 44ch); | |
text-wrap: balance; | |
gap: 2ex; | |
color: white; | |
background-color: var(--mix); | |
border: 2px solid color-mix(in srgb, currentColor, transparent 60%); | |
border-radius: 0.8rem; | |
padding: 4ch; | |
outline-offset: 8px; | |
outline-color: currentColor; | |
outline-width: 1px; | |
box-shadow: inset 0 -40px 120px -40px, | |
0px 0 0 14px color-mix(in srgb, currentColor, transparent 96%); | |
background-repeat: no-repeat; | |
background-size: cover; | |
transition: scale 0.2s; | |
backdrop-filter: blur(140px); | |
&:hover { | |
color: gray; | |
} | |
&:focus-within { | |
outline: 1px solid; | |
outline-offset: 4px; | |
outline-color: color-mix(in srgb, currentColor, transparent 60%); | |
background-image: linear-gradient( | |
to bottom, | |
transparent 0%, | |
color-mix(in srgb, currentcolor, transparent 70%) 100% | |
); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment