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.
Cette révision appartient à :
Garrett Moon 2013-06-10 17:26:54 -05:00
Parent a60c5c1959
révision 03b00ae1f9
16 fichiers modifiés avec 28982 ajouts et 87 suppressions

6841
css/daux-blue.css Fichier normal

Fichier diff supprimé car celui-ci est trop grand Voir la Diff

6841
css/daux-green.css Fichier normal

Fichier diff supprimé car celui-ci est trop grand Voir la Diff

6841
css/daux-navy.css Fichier normal

Fichier diff supprimé car celui-ci est trop grand Voir la Diff

6841
css/daux-red.css Fichier normal

Fichier diff supprimé car celui-ci est trop grand Voir la Diff

Voir le fichier

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

BIN
img/glyphicons-halflings-white.png Fichier exécutable

Fichier binaire non affiché.

Après

Largeur:  |  Hauteur:  |  Taille: 8.6 KiB

BIN
img/glyphicons-halflings.png Fichier exécutable

Fichier binaire non affiché.

Après

Largeur:  |  Hauteur:  |  Taille: 12 KiB

132
index.php
Voir le fichier

@ -815,70 +815,16 @@ $tree = get_tree("docs");
<!DOCTYPE html>
<html>
<head>
<title><?=$options['title']; ?></title>
<!-- Mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://s3.amazonaws.com/todaymade/tools/tm-docs/themes/<?=$options['theme'];?>.css">
<style type="text/css">
html, body {
margin: 0;
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>
<link rel="stylesheet" href="/js/bootstrap.min.js">
<!-- Custom -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/css/daux-blue.css">
<!-- 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>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>
<? } ?>
<div class="container-fluid wrapper">
<div class="navbar navbar-static-top">
<div class="navbar navbar-fixed-top">
<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 class="row-fluid columns content">
<div class="span2 article-tree">
<!-- Navigation -->
<? echo build_nav($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 -->
<? echo build_nav($tree); ?>
<!-- Links -->
<? if (!empty($options['links'])) { ?>
<div class="well">
<? foreach($options['links'] as $name => $url) { ?>
<a href="<?=$url;?>" target="_blank"><?=$name;?></a><br>
<? } ?>
</div>
<? } ?>
<!-- Twitter -->
<? if (!empty($options['twitter'])) { ?>
<? foreach($options['twitter'] as $handle) { ?>
<div class="extra twitter">
<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>
<!-- Links -->
<? if (!empty($options['links'])) { ?>
<div class="well well-sidebar">
<? foreach($options['links'] as $name => $url) { ?>
<a href="<?=$url;?>" target="_blank"><?=$name;?></a><br>
<? } ?>
<!-- Twitter -->
<? if (!empty($options['twitter'])) { ?>
<? foreach($options['twitter'] as $handle) { ?>
<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>
</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">
<? echo load_page($tree); ?>
<div class="right-column float-view content-area span9">
<div class="content-page">
<article>
<? echo load_page($tree); ?>
</article>
</div>
</div>
</div>
</div>

7
js/bootstrap.min.js externe Fichier exécutable

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

13
less/daux-blue.less Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 externe Fichier exécutable

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

631
less/import/daux-base.less Fichier normal
Voir le fichier

@ -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;
}

Voir le fichier

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