Sfoglia il codice sorgente

Docs: Refactored wide content styles - used special guide's class. [skip ci]

Piotrek Koszuliński 7 anni fa
parent
commit
80200dc33b

+ 6 - 1
docs/_snippets/examples/document-editor.html

@@ -45,7 +45,7 @@
 
 	.document-editor__editable .ck-editor__editable {
 		/* Set the dimensions of the "page". */
-		width: 15.8cm;
+		width: 15cm;
 		min-height: 21cm;
 
 		/* Keep the "page" off the boundaries of the container. */
@@ -62,6 +62,11 @@
 		margin: 0 auto;
 	}
 
+	/* Override the page's width in the "Examples" section which is wider. */
+	.main__content-wide .document-editor__editable .ck-editor__editable {
+		width: 18cm;
+	}
+
 	/* Set the default font for the "page" of the content. */
 	.document-editor .ck-content,
 	.document-editor .ck-heading-dropdown .ck-list {

+ 21 - 0
docs/assets/styles.css

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ */
+
+/* https://github.com/ckeditor/ckeditor5/issues/913 */
+@media only screen and (min-width: 1600px) {
+	.main .main__content-wide .main__content-inner {
+		width: 800px;
+	}
+}
+
+/* https://github.com/ckeditor/ckeditor5/issues/913 */
+@media only screen and (min-width: 1360px) {
+	.main .main__content.main__content-wide {
+		padding-right: 0;
+	}
+
+	.main .main__content-wide .main__content-inner {
+		max-width: 800px;
+	}
+}

+ 1 - 23
docs/examples/builds/document-editor.md

@@ -1,6 +1,7 @@
 ---
 category: examples-builds
 order: 30
+classes: main__content-wide
 ---
 
 # Document editor
@@ -11,26 +12,3 @@ See the {@link framework/guides/document-editor tutorial} to learn how to create
 
 {@snippet examples/document-editor}
 
-<style>
-	/* https://github.com/ckeditor/ckeditor5/issues/913 */
-	@media only screen and (min-width: 1600px) {
-		.main .main__content-inner {
-			width: 900px;
-		}
-	}
-
-	/* https://github.com/ckeditor/ckeditor5/issues/913 */
-	@media only screen and (min-width: 1360px) {
-		.main .main__content {
-			padding-right: 0;
-		}
-
-		.main .main__content-inner {
-			max-width: 900px;
-		}
-
-		.document-editor__editable .ck-editor__editable {
-			width: 21cm;
-		}
-	}
-</style>

+ 1 - 0
docs/umberto.json

@@ -2,6 +2,7 @@
 	"name": "CKEditor 5",
 	"slug": "ckeditor5",
 	"hexo-config": "docs/hexo-custom-config.json",
+	"extraStyles": "assets/styles.css",
 	"path": "docs",
 	"observablesdocs": "module:utils/observablemixin~ObservableMixin",
 	"scripts": {