caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive layout

Browse Source
This commit is contained in:
benweet 2014-03-12 00:53:15 +00:00
parent b090015411
commit 865982e707
11 changed files with 179 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
public/res/core.js
View File

@ -329,6 +329,19 @@ define([
// Create the layout // Create the layout
var $editorButtonsElt; var $editorButtonsElt;
var maxWidthMap = [
{ screenWidth: 0, maxWidth: 600 },
{ screenWidth: 1000, maxWidth: 700 },
{ screenWidth: 1200, maxWidth: 800 },
{ screenWidth: 1400, maxWidth: 900 },
];
var maxWidthMapReversed = maxWidthMap.slice(0).reverse();
function getMaxWidth() {
var actualWidth = $(window).width();
return _.find(maxWidthMapReversed, function(value) {
return actualWidth > value.screenWidth;
}).maxWidth;
}
function createLayout() { function createLayout() {
var layoutGlobalConfig = { var layoutGlobalConfig = {
closable: true, closable: true,
@ -348,6 +361,12 @@ define([
north__minSize: 49, north__minSize: 49,
center__minWidth: 250, center__minWidth: 250,
center__minHeight: 180, center__minHeight: 180,
east__onAlert: function() {
window.location.href = 'viewer';
},
south__onAlert: function() {
window.location.href = 'viewer';
},
fxSettings: { fxSettings: {
easing: "easeInOutQuad", easing: "easeInOutQuad",
duration: 350 duration: 350
@ -371,7 +390,7 @@ define([
bottomMargin < 0 && (bottomMargin = 0); bottomMargin < 0 && (bottomMargin = 0);
aceEditor.renderer.setScrollMargin(0, bottomMargin, 0, 0); aceEditor.renderer.setScrollMargin(0, bottomMargin, 0, 0);
setTimeout(function() { setTimeout(function() {
var padding = (aceEditor.renderer.$size.scrollerWidth - settings.maxWidth) / 2; var padding = (aceEditor.renderer.$size.scrollerWidth - getMaxWidth()) / 2;
if(padding < constants.EDITOR_DEFAULT_PADDING) { if(padding < constants.EDITOR_DEFAULT_PADDING) {
padding = constants.EDITOR_DEFAULT_PADDING; padding = constants.EDITOR_DEFAULT_PADDING;
} }
@ -403,7 +422,6 @@ define([
south__minSize: 200 south__minSize: 200
})); }));
} }
settings.maxWidth && $('#preview-contents').css('max-width', (settings.maxWidth + 30) + 'px');
$(".navbar").click(function() { $(".navbar").click(function() {
layout.allowOverflow('north'); layout.allowOverflow('north');
}); });
@ -441,8 +459,8 @@ define([
var $titleContainer; var $titleContainer;
var marginWidth = 18 * 2 + 25 + 25; var marginWidth = 18 * 2 + 25 + 25;
var titleWidth = 18 + 348; var titleWidth = 18 + 348;
var leftButtonsWidth = 18 * 4 + 79 + 158 + 159 + 79; var leftButtonsWidth = 18 * 4 + 80 + 160 + 160 + 80;
var rightButtonsWidth = 18 + 79; var rightButtonsWidth = 18 + 80;
var buttonsDropdownWidth = 40; var buttonsDropdownWidth = 40;
function adjustWindow() { function adjustWindow() {
if(!window.viewerMode) { if(!window.viewerMode) {
@ -678,6 +696,49 @@ define([
else { else {
document.body.innerHTML = bodyIndexHTML; document.body.innerHTML = bodyIndexHTML;
} }
var styleContent = '';
// Apply font
function applyFont(size, screenWidth) {
screenWidth = screenWidth || 0;
//var codeFontSize = settings.editorFontSize;
//var codeLineHeight = Math.round(codeFontSize * 20 / 12);
var previewFontSize = Math.round(size * 8 / 7);
styleContent += [
'@media (min-width: ' + screenWidth + 'px) {',
'#wmd-input, .textarea-helper {',
' font-size: ' + size + 'px;',
//' font-family: ' + settings.editorFontFamily + ';',
'}',
'#preview-contents {',
' font-size: ' + previewFontSize + 'px;',
'}',
'}',
].join('\n');
}
applyFont(14);
applyFont(15, 600);
applyFont(16, 1200);
function applyMaxWidth(maxWidth, screenWidth) {
styleContent += [
'@media (min-width: ' + screenWidth + 'px) {',
'#preview-contents {',
' max-width: ' + (maxWidth + 30) + 'px;',
'}',
'}',
].join('\n');
}
_.each(maxWidthMap, function(entry) {
applyMaxWidth(entry.maxWidth, entry.screenWidth);
});
// Apply dynamic stylesheet
var style = document.createElement("style");
style.innerHTML = styleContent;
document.head.appendChild(style);
$navbarElt = $('.navbar'); $navbarElt = $('.navbar');
$leftBtnElts = $navbarElt.find('.left-buttons'); $leftBtnElts = $navbarElt.find('.left-buttons');
$rightBtnElts = $navbarElt.find('.right-buttons'); $rightBtnElts = $navbarElt.find('.right-buttons');
@ -781,27 +842,18 @@ define([
$('#wmd-input').replaceWith(function() { $('#wmd-input').replaceWith(function() {
return $('<textarea id="wmd-input">').addClass(this.className).addClass('form-control'); return $('<textarea id="wmd-input">').addClass(this.className).addClass('form-control');
}); });
// Create UI layout after textarea
createLayout();
} }
else {
// Create UI layout before ACE editor
createLayout();
$editorElt = $("#wmd-input, .textarea-helper").css({
// Apply editor font
"font-family": settings.editorFontFamily,
"font-size": settings.editorFontSize + "px",
"line-height": Math.round(settings.editorFontSize * (20 / 12)) + "px"
});
if(!window.lightMode) {
// ACE editor // ACE editor
createAceEditor(); createAceEditor();
// Editor's element
$editorElt.find('.ace_content').css({
"background-size": "64px " + Math.round(settings.editorFontSize * (20 / 12)) + "px",
});
} }
$editorElt = $('#wmd-input');
// UI layout
createLayout();
// Do periodic tasks // Do periodic tasks
intervalId = window.setInterval(function() { intervalId = window.setInterval(function() {

2
public/res/extensions/buttonPublish.js
View File

@ -33,7 +33,7 @@ define([
}; };
buttonPublish.onCreateButton = function() { buttonPublish.onCreateButton = function() {
var button = crel('button', { var button = crel('a', {
class: 'btn btn-success button-publish', class: 'btn btn-success button-publish',
title: 'Update document publication' title: 'Update document publication'
}, crel('i', { }, crel('i', {

2
public/res/extensions/buttonSync.js
View File

@ -56,7 +56,7 @@ define([
}; };
buttonSync.onCreateButton = function() { buttonSync.onCreateButton = function() {
var button = crel('button', { var button = crel('a', {
class: 'btn btn-success button-synchronize', class: 'btn btn-success button-synchronize',
title: 'Synchronize all' title: 'Synchronize all'
}, crel('i', { }, crel('i', {

38
public/res/html/bodyIndex.html
View File

@ -195,7 +195,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Manage documents</h3> <h2 class="modal-title">Manage documents</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div></div> <div></div>
@ -251,7 +251,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Hyperlink</h3> <h2 class="modal-title">Hyperlink</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Please provide the link URL and an optional title:</p> <p>Please provide the link URL and an optional title:</p>
@ -278,7 +278,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Image</h3> <h2 class="modal-title">Image</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Please provide the image URL and an optional title:</p> <p>Please provide the image URL and an optional title:</p>
@ -307,7 +307,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Google+ image import</h3> <h2 class="modal-title">Google+ image import</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-horizontal"> <div class="form-horizontal">
@ -351,7 +351,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Delete</h3> <h2 class="modal-title">Delete</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
@ -379,7 +379,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Open from URL</h3> <h2 class="modal-title">Open from URL</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Please provide a link to a Markdown document.</p> <p>Please provide a link to a Markdown document.</p>
@ -410,7 +410,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Import from disk</h3> <h2 class="modal-title">Import from disk</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Please select your Markdown files here:</p> <p>Please select your Markdown files here:</p>
@ -437,7 +437,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Convert HTML to Markdown</h3> <h2 class="modal-title">Convert HTML to Markdown</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Please select your HTML files here:</p> <p>Please select your HTML files here:</p>
@ -484,7 +484,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Export to Dropbox</h3> <h2 class="modal-title">Export to Dropbox</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
@ -532,7 +532,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Synchronization</h3> <h2 class="modal-title">Synchronization</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p class="msg-sync-list hide"> <p class="msg-sync-list hide">
@ -569,9 +569,9 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title"> <h2 class="modal-title">
Publish on <span class="publish-provider-name"></span> Publish on <span class="publish-provider-name"></span>
</h3> </h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-horizontal"> <div class="form-horizontal">
@ -825,7 +825,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Publication</h3> <h2 class="modal-title">Publication</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p class="msg-publish-list hide"> <p class="msg-publish-list hide">
@ -858,7 +858,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Sharing</h3> <h2 class="modal-title">Sharing</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p class="msg-share-list hide"> <p class="msg-share-list hide">
@ -893,7 +893,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Settings</h3> <h2 class="modal-title">Settings</h2>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a class="action-load-settings" <li class="active"><a class="action-load-settings"
href="#tabpane-settings-basic" data-toggle="tab">Basic</a></li> href="#tabpane-settings-basic" data-toggle="tab">Basic</a></li>
@ -1183,7 +1183,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Ooops...</h3> <h2 class="modal-title">Ooops...</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>StackEdit has stopped because another instance was running in <p>StackEdit has stopped because another instance was running in
@ -1205,7 +1205,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Redirection</h3> <h2 class="modal-title">Redirection</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p class="redirect-msg"></p> <p class="redirect-msg"></p>
@ -1225,7 +1225,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Reset application</h3> <h2 class="modal-title">Reset application</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>This will delete all your local documents.</p> <p>This will delete all your local documents.</p>
@ -1246,7 +1246,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Import documents and settings</h3> <h2 class="modal-title">Import documents and settings</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>This will delete all existing local documents.</p> <p>This will delete all existing local documents.</p>

2
public/res/html/dialogAutoSyncGdrive.html
View File

@ -4,7 +4,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">AutoSync to <%= providerName %></h3> <h2 class="modal-title">AutoSync to <%= providerName %></h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p>

2
public/res/html/dialogExportGdrive.html
View File

@ -4,7 +4,7 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3 class="modal-title">Export to <%= providerName %></h3> <h2 class="modal-title">Export to <%= providerName %></h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p>

3
public/res/libs/layout.js
View File

@ -793,6 +793,7 @@ $.layout.defaults = {
, onswap_end: null // CALLBACK when pane ENDS being Swapped , onswap_end: null // CALLBACK when pane ENDS being Swapped
, ondrag_start: null // CALLBACK when pane STARTS being ***MANUALLY*** Resized , ondrag_start: null // CALLBACK when pane STARTS being ***MANUALLY*** Resized
, ondrag_end: null // CALLBACK when pane ENDS being ***MANUALLY*** Resized , ondrag_end: null // CALLBACK when pane ENDS being ***MANUALLY*** Resized
, onAlert: null
} }
/* /*
* PANE-SPECIFIC SETTINGS * PANE-SPECIFIC SETTINGS
@ -3478,7 +3479,7 @@ $.fn.layout = function (opts) {
if (s.minSize > s.maxSize) { // INSUFFICIENT ROOM FOR PANE TO OPEN! if (s.minSize > s.maxSize) { // INSUFFICIENT ROOM FOR PANE TO OPEN!
syncPinBtns(pane, false); // make sure pin-buttons are reset syncPinBtns(pane, false); // make sure pin-buttons are reset
if (!noAlert && o.tips.noRoomToOpen) if (!noAlert && o.tips.noRoomToOpen)
alert(o.tips.noRoomToOpen); o.onAlert ? o.onAlert(o.tips.noRoomToOpen) : alert(o.tips.noRoomToOpen);
return queueNext(); // ABORT return queueNext(); // ABORT
} }

144
public/res/styles/base.less
View File

@ -9,99 +9,68 @@
@kbd-border-color: fade(@text-color, 25%); @kbd-border-color: fade(@text-color, 25%);
@blockquote-border-color: #eee; @blockquote-border-color: #eee;
@blockquote-bg: #f8f8f8; @blockquote-bg: #f8f8f8;
@title-base-size: 15px; @title-base-size: 1em;
@code-color: @text-color; @code-color: @text-color;
@code-bg: fade(@text-color, 4%); @code-bg: fade(@text-color, 4%);
@pre-bg: @blockquote-bg; @pre-bg: @blockquote-bg;
@pre-border-color: @blockquote-border-color; @pre-border-color: @blockquote-border-color;
@font-size-base: 15px;
@line-height-base: 1.45;
@p-margin: 1.1em;
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url("../font/OpenSans-Light-webfont.woff") format('woff'); src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url("../font/SourceSansPro-Light-webfont.woff") format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url("../font/OpenSans-Regular-webfont.woff") format('woff'); src: local('Source Sans Pro'), local('SourceSansPro'), url("../font/SourceSansPro-Regular-webfont.woff") format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url("../font/OpenSans-Bold-webfont.woff") format('woff'); src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url("../font/SourceSansPro-Bold-webfont.woff") format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url("../font/OpenSans-LightItalic-webfont.woff") format('woff'); src: local('Source Sans Pro Light Italic'), local('SourceSansProLight-Italic'), url("../font/SourceSansPro-LightItalic-webfont.woff") format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url("../font/OpenSans-Italic-webfont.woff") format('woff'); src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url("../font/SourceSansPro-Italic-webfont.woff") format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url("../font/OpenSans-BoldItalic-webfont.woff") format('woff'); src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url("../font/SourceSansPro-BoldItalic-webfont.woff") format('woff');
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('../font/OpenSans-Light-webfont.svg') format('svg');
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('../font/OpenSans-Regular-webfont.svg') format('svg');
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../font/OpenSans-Bold-webfont.svg') format('svg');
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url('../font/OpenSans-LightItalic-webfont.svg') format('svg');
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../font/OpenSans-Italic-webfont.svg') format('svg');
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../font/OpenSans-BoldItalic-webfont.svg') format('svg');
}
} }
@font-family-sans-serif: 'Open Sans', "Trebuchet MS", Helvetica, sans-serif; @font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url("../font/SourceCodePro-Regular-webfont.woff") format('woff');
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 700;
src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url("../font/SourceCodePro-Bold-webfont.woff") format('woff');
}
@font-family-sans-serif: "Source Sans Pro", sans-serif;
@font-family-monospace: "Source Code Pro", monospace;
@font-family-monospace-letter-spacing: -0.06em;
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -131,43 +100,32 @@ a code {
color: inherit; color: inherit;
} }
h1 { font-size: floor(@title-base-size * 2.60); } h1 { font-size: @title-base-size * 2.60; }
h2 { font-size: floor(@title-base-size * 2.15); } h2 { font-size: @title-base-size * 2.15; }
h3 { font-size: ceil(@title-base-size * 1.70); } h3 { font-size: @title-base-size * 1.70; }
h4 { font-size: ceil(@title-base-size * 1.25); } h4 { font-size: @title-base-size * 1.25; }
h5 { font-size: @title-base-size; } h5 { font-size: @title-base-size; }
h6 { font-size: ceil(@title-base-size * 0.85); } h6 { font-size: @title-base-size * 0.85; }
h1 { h1, h2, h3, h4, h5, h6 {
margin: 60px 0 60px; margin: 1.3em 0;
}
h2 {
margin: 50px 0 50px;
}
h3 {
margin: 40px 0 40px;
}
h4, h5, h6 {
margin: 25px 0 25px;
} }
p, p,
pre, pre,
pre.prettyprint, pre.prettyprint,
blockquote { blockquote {
margin: 0 0 15px; margin: 0 0 @p-margin;
} }
hr { hr {
margin: 30px 0; margin: 2em 0;
} }
code, pre { code, pre {
font-family: Menlo, Consolas, "Courier New", monospace; font-family: @font-family-monospace;
font-size: 12px !important; letter-spacing: @font-family-monospace-letter-spacing;
font-size: 0.95em !important;
} }
pre, pre.prettyprint { pre, pre.prettyprint {
@ -229,8 +187,8 @@ blockquote {
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
padding: 15px 20px; padding: 15px 20px;
p { p {
margin-bottom: 15px; margin-bottom: @p-margin;
font-size: @font-size-base; font-size: 1em;
line-height: @line-height-base; line-height: @line-height-base;
} }
@ -241,9 +199,9 @@ blockquote {
} }
ul,ol { ul,ol {
margin-bottom: 15px; margin-bottom: @p-margin;
ul,ol { ul,ol {
margin-bottom: 15px; margin-bottom: @p-margin;
} }
} }
@ -279,14 +237,14 @@ kbd {
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
display: inline-block; display: inline-block;
line-height: 14px; line-height: 1.2em;
vertical-align: middle; vertical-align: middle;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
// Custom icons (not from Font Awesome) // Custom icons (not from Font Awesome)
.icon-code { .icon-code {
font-size: 80%; font-size: 83%;
&:before { &:before {
margin-left: 0.1em; margin-left: 0.1em;
margin-right: 0.6em; margin-right: 0.6em;

73
public/res/styles/main.less
View File

@ -57,6 +57,7 @@
@document-panel-width: 320px; @document-panel-width: 320px;
@jgrowl-width: 260px; @jgrowl-width: 260px;
@resizer-size: 32px; @resizer-size: 32px;
@editor-line-weight: 1.7;
/* Bootstrap */ /* Bootstrap */
@body-bg: @secondary-bg-light; @body-bg: @secondary-bg-light;
@ -65,7 +66,8 @@
@link-hover-color: darken(@link-color, 20%); @link-hover-color: darken(@link-color, 20%);
@input-bg: @secondary-bg-lighter; @input-bg: @secondary-bg-lighter;
@input-border: @secondary-border-color; @input-border: @secondary-border-color;
@input-height-base: 38px; @input-height-base: 42px;
@input-height-slim: 38px;
@blockquote-border-color: fade(@secondary-desaturated, 7.5%); @blockquote-border-color: fade(@secondary-desaturated, 7.5%);
@blockquote-bg: fade(@secondary-desaturated, 5%); @blockquote-bg: fade(@secondary-desaturated, 5%);
@code-color: @secondary-color-darkest; @code-color: @secondary-color-darkest;
@ -136,26 +138,10 @@ body {
outline: none !important; outline: none !important;
} }
// Bug with SVG font on Windows
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
#preview-contents { #preview-contents {
padding: 15px; padding: 15px;
margin: 0 auto 180px; margin: 0 auto 180px;
font-size: 15px; text-align: justify;
line-height: 1.6;
blockquote p {
font-size: 15px;
line-height: 1.6;
}
code, pre {
font-size: 13px !important;
line-height: 1.6;
}
} }
.working { .working {
@ -407,12 +393,12 @@ a {
border-radius: 0; border-radius: 0;
.left-space, .right-space { .left-space, .right-space {
width: 25px; width: 25px;
height: @input-height-base; height: @input-height-slim;
} }
.nav { .nav {
float: left; float: left;
margin: 5px 9px; margin: 5px 9px;
height: @input-height-base; height: @input-height-slim;
& > li { & > li {
display: inline-block; display: inline-block;
} }
@ -432,8 +418,8 @@ a {
} }
} }
.btn { .btn {
height: @input-height-base; height: @input-height-slim;
padding: 8px 10px; padding: 6px 8px;
} }
.btn-group > .btn { .btn-group > .btn {
&.disabled, &.disabled,
@ -448,8 +434,9 @@ a {
.file-title-navbar { .file-title-navbar {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 4px 15px; padding: 1px 15px;
font-size: 20px; font-size: 1.5em;
line-height: 1.4em;
font-weight: 200; font-weight: 200;
max-width: @file-title-width; max-width: @file-title-width;
overflow: hidden; overflow: hidden;
@ -462,6 +449,7 @@ a {
.input-file-title { .input-file-title {
width: @file-title-width; width: @file-title-width;
font-size: 16px; font-size: 16px;
height: @input-height-slim;
} }
} }
@ -469,7 +457,7 @@ a {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
height: @input-height-base; height: @input-height-slim;
width: 60px; width: 60px;
padding-top: 9px; padding-top: 9px;
.bar { .bar {
@ -488,7 +476,7 @@ a {
.offline-status > div { .offline-status > div {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: @input-height-base; height: @input-height-slim;
padding: 9px 10px; padding: 9px 10px;
} }
@ -530,7 +518,7 @@ a {
overflow: initial; overflow: initial;
.collapse-button { .collapse-button {
background-color: @panel-button-bg-color; background-color: @panel-button-bg-color;
height: @input-height-base; height: @input-height-slim;
border-radius: 8px; border-radius: 8px;
position: absolute; position: absolute;
margin-top: 6px; margin-top: 6px;
@ -738,11 +726,12 @@ a {
input { input {
cursor: pointer; cursor: pointer;
margin: 0 16px; margin: 0 16px;
height: @input-height-base; height: @input-height-slim;
} }
} }
.input-rename { .input-rename {
width: 220px; width: 220px;
height: @input-height-slim;
} }
.name, .file-count { .name, .file-count {
padding: 9px 20px 9px 15px; padding: 9px 20px 9px 15px;
@ -978,7 +967,7 @@ a {
line-height: 0; line-height: 0;
i { i {
font-size: 16px; font-size: 16px;
height: 9.5px; height: 10.5px;
overflow: hidden; overflow: hidden;
} }
} }
@ -1202,24 +1191,29 @@ a {
} }
#wmd-input { #wmd-input {
border-radius: 0; font-family: @font-family-monospace;
letter-spacing: @font-family-monospace-letter-spacing;
font-size: @font-size-base;
border-radius: 0;
color: @tertiary-color-dark; color: @tertiary-color-dark;
.box-shadow(none); .box-shadow(none);
resize: none; resize: none;
border: none; border: none;
padding: 0 @padding-base-horizontal; padding: 0 @padding-base-horizontal;
line-height: @editor-line-weight;
div& { div& {
padding: 0; padding: 0;
} }
} }
.textarea-helper { .textarea-helper {
font-family: @font-family-monospace;
font-size: @font-size-base;
position: absolute; position: absolute;
top: -100px; top: -100px;
height: 1px; height: 1px;
padding: 0 @padding-base-horizontal; padding: 0 @padding-base-horizontal;
font-size: @font-size-base; line-height: @editor-line-weight;
line-height: @line-height-base;
position: absolute; position: absolute;
overflow: auto; overflow: auto;
white-space: pre-wrap; white-space: pre-wrap;
@ -1260,17 +1254,8 @@ div.dropdown-menu, {
a:focus { a:focus {
color: @link-hover-color; color: @link-hover-color;
} }
h1 { h1, h2, h3, h4, h5, h6 {
margin: 40px 0; margin: 1em 0;
}
h2 {
margin: 30px 0;
}
h3 {
margin: 20px 0;
}
h4, h5, h6 {
margin: 15px 0;
} }
} }
@ -1286,7 +1271,7 @@ div.dropdown-menu, {
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
margin-right: 3px; margin-right: 3px;
font-size: 14px; font-size: 1em;
vertical-align: top; vertical-align: top;
.file-title-navbar & { .file-title-navbar & {
font-size: 16px; font-size: 16px;

4
public/res/themes/original.less
View File

@ -83,9 +83,7 @@
// Navbar buttons // Navbar buttons
.btn-success { .btn-success {
border-width: 0; .buttons-dropdown .dropdown-menu & {
.buttons-dropdown & {
color: #777;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {

1
public/res/themes/school.less
View File

@ -55,6 +55,7 @@
.ace_content { .ace_content {
background-image: url("../img/school-line.png"); background-image: url("../img/school-line.png");
background-repeat: repeat; background-repeat: repeat;
background-size: 64px 1.65em;
} }
.ace_print-margin-layer { .ace_print-margin-layer {