blackbeard420/terminal.css
1
0
Fork 0
mirror of https://github.com/Gioni06/terminal.css synced 2025-03-09 17:19:04 -04:00
Code Issues Projects Releases Wiki Activity

Add sans dark version

Browse Source
This commit is contained in:
Jonas Duri 2019-01-31 08:15:44 +01:00
parent 1f400071f8
commit b13d4b2d77
3 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/layouts/sans-dark.ejs Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<%- include('partials/head') %>
<style>
:root {
--global-font-size: 15px;
--global-line-height: 1.4em;
--font-stack: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--background-color: #151515;
--page-width: 60em;
--font-color: #efefef;
--invert-font-color: #151515;
--secondary-color: #787878;
--tertiary-color: #787878;
--primary-color: #90f57e;
--error-color: #ff3c74;
--progress-bar-background: #787878;
--progress-bar-fill: #90f57e;
--code-bg-color: #787878;
--input-style: solid;
--display-h1-decoration: none;
}
</style>
</head>
<body>
<%- include('partials/navigation', { "page": "sans-dark" }) %>
<div class="container">
<p><%- site.description %></p>
<%- body %>
<hr />
<div class="components components-grid">
<%- include('partials/aside') %>
<main>
<%- include('partials/components') %> <%-
include('partials/documentation') %>
<hr />
<%- include('partials/footer') %>
<hr />
<%- include('partials/version') %>
</main>
</div>
</div>
<%- include('partials/bottom-scripts') %>
</body>
</html>

31
src/pages/sans-serif-dark.md Normal file
View File

@ -0,0 +1,31 @@
---
title: Terminal CSS
layout: sans-dark
---
## Project Goals
Terminal CSS has no overhead and is lightweight **(~ 3k gzip)**.
The source is written in **pure css** to be accessible for everybody and easy to contribute.
## Markdown ❤️ Terminal CSS
It's perfect for your *personal website*, *blog*, or *side project*.
## How to use
When using something like Webpack just install with `npm i terminal.css`.
```js
import 'terminal.css'
```
Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.6.0/dist/terminal.min.css)
```html
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.6.0/dist/terminal.min.css" />
```
## Themes
To create your own theme just open the dev-tools and edit the CSS Variables. Copy and paste it to your website. Done!

1
src/partials/navigation.ejs
View File

@ -8,6 +8,7 @@
<li><a class="menu-item <% if(page === "main") { %> active <% } %>" href="/">Light</a></li> <li><a class="menu-item <% if(page === "main") { %> active <% } %>" href="/">Light</a></li>
<li><a class="menu-item <% if(page === "dark") { %> active <% } %>" href="/dark/">Dark</a></li> <li><a class="menu-item <% if(page === "dark") { %> active <% } %>" href="/dark/">Dark</a></li>
<li><a class="menu-item <% if(page === "sans") { %> active <% } %>" href="/sans-serif/">Sans</a></li> <li><a class="menu-item <% if(page === "sans") { %> active <% } %>" href="/sans-serif/">Sans</a></li>
<li><a class="menu-item <% if(page === "sans-dark") { %> active <% } %>" href="/sans-serif-dark/">Sans Dark</a></li>
<li style=" <li style="
height: 28px; height: 28px;
"> ">