site/css/index.html

808 lines
35 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tilde theme</title>
<link href="hacker.css" rel="stylesheet">
<style>
.tall-row {
margin-top: 40px;
}
.modal {
position: relative;
top: auto;
right: auto;
left: auto;
bottom: auto;
z-index: 1;
display: block;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">tilde theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">CLICK ME!!!
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Ooh a link</a>
</li>
<li>
<a href="#">Two links?! Oh boy</a>
</li>
<li>
<a href="#">Now you're being ridiculous</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Much Wow</li>
<li>
<a href="#">So link</a>
</li>
<li>
<a href="#">Many internet</a>
</li>
</ul>
</li>
<li><a href="dracula.html">switch color schemes</a></li>
<li>
<a href="//reddit.com/r/itsaunixsystem" target="_blank">H4x0rs Only</a>
</li>
<li><a href="/">&lt;- back</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Hacker Bootstrap</h1>
<p>A Bootstrap theme for 31337 H4X0RS. Inspired by the classic green on black terminal style, this bootstrap theme
will make your website 1337.</p>
<p>This is an example page using <a href="https://tilde.team">tilde.team</a>'s hacker css.</p>
<p><a href="dracula.html">switch color schemes</a></p>
<p>To hack around with the source or contribute, check out the project on tildegit</p>
<p>
<a class="btn btn-lg btn-primary" href="https://tildegit.org/team/site/src/branch/master/css" role="button">view on tildegit »</a>
</p>
</div>
<!-- Typography -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Typography</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<div class="col-md-4">
<h2>Example body text</h2>
<p>Doge doge doge doge
<a href="#">Yeah!</a> Doge doge doge doge doge doge doge doge doge.</p>
<p>
<small>Fine print</small>
</p>
<p>
<strong>Bold text</strong>.</p>
<p>
<em>Italicized text</em>.</p>
</div>
<div class="col-md-4">
<h2>Emphasis classes</h2>
<p class="text-primary">You put the emPHAsis on the wrong syLLAbles.</p>
<p class="text-warning">Has Anyone Really Been Far Even as Decided to Use Even Go Want to do Look More Like?</p>
<p class="text-danger">If the answer to all questions is yes, so why not?</p>
<p class="text-success">And when everyone is super, no one will be.</p>
<p class="text-info">The force will be with you, always.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Code/Kbd</h2>
<p>&lt;code&gt;<code>ps -ef | grep -v grep | grep tree</code>&lt;/code&gt;</p>
<p>&lt;kbd&gt;<kbd>ctrl + shift + t</kbd>&lt;/kbd&gt;</p>
</div>
<div class="col-md-6">
<h2>Pre</h2>
<pre>
# here is a really cool code sample
3.times do
puts "is this ruby?"
end</pre>
</div>
</div>
<!-- Buttons -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Buttons</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
</div>
<div class="col-sm-6">
</div>
</div>
<!-- Tables -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Tables</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-striped table-hover ">
<thead>
<tr>
<th>#</th>
<th>House</th>
<th>Sigil</th>
<th>Seat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stark</td>
<td>Direwolf</td>
<td>Winterfell</td>
</tr>
<tr>
<td>2</td>
<td>Lannister</td>
<td>Lion</td>
<td>Casterly Rock</td>
</tr>
<tr class="info">
<td>3</td>
<td>Baratheon</td>
<td>Stag</td>
<td>Storm's End</td>
</tr>
<tr class="success">
<td>4</td>
<td>Targaryen</td>
<td>3-headed Dragon</td>
<td>Slaver's Bay</td>
</tr>
<tr class="danger">
<td>5</td>
<td>Martell</td>
<td>Sun pierced by a spear</td>
<td>Sunspear</td>
</tr>
<tr class="warning">
<td>6</td>
<td>Tully</td>
<td>Trout</td>
<td>Riverrun</td>
</tr>
<tr class="active">
<td>7</td>
<td>Bolton</td>
<td>Red flayed man</td>
<td>Dreadfort / Winterfell</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Progress Bars -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Progress Bars</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h3>Normal</h3>
<div class="progress">
<div class="progress-bar" style="width: 15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 30%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 45%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 75%"></div>
</div>
</div>
<div class="col-lg-12">
<h3>Striped</h3>
<div class="progress progress-striped">
<div class="progress-bar" style="width: 15%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 30%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 45%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 75%"></div>
</div>
</div>
<div class="col-lg-12">
<h3>Animated</h3>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 45%"></div>
</div>
</div>
<div class="col-lg-12">
<h3>Stacked</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
</div>
</div>
<!-- Forms -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Forms</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="well">
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Email" type="text">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input class="form-control" id="inputPassword" placeholder="Password" type="password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio"> Option one is this
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios2" value="option2" type="radio"> Option two can be something else
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Selects</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<label>
Sample Dropdown
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</label>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col-lg-4 col-lg-offset-1">
<form class="bs-component">
<div class="form-group">
<label class="control-label" for="focusedInput">Focused input</label>
<input class="form-control" id="focusedInput" value="This is focused..." type="text">
</div>
<div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input warning</label>
<input class="form-control" id="inputWarning" type="text">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input error</label>
<input class="form-control" id="inputError" type="text">
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input success</label>
<input class="form-control" id="inputSuccess" type="text">
</div>
<div class="form-group">
<label class="control-label" for="inputLarge">Large input</label>
<input class="form-control input-lg" id="inputLarge" type="text">
</div>
<div class="form-group">
<label class="control-label" for="inputDefault">Default input</label>
<input class="form-control" id="inputDefault" type="text">
</div>
<div class="form-group">
<label class="control-label" for="inputSmall">Small input</label>
<input class="form-control input-sm" id="inputSmall" type="text">
</div>
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<label>
Text Input
<input class="form-control" type="text">
</label>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
</div>
</form>
</div>
</div>
<!-- Navs -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Navs</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Pagination</h3>
<ul class="pagination pagination-lg">
<li class="disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
<ul class="pagination">
<li class="disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
<ul class="pagination pagination-sm">
<li class="disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
<div class="col-md-4">
<h3>Breadcrumbs</h3>
<div class="bs-component">
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li class="active">Library</li>
</ul>
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li class="active">Data</li>
</ul>
</div>
</div>
<div class="col-md-4">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">
<a aria-expanded="true" href="#home" data-toggle="tab">Home</a>
</li>
<li class="">
<a aria-expanded="false" href="#profile" data-toggle="tab">Profile</a>
</li>
<li class="dropdown">
<a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#dropdown1" data-toggle="tab">Bacon</a>
</li>
<li class="divider"></li>
<li>
<a href="#dropdown2" data-toggle="tab">Zen of Python</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus
mollit.
</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Bacon ipsum dolor amet kielbasa bacon swine boudin brisket hamburger bresaola chicken filet mignon
fatback leberkas beef ribs salami. Leberkas rump ball tip landjaeger bresaola salami drumstick
sausage pork loin picanha pork chop. Sausage short loin swine pork filet mignon pork belly landjaeger
cupim, frankfurter corned beef venison drumstick. Filet mignon rump picanha drumstick shank ball
tip doner frankfurter shoulder. Meatloaf tri-tip porchetta tail, fatback boudin rump strip steak
doner cow jerky pork loin turkey cupim. Cupim prosciutto sausage kevin pork loin, beef ribs chuck
tail salami rump meatloaf shank. Pork belly fatback chuck, alcatra short ribs kevin landjaeger
drumstick pig tongue jowl.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Complex
is better than complicated. Flat is better than nested. Sparse is better than dense. Readability
counts. Special cases aren't special enough to break the rules. Although practicality beats purity.
Errors should never pass silently. Unless explicitly silenced. In the face of ambiguity, refuse
the temptation to guess. There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch. Now is better than never.
Although never is often better than *right* now. If the implementation is hard to explain, it's
a bad idea. If the implementation is easy to explain, it may be a good idea. Namespaces are one
honking great idea -- let's do more of those!</p>
</div>
</div>
</div>
</div>
<!-- Panels -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Panels</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">Basic panel</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">Panel content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel content</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel primary</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel success</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel warning</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel danger</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel info</h3>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div>
<!-- List Groups -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>List Groups</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>
</div>
<div class="col-lg-4">
<div class="list-group">
<a href="#" class="list-group-item active">Cras justo odio</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
</div>
</div>
<div class="col-lg-4">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
</div>
<!-- Wells -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Wells</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
Look, I'm in a well!
</div>
</div>
<div class="col-md-4">
<div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-md-4">
<div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
</div>
<!-- Alerts -->
<div class="row tall-row">
<div class="col-lg-12">
<h2>Alerts</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="alert alert-dismissible alert-warning">
<button type="button" class="close">×</button>
<h4>Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent
commodo cursus magna,
<a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
</div>
<div class="row">
<div class="col-lg-4">
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close">×</button>
<strong>Oh snap!</strong>
<a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
</div>
<div class="col-lg-4">
<div class="alert alert-dismissible alert-success">
<button type="button" class="close">×</button>
<strong>Well done!</strong> You successfully read
<a href="#" class="alert-link">this important alert message</a>.
</div>
</div>
<div class="col-lg-4">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close">×</button>
<strong>Heads up!</strong> This
<a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
</div>
</div>
</div>
</div>
<!-- Dialogs -->
<div class="row tall-row">
<div class="col-lg-12">
<h1>Modals</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Potentially Catastrophic Operation</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to do the thing with the stuff? You could rupture the space-time continuum
if you fail.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes </button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row tall-row">
<div class="col-md-12">
<p>Created by
<a href="//brobin.me">Tobin Brown</a>. &copy; 2015</p>
<p>
<a href="https://tildegit.org/team/site/src/branch/master/css">Forked</a> by
<a href="https://tilde.team/~ben/">~ben</a>
</p>
</div>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>