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

Update components and styles

Browse Source
This commit is contained in:
Jonas Duri 2019-01-26 11:18:40 +01:00
parent 95c0e1f888
commit e85d98b592
5 changed files with 335 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -22,9 +22,9 @@ import 'terminal.css'
#### UNPKG CDN
The css is available via [CDN](https://unpkg.com/terminal.css@0.1.3/dist/terminal.min.css)
The css is available via [CDN](https://unpkg.com/terminal.css@0.2.0/dist/terminal.min.css)
```html
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.1.3/dist/terminal.min.css" />
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.2.0/dist/terminal.min.css" />
```
## Development

89
docs/index.html
View File

@ -6,6 +6,7 @@
<title>Terminal CSS</title>
<meta name="description" content="Modern and minimalistic CSS framework for terminal lovers ❤️" />
<link rel="stylesheet" href="/terminal.min.css" />
<link rel="stylesheet" href="/dark.css" />
</head>
<style>
.components-grid {
@ -38,7 +39,26 @@
<a href="https://github.com/Gioni06/terminal.css" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div class="container">
<h1>Terminal CSS</h1>
<section class="terminal-header">
<header class="terminal-logo">
<div class="logo"><a href="/" class="no-style">Terminal CSS</a></div>
</header>
<nav class="terminal-menu">
<ul>
<li>
<a class="menu-item" href="/blog">Blog</a>
</li>
<li>
<a class="menu-item" href="/recommended"> Recommended Links</a>
</li>
<li>
<a class="menu-item" href="/contact">Contact</a>
</li>
</ul>
</nav>
</section>
</div>
<div class="container">
<p>
Modern and minimalistic CSS framework for <em>terminal</em> lovers ❤️
</p>
@ -71,6 +91,7 @@
<nav>
<ul>
<li><a href="#GridSystem">Grid System</a></li>
<li><a href="#Header">Header</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#Typography">Typography</a></li>
<li><a href="#Tables">Tables</a></li>
@ -86,6 +107,7 @@
<li><a href="#Progress">Progress Bar</a></li>
<li><a href="#Cards">Cards</a></li>
<li><a href="#Alerts">Alerts</a></li>
<li><a href="#Media">Media</a></li>
</ul>
</nav>
</aside>
@ -154,6 +176,28 @@
/></a>
</div>
<hr />
<div>
<h2 id="Header">Header</h2>
<section class="terminal-header">
<header class="terminal-logo">
<div class="logo"><a href="#" class="no-style">Logo</a></div>
</header>
<nav class="terminal-menu">
<ul>
<li>
<a class="menu-item" href="#">Item #1</a>
</li>
<li>
<a class="menu-item active" href="#">Active Item #2</a>
</li>
<li>
<a class="menu-item" href="#">Item #3</a>
</li>
</ul>
</nav>
</section>
</div>
<hr>
<h2 id="Lists">Lists</h2>
<section>
<ul>
@ -420,7 +464,7 @@
</div>
<div class="form-group">
<label for="submit">Input Button:</label>
<button type="submit" role="button" name="submit" id="submit">Submit</button>
<button class="btn btn-default" type="submit" role="button" name="submit" id="submit">Submit</button>
</div>
</fieldset>
</form>
@ -446,15 +490,9 @@
<h4 id="Buttons">Buttons</h4>
<button class="btn btn-default">Default</button><br /><br />
<button class="btn btn-primary">Primary</button><br /><br />
<button class="btn btn-success">Success</button><br /><br />
<button class="btn btn-info">Info</button><br /><br />
<button class="btn btn-warning">Warning</button><br /><br />
<button class="btn btn-error">Error</button><br /><br />
<button class="btn btn-default btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-primary btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-success btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-info btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-warning btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-error btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-primary btn-block">Block Level Button</button><br /><br />
<p>Button Group</p>
@ -474,15 +512,42 @@
</div>
<br />
<h4 id="Alerts">Alerts</h4>
<div class="alert alert-success">Success message</div>
<div class="alert alert-info">Info message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert">Default message</div>
<div class="alert alert-primary">Primary message</div>
<div class="alert alert-error">Error message</div>
<hr>
<p>Version: 0.1.3 <a href="#menu">Top</a></p>
<h2 id="Media">Media</h2>
<div class="terminal-media">
<div class="terminal-media-left">
<div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaLeft" alt="Picsum"></div>
</div>
<div class="terminal-media-body">
<div class="terminal-media-heading">Media Left Element</div>
<div class="terminal-media-content">This is the media content</div>
</div>
</div>
<div class="terminal-media">
<div class="terminal-media-body">
<div class="terminal-media-heading">Media Right Element</div>
<div class="terminal-media-content">This is the media content</div>
</div>
<div class="terminal-media-right">
<div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaRight" alt="Picsum"></div>
</div>
</div>
<hr>
<p>Version: 0.2.0 <a href="#menu">Top</a></p>
</section>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('pre code').forEach((block) => {
window.hljs.highlightBlock(block);
});
})
</script>
</body>
</html>

2
docs/terminal.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
src/dark.css Normal file
View File

@ -0,0 +1,16 @@
:root {
--global-font-size: 14px;
--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;
--background-color: #14171a;
--page-width: 70em;
--font-color: #d9e0e2;
--invert-font-color: #131719;
--secondary-color: #657786;
--tertiary-color: #14171a;
--primary-color: #1da1f2;
--error-color: rgb(224, 36, 94);
--progress-bar-background: #e1e8ed;
--progress-bar-fill: #aab8c2;
}

337
src/terminal.css
View File

@ -5,17 +5,14 @@
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #fff;
--page-width: 70em;
--font-color: #151513;
--font-color: #444444;
--invert-font-color: #fff;
--secondary-color: #727680;
--tertiary-color: #727680;
--primary-color: rgb(206, 4, 105);
--success-color: #2ac24b;
--info-color: #ffc501;
--warning-color: #e7601c;
--error-color: #ce0404;
--progress-bar-background: #cacdd5;
--progress-bar-fill: #151513;
--secondary-color: #9ba5a8;
--tertiary-color: #9ba5a8;
--primary-color: #1d99b7;
--error-color: #ea4c89;
--progress-bar-background: #9ba5a8;
--progress-bar-fill: #444444;
}
* {
@ -47,9 +44,9 @@ pre {
display: block;
word-break: break-all;
word-wrap: break-word;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
color: var(--secondary-color);
background-color: var(--background-color);
border: 1px solid var(--secondary-color);
padding: var(--global-space);
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
@ -123,7 +120,7 @@ h1, .logo {
h1:after {
content: "====================================================================================================";
position: absolute;
bottom: var(--global-space);
bottom: 5px;
left: 0;
}
@ -154,12 +151,17 @@ ul > li:after {
}
ol {
counter-reset: a;
counter-reset: item;
}
ol > li:after {
content: counter(a) ".";
counter-increment: a;
ol li:before {
content: counters(item, ".") ". ";
counter-increment: item
}
ol ol li:before {
content: counters(item, ".") " ";
counter-increment: item
}
ol li:nth-child(n+10):after {
@ -352,7 +354,7 @@ input[type="email"]:not(:placeholder-shown):invalid,
input[type="password"]:not(:placeholder-shown):invalid,
input[type="search"]:not(:placeholder-shown):invalid,
input[type="number"]:not(:placeholder-shown):invalid {
border-color: var(--primary-color);
border-color: var(--error-color);
}
.form-group {
@ -378,7 +380,17 @@ textarea:focus {
}
textarea:not(:placeholder-shown):invalid {
border-color: var(--primary-color);
border-color: var(--error-color);
}
input, textarea {
color: var(--font-color);
background-color: var(--background-color);
}
input::placeholder, textarea::placeholder {
color: var(--secondary-color)!important;
opacity: 1;
}
.btn {
@ -434,29 +446,13 @@ textarea:not(:placeholder-shown):invalid {
}
.btn-default:focus:not(.btn-ghost), .btn-default:hover {
background-color: var(--tertiary-color);
background-color: var(--secondary-color);
color: var(--invert-font-color);
}
.btn-success {
color: var(--invert-font-color);
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-success:focus:not(.btn-ghost), .btn-success:hover {
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-success.btn-ghost {
border-color: var(--success-color);
color: var(--success-color);
}
.btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover {
border-color: var(--success-color);
color: var(--success-color);
.btn-default.btn-ghost:focus, .btn-default.btn-ghost:hover {
border-color: var(--secondary-color);
color: var(--secondary-color);
z-index: 2;
}
@ -482,50 +478,6 @@ textarea:not(:placeholder-shown):invalid {
z-index: 2;
}
.btn-warning {
color: var(--invert-font-color);
background-color: var(--warning-color);
border: 1px solid var(--warning-color);
}
.btn-warning:focus:not(.btn-ghost), .btn-warning:hover {
background-color: var(--warning-color);
border-color: var(--warning-color);
}
.btn-warning.btn-ghost {
border-color: var(--warning-color);
color: var(--warning-color);
}
.btn-warning.btn-ghost:focus, .btn-warning.btn-ghost:hover {
border-color: var(--warning-color);
color: var(--warning-color);
z-index: 2;
}
.btn-info {
color: var(--invert-font-color);
background-color: var(--info-color);
border: 1px solid var(--info-color);
}
.btn-info:focus:not(.btn-ghost), .btn-info:hover {
background-color: var(--info-color);
border-color: var(--info-color);
}
.btn-info.btn-ghost {
border-color: var(--info-color);
color: var(--info-color);
}
.btn-info.btn-ghost:focus, .btn-info.btn-ghost:hover {
border-color: var(--info-color);
color: var(--info-color);
z-index: 2;
}
.btn-primary {
color: var(--invert-font-color);
background-color: var(--primary-color);
@ -565,7 +517,7 @@ textarea:not(:placeholder-shown):invalid {
}
.card > header {
color: var(--invert-font-color);
color: var(--font-color);
text-align: center;
background-color: var(--secondary-color);
padding: .5em 0;
@ -582,29 +534,77 @@ textarea:not(:placeholder-shown):invalid {
margin-bottom: var(--global-space);
}
.alert-success {
color: var(--success-color);
border-color: var(--success-color);
}
.alert-error {
color: var(--error-color);
border-color: var(--error-color);
}
.alert-info {
color: var(--info-color);
border-color: var(--info-color);
.alert-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
.alert-warning {
color: var(--warning-color);
border-color: var(--warning-color);
.terminal-menu {
width: 100%;
}
.alert-black {
.terminal-header {
display: flex;
flex-direction: column;
}
.terminal-logo {
flex-shrink: 1;
margin-right: 20px;
white-space: nowrap;
}
.terminal-logo a {
color: var(--font-color);
border-color: var(--font-color);
text-decoration: none;
font-weight: 600;
border: none;
}
.terminal-logo a:hover, .terminal-logo a:active, .terminal-logo a:visited {
background: none;
border: none;
color: var(--font-color);
}
.terminal-menu ul {
list-style-type: none;
padding: 0!important;
display: flex;
flex-direction: column;
width: 100%;
flex-grow: 1;
font-size: var(--global-font-size);
}
.terminal-menu li {
display: flex;
margin: 0 0 .5em 0;
padding: 0;
}
.terminal-menu li:last-child {
margin-bottom: 0;
}
.terminal-menu li::after, .terminal-menu li::before {
display: none;
}
.terminal-menu li a {
text-decoration: none;
display: block;
width: 100%;
border: none;
}
.terminal-menu li a.active {
font-weight: 600;
}
@media screen and (max-width: 960px) {
@ -623,3 +623,144 @@ textarea:not(:placeholder-shown):invalid {
width: 100%;
}
}
@media only screen and (min-width: 30em) {
.terminal-header {
flex-direction: row;
}
.terminal-menu ul {
flex-direction: row;
justify-items: flex-end;
align-items: center;
justify-content: flex-end;
}
.terminal-menu li {
margin: 0;
margin-right: 2em;
}
.terminal-menu li:last-child {
margin-right: 0;
}
}
.terminal-media:not(:last-child) {
margin-bottom: 1.25rem;
}
.terminal-media-left {
padding-right: var(--global-space);
}
.terminal-media-left, .terminal-media-right {
display: table-cell;
vertical-align: top;
}
.terminal-media-right {
padding-left: var(--global-space);
}
.terminal-media-body {
display: table-cell;
vertical-align: top;
}
.terminal-media-heading {
font-size: 1em;
font-weight: 700;
}
.terminal-media-content {
margin-top: .3rem;
}
.terminal-placeholder {
background-color: var(--secondary-color);
text-align: center;
color: var(--font-color);
font-size: 1rem;
border: 1px solid var(--secondary-color);
}
.terminal-avatarholder {
width: calc(var(--global-space) * 5);
height: calc(var(--global-space) * 5);
}
.terminal-avatarholder img {
padding: 0;
}
/** Highligh.js theme **/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: var(--block-background-color);
color: var(--font-color);
}
.hljs-comment,
.hljs-quote {
color: var(--secondary-color);
}
.hljs-variable {
color: var(--font-color);
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: var(--primary-color);
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: var(--secondary-color);
}
.hljs-string {
color: var(--secondary-color);
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: var(--primary-color);
}
.hljs-doctag {
color: var(--secondary-color);
}
.hljs-attr {
color: var(--primary-color);
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: var(--primary-color);
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}