Skip to content

Commit

Permalink
fixes icons after normalize update
Browse files Browse the repository at this point in the history
  • Loading branch information
@argyleink
argyleink committed Nov 15, 2022
1 parent 6e263ab commit 21859f3
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions docsite/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<polyline points="9 11 12 14 22 4"></polyline>
<path style="opacity:.75;" d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</symbol>
<symbol id="bent-arrow">
<symbol id="bent-arrow" fill="none" stroke="currentColor">
<path d="m15 10 5 5-5 5"/>
<path d="M4 4v7a4 4 0 0 0 4 4h12"/>
</symbol>
Expand Down Expand Up @@ -101,19 +101,19 @@ <h1><span>CSS</span> <span>variables.</span></h1>
<ul class="checkmark-list">
<li>
<svg viewBox="0 0 24 24">
<use href="#checkmark-icon"/>
<use href="#checkmark-icon" fill="none"/>
</svg>
Expertly crafted web design tokens
</li>
<li>
<svg viewBox="0 0 24 24">
<use href="#checkmark-icon"/>
<use href="#checkmark-icon" fill="none"/>
</svg>
Create consistent components
</li>
<li>
<svg viewBox="0 0 24 24">
<use href="#checkmark-icon"/>
<use href="#checkmark-icon" fill="none"/>
</svg>
Useful in any framework
</li>
Expand Down Expand Up @@ -289,8 +289,8 @@ <h2>Why Use Open Props?</h2>
<div>
<dt>
<svg viewBox="0 0 24 24">
<path d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
<path d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
<path d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" stroke="currentColor" fill="none" />
<path d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" stroke="currentColor" fill="none" />
</svg>
Design Consistently
</dt>
Expand All @@ -299,7 +299,7 @@ <h2>Why Use Open Props?</h2>
<div>
<dt>
<svg viewBox="0 0 24 24">
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" stroke="currentColor" fill="none" />
</svg>
Predictable
</dt>
Expand All @@ -308,8 +308,8 @@ <h2>Why Use Open Props?</h2>
<div>
<dt>
<svg viewBox="0 0 24 24" >
<path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
<path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" stroke="currentColor" fill="none" />
<path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" stroke="currentColor" fill="none" />
</svg>
Incrementally Adoptable
</dt>
Expand All @@ -318,7 +318,7 @@ <h2>Why Use Open Props?</h2>
<div>
<dt>
<svg viewBox="0 0 24 24">
<path d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
<path d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" stroke="currentColor" fill="none" />
</svg>
Customizable
</dt>
Expand Down Expand Up @@ -1166,7 +1166,7 @@ <h2>Colors</h2>
<div class="block-wrap">
<p>Open Props includes <a href="https://yeun.github.io/open-color/">Open Color</a> (Version 1.9.1), an open-source color scheme optimized for UI development.</p>
<blockquote class="icon-quote">
<svg viewBox="0 0 24 24">
<svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
<span>Open the color picker in your browser dev tools, set the swatches to the page's custom properties, and enjoy picking from the set!</span>
Expand Down Expand Up @@ -2907,7 +2907,7 @@ <h2>Media Queries</h2>
<p>Currently one step ahead of <a href="https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media">the CSS spec</a>, Open Props offers named media queries with the <code>@custom-media</code> syntax. Available only with <a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media">this PostCSS plugin</a>, for now 😈</p>

<blockquote class="icon-quote indigo">
<svg viewBox="0 0 24 24">
<svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
<span>Media query widths also available as custom properties. Use like <code class="language-css">var(--size-sm)</code></span>
Expand Down Expand Up @@ -3095,7 +3095,7 @@ <h2>Masks</h2>
<div class="block-wrap">
<p>Rad edges and corner-cuts ready to go. A huge shout out to <a href="https://twitter.com/ChallengesCss">Temani Afif</a> and <a href="https://github.com/argyleink/open-props/discussions/71">their amazing mask work</a>. Be sure to check out their <a href="https://css-generators.com/">CSS Generators</a> too; customize the size and distribution of these masks. Try on <a href="https://codepen.io/argyleink/pen/mdxKrxR">Codepen</a>.</p>
<blockquote class="icon-quote jagged">
<svg viewBox="0 0 24 24">
<svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
<path
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
Expand Down

0 comments on commit 21859f3

Please sign in to comment.