昨天我订购了 2025 Mildliner 背包,我必须直接从中国购买,因为英国似乎还没有地方出售它们,而我是一个没有耐心的强迫症完美主义者。
新的颜色意味着我需要更新我已经更新的颜色图表以包含这些新的颜色[1]但更新静态图像并不能带来乐趣所以我做了我一直在做的事情:新网站。
简而言之:它叫做 Mildliner Reference,地址是mildliners.rknight.me 。子域名,宝贝!
我抓取了所有颜色名称、集合、十六进制代码,并将它们添加到全新的 Eleventy 网站的 JSON 数据文件中:
// _data/mildliners.js
module . exports = function ( ) {
return [
{ name : 'Pink' , set : 'Fluorescent' , color : 'ffb6d9' } ,
{ name : 'Orange' , set : 'Fluorescent' , color : 'ffdfb5' } ,
{ name : 'Yellow' , set : 'Fluorescent' , color : 'f0f4a3' } ,
// and so on
]
}
除了我从营销图片中截取的新颜色外,十六进制代码均基于 Zebra 的官方图表。我使用了与此存档页面类似的逻辑,按颜色自带的集合对颜色进行分组,因此每个集合在 HTML 中看起来都像这样。理论上,这可以让我运用一些 CSS 技巧,在不更改底层 HTML 的情况下实现不同的布局。
< div class = " mildliner-set scribble-border " >
< h1 class = " marker " > Fluorescent </ h1 >
< div class = " mildliner-singles " >
< div class = " mildliner " style = " background-color : #ffb6d9 ; border-color : #ffb6d9 ; " >
< h2 > Pink </ h2 >
< p class = " mildliner-color " data-color = " #ffb6d9 " > #ffb6d9 </ p >
</ div >
<!-- and so on with the other colors -->
</ div >
</ div >
最后,我添加了将十六进制代码复制到剪贴板的功能,因为坦白说,这些颜色都很好看,我想在其他网站上用用。这正好给了我一个使用Boochild字体的好机会,它是一款非常棒的字体。
距离上一版新版 Mildliners 发布已经过去两年了,所以我估计这套系统应该不需要太多更新,至少等到下一版发布的时候会比较容易。代码在 GitHub 上。
-
截至本文撰写时,美国斑马网站似乎尚未承认这些颜色的存在⤾
原文: https://rknight.me/blog/how-many-mildliner-colours-are-there-now/