ReUse Bootstrap plus some fixes

This commit is contained in:
LeoColomb 2014-02-16 12:43:16 +01:00
parent 817ac08091
commit 163dca128a
3 changed files with 581 additions and 515 deletions

View File

@ -2,317 +2,355 @@
Componenets Componenets
============================================================================================== */ ============================================================================================== */
a { a {
color: @light; color: @light;
} }
.btn { .btn {
&.btn-sidebar { &.btn-sidebar {
padding: 7px 10px; padding: 7px 10px;
.kill-background-image; .kill-background-image;
.kill-box-shadow; .kill-box-shadow;
background-color: @sidebar-hover; background-color: @sidebar-hover;
border: none; border: none;
.icon-bar {
display: block; .icon-bar {
width: 18px; display: block;
height: 2px; width: 18px;
margin-top: 2px; height: 2px;
margin-bottom: 3px; margin-top: 2px;
background-color: @dark; margin-bottom: 3px;
.kill-box-shadow; background-color: @dark;
} .kill-box-shadow;
&:hover { }
.kill-box-shadow;
background-color: @dark; &:hover {
.icon-bar { .kill-box-shadow;
background-color: @light; background-color: @dark;
.kill-box-shadow;
} .icon-bar {
} background-color: @light;
} .kill-box-shadow;
}
}
}
} }
code { code {
color: @light; color: @light;
} }
//Navbar //Navbar
.navbar { .navbar {
.box-shadow(); .box-shadow();
z-index: 1; margin-bottom: 0px;
margin-bottom: 0px; z-index: 200;
z-index: 200;
.navbar-inner { .navbar-inner {
.kill-background-image; .kill-background-image;
background-color: @dark; background-color: @dark;
border-bottom: none; border-bottom: none;
padding: 6px 20px; padding: 6px 20px;
.brand {
color: @light; .brand {
text-shadow:none; color: @light;
.roboto-slab.bold; text-shadow: none;
} .roboto-slab.bold;
.navbar-text { }
color: @light;
a { .navbar-text {
color: @light; color: @light;
}
} a {
@media (max-width: 767px) { color: @light;
padding: 6px 10px; }
.navbar-text { }
line-height: 16px;
margin: 12px 6px; @media (max-width: 767px) {
font-size: 12px; padding: 6px 10px; .navbar-text {
} line-height: 16px;
} margin: 12px 6px;
} font-size: 12px;
@media (min-width: 768px) and (max-width: 979px) { }
&.navbar-fixed-top { }
position: fixed; }
}
} @media (min-width: 768px) and (max-width: 979px) {
@media (max-width: 767px) { &.navbar-fixed-top {
&.navbar-fixed-top { position: fixed;
margin-left: 0px; }
margin-right: 0px; }
}
} @media (max-width: 767px) {
&.navbar-fixed-top {
margin-left: 0px;
margin-right: 0px;
}
}
} }
//Sidebar Nav List //Sidebar Nav List
.nav.nav-list { .nav.nav-list {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
li {
a { li {
margin: 0px; a {
padding: 6px 15px; margin: 0px;
.roboto-slab.regular; padding: 6px 15px;
color: @dark; .roboto-slab.regular;
font-size: 15px; color: @dark;
text-shadow:none; font-size: 15px;
border-top: 1px solid @lines; text-shadow: none;
&:hover { border-top: 1px solid @lines;
color: @dark;
text-shadow:none; &:hover {
background-color: @sidebar-hover; color: @dark;
} text-shadow: none;
} background-color: @sidebar-hover;
&.active { }
a { }
background-color: @sidebar-hover;
} &.active {
} a {
&.open { background-color: @sidebar-hover;
> ul { }
display: block; }
}
} &.open {
&:last-child { > ul {
&.open { display: block;
//border-bottom: none; }
} }
}
ul { &:last-child {
display: none; &.open {
margin-left: 15px; //border-bottom: none;
li { }
a { }
.sans-serif(normal, 14px);
margin: 0px; ul {
margin-left: -15px; display: none;
padding: 3px 30px; margin-left: 15px;
border: none;
color: @text; li {
.opacity(0.70); a {
&:hover { .sans-serif(normal, 14px);
.opacity(1.0); margin: 0px;
background-color: transparent; margin-left: -15px;
} padding: 3px 30px;
} border: none;
&.active { color: @text;
a { .opacity(0.70);
color: @dark;
} &:hover {
} .opacity(1.0);
} background-color: transparent;
} }
} }
&.active {
a {
color: @dark;
}
}
}
}
}
} }
.page-header { .page-header {
margin: 10px 0px; margin: 10px 0px;
padding: 0px; padding: 0px;
h1 {
margin-top: 0px; h1 {
} margin-top: 0px;
sub-heading { display: inline-block;
padding: 0px, 0px, 20px; }
}
sub-heading {
padding: 0px, 0px, 20px;
}
} }
pre { pre {
border: none; border: none;
background-color: @light; background-color: @light;
.border-radius(0px); border-radius: 0;
padding: 10px; padding: 10px;
margin-left: -20px; margin-left: -20px;
padding-left: 30px; padding-left: 30px;
margin-right: -20px; margin-right: -20px;
padding-right: 30px; padding-right: 30px;
code {
background: transparent; code {
border: none; background: transparent;
} border: none;
}
} }
//Content pages float view //Content pages float view
.float-view { .float-view {
@media (min-width: 1150px) { @media (min-width: 1150px) {
.content-page { .content-page {
height: 100%; height: 100%;
overflow:auto; overflow: auto;
padding: 0px !important; padding: 0px !important;
background-color: transparent !important; background-color: transparent !important;
position: relative; position: relative;
article { article {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: auto; overflow: auto;
position: relative; position: relative;
z-index: 1; z-index: 1;
&:before {
content: ""; &:before {
width: 50%; content: "";
min-height: 100%; width: 50%;
overflow: auto; min-height: 100%;
background-color: white; overflow: auto;
display: block; background-color: white;
margin: 0px; display: block;
position: absolute; margin: 0px;
z-index: -1; position: absolute;
} z-index: -1;
} }
.hideCode:before {
width:100% !important;
} }
table {
float: left; .hideCode:before {
clear: left; width: 100% !important;
width: 47%; }
margin-left: 1.5%;
margin-right: 1.5%; table {
background-color: white; float: left;
white-space: normal; clear: left;
pre, code { width: 47%;
white-space: normal; margin-left: 1.5%;
} margin-right: 1.5%;
} background-color: white;
.page-header { white-space: normal;
padding: 0px;
} pre, code {
.page-header, white-space: normal;
p, ul, ol, dl, h2, h3,h4, h5, h6 { }
float: left; }
clear: left;
width: 47%; .page-header {
margin-left: 1.5%; padding: 0px;
margin-right: 1.5%; }
background-color: white;
&:before { .page-header,
content: ""; p, ul, ol, dl, h2, h3, h4, h5, h6 {
width: 100%; float: left;
height: 10px; clear: left;
display: block; width: 47%;
clear: both; margin-left: 1.5%;
//border-top: 1px solid @dark; margin-right: 1.5%;
} background-color: white;
p, ul, ol, dl, h2, h3,h4, h5, h6, pre {
float: none; &:before {
display: block; content: "";
} width: 100%;
} height: 10px;
.hideCode2 { display: block;
width: 900px !important; clear: both;
width: calc(100% - 130px) !important; //border-top: 1px solid @dark;
} }
ul,ol {
li { p, ul, ol, dl, h2, h3, h4, h5, h6, pre {
margin-left: 30px; float: none;
} display: block;
} }
pre { }
float: left;
clear: right; .hideCode2 {
width: 47%; width: 900px !important;
border: none; width: calc(100% - 130px) !important;
border-left: 10px solid white; }
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px; ul, ol {
} li {
hideCode3 { margin-left: 30px;
display: none; }
} }
}
} pre {
float: left;
clear: right;
width: 47%;
border: none;
border-left: 10px solid white;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;
}
hideCode3 {
display: none;
}
}
}
} }
//Tables //Tables
table { table {
width: 100%; width: 100%;
border-bottom: 1px solid @lines; border-bottom: 1px solid @lines;
margin-bottom: 10px; margin-bottom: 10px;
tr {
th, td { tr {
padding: 8px; th, td {
line-height: 20px; padding: 8px;
text-align: left; line-height: 20px;
vertical-align: top; text-align: left;
border-top: 1px solid @lines; vertical-align: top;
border-left: 1px solid @lines; border-top: 1px solid @lines;
border-color: @lines !important; border-left: 1px solid @lines;
&:last-child { border-color: @lines !important;
border-right: 1px solid @lines;
} &:last-child {
} border-right: 1px solid @lines;
} }
}
}
} }
//Footer //Footer
.footer { .footer {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left: 0; left: 0;
padding: 15px; padding: 15px;
} }
//github ribbon //github ribbon
#github-ribbon { #github-ribbon {
position: absolute; position: absolute;
top: 50px; top: 50px;
right: 0; right: 0;
z-index: 200; z-index: 200;
} }
.well { .well {
&.well-sidebar { &.well-sidebar {
.kill-box-shadow; .kill-box-shadow;
background-color: transparent; background-color: transparent;
.border-radius(0px); border-radius: 0;
border: none; 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;
}
}
}
}
a {
font-size: 13px;
.roboto-slab.regular;
color: @light;
line-height: 28px;
}
.twitter {
hr {
border-bottom: none;
margin-left: -20px;
margin-right: -20px;
}
}
}
}

