8
0

document-editor.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <div class="document-editor ck-reset ck-rounded-corners">
  2. <div class="document-editor__toolbar ck-reset_all"></div>
  3. <div class="document-editor__editable"></div>
  4. </div>
  5. <style>
  6. .document-editor {
  7. border: 1px solid var(--ck-color-base-border);
  8. border-radius: var(--ck-border-radius);
  9. max-height: 700px;
  10. display: flex;
  11. flex-flow: column nowrap;
  12. overflow: hidden;
  13. }
  14. .document-editor__toolbar {
  15. z-index: 1;
  16. box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  17. border-bottom: 1px solid var(--ck-color-toolbar-border);
  18. }
  19. .document-editor__toolbar .ck-toolbar {
  20. border: 0;
  21. border-radius: 0;
  22. }
  23. .document-editor__editable {
  24. padding: calc(2*var(--ck-spacing-large));
  25. background: var(--ck-color-base-foreground);
  26. overflow-y: scroll;
  27. }
  28. .document-editor__editable .ck-editor__editable {
  29. width: 15.8cm;
  30. min-height: 21cm;
  31. padding: 1cm 2cm 2cm;
  32. margin: 0.5cm auto;
  33. border: 1px #D3D3D3 solid;
  34. border-radius: var(--ck-border-radius);
  35. background: white;
  36. box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  37. margin: 0 auto;
  38. }
  39. .document-editor .ck-content,
  40. .document-editor .ck-heading-dropdown .ck-list {
  41. font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  42. }
  43. .document-editor .ck-heading-dropdown .ck-dropdown__panel .ck-list > .ck-list__item {
  44. line-height: calc(1.2 * var(--ck-line-height-base)*var(--ck-font-size-base));
  45. min-width: 8em;
  46. }
  47. .document-editor .ck-content h2,
  48. .document-editor .ck-heading-dropdown .ck-heading_heading1 {
  49. font-size: 2.18em;
  50. }
  51. .document-editor .ck-content h2 {
  52. line-height: 1.37em;
  53. padding-top: 0.342em;
  54. margin-bottom: 0.142em;
  55. }
  56. .document-editor .ck-content h3,
  57. .document-editor .ck-heading-dropdown .ck-heading_heading2 {
  58. font-size: 1.75em;
  59. color: hsl(203, 100%, 50%);
  60. }
  61. .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-list__item_active {
  62. color: var(--ck-color-list-item-text-active);
  63. }
  64. .document-editor .ck-content h3 {
  65. line-height: 1.86em;
  66. padding-top: 0.171em;
  67. margin-bottom: 0.357em;
  68. }
  69. .document-editor .ck-content h4,
  70. .document-editor .ck-heading-dropdown .ck-heading_heading3 {
  71. font-size: 1.31em;
  72. }
  73. .document-editor .ck-content h4 {
  74. line-height: 1.24em;
  75. padding-top: 0.286em;
  76. margin-bottom: 0.952em;
  77. }
  78. .document-editor .ck-content p,
  79. .document-editor .ck-heading-dropdown .ck-heading_paragraph {
  80. font-size: 1.00em;
  81. }
  82. .document-editor .ck-content p {
  83. line-height: 1.63em;
  84. padding-top: 0.500em;
  85. margin-bottom: 1.13em;
  86. }
  87. .document-editor .ck-content blockquote {
  88. font-family: Georgia, serif;
  89. margin-left: calc(2*var(--ck-spacing-large));
  90. margin-right: calc(2*var(--ck-spacing-large));
  91. }
  92. .document-editor__data {
  93. display: none;
  94. }
  95. </style>
  96. <div class="document-editor__data">
  97. <h2 style="text-align:center;">The Flavorful Tuscany Meetup</h2>
  98. <h3 style="text-align:center;">Welcome letter</h3>
  99. <p>Dear Guest,</p>
  100. <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>
  101. <p>Please find below the full schedule of the event.</p>
  102. <ul>
  103. <li>9:30 AM - 11:30 AM Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></li>
  104. <li>1:00 PM - 3:00 PM Pappardelle al pomodoro - live cooking session with <strong>Rita Fresco</strong></li>
  105. <li>5:00 PM - 8:00 PM Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></li>
  106. </ul>
  107. <blockquote>
  108. <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>
  109. <p>Angelina Calvino, food journalist</p>
  110. </blockquote>
  111. <p>Please arrive at the <a href="http://ckeditor.com">Bilancino Hotel</a> reception desk at least <strong>half an hour earlier</strong> to make sure that the registration process goes as smoothly as possible.</p>
  112. <p>We look forward to welcoming you to the event.</p>
  113. <p><strong>Victoria Valc</strong></p>
  114. <p><strong>Event Manager</strong></p>
  115. <p><strong>Bilancino Hotel</strong></p>
  116. </div>