tweek docs

This commit is contained in:
Jonas Duri 2019-01-31 08:05:26 +01:00
parent e1f1c19d18
commit d361ee0586
9 changed files with 24 additions and 9 deletions

View File

@ -25,7 +25,7 @@
}
</style>
</head>
<body>
<body class="terminal">
<%- include('partials/navigation', { "page": "dark" }) %>
<div class="container">
<p>

View File

@ -3,7 +3,7 @@
<head>
<%- include('partials/head') %>
</head>
<body>
<body class="terminal">
<%- include('partials/navigation', { "page": "main" }) %>
<div class="container">
<p>

View File

@ -29,6 +29,7 @@
<nav>
<ul>
<li><a href="#DocVariables">Variables</a></li>
<li><a href="#DocTypography">Typography</a></li>
</ul>
</nav>
</aside>

View File

@ -2,7 +2,7 @@
<header>
<h2 id="GridSystem">Grid System</h2>
<p>
Terminal CSS has no build in grid system, however, you can roll your own with Flexbox or CSS Grid.
Terminal CSS has no build-in grid system. However, you can roll your own with Flexbox or CSS Grid.
</p>
</header>
<div class="image-grid">

View File

@ -13,7 +13,7 @@
</ul>
</li>
<li>A couple more</li>
<li>top level list items</li>
<li>Top-level list items</li>
</ul>
<p>Don't forget <strong>Ordered lists</strong>:</p>
<ol>

View File

@ -1,6 +1,8 @@
<hr />
<section>
<header><h2>Documentation</h2></header>
<p>Most of the documentation is still in an early stage. For in detail informations please have a look at the source of this website.</p>
<p>Most of the documentation is still at an early stage. For more details, please have a look at the source of this website.</p>
<%- include('documentation/variables') %>
<hr>
<%- include('documentation/typography') %>
</section>

View File

@ -0,0 +1,11 @@
<section>
<header>
<h2 id="DocTypography">Typography</h2>
</header>
<p>Terminal CSS uses a single font size for almost all elements. However, there is a way to use browser default font sizes if you wish.</p>
<dl class="custom-dl">
<dt>Single font size</dt>
<dd>Use <code>&lt;body class=&quot;terminal&quot;&gt;</code>. If you leave that option, it will fallback to browser defaults. See <a href="/sans-serif/">here</a>.</dd>
</dl>
</section>

View File

@ -2,7 +2,7 @@
<header>
<h2 id="DocVariables">Variables</h2>
</header>
<p>It's easy to customize the style of Terminal CSS with CSS Variables.</p>
<p>Customizing the style of Terminal CSS with CSS Variables is easy.</p>
<dl class="custom-dl">
<style>
@ -18,7 +18,7 @@
<dt>--global-font-size</dt>
<dd>The Base font size</dd>
<dt>--global-line-height</dt>
<dd>The base line height. Modify this to achieve best readability.</dd>
<dd>The base line height. Modify this to achieve the best readability.</dd>
<dt>--font-stack</dt>
<dd>The fonts for the website.</dd>
<dd>Use <code>@font-face</code> or any other font provider to include your custom fonts.</dd>
@ -27,9 +27,9 @@
<dt>--background-color</dt>
<dd>The page background color</dd>
<dt>--font-color</dt>
<dd>The base font color for text, headlines, blockquotes, lists etc.</dd>
<dd>The base font color for text, headlines, blockquotes, lists, etc.</dd>
<dt>--invert-font-color</dt>
<dd>Sometimes text appears on colored background. Adjust this color to improve readability.</dd>
<dd>Sometimes text appears on a colored background. Adjust this color to improve readability.</dd>
<dt>--primary-color</dt>
<dd>The primary color is used for links and buttons.</dd>
<dt>--secondary-color</dt>

View File

@ -19,6 +19,7 @@
name="description"
content="<%- site.description %>"
/>
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/terminal.min.css" />
<link
rel="apple-touch-icon"