Skip to content

搞英语 → 看世界

翻译英文优质信息和名人推特

Menu
  • 首页
  • 作者列表
  • 独立博客
  • 专业媒体
  • 名人推特
  • 邮件列表
  • 关于本站
Menu

我的皮卡主题 v2501

Posted on 2025-01-21

随着我最近发现了一种非常漂亮的等宽字体,称为“Victor Mono”,以及我今天找到的一些 CSS 代码,我调整了我的 PIKA 主题。我将其称为 v2501(因为有版本号很酷,而且这是我的网站🤣)。

注意:我是一名基础设施人员,您绝对不应该认为我在任何类型的编程方面都有经验。这只是我一直在尝试的东西,并且(纯粹是运气)确实有效。

[ 字体 ]

一段时间以来我一直在寻找一种好的等宽字体。很难找到一本既我喜欢它的外观,又易于阅读的书。我最近在字体类型网站上进行了搜索,发现了一种名为“ Victor Mono ”的字体,它看起来很有前途,而且也很熟悉。原来我在Jedda 的博客上看到过它(顺便说一句,这真是太棒了,读起来也很棒)。在我的 PIKA 测试站点上进行试验后,我使用Google Fonts将其投入生产。

我只将它用于正文,保留 Verdana 作为头条新闻和元数据。如果您是 PIKA 用户并且想尝试一下,只需转到https://pika.page/my_account > 单击“主题”选项卡 > 向下滚动到底部并选中“添加自定义 CSS”框。它不会更改设置、仪表板或编辑器的字体;只有您的网站。

帮助指南底部还有一个部分可以为您提供一些指导,但 PIKA 支持也是一个很好的资源。

代码的底部是我发现可以使字体变大的东西。不确定它到底是如何工作的,或者这些设置到底意味着什么。我只是做了很多实验来找到我喜欢的东西。这是我的字体代码:

 @import url("https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap"); body { --font-custom-headlines: 'Verdana', sans-serif !important; --font-custom-body: 'Victor Mono', serif !important; --font-custom-meta: 'Verdana', sans-serif !important; } body { font-size: clamp(1.03rem, 1.0715rem + 0.2174vw, 1.075rem) !important; }

我最终非常喜欢这种字体,我把它下载到我的 Mac 上,现在它是我的草稿的默认字体(这是我所有博客开始的文本编辑器)。

[ CSS 调整 ]

几乎我唯一不喜欢 PIKA(公平地说,大多数博客网站)的是有序列表(数字)和无序列表(项目符号)之间的默认填充(空格)。我发现了一个搜索结果,结果如下:

  • UL 表示项目符号列表,OL 表示编号列表。

  • 第一个数字(以像素为单位)是每行之间的填充。

  • 第二个数字(以像素为单位)是项目符号(或数字)和文本之间的填充。

我只想在每行之间添加填充,所以我的看起来像这样:

 ul li { padding: 10px 0px !important; } ol li { padding: 10px 0px !important; }

将它们放在一起,(通过在我的网站上阅读此内容)您可以看到结果。

如果您对在 PIKA 主网站上执行此操作感到紧张,只需像我一样获取一个免费网站,将其用作测试网站并进行实验即可!

这是我的页面,其中包含完整的代码和我使用的网站颜色。

请务必备份您之前的设置,以防万一。

如果我自己这么说的话,那就太酷了……

..mb

原文: https://jarunmb.com/posts/my-pika-theme-v2501

本站文章系自动翻译,站长会周期检查,如果有不当内容,请点此留言,非常感谢。
  • Abhinav
  • Abigail Pain
  • Adam Fortuna
  • Alberto Gallego
  • Alex Wlchan
  • Answer.AI
  • Arne Bahlo
  • Ben Carlson
  • Ben Kuhn
  • Bert Hubert
  • Bits about Money
  • Brian Krebs
  • ByteByteGo
  • Chip Huyen
  • Chips and Cheese
  • Christopher Butler
  • Colin Percival
  • Cool Infographics
  • Dan Sinker
  • David Walsh
  • Dmitry Dolzhenko
  • Dustin Curtis
  • eighty twenty
  • Elad Gil
  • Ellie Huxtable
  • Ethan Marcotte
  • Exponential View
  • FAIL Blog
  • Founder Weekly
  • Geoffrey Huntley
  • Geoffrey Litt
  • Greg Mankiw
  • Henrique Dias
  • Hypercritical
  • IEEE Spectrum
  • Investment Talk
  • Jaz
  • Jeff Geerling
  • Jonas Hietala
  • Josh Comeau
  • Lenny Rachitsky
  • Liz Danzico
  • Lou Plummer
  • Luke Wroblewski
  • Matt Baer
  • Matt Stoller
  • Matthias Endler
  • Mert Bulan
  • Mostly metrics
  • News Letter
  • NextDraft
  • Non_Interactive
  • Not Boring
  • One Useful Thing
  • Phil Eaton
  • Product Market Fit
  • Readwise
  • ReedyBear
  • Robert Heaton
  • Rohit Patel
  • Ruben Schade
  • Sage Economics
  • Sam Altman
  • Sam Rose
  • selfh.st
  • Shtetl-Optimized
  • Simon schreibt
  • Slashdot
  • Small Good Things
  • Steve Blank
  • Taylor Troesh
  • Telegram Blog
  • The Macro Compass
  • The Pomp Letter
  • thesephist
  • Thinking Deep & Wide
  • Tim Kellogg
  • Understanding AI
  • Wes Kao
  • 英文媒体
  • 英文推特
  • 英文独立博客
©2025 搞英语 → 看世界 | Design: Newspaperly WordPress Theme