document-editor.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  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 <em>Flavorful Tuscany Meetup</em> 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&nbsp;AM&nbsp;-&nbsp;11:30&nbsp;AM</td>
  20. <td>Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></td>
  21. </tr>
  22. <tr>
  23. <td>1:00&nbsp;PM&nbsp;-&nbsp;3:00&nbsp;PM</td>
  24. <td>Pappardelle al pomodoro - <mark class="marker-yellow">live cooking session</mark> with <strong>Rita Fresco</strong></td>
  25. </tr>
  26. <tr>
  27. <td>5:00&nbsp;PM&nbsp;-&nbsp;8:00&nbsp;PM</td>
  28. <td>Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></td>
  29. </tr>
  30. </tbody>
  31. </table>
  32. </figure>
  33. <blockquote>
  34. <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>
  35. <p>Angelina Calvino, food journalist</p>
  36. </blockquote>
  37. <p>Please arrive at the <a href="http://ckeditor.com">Bilancino Hotel</a> reception desk <mark class="marker-yellow">at least half an hour earlier</mark> to make sure that the registration process goes as smoothly as possible.</p>
  38. <p>We look forward to welcoming you to the event.</p>
  39. <p><strong>Victoria Valc</strong></p>
  40. <p><strong>Event Manager</strong></p>
  41. <p><strong>Bilancino Hotel</strong></p>
  42. </div>
  43. </div>
  44. </div>
  45. <style>
  46. .document-editor {
  47. border: 1px solid var(--ck-color-base-border);
  48. border-radius: var(--ck-border-radius);
  49. /* Set vertical boundaries for the document editor. */
  50. max-height: 700px;
  51. /* This element is a flex container for easier rendering. */
  52. display: flex;
  53. flex-flow: column nowrap;
  54. }
  55. .document-editor__toolbar {
  56. /* Make sure the toolbar container is always above the editable. */
  57. z-index: 1;
  58. /* Create the illusion of the toolbar floating over the editable. */
  59. box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
  60. /* Use the CKEditor CSS variables to keep the UI consistent. */
  61. border-bottom: 1px solid var(--ck-color-toolbar-border);
  62. }
  63. /* Adjust the look of the toolbar inside of the container. */
  64. .document-editor__toolbar .ck-toolbar {
  65. border: 0;
  66. border-radius: 0;
  67. }
  68. /* Make the editable container look like the inside of a native word processor app. */
  69. .document-editor__editable-container {
  70. padding: calc( 2 * var(--ck-spacing-large) );
  71. background: var(--ck-color-base-foreground);
  72. /* Make it possible to scroll the "page" of the edited content. */
  73. overflow-y: scroll;
  74. }
  75. .document-editor__editable-container .document-editor__editable.ck-editor__editable {
  76. /* Set the dimensions of the "page". */
  77. width: 15.8cm;
  78. min-height: 21cm;
  79. /* Keep the "page" off the boundaries of the container. */
  80. padding: 1cm 2cm 2cm;
  81. border: 1px hsl( 0,0%,82.7% ) solid;
  82. border-radius: var(--ck-border-radius);
  83. background: white;
  84. /* The "page" should cast a slight shadow (3D illusion). */
  85. box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
  86. /* Center the "page". */
  87. margin: 0 auto;
  88. }
  89. /* Override the page's width in the "Examples" section which is wider. */
  90. .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
  91. width: 18cm;
  92. }
  93. /* Set the default font for the "page" of the content. */
  94. .document-editor .ck-content,
  95. .document-editor .ck-heading-dropdown .ck-list {
  96. font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  97. }
  98. /* Adjust the headings dropdown to host some larger heading styles. */
  99. .document-editor .ck-heading-dropdown .ck-dropdown__panel .ck-list > .ck-list__item {
  100. line-height: calc( 1.2 * var(--ck-line-height-base) * var(--ck-font-size-base) );
  101. min-width: 8em;
  102. }
  103. /* Set the styles for the "Heading 1". */
  104. .document-editor .ck-content h2,
  105. .document-editor .ck-heading-dropdown .ck-heading_heading1 {
  106. font-size: 2.18em;
  107. }
  108. .document-editor .ck-content h2 {
  109. line-height: 1.37em;
  110. padding-top: .342em;
  111. margin-bottom: .142em;
  112. }
  113. /* Set the styles for the "Heading 2". */
  114. .document-editor .ck-content h3,
  115. .document-editor .ck-heading-dropdown .ck-heading_heading2 {
  116. font-size: 1.75em;
  117. color: hsl( 203, 100%, 50% );
  118. }
  119. .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-list__item_active {
  120. color: var(--ck-color-list-item-text-active);
  121. }
  122. /* Set the styles for the "Heading 2". */
  123. .document-editor .ck-content h3 {
  124. line-height: 1.86em;
  125. padding-top: .171em;
  126. margin-bottom: .357em;
  127. }
  128. /* Set the styles for the "Heading 3". */
  129. .document-editor .ck-content h4,
  130. .document-editor .ck-heading-dropdown .ck-heading_heading3 {
  131. font-size: 1.31em;
  132. }
  133. .document-editor .ck-content h4 {
  134. line-height: 1.24em;
  135. padding-top: .286em;
  136. margin-bottom: .952em;
  137. }
  138. /* Set the styles for the "Paragraph". */
  139. .document-editor .ck-content p,
  140. .document-editor .ck-heading-dropdown .ck-heading_paragraph {
  141. font-size: 1em;
  142. }
  143. .document-editor .ck-content p {
  144. line-height: 1.63em;
  145. padding-top: .5em;
  146. margin-bottom: 1.13em;
  147. }
  148. /* Make the block quoted text serif with some additional spacing. */
  149. .document-editor .ck-content blockquote {
  150. font-family: Georgia, serif;
  151. margin-left: calc( 2 * var(--ck-spacing-large) );
  152. margin-right: calc( 2 * var(--ck-spacing-large) );
  153. }
  154. </style>