mirror of
https://github.com/Gioni06/terminal.css
synced 2025-03-09 17:19:04 -04:00
tweek docs
This commit is contained in:
Jonas Duri
parent
e1f1c19d18
commit
d361ee0586
@ -25,7 +25,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="terminal">
|
||||||
<%- include('partials/navigation', { "page": "dark" }) %>
|
<%- include('partials/navigation', { "page": "dark" }) %>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<%- include('partials/head') %>
|
<%- include('partials/head') %>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="terminal">
|
||||||
<%- include('partials/navigation', { "page": "main" }) %>
|
<%- include('partials/navigation', { "page": "main" }) %>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -29,6 +29,7 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#DocVariables">Variables</a></li>
|
<li><a href="#DocVariables">Variables</a></li>
|
||||||
|
<li><a href="#DocTypography">Typography</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<header>
|
<header>
|
||||||
<h2 id="GridSystem">Grid System</h2>
|
<h2 id="GridSystem">Grid System</h2>
|
||||||
<p>
|
<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>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
<div class="image-grid">
|
<div class="image-grid">
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>A couple more</li>
|
<li>A couple more</li>
|
||||||
<li>top level list items</li>
|
<li>Top-level list items</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Don't forget <strong>Ordered lists</strong>:</p>
|
<p>Don't forget <strong>Ordered lists</strong>:</p>
|
||||||
<ol>
|
<ol>
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
<hr />
|
<hr />
|
||||||
<section>
|
<section>
|
||||||
<header><h2>Documentation</h2></header>
|
<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') %>
|
<%- include('documentation/variables') %>
|
||||||
|
<hr>
|
||||||
|
<%- include('documentation/typography') %>
|
||||||
</section>
|
</section>
|
||||||
11
src/partials/documentation/typography.ejs
Normal file
11
src/partials/documentation/typography.ejs
Normal 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><body class="terminal"></code>. If you leave that option, it will fallback to browser defaults. See <a href="/sans-serif/">here</a>.</dd>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
|
||||||
@ -2,7 +2,7 @@
|
|||||||
<header>
|
<header>
|
||||||
<h2 id="DocVariables">Variables</h2>
|
<h2 id="DocVariables">Variables</h2>
|
||||||
</header>
|
</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">
|
<dl class="custom-dl">
|
||||||
<style>
|
<style>
|
||||||
@ -18,7 +18,7 @@
|
|||||||
<dt>--global-font-size</dt>
|
<dt>--global-font-size</dt>
|
||||||
<dd>The Base font size</dd>
|
<dd>The Base font size</dd>
|
||||||
<dt>--global-line-height</dt>
|
<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>
|
<dt>--font-stack</dt>
|
||||||
<dd>The fonts for the website.</dd>
|
<dd>The fonts for the website.</dd>
|
||||||
<dd>Use <code>@font-face</code> or any other font provider to include your custom fonts.</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>
|
<dt>--background-color</dt>
|
||||||
<dd>The page background color</dd>
|
<dd>The page background color</dd>
|
||||||
<dt>--font-color</dt>
|
<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>
|
<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>
|
<dt>--primary-color</dt>
|
||||||
<dd>The primary color is used for links and buttons.</dd>
|
<dd>The primary color is used for links and buttons.</dd>
|
||||||
<dt>--secondary-color</dt>
|
<dt>--secondary-color</dt>
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
name="description"
|
name="description"
|
||||||
content="<%- site.description %>"
|
content="<%- site.description %>"
|
||||||
/>
|
/>
|
||||||
|
<link rel="stylesheet" href="/css/normalize.css" />
|
||||||
<link rel="stylesheet" href="/terminal.min.css" />
|
<link rel="stylesheet" href="/terminal.min.css" />
|
||||||
<link
|
<link
|
||||||
rel="apple-touch-icon"
|
rel="apple-touch-icon"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user