blackbeard420/terminal.css
1
0
Fork 0
mirror of https://github.com/Gioni06/terminal.css synced 2025-03-09 09:09:04 -04:00
Code Issues Projects Releases Wiki Activity

add terminal prompt style

Browse Source
This commit is contained in:
Jonas Duri 2019-01-28 08:26:47 +01:00
parent dff77c3513
commit 3f99ccb1b5
10 changed files with 67 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

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

4
README.md
View File

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

52
lib/terminal.css
View File

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

3
src/layouts/sans.ejs
View File

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

4
src/pages/dark.md
View File

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

4
src/pages/index.md
View File

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

4
src/pages/sans-serif.md
View File

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

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

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

1
src/partials/components/special-elements.ejs
View File

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

2
src/partials/navigation.ejs
View File

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