A simple typography stylesheet.
Textretty is a tiny typography css library. It can be used wherever any readable content is, such as your blog post and a document.
Additionally, textretty provide you with some simple class to construct a page container, which helps you create a single document page (just like the one you are reading) with no extra css.
Get the lastest version with git.
$ git clone https://github.com/BigCoke233/textretty.css.git
Or you can just grab the textretty.min.css
file in the main branch.
You can also get textretty.min.css
with jsDelivr CDN, this method does not require to install.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/textretty.css/dist/textretty.min.css">
说明:jsDelivr 在中国大陆地区无法访问
Textretty only works in the element with textretty class.
<head>
<!-- ...... -->
<link rel="stylesheet" href="textretty.css">
<!-- ...... -->
</head>
<body>
<!-- ...... -->
<article class="textretty">
<!-- your content goes here -->
</article>
<!-- ...... -->
</body>
To build a single document page as mentioned, you need textretty-container
.
<main class="textretty textretty-container">
<header>
<h1>Document Title</h1>
<p>Information like publish date and category.</p>
</header>
<article>
<!-- your content goes here -->
</article>
<footer>
<p>Copyright © 2022 Textretty</p>
</footer>
</main>
If you find the container being too wide or slim, replace textretty-container
with the ones below.
- textretty-container-slim: a slimmer page 700px wide at most.
- textretty-container-wide: a wider page 100px wide at most.
It is notable that all the containers have their padding
defined as 2em
.