From 3f99ccb1b56e8c50a656d7adad1882d72e8eee1e Mon Sep 17 00:00:00 2001 From: Jonas Duri Date: Mon, 28 Jan 2019 08:26:47 +0100 Subject: [PATCH] add terminal prompt style --- CHANGELOG.md | 4 ++ README.md | 4 +- lib/terminal.css | 52 +++++++++++++++++++- src/layouts/sans.ejs | 3 +- src/pages/dark.md | 4 +- src/pages/index.md | 4 +- src/pages/sans-serif.md | 4 +- src/partials/components/nav.ejs | 2 +- src/partials/components/special-elements.ejs | 1 + src/partials/navigation.ejs | 2 +- 10 files changed, 67 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ed8921b..b6320a2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index c88b137..1800a85 100644 --- a/README.md +++ b/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 - + ``` ## Themes diff --git a/lib/terminal.css b/lib/terminal.css index cf24ef8..b8a850d 100644 --- a/lib/terminal.css +++ b/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; diff --git a/src/layouts/sans.ejs b/src/layouts/sans.ejs index a97f7ca..735bc6c 100644 --- a/src/layouts/sans.ejs +++ b/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; } diff --git a/src/pages/dark.md b/src/pages/dark.md index cd495a9..5dde1ac 100644 --- a/src/pages/dark.md +++ b/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 - + ``` ## Themes diff --git a/src/pages/index.md b/src/pages/index.md index 1af8270..33fca3d 100644 --- a/src/pages/index.md +++ b/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 - + ``` ## Themes diff --git a/src/pages/sans-serif.md b/src/pages/sans-serif.md index 66787c9..864e4e8 100644 --- a/src/pages/sans-serif.md +++ b/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 - + ``` ## Themes diff --git a/src/partials/components/nav.ejs b/src/partials/components/nav.ejs index 2dc9e15..0c78f16 100644 --- a/src/partials/components/nav.ejs +++ b/src/partials/components/nav.ejs @@ -2,7 +2,7 @@