Responsive layout
This commit is contained in:
		
							parent
							
								
									b090015411
								
							
						
					
					
						commit
						865982e707
					
				| @ -329,6 +329,19 @@ define([ | ||||
| 
 | ||||
|     // Create the layout
 | ||||
|     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() { | ||||
|         var layoutGlobalConfig = { | ||||
|             closable: true, | ||||
| @ -348,6 +361,12 @@ define([ | ||||
|             north__minSize: 49, | ||||
|             center__minWidth: 250, | ||||
|             center__minHeight: 180, | ||||
|             east__onAlert: function() { | ||||
|                 window.location.href = 'viewer'; | ||||
|             }, | ||||
|             south__onAlert: function() { | ||||
|                 window.location.href = 'viewer'; | ||||
|             }, | ||||
|             fxSettings: { | ||||
|                 easing: "easeInOutQuad", | ||||
|                 duration: 350 | ||||
| @ -371,7 +390,7 @@ define([ | ||||
|                     bottomMargin < 0 && (bottomMargin = 0); | ||||
|                     aceEditor.renderer.setScrollMargin(0, bottomMargin, 0, 0); | ||||
|                     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) { | ||||
|                             padding = constants.EDITOR_DEFAULT_PADDING; | ||||
|                         } | ||||
| @ -403,7 +422,6 @@ define([ | ||||
|                 south__minSize: 200 | ||||
|             })); | ||||
|         } | ||||
|         settings.maxWidth && $('#preview-contents').css('max-width', (settings.maxWidth + 30) + 'px'); | ||||
|         $(".navbar").click(function() { | ||||
|             layout.allowOverflow('north'); | ||||
|         }); | ||||
| @ -441,8 +459,8 @@ define([ | ||||
|     var $titleContainer; | ||||
|     var marginWidth = 18 * 2 + 25 + 25; | ||||
|     var titleWidth = 18 + 348; | ||||
|     var leftButtonsWidth = 18 * 4 + 79 + 158 + 159 + 79; | ||||
|     var rightButtonsWidth = 18 + 79; | ||||
|     var leftButtonsWidth = 18 * 4 + 80 + 160 + 160 + 80; | ||||
|     var rightButtonsWidth = 18 + 80; | ||||
|     var buttonsDropdownWidth = 40; | ||||
|     function adjustWindow() { | ||||
|         if(!window.viewerMode) { | ||||
| @ -678,6 +696,49 @@ define([ | ||||
|         else { | ||||
|             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'); | ||||
|         $leftBtnElts = $navbarElt.find('.left-buttons'); | ||||
|         $rightBtnElts = $navbarElt.find('.right-buttons'); | ||||
| @ -781,27 +842,18 @@ define([ | ||||
|             $('#wmd-input').replaceWith(function() { | ||||
|                 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
 | ||||
|             createAceEditor(); | ||||
| 
 | ||||
|             // Editor's element
 | ||||
|             $editorElt.find('.ace_content').css({ | ||||
|                 "background-size": "64px " + Math.round(settings.editorFontSize * (20 / 12)) + "px", | ||||
|             }); | ||||
|         } | ||||
| 
 | ||||
|         // UI layout
 | ||||
|         createLayout(); | ||||
|         $editorElt = $('#wmd-input'); | ||||
| 
 | ||||
|         // Do periodic tasks
 | ||||
|         intervalId = window.setInterval(function() { | ||||
|  | ||||
| @ -33,7 +33,7 @@ define([ | ||||
|     }; | ||||
| 
 | ||||
|     buttonPublish.onCreateButton = function() { | ||||
|         var button = crel('button', { | ||||
|         var button = crel('a', { | ||||
|             class: 'btn btn-success button-publish', | ||||
|             title: 'Update document publication' | ||||
|         }, crel('i', { | ||||
|  | ||||
| @ -56,7 +56,7 @@ define([ | ||||
|     }; | ||||
| 
 | ||||
|     buttonSync.onCreateButton = function() { | ||||
|         var button = crel('button', { | ||||
|         var button = crel('a', { | ||||
|             class: 'btn btn-success button-synchronize', | ||||
|             title: 'Synchronize all' | ||||
|         }, crel('i', { | ||||
|  | ||||
| @ -195,7 +195,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Manage documents</h3> | ||||
| 				<h2 class="modal-title">Manage documents</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<div></div> | ||||
| @ -251,7 +251,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Hyperlink</h3> | ||||
| 				<h2 class="modal-title">Hyperlink</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>Please provide the link URL and an optional title:</p> | ||||
| @ -278,7 +278,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Image</h3> | ||||
| 				<h2 class="modal-title">Image</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>Please provide the image URL and an optional title:</p> | ||||
| @ -307,7 +307,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Google+ image import</h3> | ||||
| 				<h2 class="modal-title">Google+ image import</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<div class="form-horizontal"> | ||||
| @ -351,7 +351,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Delete</h3> | ||||
| 				<h2 class="modal-title">Delete</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p> | ||||
| @ -379,7 +379,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Open from URL</h3> | ||||
| 				<h2 class="modal-title">Open from URL</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>Please provide a link to a Markdown document.</p> | ||||
| @ -410,7 +410,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Import from disk</h3> | ||||
| 				<h2 class="modal-title">Import from disk</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>Please select your Markdown files here:</p> | ||||
| @ -437,7 +437,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Convert HTML to Markdown</h3> | ||||
| 				<h2 class="modal-title">Convert HTML to Markdown</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>Please select your HTML files here:</p> | ||||
| @ -484,7 +484,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Export to Dropbox</h3> | ||||
| 				<h2 class="modal-title">Export to Dropbox</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p> | ||||
| @ -532,7 +532,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Synchronization</h3> | ||||
| 				<h2 class="modal-title">Synchronization</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p class="msg-sync-list hide"> | ||||
| @ -569,9 +569,9 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title"> | ||||
| 				<h2 class="modal-title"> | ||||
| 					Publish on <span class="publish-provider-name"></span> | ||||
| 				</h3> | ||||
| 				</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<div class="form-horizontal"> | ||||
| @ -825,7 +825,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Publication</h3> | ||||
| 				<h2 class="modal-title">Publication</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p class="msg-publish-list hide"> | ||||
| @ -858,7 +858,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Sharing</h3> | ||||
| 				<h2 class="modal-title">Sharing</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p class="msg-share-list hide"> | ||||
| @ -893,7 +893,7 @@ | ||||
| 			<div class="modal-header"> | ||||
| 				<button type="button" class="close" data-dismiss="modal" | ||||
| 					aria-hidden="true">×</button> | ||||
| 				<h3 class="modal-title">Settings</h3> | ||||
| 				<h2 class="modal-title">Settings</h2> | ||||
| 				<ul class="nav nav-tabs"> | ||||
| 					<li class="active"><a class="action-load-settings" | ||||
| 						href="#tabpane-settings-basic" data-toggle="tab">Basic</a></li> | ||||
| @ -1183,7 +1183,7 @@ | ||||
| 		<div class="modal-content"> | ||||
| 
 | ||||
| 			<div class="modal-header"> | ||||
| 				<h3 class="modal-title">Ooops...</h3> | ||||
| 				<h2 class="modal-title">Ooops...</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>StackEdit has stopped because another instance was running in | ||||
| @ -1205,7 +1205,7 @@ | ||||
| 		<div class="modal-content"> | ||||
| 
 | ||||
| 			<div class="modal-header"> | ||||
| 				<h3 class="modal-title">Redirection</h3> | ||||
| 				<h2 class="modal-title">Redirection</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 			    <p class="redirect-msg"></p> | ||||
| @ -1225,7 +1225,7 @@ | ||||
| 		<div class="modal-content"> | ||||
| 
 | ||||
| 			<div class="modal-header"> | ||||
| 				<h3 class="modal-title">Reset application</h3> | ||||
| 				<h2 class="modal-title">Reset application</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>This will delete all your local documents.</p> | ||||
| @ -1246,7 +1246,7 @@ | ||||
| 		<div class="modal-content"> | ||||
| 
 | ||||
| 			<div class="modal-header"> | ||||
| 				<h3 class="modal-title">Import documents and settings</h3> | ||||
| 				<h2 class="modal-title">Import documents and settings</h2> | ||||
| 			</div> | ||||
| 			<div class="modal-body"> | ||||
| 				<p>This will delete all existing local documents.</p> | ||||
|  | ||||
| @ -4,7 +4,7 @@ | ||||
| 		<div class="modal-header"> | ||||
| 			<button type="button" class="close" data-dismiss="modal" | ||||
| 				aria-hidden="true">×</button> | ||||
| 			<h3 class="modal-title">AutoSync to <%= providerName %></h3> | ||||
| 			<h2 class="modal-title">AutoSync to <%= providerName %></h2> | ||||
| 		</div> | ||||
| 		<div class="modal-body"> | ||||
| 			<p> | ||||
|  | ||||
| @ -4,7 +4,7 @@ | ||||
| 		<div class="modal-header"> | ||||
| 			<button type="button" class="close" data-dismiss="modal" | ||||
| 				aria-hidden="true">×</button> | ||||
| 			<h3 class="modal-title">Export to <%= providerName %></h3> | ||||
| 			<h2 class="modal-title">Export to <%= providerName %></h2> | ||||
| 		</div> | ||||
| 		<div class="modal-body"> | ||||
| 			<p> | ||||
|  | ||||
| @ -793,6 +793,7 @@ $.layout.defaults = { | ||||
| 	,	onswap_end:				null		// CALLBACK when pane ENDS being Swapped
 | ||||
| 	,	ondrag_start:			null		// CALLBACK when pane STARTS being ***MANUALLY*** Resized
 | ||||
| 	,	ondrag_end:				null		// CALLBACK when pane ENDS being ***MANUALLY*** Resized
 | ||||
|     ,   onAlert:                null | ||||
| 	} | ||||
| /* | ||||
|  *	PANE-SPECIFIC SETTINGS | ||||
| @ -3478,7 +3479,7 @@ $.fn.layout = function (opts) { | ||||
| 			if (s.minSize > s.maxSize) { // INSUFFICIENT ROOM FOR PANE TO OPEN!
 | ||||
| 				syncPinBtns(pane, false); // make sure pin-buttons are reset
 | ||||
| 				if (!noAlert && o.tips.noRoomToOpen) | ||||
| 					alert(o.tips.noRoomToOpen); | ||||
| 					o.onAlert ? o.onAlert(o.tips.noRoomToOpen) : alert(o.tips.noRoomToOpen); | ||||
| 				return queueNext(); // ABORT
 | ||||
| 			} | ||||
| 
 | ||||
|  | ||||
| @ -9,99 +9,68 @@ | ||||
| @kbd-border-color: fade(@text-color, 25%); | ||||
| @blockquote-border-color: #eee; | ||||
| @blockquote-bg: #f8f8f8; | ||||
| @title-base-size: 15px; | ||||
| @title-base-size: 1em; | ||||
| @code-color: @text-color; | ||||
| @code-bg: fade(@text-color, 4%); | ||||
| @pre-bg: @blockquote-bg; | ||||
| @pre-border-color: @blockquote-border-color; | ||||
| 
 | ||||
| @font-size-base: 15px; | ||||
| @line-height-base: 1.45; | ||||
| @p-margin: 1.1em; | ||||
| 
 | ||||
| @font-face { | ||||
|     font-family: 'Open Sans'; | ||||
|     font-family: 'Source Sans Pro'; | ||||
|     font-style: normal; | ||||
|     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-family: 'Open Sans'; | ||||
|     font-family: 'Source Sans Pro'; | ||||
|     font-style: normal; | ||||
|     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-family: 'Open Sans'; | ||||
|     font-family: 'Source Sans Pro'; | ||||
|     font-style: normal; | ||||
|     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-family: 'Open Sans'; | ||||
|     font-family: 'Source Sans Pro'; | ||||
|     font-style: italic; | ||||
|     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-family: 'Open Sans'; | ||||
|     font-family: 'Source Sans Pro'; | ||||
|     font-style: italic; | ||||
|     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-family: 'Open Sans'; | ||||
|     font-family: 'Source Sans Pro'; | ||||
|     font-style: italic; | ||||
|     font-weight: 700; | ||||
|     src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url("../font/OpenSans-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'); | ||||
|     } | ||||
|     src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url("../font/SourceSansPro-BoldItalic-webfont.woff") format('woff'); | ||||
| } | ||||
| 
 | ||||
| @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 { | ||||
|     -webkit-font-smoothing: antialiased; | ||||
| @ -131,43 +100,32 @@ a code { | ||||
| 	color: inherit; | ||||
| } | ||||
| 
 | ||||
| h1 { font-size: floor(@title-base-size * 2.60); } | ||||
| h2 { font-size: floor(@title-base-size * 2.15); } | ||||
| h3 { font-size: ceil(@title-base-size * 1.70); } | ||||
| h4 { font-size: ceil(@title-base-size * 1.25); } | ||||
| h1 { font-size: @title-base-size * 2.60; } | ||||
| h2 { font-size: @title-base-size * 2.15; } | ||||
| h3 { font-size: @title-base-size * 1.70; } | ||||
| h4 { font-size: @title-base-size * 1.25; } | ||||
| h5 { font-size: @title-base-size; } | ||||
| h6 { font-size: ceil(@title-base-size * 0.85); } | ||||
| h6 { font-size: @title-base-size * 0.85; } | ||||
| 
 | ||||
| h1 { | ||||
| 	margin: 60px 0 60px; | ||||
| } | ||||
| 
 | ||||
| h2 { | ||||
| 	margin: 50px 0 50px; | ||||
| } | ||||
| 
 | ||||
| h3 { | ||||
| 	margin: 40px 0 40px; | ||||
| } | ||||
| 
 | ||||
| h4, h5, h6 { | ||||
| 	margin: 25px 0 25px; | ||||
| h1, h2, h3, h4, h5, h6 { | ||||
| 	margin: 1.3em 0; | ||||
| } | ||||
| 
 | ||||
| p, | ||||
| pre, | ||||
| pre.prettyprint, | ||||
| blockquote { | ||||
| 	margin: 0 0 15px; | ||||
| 	margin: 0 0 @p-margin; | ||||
| } | ||||
| 
 | ||||
| hr { | ||||
| 	margin: 30px 0; | ||||
| 	margin: 2em 0; | ||||
| } | ||||
| 
 | ||||
| code, pre { | ||||
| 	font-family: Menlo, Consolas, "Courier New", monospace; | ||||
| 	font-size: 12px !important; | ||||
| 	font-family: @font-family-monospace; | ||||
|     letter-spacing: @font-family-monospace-letter-spacing; | ||||
| 	font-size: 0.95em !important; | ||||
| } | ||||
| 
 | ||||
| pre, pre.prettyprint { | ||||
| @ -229,8 +187,8 @@ blockquote { | ||||
| 	border-bottom-right-radius: 5px; | ||||
| 	padding: 15px 20px; | ||||
| 	p { | ||||
| 	    margin-bottom: 15px; | ||||
| 	    font-size: @font-size-base; | ||||
| 	    margin-bottom: @p-margin; | ||||
| 	    font-size: 1em; | ||||
| 	    line-height: @line-height-base; | ||||
| 	} | ||||
| 	 | ||||
| @ -241,9 +199,9 @@ blockquote { | ||||
| } | ||||
| 
 | ||||
| ul,ol { | ||||
| 	margin-bottom: 15px; | ||||
| 	margin-bottom: @p-margin; | ||||
| 	ul,ol { | ||||
| 		margin-bottom: 15px; | ||||
| 		margin-bottom: @p-margin; | ||||
| 	} | ||||
| } | ||||
| 
 | ||||
| @ -279,14 +237,14 @@ kbd { | ||||
| 
 | ||||
| [class^="icon-"], [class*=" icon-"] { | ||||
| 	display: inline-block; | ||||
| 	line-height: 14px; | ||||
| 	line-height: 1.2em; | ||||
| 	vertical-align: middle; | ||||
| 	background-repeat: no-repeat; | ||||
| } | ||||
| 
 | ||||
| // Custom icons (not from Font Awesome) | ||||
| .icon-code { | ||||
| 	font-size: 80%; | ||||
| 	font-size: 83%; | ||||
| 	&:before { | ||||
|     	margin-left: 0.1em; | ||||
|     	margin-right: 0.6em; | ||||
|  | ||||
| @ -57,6 +57,7 @@ | ||||
| @document-panel-width: 320px; | ||||
| @jgrowl-width: 260px; | ||||
| @resizer-size: 32px; | ||||
| @editor-line-weight: 1.7; | ||||
| 
 | ||||
| /* Bootstrap */ | ||||
| @body-bg: @secondary-bg-light; | ||||
| @ -65,7 +66,8 @@ | ||||
| @link-hover-color: darken(@link-color, 20%); | ||||
| @input-bg: @secondary-bg-lighter; | ||||
| @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-bg: fade(@secondary-desaturated, 5%); | ||||
| @code-color: @secondary-color-darkest; | ||||
| @ -136,26 +138,10 @@ body { | ||||
|     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 { | ||||
| 	padding: 15px; | ||||
| 	margin: 0 auto 180px; | ||||
|     font-size: 15px; | ||||
|     line-height: 1.6; | ||||
|     blockquote p { | ||||
|         font-size: 15px; | ||||
|         line-height: 1.6; | ||||
|     } | ||||
|     code, pre { | ||||
|         font-size: 13px !important; | ||||
|         line-height: 1.6; | ||||
|     } | ||||
|     text-align: justify; | ||||
| } | ||||
| 
 | ||||
| .working { | ||||
| @ -407,12 +393,12 @@ a { | ||||
| 	border-radius: 0; | ||||
| 	.left-space, .right-space { | ||||
| 		width: 25px; | ||||
| 		height: @input-height-base; | ||||
| 		height: @input-height-slim; | ||||
| 	} | ||||
| 	.nav { | ||||
| 		float: left; | ||||
| 		margin: 5px 9px; | ||||
| 		height: @input-height-base; | ||||
| 		height: @input-height-slim; | ||||
| 		& > li { | ||||
| 			display: inline-block; | ||||
| 		} | ||||
| @ -432,8 +418,8 @@ a { | ||||
| 		} | ||||
| 	} | ||||
| 	.btn { | ||||
| 		height: @input-height-base; | ||||
| 		padding: 8px 10px; | ||||
| 		height: @input-height-slim; | ||||
| 		padding: 6px 8px; | ||||
| 	} | ||||
| 	.btn-group > .btn { | ||||
| 		&.disabled, | ||||
| @ -448,8 +434,9 @@ a { | ||||
| 	.file-title-navbar { | ||||
| 		display: inline-block; | ||||
| 		vertical-align: middle; | ||||
| 		padding: 4px 15px; | ||||
| 		font-size: 20px; | ||||
| 		padding: 1px 15px; | ||||
| 		font-size: 1.5em; | ||||
|         line-height: 1.4em; | ||||
| 		font-weight: 200; | ||||
| 		max-width: @file-title-width; | ||||
| 		overflow: hidden; | ||||
| @ -462,6 +449,7 @@ a { | ||||
|         .input-file-title { | ||||
|     		width: @file-title-width; | ||||
|             font-size: 16px; | ||||
|             height: @input-height-slim; | ||||
|         } | ||||
| 	} | ||||
| 
 | ||||
| @ -469,7 +457,7 @@ a { | ||||
| 		display: inline-block; | ||||
| 		vertical-align: middle; | ||||
| 	    overflow: hidden; | ||||
|         height: @input-height-base; | ||||
|         height: @input-height-slim; | ||||
|         width: 60px; | ||||
|         padding-top: 9px; | ||||
| 		.bar { | ||||
| @ -488,7 +476,7 @@ a { | ||||
| 	.offline-status > div { | ||||
| 		display: inline-block; | ||||
| 		vertical-align: middle; | ||||
| 		height: @input-height-base; | ||||
| 		height: @input-height-slim; | ||||
| 		padding: 9px 10px; | ||||
| 	} | ||||
| 	 | ||||
| @ -530,7 +518,7 @@ a { | ||||
| 	overflow: initial; | ||||
|     .collapse-button { | ||||
|        	background-color: @panel-button-bg-color; | ||||
|         height: @input-height-base; | ||||
|         height: @input-height-slim; | ||||
|         border-radius: 8px; | ||||
| 		position: absolute; | ||||
| 		margin-top: 6px; | ||||
| @ -738,11 +726,12 @@ a { | ||||
| 		input { | ||||
| 			cursor: pointer; | ||||
| 			margin: 0 16px; | ||||
| 			height: @input-height-base; | ||||
| 			height: @input-height-slim; | ||||
| 		} | ||||
| 	} | ||||
| 	.input-rename { | ||||
| 		width: 220px; | ||||
| 		height: @input-height-slim; | ||||
| 	} | ||||
| 	.name, .file-count { | ||||
| 		padding: 9px 20px 9px 15px;		 | ||||
| @ -978,7 +967,7 @@ a { | ||||
| 			line-height: 0; | ||||
| 			i { | ||||
|     			font-size: 16px; | ||||
|                 height: 9.5px; | ||||
|                 height: 10.5px; | ||||
|                 overflow: hidden; | ||||
| 			} | ||||
| 		} | ||||
| @ -1202,24 +1191,29 @@ a { | ||||
| } | ||||
| 
 | ||||
| #wmd-input { | ||||
|     font-family: @font-family-monospace; | ||||
|     letter-spacing: @font-family-monospace-letter-spacing; | ||||
| 	font-size: @font-size-base; | ||||
|     border-radius: 0; | ||||
| 	color: @tertiary-color-dark; | ||||
| 	.box-shadow(none); | ||||
| 	resize: none; | ||||
| 	border: none; | ||||
|     padding: 0 @padding-base-horizontal; | ||||
|     line-height: @editor-line-weight; | ||||
| 	div& { | ||||
| 		padding: 0; | ||||
| 	} | ||||
| } | ||||
| 
 | ||||
| .textarea-helper { | ||||
|     font-family: @font-family-monospace; | ||||
|     font-size: @font-size-base; | ||||
|     position: absolute; | ||||
|     top: -100px; | ||||
|     height: 1px; | ||||
|     padding: 0 @padding-base-horizontal; | ||||
|     font-size: @font-size-base; | ||||
|     line-height: @line-height-base; | ||||
|     line-height: @editor-line-weight; | ||||
|     position: absolute; | ||||
|     overflow: auto; | ||||
|     white-space: pre-wrap; | ||||
| @ -1260,17 +1254,8 @@ div.dropdown-menu,  { | ||||
|     a:focus { | ||||
|         color: @link-hover-color; | ||||
|     } | ||||
|     h1 { | ||||
|     	margin: 40px 0; | ||||
|     } | ||||
|     h2 { | ||||
|     	margin: 30px 0; | ||||
|     } | ||||
|     h3 { | ||||
|     	margin: 20px 0; | ||||
|     } | ||||
|     h4, h5, h6 { | ||||
|     	margin: 15px 0; | ||||
|     h1, h2, h3, h4, h5, h6 { | ||||
|     	margin: 1em 0; | ||||
|     } | ||||
| } | ||||
|      | ||||
| @ -1286,7 +1271,7 @@ div.dropdown-menu,  { | ||||
|     margin-top: -2px; | ||||
|     margin-left: -2px; | ||||
|     margin-right: 3px; | ||||
|     font-size: 14px; | ||||
|     font-size: 1em; | ||||
|     vertical-align: top; | ||||
|     .file-title-navbar & { | ||||
|         font-size: 16px; | ||||
|  | ||||
| @ -83,9 +83,7 @@ | ||||
| 
 | ||||
| // Navbar buttons | ||||
| .btn-success { | ||||
|     border-width: 0; | ||||
|     .buttons-dropdown & { | ||||
|         color: #777; | ||||
|     .buttons-dropdown .dropdown-menu & { | ||||
|         &:hover, | ||||
|         &:focus, | ||||
|         &:active { | ||||
|  | ||||
| @ -55,6 +55,7 @@ | ||||
| 	.ace_content { | ||||
| 	    background-image: url("../img/school-line.png"); | ||||
| 		background-repeat: repeat; | ||||
|         background-size: 64px 1.65em; | ||||
| 	} | ||||
| 
 | ||||
|     .ace_print-margin-layer { | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user
	 benweet
						benweet