change overall look and feel

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;
+    --font-stack: 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;
+    --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;
+    --primary-color: #17a569;
-    --tertiary-color: #6a737b;
+    --secondary-color: #727578;
-    --primary-color: #511378;
     --error-color: #d20962;
-    --progress-bar-background: #6a737b;
+    --progress-bar-background: #727578;
     --progress-bar-fill: #151515;
-    --code-bg-color: #dce2e7;
+    --code-bg-color: #e8eff2;
-    --input-style: dashed;
+    --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 800ms infinite;
-    animation: cursor 1s infinite;
     background: var(--primary-color);
-    border-radius: 1px;
+    border-radius: 0px;
     display: inline-block;
-    height: 1rem;
+    height: 1em;
-    margin-left: 4px;
+    margin-left: .2em;
-    width: 5px;
+    width: 3px;
-    bottom: -1px;
+    bottom: -2px;
-    position: relative; 
+    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;
 }
 

src/layouts/dark.ejs

@@ -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') %>

src/layouts/default.ejs

@@ -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') %>

src/layouts/sans.ejs

@@ -4,15 +4,14 @@
     <%- include('partials/head') %>
     <style>
         :root {
-            --global-font-size: 16px;
+          --global-font-size: 15px;
-            --global-line-height: 1.4em;
+          --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;
+          --font-stack: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-		   --input-style: solid;
+		      --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') %>

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
-<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

src/partials/aside.ejs

@@ -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>

src/partials/bottom-scripts.ejs

@@ -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>

src/partials/components.ejs

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

src/partials/components/nav-list.ejs

@@ -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>

src/partials/components/nav.ejs

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

src/partials/documentation.ejs

@@ -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>

src/partials/documentation/variables.ejs

@@ -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>
+

src/partials/head.ejs

@@ -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;

src/partials/navigation.ejs

@@ -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>
+        <li style="
-          <a class="menu-item" href="https://github.com/Gioni06/terminal.css"
+    height: 28px;
-            >Github</a
+">
-          >
+          <!-- Place this tag where you want the button to render. -->
-        </li>
+<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>
-          <a class="menu-item" href="https://www.npmjs.com/package/terminal.css"
-            >NPM</a
-          >
         </li>
       </ul>
     </nav>