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

change overall look and feel

Browse Source
This commit is contained in:
Jonas Duri 2019-01-30 21:20:35 +01:00
parent 768fb65f5c
commit 309eb4d8d0
14 changed files with 214 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
lib/terminal.css
View File

@ -1,21 +1,21 @@
:root {
--global-font-size: 16px;
--global-font-size: 15px;
--global-line-height: 1.4em;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--mono-font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--mono-font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #fff;
--page-width: 65em;
--page-width: 60em;
--font-color: #151515;
--invert-font-color: #fff;
--secondary-color: #6a737b;
--tertiary-color: #6a737b;
--primary-color: #511378;
--primary-color: #17a569;
--secondary-color: #727578;
--error-color: #d20962;
--progress-bar-background: #6a737b;
--progress-bar-background: #727578;
--progress-bar-fill: #151515;
--code-bg-color: #dce2e7;
--input-style: dashed;
--code-bg-color: #e8eff2;
--input-style: solid;
--display-h1-decoration: none;
}
* {
@ -74,7 +74,6 @@ a {
cursor: pointer;
color: var(--primary-color);
text-decoration: none;
border-bottom: 1px solid var(--primary-color);
}
a:hover {
@ -136,6 +135,7 @@ h1:after {
position: absolute;
bottom: 5px;
left: 0;
display: var(--display-h1-decoration);
}
h1 + *, .logo + * {
@ -151,15 +151,14 @@ h1 + *, .logo + * {
.terminal-prompt::after{
content: "";
-webkit-animation: cursor 1s infinite;
animation: cursor 1s infinite;
animation: cursor 800ms infinite;
background: var(--primary-color);
border-radius: 1px;
border-radius: 0px;
display: inline-block;
height: 1rem;
margin-left: 4px;
width: 5px;
bottom: -1px;
height: 1em;
margin-left: .2em;
width: 3px;
bottom: -2px;
position: relative;
}
@ -195,12 +194,16 @@ h2, h3, h4, h5, h6 {
font-weight: 600;
}
li {
li, li>ul>li {
position: relative;
display: block;
padding-left: calc(var(--global-space) * 2);
}
nav>ul>li {
padding-left: 0;
}
li:after {
position: absolute;
top: 0;
@ -211,6 +214,10 @@ ul > li:after {
content: "-";
}
nav ul > li:after {
content: "";
}
ol {
counter-reset: item;
}
@ -400,7 +407,7 @@ label {
input[type="email"], input[type="text"], input[type="number"], input[type="password"], input[type="search"] {
border: 1px var(--input-style) var(--font-color);
width: 100%;
padding: .5em;
padding: .7em .5em;
font-size: 1em;
font-family: var(--font-stack);
-webkit-appearance: none;
@ -460,6 +467,21 @@ input::placeholder, textarea::placeholder {
opacity: 1;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid var(--font-color);
-webkit-text-fill-color: var(--font-color);
-webkit-box-shadow: 0 0 0px 1000px var(--invert-font-color) inset;
transition: background-color 5000s ease-in-out 0s;
}
.btn {
display: -ms-inline-flexbox;
display: inline-flex;
@ -567,6 +589,11 @@ input::placeholder, textarea::placeholder {
z-index: 2;
}
.btn-small {
padding: .5em 1.3em!important;
font-size: .9em!important;
}
.btn-group {
overflow: auto;
}
@ -584,7 +611,7 @@ input::placeholder, textarea::placeholder {
}
.terminal-card > header {
color: var(--font-color);
color: var(--invert-font-color);
text-align: center;
background-color: var(--secondary-color);
padding: .5em 0;
@ -618,6 +645,7 @@ input::placeholder, textarea::placeholder {
.terminal-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.terminal-logo {
@ -663,15 +691,21 @@ input::placeholder, textarea::placeholder {
display: none;
}
.terminal-menu li a {
.terminal-menu li a:not(.btn) {
text-decoration: none;
display: block;
width: 100%;
border: none;
color: var(--secondary-color);
}
.terminal-menu li a.active {
font-weight: 600;
color: var(--font-color);
}
.terminal-menu li a:hover {
background: none;
color: inherit;
}
@media screen and (max-width: 960px) {
@ -694,6 +728,7 @@ input::placeholder, textarea::placeholder {
@media only screen and (min-width: 30em) {
.terminal-nav {
flex-direction: row;
align-items: center;
}
.terminal-menu ul {
flex-direction: row;
@ -769,7 +804,7 @@ figure > img {
}
figure > figcaption {
color: var(--tertiary-color);
color: var(--secondary-color);
text-align: center;
}

19
src/layouts/dark.ejs
View File

@ -4,12 +4,13 @@
<%- include('partials/head') %>
<style>
:root {
--global-font-size: 16px;
--global-font-size: 15px;
--global-line-height: 1.4em;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--mono-font-stack: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #151515;
--page-width: 65em;
--page-width: 60em;
--font-color: #efefef;
--invert-font-color: #151515;
--secondary-color: #787878;
@ -19,11 +20,12 @@
--progress-bar-background: #787878;
--progress-bar-fill: #90f57e;
--code-bg-color: #787878;
--input-style: solid;
--display-h1-decoration: none;
}
</style>
</head>
<body>
<%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "dark" }) %>
<div class="container">
<p>
@ -34,7 +36,14 @@
<hr />
<div class="components components-grid">
<%- include('partials/aside') %>
<%- include('partials/components') %>
<main>
<%- include('partials/components') %>
<%- include('partials/documentation') %>
<hr />
<%- include('partials/footer') %>
<hr />
<%- include('partials/version') %>
</main>
</div>
</div>
<%- include('partials/bottom-scripts') %>

10
src/layouts/default.ejs
View File

@ -4,7 +4,6 @@
<%- include('partials/head') %>
</head>
<body>
<%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "main" }) %>
<div class="container">
<p>
@ -15,7 +14,14 @@
<hr />
<div class="components components-grid">
<%- include('partials/aside') %>
<%- include('partials/components') %>
<main>
<%- include('partials/components') %>
<%- include('partials/documentation') %>
<hr />
<%- include('partials/footer') %>
<hr />
<%- include('partials/version') %>
</main>
</div>
</div>
<%- include('partials/bottom-scripts') %>

18
src/layouts/sans.ejs
View File

@ -4,15 +4,14 @@
<%- include('partials/head') %>
<style>
:root {
--global-font-size: 16px;
--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;
--input-style: solid;
--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;
--input-style: solid;
}
</style>
</head>
<body>
<%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "sans" }) %>
<div class="container">
<p>
@ -23,7 +22,14 @@
<hr />
<div class="components components-grid">
<%- include('partials/aside') %>
<%- include('partials/components') %>
<main>
<%- include('partials/components') %>
<%- include('partials/documentation') %>
<hr />
<%- include('partials/footer') %>
<hr />
<%- include('partials/version') %>
</main>
</div>
</div>
<%- include('partials/bottom-scripts') %>

2
src/pages/dark.md
View File

@ -23,7 +23,7 @@ import 'terminal.css'
Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.2/dist/terminal.min.css)
```html
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.2/dist/terminal.min.css" />
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.2/dist/terminal.min.css" /><link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.2/dist/terminal.min.css" /><link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.2/dist/terminal.min.css" />
```
## Themes

8
src/partials/aside.ejs
View File

@ -4,6 +4,7 @@
<ul>
<li><a href="#GridSystem">Grid System</a></li>
<li><a href="#Navigation">Navigation</a></li>
<li><a href="#NavigationList">Navigation List</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#Typography">Typography</a></li>
<li><a href="#Tables">Tables</a></li>
@ -23,4 +24,11 @@
<li><a href="#highlightjs">Supports Highlight.js</a></li>
</ul>
</nav>
<h2>Documentation</h2>
<nav>
<ul>
<li><a href="#DocVariables">Variables</a></li>
</ul>
</nav>
</aside>

2
src/partials/bottom-scripts.ejs
View File

@ -1,8 +1,10 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll("pre code").forEach(block => {
window.hljs.highlightBlock(block);
});
});
</script>

58
src/partials/components.ejs
View File

@ -1,31 +1,27 @@
<main>
<%- include('components/grid') %>
<hr>
<%- include('components/nav') %>
<hr>
<%- include('components/lists') %>
<hr>
<%- include('components/typography') %>
<hr>
<%- include('components/tables') %>
<hr>
<%- include('components/special-elements') %>
<hr>
<%- include('components/forms') %>
<hr>
<%- include('components/progress') %>
<hr>
<%- include('components/buttons') %>
<hr>
<%- include('components/card') %>
<hr>
<%- include('components/alerts') %>
<hr>
<%- include('components/figure') %>
<hr>
<%- include('components/highlight-js.ejs') %>
<hr>
<%- include('footer') %>
<hr>
<%- include('version') %>
</main>
<%- include('components/grid') %>
<hr />
<%- include('components/nav') %>
<hr />
<%- include('components/nav-list') %>
<hr />
<%- include('components/lists') %>
<hr />
<%- include('components/typography') %>
<hr />
<%- include('components/tables') %>
<hr />
<%- include('components/special-elements') %>
<hr />
<%- include('components/forms') %>
<hr />
<%- include('components/progress') %>
<hr />
<%- include('components/buttons') %>
<hr />
<%- include('components/card') %>
<hr />
<%- include('components/alerts') %>
<hr />
<%- include('components/figure') %>
<hr />
<%- include('components/highlight-js.ejs') %>

18
src/partials/components/nav-list.ejs Normal file
View File

@ -0,0 +1,18 @@
<section>
<header><h2 id="NavigationList">Navigation Lists</h2></header>
<nav>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Settings</a></li>
<li>
<a href="#">Profile</a>
<ul>
<li><a href="#">Account</a></li>
<li><a href="#">Billing</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</section>

1
src/partials/components/nav.ejs
View File

@ -11,5 +11,4 @@
<li><a class="menu-item" href="#">Item #3</a></li>
</ul>
</nav>
</div>
</section>

6
src/partials/documentation.ejs Normal file
View File

@ -0,0 +1,6 @@
<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>
<%- include('documentation/variables') %>
</section>

53
src/partials/documentation/variables.ejs Normal file
View File

@ -0,0 +1,53 @@
<section>
<header>
<h2 id="DocVariables">Variables</h2>
</header>
<p>It's easy to customize the style of Terminal CSS with CSS Variables.</p>
<dl class="custom-dl">
<style>
.custom-dl dt {
font-weight: 600;
}
.custom-dl dd.italic{
font-style: italic;
}
</style>
<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>
<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>
<dt>--mono-font-stack</dt>
<dd>Same as above but for <code>code</code>.</dd>
<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>
<dt>--invert-font-color</dt>
<dd>Sometimes text appears on 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>
<dd>The secondary color is more subtle then the primary color. It's used for code highlighting and image captions.</dd>
<dt>--error-color</dt>
<dd>Used for error alerts and form validation.</dd>
<dt>--progress-bar-background</dt>
<dd>The background color of progress bars.</dd>
<dt>--progress-bar-fill</dt>
<dd>The fill color, indicating the progress in progress bars.</dd>
<dt>--code-bg-color</dt>
<dd>The background color of <code>&lt;code&gt;</code> elements.</dd>
<dt>--input-style</dt>
<dd>The style of input element borders. Possible values are:</dd>
<dd class="italic">none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset</dd>
<dt>--display-h1-decoration</dt>
<dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd>
<dd class="italic">block, none</dd>
</dl>
</section>

48
src/partials/head.ejs
View File

@ -90,54 +90,6 @@
href="/favicon/favicon-16x16.png"
/>
<style>
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Light.eot');
src: url('/fonts/eot/FiraCode-Light.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Light.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Light.woff') format('woff'),
url('/fonts/ttf/FiraCode-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Regular.eot');
src: url('/fonts/eot/FiraCode-Regular.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Regular.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Regular.woff') format('woff'),
url('/fonts/ttf/FiraCode-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Medium.eot');
src: url('/fonts/eot/FiraCode-Medium.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Medium.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Medium.woff') format('woff'),
url('/fonts/ttf/FiraCode-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Bold.eot');
src: url('/fonts/eot/FiraCode-Bold.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Bold.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Bold.woff') format('woff'),
url('/fonts/ttf/FiraCode-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: fallback;
}
.components-grid {
display: grid;
grid-column-gap: 1.4em;

14
src/partials/navigation.ejs
View File

@ -8,15 +8,11 @@
<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 === "sans") { %> active <% } %>" href="/sans-serif/">Sans</a></li>
<li>
<a class="menu-item" href="https://github.com/Gioni06/terminal.css"
>Github</a
>
</li>
<li>
<a class="menu-item" href="https://www.npmjs.com/package/terminal.css"
>NPM</a
>
<li style="
height: 28px;
">
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/Gioni06/terminal.css" data-size="large" data-show-count="true" aria-label="Star Gioni06/terminal.css on GitHub">Star</a>
</li>
</ul>
</nav>