document-editor.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <div class="document-editor">
  2. <div class="document-editor__toolbar"></div>
  3. <div class="document-editor__editable-container">
  4. <div class="document-editor__editable">
  5. <h2 style="text-align:center;">The Flavorful Tuscany Meetup</h2>
  6. <h3 style="text-align:center;">Welcome letter</h3>
  7. <p>Dear Guest,</p>
  8. <p>We are delighted to welcome you to the annual <i>Flavorful Tuscany Meetup</i> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</p>
  9. <p>Please find below the full schedule of the event.</p>
  10. <figure class="table">
  11. <table>
  12. <thead>
  13. <tr>
  14. <th colspan="2">Saturday, July 14</th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr>
  19. <td>9:30 AM - 11:30 AM</td>
  20. <td>
  21. <p><strong>Americano vs. Brewed</strong> - “know your coffee” with:&nbsp;</p>
  22. <ul>
  23. <li>Giulia Bianchi</li>
  24. <li>Stefano Garau</li>
  25. <li>Giuseppe Russo</li>
  26. </ul>
  27. </td>
  28. </tr>
  29. <tr>
  30. <td>1:00 PM - 3:00 PM</td>
  31. <td>
  32. <p><strong>Pappardelle al pomodoro</strong> - live cooking</p>
  33. <p>Incorporate the freshest ingredients&nbsp;<br>with Rita Fresco</p>
  34. </td>
  35. </tr>
  36. <tr>
  37. <td>5:00 PM - 8:00 PM</td>
  38. <td><strong>Tuscan vineyards at a glance</strong> - wine-tasting&nbsp;<br>with Frederico Riscoli</td>
  39. </tr>
  40. </tbody>
  41. </table>
  42. </figure>
  43. <blockquote>
  44. <p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p>
  45. <p>Angelina Calvino, food journalist</p>
  46. </blockquote>
  47. <p>Please arrive at the <a href="http://ckeditor.com">Bilancino Hotel</a> reception desk <span style="background-color:hsl(60, 75%, 60%)">at least half an hour earlier</span> to make sure that the registration process goes as smoothly as possible.</p>
  48. <p>We look forward to welcoming you to the event.</p>
  49. <p><strong>Victoria Valc</strong></p>
  50. <p><strong>Event Manager</strong></p>
  51. <p><strong>Bilancino Hotel</strong></p>
  52. </div>
  53. </div>
  54. </div>
  55. <style>
  56. .document-editor {
  57. border: 1px solid var(--ck-color-base-border);
  58. border-radius: var(--ck-border-radius);
  59. /* Set vertical boundaries for the document editor. */
  60. max-height: 700px;
  61. /* This element is a flex container for easier rendering. */
  62. display: flex;
  63. flex-flow: column nowrap;
  64. }
  65. .document-editor__toolbar {
  66. /* Make sure the toolbar container is always above the editable. */
  67. z-index: 1;
  68. /* Create the illusion of the toolbar floating over the editable. */
  69. box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
  70. /* Use the CKEditor CSS variables to keep the UI consistent. */
  71. border-bottom: 1px solid var(--ck-color-toolbar-border);
  72. }
  73. /* Adjust the look of the toolbar inside of the container. */
  74. .document-editor__toolbar .ck-toolbar {
  75. border: 0;
  76. border-radius: 0;
  77. }
  78. /* Make the editable container look like the inside of a native word processor app. */
  79. .document-editor__editable-container {
  80. padding: calc( 2 * var(--ck-spacing-large) );
  81. background: var(--ck-color-base-foreground);
  82. /* Make it possible to scroll the "page" of the edited content. */
  83. overflow-y: scroll;
  84. }
  85. .document-editor__editable-container .document-editor__editable.ck-editor__editable {
  86. /* Set the dimensions of the "page". */
  87. width: 15.8cm;
  88. min-height: 21cm;
  89. /* Keep the "page" off the boundaries of the container. */
  90. padding: 1cm 2cm 2cm;
  91. border: 1px hsl( 0,0%,82.7% ) solid;
  92. border-radius: var(--ck-border-radius);
  93. background: white;
  94. /* The "page" should cast a slight shadow (3D illusion). */
  95. box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
  96. /* Center the "page". */
  97. margin: 0 auto;
  98. }
  99. /* Override the page's width in the "Examples" section which is wider. */
  100. .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
  101. width: 18cm;
  102. }
  103. /* Set the default font for the "page" of the content. */
  104. .document-editor .ck-content,
  105. .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
  106. font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  107. }
  108. /* Adjust the headings dropdown to host some larger heading styles. */
  109. .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
  110. line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
  111. min-width: 6em;
  112. }
  113. /* Scale down all heading previews because they are way too big to be presented in the UI.
  114. Preserve the relative scale, though. */
  115. .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading1 .ck-button__label,
  116. .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading2 .ck-button__label {
  117. transform: scale(0.8);
  118. transform-origin: left;
  119. }
  120. /* Set the styles for "Heading 1". */
  121. .document-editor .ck-content h2,
  122. .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
  123. font-size: 2.18em;
  124. font-weight: normal;
  125. }
  126. .document-editor .ck-content h2 {
  127. line-height: 1.37em;
  128. padding-top: .342em;
  129. margin-bottom: .142em;
  130. }
  131. /* Set the styles for "Heading 2". */
  132. .document-editor .ck-content h3,
  133. .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
  134. font-size: 1.75em;
  135. font-weight: normal;
  136. color: hsl( 203, 100%, 50% );
  137. }
  138. .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
  139. color: var(--ck-color-list-button-on-text);
  140. }
  141. /* Set the styles for "Heading 2". */
  142. .document-editor .ck-content h3 {
  143. line-height: 1.86em;
  144. padding-top: .171em;
  145. margin-bottom: .357em;
  146. }
  147. /* Set the styles for "Heading 3". */
  148. .document-editor .ck-content h4,
  149. .document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
  150. font-size: 1.31em;
  151. font-weight: bold;
  152. }
  153. .document-editor .ck-content h4 {
  154. line-height: 1.24em;
  155. padding-top: .286em;
  156. margin-bottom: .952em;
  157. }
  158. /* Make the block quoted text serif with some additional spacing. */
  159. .document-editor .ck-content blockquote {
  160. font-family: Georgia, serif;
  161. margin-left: calc( 2 * var(--ck-spacing-large) );
  162. margin-right: calc( 2 * var(--ck-spacing-large) );
  163. }
  164. /* Some table cells have a lot content and some not. Align them vertically
  165. to make reading easier. */
  166. .document-editor .ck-content table td {
  167. vertical-align: middle;
  168. }
  169. @media only screen and (max-width: 960px) {
  170. /* Because on mobile 2cm paddings are to big. */
  171. .document-editor__editable-container .document-editor__editable.ck-editor__editable {
  172. padding: 1.5em;
  173. }
  174. }
  175. @media only screen and (max-width: 1200px) {
  176. .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
  177. width: 100%;
  178. }
  179. }
  180. /* Style document editor a'ka Google Docs.*/
  181. @media only screen and (min-width: 1360px) {
  182. .main .main__content.main__content-wide {
  183. padding-right: 0;
  184. }
  185. }
  186. @media only screen and (min-width: 1600px) {
  187. .main .main__content.main__content-wide {
  188. width: 24cm;
  189. }
  190. .main .main__content.main__content-wide .main__content-inner {
  191. width: auto;
  192. margin: 0 50px;
  193. }
  194. /* Keep "page" look based on viewport width. */
  195. .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
  196. width: 60%;
  197. }
  198. }
  199. </style>