gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-19 17:15:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Font settings, closes #102

Browse Source
This commit is contained in:
Herman Starikov
2014-04-19 13:46:14 -04:00
parent a0ae34a3b7
commit 2a38d33d8a
15 changed files with 600 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/assets/app.js
+1 -1
View File
File diff suppressed because one or more lines are too long
theme/assets/style.css
+1 -1
View File
File diff suppressed because one or more lines are too long
theme/javascript/app.js
+6 -2
View File
@@ -9,8 +9,9 @@ require([
"core/navigation",
"core/progress",
"core/sidebar",
"core/search"
], function($, storage, analytic, sharing, state, keyboard, navigation, progress, sidebar, search){
"core/search",
"core/font-settings"
], function($, storage, analytic, sharing, state, keyboard, navigation, progress, sidebar, search, fontSettings){
$(document).ready(function() {
var $book;
$book = state.$book;
@@ -34,5 +35,8 @@ require([
// Init navigation
navigation.init();
//Init font settings
fontSettings.init();
});
});
theme/javascript/core/font-settings.js
+89
View File
@@ -0,0 +1,89 @@
define([
"jQuery",
"utils/storage"
], function($, storage) {
var fontState, toggle,bookBody,dropdown, book;
var togglePopover = function(e) {
dropdown.toggleClass("open");
e.stopPropagation();
e.preventDefault();
};
var closePopover = function(e) {
dropdown.removeClass("open");
}
var enlargeFontSize = function(e){
if (fontState.size < 4){
bookBody.toggleClass("font-size-"+fontState.size);
fontState.size++;
bookBody.toggleClass("font-size-"+fontState.size);
fontState.save();
}
};
var reduceFontSize = function(e){
if (fontState.size > 0){
bookBody.toggleClass("font-size-"+fontState.size);
fontState.size--;
bookBody.toggleClass("font-size-"+fontState.size);
fontState.save();
}
};
var changeFontFamily = function(index,el){
bookBody.toggleClass("font-family-"+fontState.family);
$($(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")")[0])
.removeClass("active");
fontState.family = index;
bookBody.toggleClass("font-family-"+fontState.family);
el.addClass("active");
fontState.save();
}
var changeColorTheme = function(index){
if (fontState.theme !== 0)
book.removeClass("color-theme-"+fontState.theme);
fontState.theme = index;
if (fontState.theme !== 0)
book.addClass("color-theme-"+fontState.theme);
fontState.save();
}
var init = function() {
//Find and save DOM elements.
book = $($(".book")[0]);
toggle = $(book.find(".book-header .toggle-font-settings")[0]);
dropdown = $(book.find("#font-settings-wrapper .dropdown-menu")[0]);
bookBody = $(book.find(".book-body")[0]);
//Instantiate font state object
fontState = storage.get("fontState", {size:1,family:0,theme:0});
bookBody.addClass("font-size-"+fontState.size);
bookBody.addClass("font-family-"+fontState.family);
$($(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")")[0])
.addClass("active");
if(fontState.theme !== 0)
book.addClass("color-theme-"+fontState.theme);
fontState.save = function(){
storage.set("fontState",fontState);
};
//Add event listeners
$("#enlarge-font-size").on("click", enlargeFontSize);
$("#reduce-font-size").on("click", reduceFontSize);
$(dropdown.find(".font-family-list li")).each(function(i){
$(this).on("click",function(){changeFontFamily(i,$(this))});
});
$(dropdown.find(".color-theme-list button")).each(function(i){
$(this).on("click",function(){changeColorTheme(i)});
});
toggle.on("click", togglePopover);
dropdown.on("click",function(e){e.stopPropagation();});
$(document).on("click", closePopover);
};
return {
init: init
}
});
theme/stylesheets/book/body.less
+49 -3
View File
@@ -6,6 +6,7 @@
left: 0px;
bottom: 0px;
color: @page-color;
background: @body-background;
.transition(left 0.5s ease);
@@ -23,7 +24,6 @@
outline: none;
.page-inner {
font-family: @font-family-serif;
max-width: 800px;
margin: 0px auto;
@@ -33,8 +33,6 @@
background: @page-background;
border-radius: 2px;
font-size: 16px;
line-height: 1.5em;
}
@@ -57,6 +55,28 @@
min-height: calc(~"100% - 57px")
}
}
&.font-size-0{
font-size:@s-font-size;
}
&.font-size-1{
font-size:@m-font-size;
}
&.font-size-2{
font-size:@l-font-size;
}
&.font-size-3{
font-size:@xl-font-size;
}
&.font-size-4{
font-size:@xxl-font-size;
}
&.font-family-0{
font-family: @font-family-serif;
}
&.font-family-1{
font-family: @font-family-sans;
}
}
&.with-summary {
@@ -72,4 +92,30 @@
.transition(none) !important;
}
}
&.color-theme-1{
.book-body {
color: @page-color-1;
background: @body-background-1;
.page-wrapper {
.page-inner {
section{
background: @page-background-1;
}
}
}
}
}
&.color-theme-2{
.book-body {
color: @page-color-2;
background: @body-background-2;
.page-wrapper {
.page-inner {
section{
background: @page-background-2;
}
}
}
}
}
}
theme/stylesheets/book/font-settings.less
+168
View File
@@ -0,0 +1,168 @@
.book-header{
#font-settings-wrapper{
position:relative;
.dropdown-menu{
background-color:@header-background;
border-color:@sidebar-divider-color;
.dropdown-caret{
position: absolute;
top: 14px;
left: -8px;
width: 10px;
height: 18px;
float: left;
overflow: hidden;
.caret-outer{
position: absolute;
border-bottom: 9px solid transparent;
border-top: 9px solid transparent;
border-right: 9px solid rgba(0,0,0,0.1);
height: auto;
left: 0;
top: 0;
width: auto;
display: inline-block;
margin-left: -1px;
}
.caret-inner{
position: absolute;
display: inline-block;
margin-left: -1px;
top: 0;
left: 1px;
border-bottom: 9px solid transparent;
border-top: 9px solid transparent;
border-right: 9px solid @header-background;
}
}
button{
border: 0;
background-color:transparent;
color:@header-button-color;
&:hover{
color:@header-button-hover-color;
background-color:@header-button-hover-background;
}
}
#enlarge-font-size{
width: 50%;
font-size:1.4em;
}
#reduce-font-size{
width: 50.5%;
font-size:1em;
}
.btn-group-xs{
.btn{
width: 33.7%;
padding: initial;
&#color-theme-preview-0{
color:@header-button-color;
background-color:@header-background;
}
&#color-theme-preview-1{
color:@page-color-1;
background-color:@page-background-1;
}
&#color-theme-preview-2{
color:@header-button-color-2;
background-color:@sidebar-background-2;
}
}
}
.list-group{
margin: 5px 0;
.list-group-item{
cursor:pointer;
background-color:transparent;
border-color:@sidebar-divider-color;
border-width: 1px 0 !important;
&:hover{
color:@header-button-hover-color;
background-color:@header-button-hover-background !important;
}
&.active{
color:@header-button-hover-color;
background-color:@header-button-hover-background !important;
}
}
}
&.open{
display:block;
}
}
}
}
/*
* Theme 1
*/
.color-theme-1{
#font-settings-wrapper{
.dropdown-menu{
background-color:@sidebar-background-1;
border-color:@sidebar-divider-color-1;
.dropdown-caret .caret-inner{
border-right: 9px solid @sidebar-background-1;
}
button{
color:@header-button-color-1;
&:hover{
color:@header-button-hover-color-1;
background-color:@header-button-hover-background-1;
}
}
.list-group{
.list-group-item{
border-color:@sidebar-divider-color-1;
&:hover{
color:@header-button-hover-color-1;
background-color:@header-button-hover-background-1 !important;
}
&.active{
color:@header-button-hover-color-1;
background-color:@header-button-hover-background-1 !important;
}
}
}
}
}
}
/*
* Theme 2
*/
.color-theme-2{
#font-settings-wrapper{
.dropdown-menu{
background-color:@sidebar-background-2;
border-color:@sidebar-divider-color-2;
.dropdown-caret .caret-inner{
border-right: 9px solid @sidebar-background-2;
}
button{
color:@header-button-color-2;
&:hover{
color:@header-button-hover-color-2;
background-color:@header-button-hover-background-2;
}
}
.list-group{
.list-group-item{
border-color:@sidebar-divider-color-2;
&:hover{
color:@header-button-hover-color-2;
background-color:@header-button-hover-background-2 !important;
}
&.active{
color:@header-button-hover-color-2;
background-color:@header-button-hover-background-2 !important;
}
}
}
}
}
}
theme/stylesheets/book/header.less
+28 -1
View File
@@ -3,7 +3,7 @@
font-family: @font-family-sans;
position: fixed;
overflow: hidden;
overflow: visible;
top: 0px;
right: 0px;
left: 0px;
@@ -24,6 +24,7 @@
text-transform: uppercase;
line-height: @header-height;
.box-shadow(none) !important;
position:relative;
&:hover {
position: relative;
@@ -64,4 +65,30 @@
.transition(none) !important;
}
}
&.color-theme-1{
.book-header{
color: @header-color-1;
background: @header-background-1;
.btn {
color: @header-button-color-1;
&:hover {
color: @header-button-hover-color-1;
background: @header-button-hover-background-1;
}
}
}
}
&.color-theme-2{
.book-header{
color: @header-color-2;
background: @header-background-2;
.btn {
color: @header-button-color-2;
&:hover {
color: @header-button-hover-color-2;
background: @header-button-hover-background-2;
}
}
}
}
}
theme/stylesheets/book/markdown.less
+9 -5
View File
@@ -1,8 +1,13 @@
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal {
color:@page-color-1;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal {
color:@page-color-2;
}
.book .book-body .page-wrapper .page-inner section.normal {
padding: 25px;
padding-top: 15px;
background-color: white;
color:@page-color;
& > *:first-child {
margin-top: 0 !important; }
@@ -52,12 +57,12 @@
h1 {
font-size: 28px;
color: black; }
}
h2 {
font-size: 24px;
border-bottom: 1px solid #eee;
color: black; }
}
h3 {
font-size: 18px; }
@@ -69,7 +74,6 @@
font-size: 14px; }
h6 {
color: #777777;
font-size: 14px; }
p, blockquote, ul, ol, dl, table, pre {
theme/stylesheets/book/navigation.less
+10
View File
@@ -42,4 +42,14 @@
float: left;
}
}
}
.book.color-theme-1 .book-body {
.navigation:hover{
background-color: @body-pagination-background-1;
}
}
.book.color-theme-2 .book-body {
.navigation:hover{
background-color: @body-pagination-background-2;
}
}
theme/stylesheets/book/progress.less
+32 -1
View File
@@ -17,7 +17,6 @@
position: relative;
background: #fff;
margin-bottom: 20px;
z-index: 10;
.bar {
height: @bar-height;
@@ -81,4 +80,36 @@
}
}
}
}
.book.color-theme-1 .book-body {
.book-progress {
.bar {
background: @bar-background-1;
.inner {
background: @bar-progress-background-1;
}
}
}
.chapters .chapter{
background: @bar-background-1;
&.done{
background: @bar-progress-background-1;
}
}
}
.book.color-theme-2 .book-body {
.book-progress {
.bar {
background: @bar-background-2;
.inner {
background: @bar-progress-background-2;
}
}
}
.chapters .chapter{
background: @bar-background-2;
&.done{
background: @bar-progress-background-2;
}
}
}
theme/stylesheets/book/summary.less
+88
View File
@@ -141,3 +141,91 @@
}
}
}
/*
* Theme 1
*/
.book.color-theme-1 {
.book-summary {
color: @sidebar-color-1;
background: @sidebar-background-1;
.book-search {
background: @sidebar-search-background-1;
input, input:focus {
border: 1px solid @sidebar-search-input-border-color-1;
}
}
ul.summary {
li {
&.divider {
background: @sidebar-divider-color-1;
}
i.fa-check {
color: @sidebar-icon-color-1;
}
&.done > a {
color: @sidebar-link-completed-1;
}
a, span {
color: @sidebar-link-color-1;
background: @sidebar-link-background-1;
}
&.active > a, a:hover {
color: @sidebar-link-hover-color-1;
background: @sidebar-link-hover-background-1;
}
}
}
}
}
/*
* Theme 2
*/
.book.color-theme-2{
.book-summary {
color: @sidebar-color-2;
background: @sidebar-background-2;
.book-search {
background: @sidebar-search-background-2;
input, input:focus {
border: 1px solid @sidebar-search-input-border-color-2;
}
}
ul.summary {
li {
&.divider {
background: @sidebar-divider-color-2;
}
i.fa-check {
color: @sidebar-icon-color-2;
}
&.done > a {
color: @sidebar-link-completed-2;
}
a, span {
color: @sidebar-link-color-2;
background: @sidebar-link-background-2;
}
&.active > a, a:hover {
color: @sidebar-link-hover-color-2;
background: @sidebar-link-hover-background-2;
}
}
}
}
}
theme/stylesheets/main.less
+1
View File
@@ -10,6 +10,7 @@
@import "book/languages.less";
@import "book/header.less";
@import "book/summary.less";
@import "book/font-settings.less";
@import "book/body.less";
@import "book/exercise.less";
@import "book/quiz.less";
theme/stylesheets/variables.less
+90
View File
@@ -38,6 +38,7 @@
@sidebar-link-completed-weight: normal;
// Page
@page-color: black;
@page-background: white;
// Progress Bar
@@ -79,5 +80,94 @@
@font-family-sans: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-base: @font-family-serif;
@FontPath: '@{staticPath}/fonts';
@fa-font-path: "@{FontPath}/fontawesome";
@s-font-size: 1.2rem;
@m-font-size: 1.4rem;
@l-font-size: 1.6rem;
@xl-font-size: 2.2rem;
@xxl-font-size: 4.0rem;
/*
,--------.,--.
'--. .--'| ,---. ,---. ,--,--,--. ,---. ,---. .--.
| | | .-. || .-. :| || .-. :( .-' '--'
| | | | | |\ --.| | | |\ --..-' `).--.
`--' `--' `--' `----'`--`--`--' `----'`----' '--'
*/
// Header
@header-color-1: #AFA790;
@header-color-2: #7e888b;
@header-background-1: #ECE3C4;
@header-background-2: #1d1f21;
@header-button-color-1: #AFA790;
@header-button-color-2: #7e888b;
@header-button-hover-color-1: #73553C;
@header-button-hover-color-2: #C9C9C9;
@header-button-hover-background-1: #E2DABE;
@header-button-hover-background-2: #0B0D0E;
// Body
@body-background-1: #F3EACB;
@body-background-2: #1d1f21;
@body-pagination-background-1: #FFFAEA;
@body-pagination-background-2: #33404D;
// Sidebar
@sidebar-color-1: #AFA790;
@sidebar-color-2: hsl(207, 15%, 80%);
@sidebar-background-1: hsl(207, 15%, 95%);
@sidebar-background-2: #111111;
@sidebar-search-background-1: transparent;
@sidebar-search-background-2: transparent;
@sidebar-search-input-border-color-1: #D6CFBA;
@sidebar-search-input-border-color-2: #c4cdd4;
@sidebar-divider-color-1: hsl(207, 15%, 85%);
@sidebar-divider-color-2: #1d1f21;
@sidebar-link-color-1: #877F6A;
@sidebar-link-color-2: hsl(207, 15%, 50%);
@sidebar-link-background-1: transparent;
@sidebar-link-background-2: transparent;
@sidebar-link-hover-color-1: #704214;
@sidebar-link-hover-color-2: hsl(207, 100%, 50%);
@sidebar-link-hover-background-1: transparent;
@sidebar-link-hover-background-2: transparent;
@sidebar-icon-color-1: @bar-progress-background;
@sidebar-icon-color-2: @bar-progress-background;
@sidebar-link-completed-1: hsl(207, 15%, 25%);
@sidebar-link-completed-2: hsl(207, 15%, 25%);
@sidebar-link-completed-weight-1: normal;
@sidebar-link-completed-weight-2: normal;
// Page
@page-color-1: #704214;
@page-color-2: #a4b1b1;
@page-background-1: #F3EACB;
@page-background-2: #1d1f21;
@bar-background-1: #F3EACB;
@bar-background-2: #1d1f21;
@bar-progress-background-1: #704214;
@bar-progress-background-2: hsl(120, 60%, 50%);
// Basics of a navbar
@navbar-default-border-1: #d5d5d5;
@navbar-default-border-2: #d5d5d5;
// Navbar brand label
@navbar-default-color-1: #333;
@navbar-default-color-2: #333;
@navbar-default-link-color-1: #333;
@navbar-default-link-color-2: #333;
@navbar-default-brand-color-1: @navbar-default-link-color;
@navbar-default-brand-color-2: @navbar-default-link-color;
@navbar-default-brand-hover-color-1: @navbar-default-link-color;
@navbar-default-brand-hover-color-2: @navbar-default-link-color;
@navbar-default-brand-hover-bg-1: transparent;
@navbar-default-brand-hover-bg-2: transparent;
theme/templates/includes/book/font-settings.html
+23
View File
@@ -0,0 +1,23 @@
<div class="dropdown-menu font-settings">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<div class="btn-group btn-block">
<button id="reduce-font-size" class="btn btn-default">A</button>
<button id="enlarge-font-size" class="btn btn-default">A</button>
</div>
<ul class="list-group font-family-list">
<li class="list-group-item">Serif</li>
<li class="list-group-item">Sans</li>
</ul>
<div class="btn-group btn-group-xs btn-block color-theme-list">
<button type="button" class="btn btn-default" id="color-theme-preview-0">White</button>
<button type="button" class="btn btn-default" id="color-theme-preview-1">Sepia</button>
<button type="button" class="btn btn-default" id="color-theme-preview-2">Night</button>
</div>
</div>
theme/templates/includes/book/header.html
+5
View File
@@ -5,6 +5,11 @@
{% endif %}
<a href="#" class="btn pull-left toggle-summary"><i class="fa fa-align-justify"></i></a>
<a href="#" class="btn pull-left toggle-search"><i class="fa fa-search"></i></a>
<span id="font-settings-wrapper">
<a href="#" class="btn pull-left toggle-font-settings"><i class="fa fa-font"></i>
</a>
{% include "./font-settings.html" %}
</span>
<!-- Actions Right -->
<a href="#" target="_blank" class="btn pull-right" data-sharing="google-plus"><i class="fa fa-google-plus"></i></a>