View File

@ -4,33 +4,32 @@ Base CSS
//Fonts //Fonts
.roboto-slab { .roboto-slab {
&.light { font-family: 'Roboto Slab', @font-family-sans-serif;
font-family: 'Roboto Slab', serif;
font-weight: 100; &.light {
} font-weight: 100;
&.book { }
font-family: 'Roboto Slab', serif;
font-weight: 300; &.book {
} font-weight: 300;
&.regular { }
font-family: 'Roboto Slab', serif;
font-weight: 400; &.regular {
} font-weight: 400;
&.bold { }
font-family: 'Roboto Slab', serif;
font-weight: 700; &.bold {
} font-weight: 700;
}
} }
//Typography //Typography
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
.roboto-slab.book; .roboto-slab.book;
} }
a {
}
pre { pre {
padding: 0; padding: 0;
} }
/* =========================================================================================== /* ===========================================================================================
@ -38,122 +37,138 @@ Homepage
============================================================================================== */ ============================================================================================== */
.homepage-hero { .homepage-hero {
padding-top: 50px !important; padding-top: 50px !important;
background-color: @light; background-color: @light;
.kill-box-shadow; .kill-box-shadow;
.border-radius(0px); border-radius: 0px;
border: none; border: none;
color: @dark; color: @dark;
overflow: hidden; overflow: hidden;
@media (max-width: 767px) {
padding-top: 0px !important; @media (max-width: 767px) {
} padding-top: 0px !important;
.text-center { }
.roboto-slab.bold;
margin: 10px 0px; .text-center {
} .roboto-slab.bold;
h2 { margin: 10px 0px;
margin: 20px 0px; }
}
.homepage-image { h2 {
//.box-shadow(10px, rgba(0,0,0,0.20), 0px, 0px); margin: 20px 0px;
} }
} }
.hero-buttons.container-fluid { .hero-buttons.container-fluid {
padding: 20px 0px; padding: 20px 0px;
background-color: @sidebar-hover; background-color: @sidebar-hover;
.btn-hero.btn {
.roboto-slab.bold; .btn-hero.btn {
padding: 20px 30px; .roboto-slab.bold;
.kill-background-image; padding: 20px 30px;
.kill-box-shadow; .kill-background-image;
.border-radius(0px); .kill-box-shadow;
text-shadow:none; border-radius: 0px;
border: none; text-shadow: none;
.opacity(0.80); border: none;
margin: 0px 10px; .opacity(0.80);
text-transform: uppercase; margin: 0px 10px;
border: 5px solid @dark; text-transform: uppercase;
@media (max-width: 767px) { border: 5px solid @dark;
display: block;
margin-bottom: 10px; @media (max-width: 767px) {
} display: block; margin-bottom: 10px;
&:hover { }
.opacity(1.0);
} &:hover {
&.btn-secondary { .opacity(1.0);
background-color: @sidebar-hover; }
color: @dark;
} &.btn-secondary {
&.btn-primary { background-color: @sidebar-hover;
background-color: @dark; color: @dark;
color: @sidebar-background; }
}
} &.btn-primary {
background-color: @dark;
color: @sidebar-background;
}
}
} }
.homepage-content.container-fluid { .homepage-content.container-fluid {
// color: white; // color: white;
// background-color: @text; // background-color: @text;
background-color: white; background-color: white;
padding: 40px 0px; padding: 40px 0px;
.lead {
.roboto-slab.regular;
}
ul, ol {
padding: 20px 0px;
margin: 0 0 10px 0px;
li {
list-style: none;
padding-bottom: 5px;
&:before {
content: '';
width: 0px;
height: 0px;
border: 3px solid transparent;
border-left: 3px solid @light;
float: left;
display: block;
margin: 6px;
}
}
}
@media (max-width: 767px) { .lead {
padding: 40px 20px; .roboto-slab.regular;
} }
ul, ol {
padding: 20px 0px;
margin: 0 0 10px 0px;
li {
list-style: none;
padding-bottom: 5px;
&:before {
content: '';
width: 0px;
height: 0px;
border: 3px solid transparent;
border-left: 3px solid @light;
float: left;
display: block;
margin: 6px;
}
}
}
@media (max-width: 767px) {
padding: 40px 20px;
}
} }
.homepage-footer.container-fluid { .homepage-footer.container-fluid {
background-color: @dark; background-color: @dark;
.kill-box-shadow; .kill-box-shadow;
.border-radius(0px); border-radius: 0px;
color: light; color: light;
border: none; border: none;
@media (max-width: 767px) {
padding: 0 20px; @media (max-width: 767px) {
} padding: 0 20px;
.footer-nav { }
margin: 40px 0px;
li { .footer-nav {
list-style: none; margin: 40px 0px;
a {
.roboto-slab.bold; li {
font-size: 16px; list-style: none;
line-height: 32px;
&:hover { a {
color: @light; .roboto-slab.bold;
text-decoration: underline; font-size: 16px;
} line-height: 32px;
}
} &:hover {
} color: @light;
.twitter { text-decoration: underline;
margin-top: 20px; }
} }
.twitter:first-child { }
margin-top: 40px; }
}
.twitter {
margin-top: 20px;
}
.twitter:first-child {
margin-top: 40px;
}
} }
/* =========================================================================================== /* ===========================================================================================
@ -161,7 +176,7 @@ Docs Body & Page Structure
============================================================================================== */ ============================================================================================== */
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
background-color: @light; background-color: @light;
@ -175,121 +190,132 @@ html, body {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
&.fluid-height { &.fluid-height {
height: 100%; height: 100%;
} }
} }
.columns { .columns {
height: 100%; height: 100%;
.left-column, .left-column,
.right-column { .right-column {
padding-top: 50px; padding-top: 50px;
@media (max-width: 767px) {
width: 100% !important; @media (max-width: 767px) {
padding-top: 0px; width: 100% !important; padding-top: 0px; height: auto;
height: auto; }
}
} }
.left-column { .left-column {
background-color: @sidebar-background; background-color: @sidebar-background;
border-right: 1px solid @lines; border-right: 1px solid @lines;
overflow-x: hidden; overflow-x: hidden;
} }
.right-column {
&.span9 { .right-column {
width: 76.4866339334%; &.span9 {
margin-left: 0px; width: 76.4866339334%;
@media (min-width: 1200px) { margin-left: 0px;
width: 76.8866339334%;
} @media (min-width: 1200px) {
} width: 76.8866339334%;
.content-page { }
padding: 20px; }
min-height: 100%;
background-color: white; .content-page {
} padding: 20px;
} min-height: 100%;
background-color: white;
}
}
} }
.content-area, .article-tree { .content-area, .article-tree {
overflow:auto; overflow: auto;
height: 100%; height: 100%;
padding: 0px; padding: 0px;
} }
//mobile friendly sub-nav //mobile friendly sub-nav
.responsive-collapse { .responsive-collapse {
padding: 10px 15px; padding: 10px 15px;
display: none; display: none;
background-color: @lines; background-color: @lines;
border-bottom: 1px solid @lines; border-bottom: 1px solid @lines;
@media (max-width: 767px) {
display: block; @media (max-width: 767px) {
} display: block;
}
} }
.sub-nav-collapse { .sub-nav-collapse {
@media (max-width: 768px) { @media (max-width: 768px) {
display: none; display: none;
} }
@media (min-width: 768px) {
display: block; @media (min-width: 768px) {
} display: block;
}
} }
//CSS For Fluid Tables //CSS For Fluid Tables
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */
table, table,
thead, thead,
tbody, tbody,
th, th,
td, td,
tr { tr {
display: block; display: block;
border: none; border: none;
} }
/* Hide table headers (but not display: none;, for accessibility) */ /* Hide table headers (but not display: none;, for accessibility) */
thead tr { thead tr {
position: absolute; position: absolute;
top: -9999px; top: -9999px;
left: -9999px; left: -9999px;
} }
tr { tr {
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc;
td, th {
border: 1px solid #ccc;
border-bottom:none;
}
}
td { td, th {
/* Behave like a "row" */ border: 1px solid #ccc;
border: none; border-bottom: none;
border-bottom: 1px solid #eee; }
position: relative; }
padding-left: 50% !important;
white-space: normal;
text-align:left;
}
td:before { td {
/* Now like a table header */ /* Behave like a "row" */
position: absolute; border: none;
/* Top/left values mimic padding */ border-bottom: 1px solid #eee;
top: 6px; position: relative;
left: 6px; padding-left: 50% !important;
width: 45%; white-space: normal;
padding-right: 10px; text-align: left;
white-space: nowrap; }
text-align:left;
font-weight: bold;
}
/* td:before {
Label the data /* Now like a table header */
*/ position: absolute;
td:before { content: attr(data-title); } /* 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);
}
} }

View File

@ -3,31 +3,33 @@ Markdown editor
============================================================================================== */ ============================================================================================== */
.editor { .editor {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background: white; background: white;
padding: 20px; padding: 20px;
padding-bottom: 100px; padding-bottom: 100px;
min-height: 100%; min-height: 100%;
height: auto; height: auto;
display: none; display: none;
h3 {
width: 100%!important; h3 {
} width: 100% !important;
&.paddingTop { }
padding-top: 50px;
} &.paddingTop {
padding-top: 50px;
}
} }
#markdown_editor { #markdown_editor {
width: 85%; width: 85%;
margin: 0 auto; margin: 0 auto;
padding: 10px; padding: 10px;
height: auto; height: auto;
font-size: 16px; font-size: 16px;
min-height: 100px; min-height: 100px;
font-family: "Ubuntu Mono", "Consolas", monospace; font-family: "Ubuntu Mono", "Consolas", monospace;
display: block; display: block;
} }