工业标准 版式


一个基于 Aquamarine 的版式,但是更具有工业化的风格。

暂不支持夜间模式。

标题

h1h2 元素上使用 decorated 类添加装饰。

分割线

hr 元素上使用 decorated 类创建一条这样的分割线:


各种 div

我不知道怎么给它们起名字,所以就直接用字母了。或许你可以组合其中的一些类名来获得复合效果,也可以更改相应的 CSS 变量来改变视觉效果。

TYPE-A

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolor consequuntur id vitae optio itaque incidunt, corrupti sit praesentium ut asperiores voluptate ullam hic neque eos reiciendis labore. Neque totam officia tenetur, accusamus, eaque ipsam repellat quia ipsum dolorem at consequuntur. Aliquam laboriosam ipsum esse qui architecto ullam delectus maxime ipsa sint expedita voluptatum enim cum illum sequi, sit officia hic a possimus, fugiat ex quisquam. A iste aperiam quas, voluptatibus animi nam tenetur accusamus officiis soluta vel ipsa tempora nihil alias quidem deleniti modi minus? Totam provident impedit, quas voluptatum accusamus blanditiis optio quod omnis magnam sapiente quo. Fugiat?

TYPE-B

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quos alias illo. Ipsa, totam? Blanditiis, odio fugit, minima temporibus tenetur distinctio, perspiciatis voluptatem soluta explicabo corporis adipisci velit doloremque! Earum ullam, quas neque officiis, atque unde id cupiditate, beatae sunt optio accusantium dolor? Harum eveniet maiores omnis veniam temporibus perferendis maxime dolores fuga fugit, delectus nihil sequi ipsa libero earum rem ducimus necessitatibus reprehenderit explicabo officiis, consectetur quos? Nam pariatur molestias aspernatur quaerat numquam aliquam, accusantium adipisci, officia earum voluptatem, cum est atque quae doloribus similique blanditiis eos facere. Sit sunt quibusdam earum dolorum dicta ducimus perferendis cum hic totam.

TYPE-C

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga cumque vitae saepe! Ipsum dolores nobis dolor expedita quod numquam, architecto totam itaque dolorum magni animi, commodi, aspernatur illum. Qui nobis tempora aspernatur magni itaque, mollitia adipisci quos, fugit accusamus ducimus eveniet ullam minima in? Saepe enim, minima, assumenda repellendus nostrum tempora culpa ipsam aut harum magnam cupiditate sit fuga quos sunt perspiciatis provident laborum ad, reprehenderit dolores error! Repudiandae earum repellat doloremque illum facere eveniet ipsum eligendi dolores architecto ex quod eum possimus minima iste debitis adipisci magnam suscipit alias, expedita, repellendus labore distinctio sapiente. Tempore eveniet eos corrupti ipsam?

TYPE-D

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste deleniti iusto officia nam ipsam repellendus amet adipisci vero consequuntur rerum similique, ipsa ad eligendi error cupiditate excepturi pariatur magni. Voluptates est corrupti iusto voluptas illum vitae molestiae? Deleniti nam culpa dicta maiores esse nulla accusamus fugit dolores aperiam incidunt a ipsum explicabo, officia quidem excepturi velit obcaecati necessitatibus odio iure. Hic fugiat sequi aliquam necessitatibus rerum vel quod perferendis repellat fuga autem, non dignissimos dolorum, officiis tenetur. Hic labore consequatur provident nulla sapiente nisi, ratione sunt repellat earum unde neque eveniet a, beatae voluptatem qui tempora voluptas veniam ullam quia.

TYPE-E

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolor exercitationem dicta molestias doloremque cumque dolorem consequatur sint dolorum ab voluptatum aliquid rem, vero et ut corrupti mollitia consectetur. Cumque recusandae laborum veritatis delectus rerum totam asperiores et eveniet fugiat dolor, aut odit nihil laudantium repellat quos sequi eius nobis exercitationem ea mollitia eum libero molestias. Est voluptatem repellendus velit quisquam minus expedita accusamus incidunt doloribus earum consectetur, hic laboriosam quam dolore cumque asperiores quaerat, ratione ab. Maxime porro minima accusantium blanditiis corporis, perferendis provident soluta atque officia eveniet similique qui sequi quaerat commodi aspernatur iure cumque! Similique, quasi doloribus.

TYPE-F

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ut architecto, assumenda et dolorum hic vel blanditiis pariatur, reiciendis, error quia sunt? Magni ea architecto nemo eum laborum voluptas, omnis quos fuga illum praesentium nulla ipsam aliquid esse nisi deleniti obcaecati optio culpa cumque, veritatis provident nihil eos nam. Aspernatur ab omnis cupiditate architecto fuga amet commodi pariatur ipsa maiores non. Porro cupiditate dicta est atque non velit quo qui animi sed fuga aperiam eius, similique maxime, nesciunt ad quidem necessitatibus at? Excepturi autem sint blanditiis sit deleniti at similique id suscipit, laborum illum eius rem cum, est totam amet!

使用这些类名可以给元素加上图案背景:

POLKA-A

POLKA-B

CROSS

DIAGONAL

BOXES

其他

给任何元素加上 text-shadow 类名可以给文字加上阴影。

展示

来自生产部门的通知

type-d type-e diagonal

注意了!

type-a polka-b

神秘消息

type-f boxes text-shadow f-serif

type-c