Major Design overhaul

- Added Daux.css themes
- Made layout responsive
- Added local version of bootstrap
- Still some CSS bugs
- Mobile toggle doesn't work yet.
This commit is contained in:
Garrett Moon 2013-06-10 17:26:54 -05:00
parent a60c5c1959
commit 03b00ae1f9
16 changed files with 28982 additions and 87 deletions

6841
css/daux-blue.css Normal file

File diff suppressed because it is too large Load Diff

6841
css/daux-green.css Normal file

File diff suppressed because it is too large Load Diff

6841
css/daux-navy.css Normal file

File diff suppressed because it is too large Load Diff

6841
css/daux-red.css Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,8 @@
{ {
"title": "TM-Docs the Todaymade Documentation Generator", "title": "DAUX.IO",
"homepage": "/Getting_Started", "homepage": "/Getting_Started",
"theme": "spacelab", "theme": "bootstrap",
"hightlight": "dark", "hightlight": "none",
"repo": "justinwalsh/tm-docs", "repo": "justinwalsh/tm-docs",
"twitter": ["justin_walsh", "todaymade"], "twitter": ["justin_walsh", "todaymade"],
"links": { "links": {

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
img/glyphicons-halflings.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

106
index.php
View File

@ -815,70 +815,16 @@ $tree = get_tree("docs");
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title><?=$options['title']; ?></title>
<!-- Mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap --> <!-- Bootstrap -->
<link rel="stylesheet" href="https://s3.amazonaws.com/todaymade/tools/tm-docs/themes/<?=$options['theme'];?>.css"> <link rel="stylesheet" href="/js/bootstrap.min.js">
<style type="text/css"> <!-- Custom -->
html, body { <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100' rel='stylesheet' type='text/css'>
margin: 0; <link rel="stylesheet" href="/css/daux-blue.css">
padding: 0;
height: 100%;
}
.container-fluid {
margin: 0 auto;
height: 100%;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.columns {
height: 100%;
}
.content-area, .article-tree {
overflow:auto;
height: 100%;
}
li ul {
display: none;
}
li.open > ul {
display: block;
}
a.folder {
font-weight: bold;
}
pre {
padding: 0;
}
table {
width: 100%;
}
.footer {
position: fixed;
bottom:0;
left: 0;
padding: 15px;
}
#github-ribbon {
position: absolute;
top: 0;
right: 0;
}
</style>
<!-- hightlight.js --> <!-- hightlight.js -->
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/<?=$options['hightlight'];?>.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script> <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script> <script>hljs.initHighlightingOnLoad();</script>
@ -899,38 +845,56 @@ $tree = get_tree("docs");
<a href="https://github.com/<?=$options['repo']; ?>" target="_blank" id="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <a href="https://github.com/<?=$options['repo']; ?>" target="_blank" id="github-ribbon"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<? } ?> <? } ?>
<div class="container-fluid wrapper"> <div class="container-fluid wrapper">
<div class="navbar navbar-static-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<a class="brand" href="/"><?=$options['title']; ?></a> <a class="brand pull-left" href="/"><?=$options['title']; ?></a>
<p class="navbar-text pull-right">
Generated by <a href="https://github.com/justinwalsh/tm-docs">Daux.io</a>
</p>
</div> </div>
</div> </div>
<div class="row-fluid columns content"> <div class="row-fluid columns content">
<div class="span2 article-tree"> <div class="left-column article-tree span3">
<!-- For Mobile -->
<div class="responsive-collapse">
<button type="button" class="btn btn-sidebar" data-toggle="collapse" data-target="#sub-nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="sub-nav-collapse" class="collapse in">
<!-- Navigation --> <!-- Navigation -->
<? echo build_nav($tree); ?> <? echo build_nav($tree); ?>
<!-- Links --> <!-- Links -->
<? if (!empty($options['links'])) { ?> <? if (!empty($options['links'])) { ?>
<div class="well"> <div class="well well-sidebar">
<? foreach($options['links'] as $name => $url) { ?> <? foreach($options['links'] as $name => $url) { ?>
<a href="<?=$url;?>" target="_blank"><?=$name;?></a><br> <a href="<?=$url;?>" target="_blank"><?=$name;?></a><br>
<? } ?> <? } ?>
</div>
<? } ?>
<!-- Twitter --> <!-- Twitter -->
<? if (!empty($options['twitter'])) { ?> <? if (!empty($options['twitter'])) { ?>
<? foreach($options['twitter'] as $handle) { ?> <? foreach($options['twitter'] as $handle) { ?>
<div class="extra twitter"> <div class="twitter">
<hr/>
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?=$handle;?>&amp;show_count=false"></iframe> <iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?=$handle;?>&amp;show_count=false"></iframe>
</div> </div>
<? } ?> <? } ?>
<? } ?> <? } ?>
<div class="footer">Generate by <a href="https://github.com/justinwalsh/tm-docs">TM-Docs</a></div>
</div> </div>
<div class="span10 content-area"> <? } ?>
</div>
</div>
<div class="right-column float-view content-area span9">
<div class="content-page">
<article>
<? echo load_page($tree); ?> <? echo load_page($tree); ?>
</article>
</div>
</div> </div>
</div> </div>
</div> </div>

7
js/bootstrap.min.js vendored Executable file

File diff suppressed because one or more lines are too long

13
less/daux-blue.less Normal file
View File

@ -0,0 +1,13 @@
//Daux.io Blue
@sidebar-background: #f7f7f7;
@sidebar-hover: #c5c5cb;
@lines: #e7e7e9;
@dark: #3f4657;
@light: #82becd;
@text: #2d2d2d;
@syntax-string: #022e99;
@syntax-comment: #84989b;
@syntax-number: #2f9b92;
@syntax-label: #840d7a;
@import "import/daux-base.less";

13
less/daux-green.less Normal file
View File

@ -0,0 +1,13 @@
//Daux.io Green
@sidebar-background: #f5f5f6;
@sidebar-hover: #a0d55d;
@lines: #e7e7e9;
@dark: #000000;
@light: #8acc37;
@text: #2d2d2d;
@syntax-string: #e0ff00;
@syntax-comment: #c4e598;
@syntax-number: #097c4e;
@syntax-label: #022e99;
@import "import/daux-base.less";

13
less/daux-navy.less Normal file
View File

@ -0,0 +1,13 @@
//Daux.io Navy
@sidebar-hover: #c5c5cb;
@lines: #e7e7e9;
@sidebar-background: #f5f5f6;
@dark: #13132a;
@light: #7795b4;
@text: #2d2d2d;
@syntax-string: #000000;
@syntax-comment: #505050;
@syntax-number: #09559b;
@syntax-label: #001775;
@import "import/daux-base.less";

13
less/daux-red.less Normal file
View File

@ -0,0 +1,13 @@
//Daux.io Red
@sidebar-hover: #eeeeee;
@lines: #eeeeee;
@sidebar-background: #f7f7f7;
@dark: #c64641; //#df4f49;
@light: #ecb5a1;
@text: #2d2d2d;
@syntax-string: #557aa2;
@syntax-comment: #ecdfd0;
@syntax-number: #9b2f7d;
@syntax-label: #a31621;
@import "import/daux-base.less";

874
less/import/bootstrap.min.less vendored Executable file

File diff suppressed because one or more lines are too long

631
less/import/daux-base.less Normal file
View File

@ -0,0 +1,631 @@
//Mixins, cuz they're handy
.box-shadow(@shadowsize: 5px, @color:rgba(0,0,0,.25), @left: 0px, @top: 1px) {
-moz-box-shadow: @left @top @shadowsize @color;
-webkit-box-shadow: @left @top @shadowsize @color;
box-shadow: @left @top @shadowsize @color;
}
.border-radius(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.kill-background-image() {
background-image: none;
-ms-filter: none;
filter: none;
}
.kill-box-shadow() {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
.opacity(@opacity: 0.5) {
-moz-opacity: @opacity;
-khtml-opacity: @opacity;
-webkit-opacity: @opacity;
opacity: @opacity;
@opperc: @opacity * 100;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
filter: ~"alpha(opacity=@{opperc})";
}
@import "import/bootstrap.min.less";
/* ===========================================================================================
Base CSS
============================================================================================== */
//Fonts
.roboto-slab {
&.light {
font-family: 'Roboto Slab', serif;
font-weight: 100;
}
&.book {
font-family: 'Roboto Slab', serif;
font-weight: 300;
}
&.regular {
font-family: 'Roboto Slab', serif;
font-weight: 400;
}
&.bold {
font-family: 'Roboto Slab', serif;
font-weight: 700;
}
}
//Typography
h1, h2, h3, h4, h5, h6 {
.roboto-slab.book;
}
a {
}
pre {
padding: 0;
}
/* ===========================================================================================
Body & Page Structure
============================================================================================== */
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: @light;
color: @text;
}
//100% Height Columns
.container-fluid {
margin: 0 auto;
height: 100%;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.columns {
height: 100%;
.left-column,
.right-column {
padding-top: 50px;
@media (max-width: 767px) {
width: 100% !important;
padding-top: 0px;
height: auto;
}
}
.left-column {
background-color: @sidebar-background;
border-right: 1px solid @lines;
}
.right-column {
&.span9 {
width: 76.4866339334%;
margin-left: 0px;
}
.content-page {
padding: 20px;
min-height: 100%;
background-color: white;
}
}
}
.content-area, .article-tree {
overflow:auto;
height: 100%;
padding: 0px;
}
//mobile friendly sub-nav
.responsive-collapse {
padding: 10px 15px;
display: none;
background-color: @lines;
border-bottom: 1px solid @lines;
@media (max-width: 767px) {
display: block;
}
}
.sub-nav-collapse {
@media (max-width: 480px) {
//display: none;
}
}
//CSS For Fluid Tables
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr {
display: block;
border: none;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
td, th {
border: 1px solid #ccc;
border-bottom:none;
}
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important;
white-space: normal;
text-align:left;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
td:before { content: attr(data-title); }
}
/* ===========================================================================================
Componenets
============================================================================================== */
a {
color: @light;
}
.btn {
&.btn-sidebar {
padding: 7px 10px;
.kill-background-image;
.kill-box-shadow;
background-color: @sidebar-hover;
border: none;
.icon-bar {
display: block;
width: 18px;
height: 2px;
margin-top: 2px;
margin-bottom: 3px;
background-color: @dark;
.kill-box-shadow;
}
&:hover {
.kill-box-shadow;
background-color: @dark;
.icon-bar {
background-color: @light;
.kill-box-shadow;
}
}
}
}
code {
color: @light;
}
//Navbar
.navbar {
.box-shadow();
z-index: 1;
margin-bottom: 0px;
z-index: 200;
.navbar-inner {
.kill-background-image;
background-color: @dark;
border-bottom: none;
padding: 6px 20px;
.brand {
color: @light;
text-shadow:none;
.roboto-slab.bold;
}
.navbar-text {
color: @light;
a {
color: @light;
}
}
@media (max-width: 767px) {
padding: 6px 30px;
.navbar-text {
line-height: 16px;
margin: 12px 6px;
font-size: 12px;
}
}
}
@media (min-width: 768px) and (max-width: 979px) {
&.navbar-fixed-top {
position: fixed;
}
}
}
//Sidebar Nav List
.nav.nav-list {
padding-left: 0px;
padding-right: 0px;
li {
a {
margin: 0px;
padding: 6px 15px;
.roboto-slab.regular;
color: @dark;
font-size: 15px;
text-shadow:none;
border-top: 1px solid @lines;
&:hover {
color: @dark;
text-shadow:none;
background-color: @sidebar-hover;
}
}
&.active {
a {
background-color: @sidebar-hover;
}
}
&.open {
ul {
display: block;
}
}
&:last-child {
&.open {
//border-bottom: none;
}
}
ul {
display: none;
margin-left: 15px;
li {
a {
.sans-serif(normal, 14px);
margin: 0px;
margin-left: -15px;
padding: 3px 30px;
border: none;
color: @text;
.opacity(0.70);
&:hover {
.opacity(1.0);
background-color: transparent;
}
}
&.active {
a {
color: @dark;
}
}
}
}
}
}
.page-header {
margin: 10px 0px;
padding: 0px 20px;
h1 {
margin-top: 0px;
}
}
pre {
border: none;
background-color: @light;
.border-radius(0px);
padding: 10px;
margin-left: -20px;
padding-left: 30px;
margin-right: -20px;
padding-right: 30px;
code {
background: transparent;
border: none;
}
}
//Content pages float view
.float-view {
@media (min-width: 1150px) {
.content-page {
height: 100%;
overflow:auto;
padding: 0px !important;
background-color: transparent !important;
position: relative;
article {
width: 100%;
min-height: 100%;
overflow: auto;
position: relative;
z-index: 1;
&:before {
content: "";
width: 50%;
min-height: 100%;
overflow: auto;
background-color: white;
display: block;
margin: 0px;
position: absolute;
z-index: -1;
}
}
table {
float: left;
clear: left;
width: 47%;
margin-left: 1.5%;
margin-right: 1.5%;
background-color: white;
white-space: normal;
pre, code {
white-space: normal;
}
}
.page-header {
padding: 0px;
}
.page-header,
p, ul, ol, h2, h3,h4, h5, h6 {
float: left;
clear: left;
width: 47%;
margin-left: 1.5%;
margin-right: 1.5%;
background-color: white;
&:before {
content: "";
width: 100%;
height: 10px;
display: block;
clear: both;
//border-top: 1px solid @dark;
}
}
ul,ol {
li {
margin-left: 30px;
}
}
pre {
float: left;
clear: right;
width: 47%;
border: none;
border-left: 10px solid white;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
}
}
}
//Tables
table {
width: 100%;
border-bottom: 1px solid @lines;
margin-bottom: 10px;
tr {
th, td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid @lines;
border-left: 1px solid @lines;
border-color: @lines !important;
&:last-child {
border-right: 1px solid @lines;
}
}
}
}
//Footer
.footer {
position: fixed;
bottom:0;
left: 0;
padding: 15px;
}
//github ribbon
#github-ribbon {
position: absolute;
top: 50px;
right: 0;
z-index: 200;
}
.well {
&.well-sidebar {
.kill-box-shadow;
background-color: transparent;
.border-radius(0px);
border: none;
a {
font-size: 13px;
.roboto-slab.regular;
color: @light;
line-height: 28px;
}
.twitter {
hr {
border-bottom: none;
margin-left: -20px;
margin-right: -20px;
}
}
}
}
/* ===========================================================================================
Code Highlighting
============================================================================================== */
pre code {
display: block; padding: 0.5em;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
color: @dark;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .markdown .header {
color: @syntax-string;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .markdown .blockquote {
color: @syntax-comment;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .markdown .bullet,
pre .markdown .link_url {
color: @syntax-number;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .coffeescript .property {
color: @syntax-label;
}
pre .keyword,
pre .id,
pre .phpdoc,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .markdown .strong,
pre .request,
pre .status {
font-weight: bold;
}
pre .markdown .emphasis {
font-style: italic;
}
pre .nginx .built_in {
font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.5;
}

View File

@ -5,5 +5,8 @@
"dependencies": { "dependencies": {
"grunt": "~0.4.1", "grunt": "~0.4.1",
"grunt-php": "~0.1.1" "grunt-php": "~0.1.1"
},
"devDependencies": {
"grunt-contrib-less": "~0.5.2"
} }
} }