Template:Ink card: Difference between revisions
IssuePress (talk | contribs) (Created page with "<noinclude> A template for displaying inks as simple color ramps. ==usage== <pre> {{Ink card|Burgundy|rgb=145,78,114}} </pre> {{Ink card|Burgundy|rgb=145,78,114}} </noinclude> <includeonly><div class="ink-card-wrapper" style="position:relative;"> <div class="color-ramp" style="color: white; background-color:rgb({{{rgb|}}}); display: flex; flex-direction:row; width:100; height: 50px; border-radius:.5rem; overflow: hidden;"> <div class="p100" style="width:55%;displ...") |
IssuePress (talk | contribs) No edit summary |
||
| (20 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
A template for displaying inks as simple color ramps. | A template for displaying inks as simple color ramps. | ||
== | ==Usage== | ||
===Simple=== | |||
<pre> | <pre> | ||
{{Ink card|Burgundy | {{Ink card|Burgundy}} | ||
</pre> | </pre> | ||
{{Ink card|Burgundy| | {{Ink card|Burgundy}} | ||
===Advanced=== | |||
You can also use this template to pull in full categories of inks, such as all Standard-series [[:Category:Riso inks|Riso inks]]: | |||
<pre> | |||
{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]] | |||
[[Has series::Standard]] | |||
|format=plainlist | |||
|headers=hide | |||
|link=none | |||
|limit=100 | |||
}}|Ink card|,|}} | |||
</pre> | |||
{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]] | |||
[[Has series::Standard]] | |||
|format=plainlist | |||
|headers=hide | |||
|link=none | |||
|limit=100 | |||
}}|Ink card|,|}} | |||
</noinclude> | </noinclude> | ||
<includeonly><div class="ink-card-wrapper" style="position:relative;"> | <includeonly><div class="ink-card-wrapper" style="position:relative; margin-bottom: 1rem; background: #f8f9fa;border-radius:.75rem; overflow: hidden;border: 1px solid #F1F3F5;"> | ||
<div class="color-ramp" style="color: | <div class="color-ramp text-{{#ifexpr:{{#invoke:Color|csvrgbToLum|{{#show: {{{1}}} |? Has rgb#}}}}>75|black|white}}" style="background-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1); display: flex; flex-direction:row; width:100%;box-sizing: border-box;"> | ||
<div class="p100" style="width:55%;display: inline-flex; align-items: | <div class="p100" style="width:55%;display: inline-flex; align-items:center; justify-content: flex-start; padding: 1rem;"><span class="title" style="font-size: 1.25rem; line-height: 1.25rem;">[[{{{1}}}]]</span></div> | ||
<div class="p75" style="width:15%; background-color: rgba( | <div class="p75" style="width:15%; background-color: rgba(250,250,250,.25);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem"><span style="font-size: .75rem; line-height: .75rem;">75%</span></div> | ||
<div class="p50" style="width:15%; background-color: rgba( | <div class="p50" style="width:15%; background-color: rgba(250,250,250,.5);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem;"><span style="font-size: .75rem; line-height: .75rem;">50%</span></div> | ||
<div class="p25" style="width:15%;background-color: rgba( | <div class="p25" style="width:15%;background-color: rgba(250,250,250,.75);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem;"><span style="font-size: .75rem; line-height: .75rem;">25%</span></div> | ||
</div> | </div>{{#if:{{#show:{{{1}}}|?Has hex#}}{{#show:{{{1}}}|?Has rgb#}}{{#show:{{{1}}}|?Has cmyk#}}|<div class="color-metadata" style="color: #8a8a8a; padding:.875rem 1rem; display: flex; gap:1rem; font-size:.75rem; border-top: 1px solid #F1F3F5;">{{#if:{{#show:{{{1}}}|?Has hex#}}|<span><strong>HEX:</strong> <code style="white-space: nowrap;"><nowiki>#</nowiki>{{uc:{{#show:{{{1}}}|?Has hex#}}}}</code></span>}}{{#if:{{#show:{{{1}}}|?Has rgb#}}|<span><strong>RGB:</strong> <code style="white-space: nowrap;">({{#rreplace:{{#show:{{{1}}}|?Has rgb#}}|,|, }})</code></span>}}{{#if:{{#show:{{{1}}}|?Has cmyk#}}|<span><strong>CMYK:</strong> <code style="white-space: nowrap;">({{#rreplace:{{#show:{{{1}}}|?Has cmyk#}}|,|, }})</code></span>}}</div>}}</div> | ||
</div> | |||
</includeonly> | </includeonly> | ||
Latest revision as of 15:38, 11 December 2024
A template for displaying inks as simple color ramps.
Usage
Simple
{{Ink card|Burgundy}}
Advanced
You can also use this template to pull in full categories of inks, such as all Standard-series Riso inks:
{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]]
[[Has series::Standard]]
|format=plainlist
|headers=hide
|link=none
|limit=100
}}|Ink card|,|}}