Zeka 的记事本

2020 年 11 月

在 2020 年 11 月 29 日说：

Poor Man's Styleguide

A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS.

It contains all common page elements, in HTML and (Github Flavored) Markdown formats.

If you'd like to contribute, make your changes to both the markdown and HTML files. If the elements can not be represented in markdown (like forms, for example), you can just add them to the final section of index.html.

See the full demo at www.poormansstyleguide.com

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Note: the Figure-Figcaption and Details-Summary elements are not currently supported in markdown.

Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags:

Monospace Text wrapped in "pre" tags:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
3. List Item 3.2.1
4. List Item 3.2 2
5. List Item 3.3
List Item 4

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2 2
- List Item 3.3
List Item 4

Definition List

Definition Term 1: Definition Description 1
Definition Term 2: Definition Description 2

Tables

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Media and Form Elements

The remaining sections contain elements that cannot be represented in markdown. Please consult the HTML version, to see these elements.

在 2020 年 11 月 29 日说：

花了超过一周对原来站点进行了调整。布局样式基本不变，添加了青色为辅色。站点完全使用 Typescript 书写，由 Gatsbyjs 静态生成。当然还是存在不少小 Bug。这次最大的一个亮点是去除了抖动。由于使用了 Bulma 作为 CSS 框架，所以没有滚动条抖动（实际上更好的解决方法可以看这里：小tip:CSS vw让overflow:auto页面滚动条出现时不跳动。此外，由于 archive 页面高度依赖锚点定位，一旦出现图片加载就会导致抖动，使得锚点定位不准确。为此，参考了 sukka dalao 的做法。通过 gatsby 的 sharp 切好图，然后计算 aspect ratio，再利用绝对布局预留空间，并以此懒加载。图片的布局参照了 paul 布局方式。单张图片与多张图片分别进行响应式设计。整体网站布局参考了 Fooleap's Blog。