puckbag/prompt.css

## prompt.css
/*
 hex:00 / rgb:0
 hex:55 / rgb:85
 hex:BB / rgb:187
 hex:FF / rgb:255
*/
.normal-black {
  color: black; }

.normal-red {
  color: #bb0000; }

.normal-green {
  color: #00bb00; }

.normal-yellow {
  color: #bbbb00; }

.normal-blue {
  color: #0000bb; }

.normal-magenta {
  color: #bb00bb; }

.normal-cyan {
  color: #00bbbb; }

.normal-white {
  color: #bbbbbb; }

.bright-black {
  color: #555555; }

.bright-red {
  color: #ff5555; }

.bright-green {
  color: #55ff55; }

.bright-yellow {
  color: #ffff55; }

.bright-blue {
  color: #5555ff; }

.bright-magenta {
  color: #ff55ff; }

.bright-cyan {
  color: #55ffff; }

.bright-white {
  color: white; }

.console {
  background-color: black;
  color: #bbbbbb;
  font-family: Monaco, monospace;
  font-size: 13px;
  padding: 0.5em;
  margin-bottom: 10px; }
  .console .path {
    color: #5555ff; }
  .console .prompt {
    color: #5555ff; }
  .console .git {
    color: #ffff55; }
  .console .host, .console.local .host {
    color: #55ffff; }
  .console.dev .host {
    color: #ff55ff; }
  .console.prod .host {
    color: #55ff55; }
  .console.root .user {
    color: #bb0000; }
  .console.root .prompt {
    color: #bb0000; }
  .console .output {
    white-space: pre; }

## prompt.html
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="prompt.css">
</head>
<body>

<div class="console">
    <div class="context">
        <span class="host"><span class="user">tmiller</span>@localhost</span>
        <span class="path">~/.prompt</span>
        <span class="git">(master *)</span>
    </div>
    <div class="input">
        <span class="prompt">$</span>
        <span class="command">echo "hello world."</span>
    </div>
    <div class="output">hello world.</div>
</div>
</body>
</html>


## prompt.scss
/*
 hex:00 / rgb:0
 hex:55 / rgb:85
 hex:BB / rgb:187
 hex:FF / rgb:255
*/

$color-normal-black:   #000000;
$color-normal-red:     #BB0000;
$color-normal-green:   #00BB00;
$color-normal-yellow:  #BBBB00;
$color-normal-blue:    #0000BB;
$color-normal-magenta: #BB00BB;
$color-normal-cyan:    #00BBBB;
$color-normal-white:   #BBBBBB;
$color-bright-black:   #555555;
$color-bright-red:     #FF5555;
$color-bright-green:   #55FF55;
$color-bright-yellow:  #FFFF55;
$color-bright-blue:    #5555FF;
$color-bright-magenta: #FF55FF;
$color-bright-cyan:    #55FFFF;
$color-bright-white:   #FFFFFF;

.normal-black   {color:$color-normal-black;}
.normal-red     {color:$color-normal-red;}
.normal-green   {color:$color-normal-green;}
.normal-yellow  {color:$color-normal-yellow;}
.normal-blue    {color:$color-normal-blue;}
.normal-magenta {color:$color-normal-magenta;}
.normal-cyan    {color:$color-normal-cyan;}
.normal-white   {color:$color-normal-white;}
.bright-black   {color:$color-bright-black;}
.bright-red     {color:$color-bright-red;}
.bright-green   {color:$color-bright-green;}
.bright-yellow  {color:$color-bright-yellow;}
.bright-blue    {color:$color-bright-blue;}
.bright-magenta {color:$color-bright-magenta;}
.bright-cyan    {color:$color-bright-cyan;}
.bright-white   {color:$color-bright-white;}

.console {
    background-color: $color-normal-black;
    color: $color-normal-white;
    font-family: Monaco, monospace;
    font-size: 13px;
    padding: 0.5em;
    margin-bottom: 10px;

    .path {
        color: $color-bright-blue;
    }
    .prompt {
        color: $color-bright-blue;
    }
    .git {
        color: $color-bright-yellow;
    }
    .host ,
    &.local .host {
        color: $color-bright-cyan;
    }
    &.dev .host {
        color: $color-bright-magenta;
    }
    &.prod .host {
        color: $color-bright-green;
    }
    &.root .user {
        color: $color-normal-red;
    }
    &.root .prompt {
        color: $color-normal-red;
    }
    .output {
        white-space: pre;
    }
}
	/*
	hex:00 / rgb:0
	hex:55 / rgb:85
	hex:BB / rgb:187
	hex:FF / rgb:255
	*/
	.normal-black {
	color: black; }

	.normal-red {
	color: #bb0000; }

	.normal-green {
	color: #00bb00; }

	.normal-yellow {
	color: #bbbb00; }

	.normal-blue {
	color: #0000bb; }

	.normal-magenta {
	color: #bb00bb; }

	.normal-cyan {
	color: #00bbbb; }

	.normal-white {
	color: #bbbbbb; }

	.bright-black {
	color: #555555; }

	.bright-red {
	color: #ff5555; }

	.bright-green {
	color: #55ff55; }

	.bright-yellow {
	color: #ffff55; }

	.bright-blue {
	color: #5555ff; }

	.bright-magenta {
	color: #ff55ff; }

	.bright-cyan {
	color: #55ffff; }

	.bright-white {
	color: white; }

	.console {
	background-color: black;
	color: #bbbbbb;
	font-family: Monaco, monospace;
	font-size: 13px;
	padding: 0.5em;
	margin-bottom: 10px; }
	.console .path {
	color: #5555ff; }
	.console .prompt {
	color: #5555ff; }
	.console .git {
	color: #ffff55; }
	.console .host, .console.local .host {
	color: #55ffff; }
	.console.dev .host {
	color: #ff55ff; }
	.console.prod .host {
	color: #55ff55; }
	.console.root .user {
	color: #bb0000; }
	.console.root .prompt {
	color: #bb0000; }
	.console .output {
	white-space: pre; }
	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" href="prompt.css">
	</head>
	<body>

	<div class="console">
	<div class="context">
	<span class="host"><span class="user">tmiller</span>@localhost</span>
	<span class="path">~/.prompt</span>
	<span class="git">(master *)</span>
	</div>
	<div class="input">
	<span class="prompt">$</span>
	<span class="command">echo "hello world."</span>
	</div>
	<div class="output">hello world.</div>
	</div>
	</body>
	</html>