From f4df7ed303ffb865be5cd0364557a489667a1a93 Mon Sep 17 00:00:00 2001 From: Brobin Date: Tue, 14 Apr 2015 11:26:58 -0500 Subject: [PATCH] initial commit, :octocat: --- .gitignore | 2 + LICENSE | 21 +++ README.rst | 42 +++++ compile.sh | 1 + less/hacker.less | 6 + less/hacker/_variables.less | 323 ++++++++++++++++++++++++++++++++++++ 6 files changed, 395 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.rst create mode 100755 compile.sh create mode 100644 less/hacker.less create mode 100644 less/hacker/_variables.less diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..02e9dbb --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +css +less/bootstrap \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..87f52d4 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Tobin Brown + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.rst b/README.rst new file mode 100644 index 0000000..cc9941a --- /dev/null +++ b/README.rst @@ -0,0 +1,42 @@ +================ +Hacker Bootstrap +================ + +A Bootstrap theme for 1337 h@ckers. Inspired by the classic green on black terminal style. + +----- +Usage +----- + +**H4X0RS ONLY** + +Make sure you have bootstrap and less installed, Open up your h4x0r terminal and type the following + +.. code-block:: bash + + $ npm install bootstrap + $ npm install less + +Then compile by using the 1337 comile script + +.. code-block:: bash + + $ ./compile.sh + +Finally, reference the css in your html and h@ck away! + +.. code-block:: html + + + +------------ +Contributing +------------ + +Feel free to hack around and submit pull requests. Not every style is 100% comp1337, so any assistance is greatly appreciated. + +------- +License +------- + +MIT diff --git a/compile.sh b/compile.sh new file mode 100755 index 0000000..7236d26 --- /dev/null +++ b/compile.sh @@ -0,0 +1 @@ +lessc -x less/hacker.less css/hacker.css \ No newline at end of file diff --git a/less/hacker.less b/less/hacker.less new file mode 100644 index 0000000..05e3d6b --- /dev/null +++ b/less/hacker.less @@ -0,0 +1,6 @@ + +// import bootstrap base +@import "bootstrap/bootstrap.less"; + +// import custom variables +@import "hacker/_variables.less"; diff --git a/less/hacker/_variables.less b/less/hacker/_variables.less new file mode 100644 index 0000000..82deb68 --- /dev/null +++ b/less/hacker/_variables.less @@ -0,0 +1,323 @@ +/* +A Bootstrap theme for 31337 H4X0RS +by Tobin Brown, 2015 +*/ + + +// Hacker Colors +@hacker: #00ff00; +@hacker-bg: #222222; + + +// Grays (acutally greens, so yeah, gg) +@gray-darker: @hacker; +@gray-dark: darken(@hacker, 10%); +@gray: darken(@hacker, 20%); +@gray-light: darken(@hacker, 40%); +@gray-lighter: darken(@hacker, 40%); + + +// Brand Colors +@brand-primary: @hacker; +@brand-success: @gray; +@brand-warning: #f4ff00; +@brand-danger: #ff0000; +@brand-info: #3366CC; + + +// Scaffolding +@body-bg: @hacker-bg; +@text-color: @gray-dark; +@link-color: @brand-primary; +@link-hover-color: darken(@link-color, 15%); +@padding-base-vertical: 6px; +@padding-base-horizontal: 12px; +@padding-large-vertical: 10px; +@padding-large-horizontal: 16px; +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; +@border-radius-base: 0; +@border-radius-large: 0; +@border-radius-small: 0; +@line-height-large: 1.33; +@line-height-small: 1.5; +@component-active-bg: @brand-primary; + + +// Typography +@font-family-sans-serif: Monospace; +@font-family-serif: Monospace; +@font-family-monospace: Monospace; +@font-family-base: @font-family-sans-serif; +@font-size-base: 14px; +@font-size-large: ceil(@font-size-base * 1.25); +@font-size-small: ceil(@font-size-base * 0.85); +@font-size-h1: floor((@font-size-base * 2.6)); +@font-size-h2: floor((@font-size-base * 2.15)); +@font-size-h3: floor((@font-size-base * 1.7)); +@font-size-h4: floor((@font-size-base * 1.25)); +@font-size-h5: @font-size-base; +@font-size-h6: floor((@font-size-base * 0.85)); +@line-height-base: 1.428571429; +@line-height-computed: floor(@font-size-base * @line-height-base); +@headings-font-family: @font-family-base; +@headings-font-weight: 500; +@headings-line-height: 1.1; +@headings-color: inherit; + + +// Buttons +@btn-font-weight: normal; +@btn-default-color: @hacker; +@btn-default-bg: @hacker-bg; +@btn-default-border: #111111; +@btn-primary-color: @hacker-bg; +@btn-primary-bg: @brand-primary; +@btn-primary-border: darken(@btn-primary-bg, 5%); +@btn-success-color: @hacker-bg; +@btn-success-bg: @brand-success; +@btn-success-border: darken(@btn-success-bg, 5%); +@btn-warning-color: @hacker-bg; +@btn-warning-bg: @brand-warning; +@btn-warning-border: darken(@btn-warning-bg, 5%); +@btn-danger-color: @hacker-bg; +@btn-danger-bg: @brand-danger; +@btn-danger-border: darken(@btn-danger-bg, 5%); +@btn-info-color: @hacker-bg; +@btn-info-bg: @brand-info; +@btn-info-border: darken(@btn-info-bg, 5%); +@btn-link-disabled-color: @gray-light; + + +// Well +@well-bg: darken(@hacker-bg, 10%); +@well-border: darken(@well-bg, 7%); + + +// Dropdowns +@dropdown-bg: lighten(@hacker-bg, 10%); +@dropdown-border: rgba(0,0,0,.15); +@dropdown-divider-bg: #333333; +@dropdown-link-active-color: @hacker-bg; +@dropdown-link-active-bg: @component-active-bg; +@dropdown-link-color: @gray-dark; +@dropdown-link-hover-color: @hacker-bg; +@dropdown-link-hover-bg: @dropdown-link-active-bg; +@dropdown-link-disabled-color: @gray-light; +@dropdown-header-color: @gray-light; +@dropdown-caret-color: #000; + + +// Forms +@input-bg: darken(@hacker-bg, 20%); +@input-bg-disabled: @gray-lighter; +@input-color: @gray; +@input-border: #444444; +@input-border-focus: @hacker; +@input-border-radius: @border-radius-base; +@input-color-placeholder: darken(@hacker, 30%); +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); +@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); +@legend-color: @gray-dark; +@legend-border-color: #e5e5e5; +@input-group-addon-bg: @hacker-bg; +@input-group-addon-border-color: @input-border; + + +// Table +@table-cell-padding: 8px; +@table-condensed-cell-padding: 5px; +@table-cell-padding: 8px; +@table-condensed-cell-padding: 5px; +@table-bg: transparent; +@table-bg-accent: darken(@hacker-bg, 10%); +@table-bg-hover: @gray-lighter; +@table-bg-active: @table-bg-hover; +@table-border-color: #444444; + + +// Navbar +@navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; +@navbar-default-color: @hacker; +@navbar-default-bg: darken(@hacker-bg, 10%); +@navbar-default-border: darken(@navbar-default-bg, 6.5%); +@navbar-border-radius: @border-radius-base; +@navbar-padding-horizontal: floor(@grid-gutter-width / 2); +@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-default-link-color: @hacker; +@navbar-default-link-hover-color: darken(@hacker, 20%); +@navbar-default-link-hover-bg: @hacker-bg; +@navbar-default-link-active-color: #999999; +@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); +@navbar-default-link-disabled-color: #ccc; +@navbar-default-link-disabled-bg: transparent; +@navbar-default-brand-color: @navbar-default-link-color; +@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); +@navbar-default-brand-hover-bg: transparent; +@navbar-default-toggle-hover-bg: #ddd; +@navbar-default-toggle-icon-bar-bg: #888; +@navbar-default-toggle-border-color: #ddd; + + +// Navs Tabs +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @gray-lighter; +@nav-disabled-link-color: @gray-light; +@nav-disabled-link-hover-color: @gray-light; +@nav-tabs-border-color: #444444; +@nav-tabs-link-hover-border-color: #444444; +@nav-tabs-active-link-hover-bg: #333333; +@nav-tabs-active-link-hover-color: @gray; +@nav-tabs-active-link-hover-border-color: #222222; +@nav-tabs-justified-link-border-color: #ddd; +@nav-tabs-justified-active-link-border-color: @body-bg; +@nav-pills-border-radius: @border-radius-base; +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: #fff; + + +// Panel +@panel-bg: @hacker-bg; +@panel-body-padding: 15px; +@panel-heading-padding: 10px 15px; +@panel-footer-padding: @panel-heading-padding; +@panel-border-radius: @border-radius-base; + +@panel-inner-border: lighten(@hacker-bg, 10%); +@panel-footer-bg: darken(@hacker-bg, 10%); + +@panel-default-text: @hacker-bg; +@panel-default-border: lighten(@hacker-bg, 10%); +@panel-default-heading-bg: darken(@hacker-bg, 10%); + +@panel-primary-text: @hacker-bg; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + +@panel-success-text: @state-success-text; +@panel-success-border: @state-success-border; +@panel-success-heading-bg: @state-success-bg; + +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: @state-warning-border; +@panel-warning-heading-bg: @state-warning-bg; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: @state-danger-border; +@panel-danger-heading-bg: @state-danger-bg; + + +// Jumbotron +@jumbotron-padding: 30px; +@jumbotron-color: inherit; +@jumbotron-bg: darken(@hacker-bg, 10%); +@jumbotron-font-size: ceil((@font-size-base * 1.5)); + + +// Pagination +@pagination-bg: @hacker-bg; +@pagination-border: #444444; +@pagination-hover-bg: @gray-lighter; +@pagination-hover-color: @link-hover-color; +@pagination-hover-border: #555555; +@pagination-active-bg: @hacker; +@pagination-active-color: @hacker-bg; +@pagination-active-border: @brand-primary; +@pagination-disabled-color: lighten(@hacker, 10%); +@pagination-disabled-bg: lighten(@hacker-bg, 10%); +@pagination-disabled-border: @pagination-border; +@pager-bg: @pagination-bg; +@pager-border: @pagination-border; +@pager-border-radius: 0; +@pager-hover-bg: @pagination-hover-bg; +@pager-active-bg: @pagination-active-bg; +@pager-active-color: @pagination-active-color; +@pager-bg: @pagination-bg; +@pager-disabled-color: @gray-light; + + +// Form States +@state-warning-text: #f4ff00; +@state-warning-bg: lighten(@hacker-bg, 10%); +@state-warning-border: darken(spin(@state-warning-bg, -10), 3%); +@state-danger-text: #dd0000; +@state-danger-bg: lighten(@hacker-bg, 10%); +@state-danger-border: darken(spin(@state-danger-bg, -10), 3%); +@state-success-text: #00dd00; +@state-success-bg: lighten(@hacker-bg, 10%); +@state-success-border: darken(spin(@state-success-bg, -10), 5%); +@state-info-text: #7d8cff; +@state-info-bg: lighten(@hacker-bg, 10%); +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + + +// ToolTip +@tooltip-max-width: 200px; +@tooltip-color: #fff; +@tooltip-bg: #000; +@tooltip-arrow-width: 5px; +@tooltip-arrow-color: @tooltip-bg; +@tooltip-opacity: .9; + + +// Popover +@popover-bg: lighten(@hacker-bg, 10%); +@popover-max-width: 276px; +@popover-border-color: rgba(0,0,0,.2); +@popover-fallback-border-color: #333333; +@popover-title-bg: darken(@popover-bg, 3%); +@popover-arrow-width: 10px; +@popover-arrow-color: @popover-bg; +@popover-arrow-outer-width: (@popover-arrow-width + 1); +@popover-arrow-outer-color: rgba(0,0,0,.25); +@popover-arrow-outer-fallback-color: #999; + + +// List Group +@list-group-bg: lighten(@hacker-bg, 10%); +@list-group-border: #222222; +@list-group-border-radius: @border-radius-base; +@list-group-hover-bg: darken(@hacker-bg, 10%); +@list-group-active-color: @hacker-bg; +@list-group-active-bg: @hacker; +@list-group-active-border: @list-group-active-bg; +@list-group-active-text-color: @hacker-bg; +@list-group-link-color: @hacker; +@list-group-link-heading-color: @hacker; + + +// Modal +@modal-content-bg: lighten(@hacker-bg, 10%); +@modal-content-border-color: transparent; +@modal-content-fallback-border-color: #999; +@modal-backdrop-bg: @hacker-bg; +@modal-backdrop-opacity: .5; +@modal-header-border-color: lighten(@hacker-bg, 10%); +@modal-footer-border-color: @modal-header-border-color; + + +// Progress +@progress-bg: lighten(@hacker-bg, 10%); + + +// Breadcrumb +@breadcrumb-bg: lighten(@hacker-bg, 10%); +@breadcrumb-color: @hacker; + + +// Labels +@label-color: @hacker-bg; + + +// Sprites +@icon-font-path: '../app/fonts/'; +@icon-font-name: glyphicons-halflings-regular; + + +@hr-border: #666666;