add terminal prompt style

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [0.4.1] - 2019-01-28
+### Added
+- Add terminal prompt style
+
 ## [0.4.0] - 2019-01-28
 ### Added
 - Use static site generator for docs

README.md

@@ -20,10 +20,10 @@ When using something like Webpack just install with `npm i terminal.css`.
 import 'terminal.css'
 ```
 
-Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
+Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css)
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css" />
 ```
 
 ## Themes

lib/terminal.css

@@ -15,6 +15,7 @@
     --progress-bar-background: #6a737b;
     --progress-bar-fill: #151515;
     --code-bg-color: #dce2e7;
+    --input-style: dashed;
 }
 
 * {
@@ -141,6 +142,53 @@ h1 + *, .logo + * {
     margin-top: 0;
 }
 
+.terminal-prompt {
+    position: relative;
+}
+.terminal-prompt::before {
+    content: "> ";
+}
+
+.terminal-prompt::after{
+    content: "";
+    -webkit-animation: cursor 1s infinite;
+    animation: cursor 1s infinite;
+    background: var(--primary-color);
+    border-radius: 1px;
+    display: inline-block;
+    height: 1rem;
+    margin-left: 4px;
+    width: 5px;
+    bottom: -1px;
+    position: relative; 
+}
+
+@-webkit-keyframes cursor {
+    0% { opacity: 0 }
+
+    50% {
+        opacity: 1
+    }
+
+    to {
+        opacity: 0
+    }
+}
+
+@keyframes cursor {
+    0% {
+        opacity: 0
+    }
+
+    50% {
+        opacity: 1
+    }
+
+    to {
+        opacity: 0
+    }
+}
+
 h2, h3, h4, h5, h6 {
     position: relative;
     margin-bottom: var(--global-line-height);
@@ -350,7 +398,7 @@ label {
 }
 
 input[type="email"], input[type="text"], input[type="number"], input[type="password"], input[type="search"] {
-    border: 1px dashed var(--font-color);
+    border: 1px var(--input-style) var(--font-color);
     width: 100%;
     padding: .5em;
     font-size: 1em;
@@ -383,7 +431,7 @@ textarea {
     height: auto;
     width: 100%;
     resize: none;
-    border: 1px dashed var(--font-color);
+    border: 1px var(--input-style) var(--font-color);
     width: 100%;
     padding: .5em;
     font-size: 1em;

src/layouts/sans.ejs

@@ -6,7 +6,8 @@
         :root {
             --global-font-size: 14px;
             --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;
     }
     </style>
   </head>

src/pages/dark.md

@@ -20,10 +20,10 @@ When using something like Webpack just install with `npm i terminal.css`.
 import 'terminal.css'
 ```
 
-Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
+Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css)
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css" />
 ```
 
 ## Themes

src/pages/index.md

@@ -20,10 +20,10 @@ When using something like Webpack just install with `npm i terminal.css`.
 import 'terminal.css'
 ```
 
-Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
+Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css)
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css" />
 ```
 
 ## Themes

src/pages/sans-serif.md

@@ -20,10 +20,10 @@ When using something like Webpack just install with `npm i terminal.css`.
 import 'terminal.css'
 ```
 
-Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
+Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css)
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.1/dist/terminal.min.css" />
 ```
 
 ## Themes

src/partials/components/nav.ejs

@@ -2,7 +2,7 @@
   <header><h2 id="Navigation">Navigation</h2></header>
   <div class="terminal-nav">
     <div class="terminal-logo">
-      <div class="logo"><a href="#" class="no-style">Logo</a></div>
+      <div class="logo terminal-prompt"><a href="#" class="no-style">Logo</a></div>
     </div>
     <nav class="terminal-menu">
       <ul>

src/partials/components/special-elements.ejs

@@ -14,6 +14,7 @@
     </footer>
   </blockquote>
   <h3 id="Misc">Misc</h3>
+  <h5 class="terminal-prompt">Terminal Prompt</h5>
   <p>
     I am <a href="?abc123">the a tag</a> example<br />
     I am <abbr title="test">the abbr tag</abbr> example<br />

src/partials/navigation.ejs

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="terminal-nav">
     <header class="terminal-logo">
-      <div class="logo"><a href="/" class="no-style">Terminal CSS</a></div>
+      <div class="logo terminal-prompt"><a href="/" class="no-style">Terminal CSS</a></div>
     </header>
     <nav class="terminal-menu">
       <ul>