diff --git a/lib/terminal.css b/lib/terminal.css
index 86c217f..d750183 100644
--- a/lib/terminal.css
+++ b/lib/terminal.css
@@ -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,16 +151,15 @@ 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;
- position: relative;
+ height: 1em;
+ margin-left: .2em;
+ width: 3px;
+ bottom: -2px;
+ position: relative;
}
@-webkit-keyframes cursor {
@@ -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;
}
diff --git a/src/layouts/dark.ejs b/src/layouts/dark.ejs
index 21c152f..a8806ab 100644
--- a/src/layouts/dark.ejs
+++ b/src/layouts/dark.ejs
@@ -4,12 +4,13 @@
<%- include('partials/head') %>
- <%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "dark" }) %>
@@ -34,7 +36,14 @@
<%- include('partials/aside') %>
- <%- include('partials/components') %>
+
+ <%- include('partials/components') %>
+ <%- include('partials/documentation') %>
+
+ <%- include('partials/footer') %>
+
+ <%- include('partials/version') %>
+
<%- include('partials/bottom-scripts') %>
diff --git a/src/layouts/default.ejs b/src/layouts/default.ejs
index d519357..84bce45 100644
--- a/src/layouts/default.ejs
+++ b/src/layouts/default.ejs
@@ -4,7 +4,6 @@
<%- include('partials/head') %>
- <%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "main" }) %>
@@ -15,7 +14,14 @@
<%- include('partials/aside') %>
- <%- include('partials/components') %>
+
+ <%- include('partials/components') %>
+ <%- include('partials/documentation') %>
+
+ <%- include('partials/footer') %>
+
+ <%- include('partials/version') %>
+
<%- include('partials/bottom-scripts') %>
diff --git a/src/layouts/sans.ejs b/src/layouts/sans.ejs
index 3d27670..c2523d8 100644
--- a/src/layouts/sans.ejs
+++ b/src/layouts/sans.ejs
@@ -4,15 +4,14 @@
<%- include('partials/head') %>
- <%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "sans" }) %>
@@ -23,7 +22,14 @@
<%- include('partials/aside') %>
- <%- include('partials/components') %>
+
+ <%- include('partials/components') %>
+ <%- include('partials/documentation') %>
+
+ <%- include('partials/footer') %>
+
+ <%- include('partials/version') %>
+
<%- include('partials/bottom-scripts') %>
diff --git a/src/pages/dark.md b/src/pages/dark.md
index b39c767..e787382 100644
--- a/src/pages/dark.md
+++ b/src/pages/dark.md
@@ -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
-
+
```
## Themes
diff --git a/src/partials/aside.ejs b/src/partials/aside.ejs
index 7ae6445..5c5468e 100644
--- a/src/partials/aside.ejs
+++ b/src/partials/aside.ejs
@@ -4,6 +4,7 @@
+
+ Documentation
+
diff --git a/src/partials/bottom-scripts.ejs b/src/partials/bottom-scripts.ejs
index 534fadb..97e4c8c 100644
--- a/src/partials/bottom-scripts.ejs
+++ b/src/partials/bottom-scripts.ejs
@@ -1,8 +1,10 @@
+
diff --git a/src/partials/components.ejs b/src/partials/components.ejs
index f150047..0c9d0ab 100644
--- a/src/partials/components.ejs
+++ b/src/partials/components.ejs
@@ -1,31 +1,27 @@
-
- <%- include('components/grid') %>
-
- <%- include('components/nav') %>
-
- <%- include('components/lists') %>
-
- <%- include('components/typography') %>
-
- <%- include('components/tables') %>
-
- <%- include('components/special-elements') %>
-
- <%- include('components/forms') %>
-
- <%- include('components/progress') %>
-
- <%- include('components/buttons') %>
-
- <%- include('components/card') %>
-
- <%- include('components/alerts') %>
-
- <%- include('components/figure') %>
-
- <%- include('components/highlight-js.ejs') %>
-
- <%- include('footer') %>
-
- <%- include('version') %>
-
\ No newline at end of file
+<%- include('components/grid') %>
+
+<%- include('components/nav') %>
+
+<%- include('components/nav-list') %>
+
+<%- include('components/lists') %>
+
+<%- include('components/typography') %>
+
+<%- include('components/tables') %>
+
+<%- include('components/special-elements') %>
+
+<%- include('components/forms') %>
+
+<%- include('components/progress') %>
+
+<%- include('components/buttons') %>
+
+<%- include('components/card') %>
+
+<%- include('components/alerts') %>
+
+<%- include('components/figure') %>
+
+<%- include('components/highlight-js.ejs') %>
diff --git a/src/partials/components/nav-list.ejs b/src/partials/components/nav-list.ejs
new file mode 100644
index 0000000..0162b1f
--- /dev/null
+++ b/src/partials/components/nav-list.ejs
@@ -0,0 +1,18 @@
+
diff --git a/src/partials/components/nav.ejs b/src/partials/components/nav.ejs
index 0c78f16..e260983 100644
--- a/src/partials/components/nav.ejs
+++ b/src/partials/components/nav.ejs
@@ -11,5 +11,4 @@
-
diff --git a/src/partials/documentation.ejs b/src/partials/documentation.ejs
new file mode 100644
index 0000000..1d1f66b
--- /dev/null
+++ b/src/partials/documentation.ejs
@@ -0,0 +1,6 @@
+
+
+
+ Most of the documentation is still in an early stage. For in detail informations please have a look at the source of this website.
+ <%- include('documentation/variables') %>
+
\ No newline at end of file
diff --git a/src/partials/documentation/variables.ejs b/src/partials/documentation/variables.ejs
new file mode 100644
index 0000000..6ce49be
--- /dev/null
+++ b/src/partials/documentation/variables.ejs
@@ -0,0 +1,53 @@
+
+
+ It's easy to customize the style of Terminal CSS with CSS Variables.
+
+
+
+ - --global-font-size
+ - The Base font size
+ - --global-line-height
+ - The base line height. Modify this to achieve best readability.
+ - --font-stack
+ - The fonts for the website.
+ - Use
@font-face or any other font provider to include your custom fonts.
+ - --mono-font-stack
+ - Same as above but for
code.
+ - --background-color
+ - The page background color
+ - --font-color
+ - The base font color for text, headlines, blockquotes, lists etc.
+ - --invert-font-color
+ - Sometimes text appears on colored background. Adjust this color to improve readability.
+ - --primary-color
+ - The primary color is used for links and buttons.
+ - --secondary-color
+ - The secondary color is more subtle then the primary color. It's used for code highlighting and image captions.
+ - --error-color
+ - Used for error alerts and form validation.
+ - --progress-bar-background
+ - The background color of progress bars.
+ - --progress-bar-fill
+ - The fill color, indicating the progress in progress bars.
+ - --code-bg-color
+ - The background color of
<code> elements.
+ - --input-style
+ - The style of input element borders. Possible values are:
+ - none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset
+ - --display-h1-decoration
+ - Show a double dash below
h1 elements. Possible values are:
+ - block, none
+
+
+
diff --git a/src/partials/head.ejs b/src/partials/head.ejs
index b5750ec..f6fb0cd 100644
--- a/src/partials/head.ejs
+++ b/src/partials/head.ejs
@@ -90,54 +90,6 @@
href="/favicon/favicon-16x16.png"
/>