feat: properly display lists and embeded youtube videos

Author: corp-0

styles/ck-content.css

@@ -17,18 +17,22 @@
 .ck-content .text-tiny {
     font-size: .7em;
 }
+
 /* ckeditor5-font/theme/fontsize.css */
 .ck-content .text-small {
     font-size: .85em;
 }
+
 /* ckeditor5-font/theme/fontsize.css */
 .ck-content .text-big {
     font-size: 1.4em;
 }
+
 /* ckeditor5-font/theme/fontsize.css */
 .ck-content .text-huge {
     font-size: 1.8em;
 }
+
 /* ckeditor5-image/theme/image.css */
 .ck-content .image {
     display: table;
@@ -37,13 +41,15 @@
     margin: 0.9em auto;
     min-width: 50px;
 }
+
 /* ckeditor5-image/theme/image.css */
 .ck-content .image img {
     display: block;
     margin: 0 auto;
     max-width: 100%;
     min-width: 100%;
 }
+
 /* ckeditor5-image/theme/image.css */
 .ck-content .image-inline {
     /*
@@ -55,17 +61,20 @@
     max-width: 100%;
     align-items: flex-start;
 }
+
 /* ckeditor5-image/theme/image.css */
 .ck-content .image-inline picture {
     display: flex;
 }
+
 /* ckeditor5-image/theme/image.css */
 .ck-content .image-inline picture,
 .ck-content .image-inline img {
     flex-grow: 1;
     flex-shrink: 1;
     max-width: 100%;
 }
+
 /* ckeditor5-image/theme/imagecaption.css */
 .ck-content .image > figcaption {
     display: table-caption;
@@ -77,88 +86,105 @@
     font-size: .75em;
     outline-offset: -1px;
 }
+
 /* ckeditor5-image/theme/imageresize.css */
 .ck-content .image.image_resized {
     max-width: 100%;
     display: block;
     box-sizing: border-box;
 }
+
 /* ckeditor5-image/theme/imageresize.css */
 .ck-content .image.image_resized img {
     width: 100%;
 }
+
 /* ckeditor5-image/theme/imageresize.css */
 .ck-content .image.image_resized > figcaption {
     display: block;
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-block-align-left,
 .ck-content .image-style-block-align-right {
     max-width: calc(100% - var(--ck-image-style-spacing));
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-align-left,
 .ck-content .image-style-align-right {
     clear: none;
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-side {
     float: right;
     margin-left: var(--ck-image-style-spacing);
     max-width: 50%;
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-align-left {
     float: left;
     margin-right: var(--ck-image-style-spacing);
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-align-center {
     margin-left: auto;
     margin-right: auto;
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-align-right {
     float: right;
     margin-left: var(--ck-image-style-spacing);
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-block-align-right {
     margin-right: 0;
     margin-left: auto;
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-style-block-align-left {
     margin-left: 0;
     margin-right: auto;
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content p + .image-style-align-left,
 .ck-content p + .image-style-align-right,
 .ck-content p + .image-style-side {
     margin-top: 0;
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-inline.image-style-align-left,
 .ck-content .image-inline.image-style-align-right {
     margin-top: var(--ck-inline-image-style-spacing);
     margin-bottom: var(--ck-inline-image-style-spacing);
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-inline.image-style-align-left {
     margin-right: var(--ck-inline-image-style-spacing);
 }
+
 /* ckeditor5-image/theme/imagestyle.css */
 .ck-content .image-inline.image-style-align-right {
     margin-left: var(--ck-inline-image-style-spacing);
 }
+
 /* ckeditor5-media-embed/theme/mediaembed.css */
 .ck-content .media {
     clear: both;
     margin: 0.9em 0;
     display: block;
     min-width: 15em;
 }
+
 /* ckeditor5-table/theme/tablecaption.css */
 .ck-content .table > figcaption {
     display: table-caption;
@@ -171,11 +197,13 @@
     font-size: .75em;
     outline-offset: -1px;
 }
+
 /* ckeditor5-table/theme/table.css */
 .ck-content .table {
     margin: 0.9em auto;
     display: table;
 }
+
 /* ckeditor5-table/theme/table.css */
 .ck-content .table table {
     border-collapse: collapse;
@@ -184,34 +212,41 @@
     height: 100%;
     border: 1px double hsl(0, 0%, 70%);
 }
+
 /* ckeditor5-table/theme/table.css */
 .ck-content .table table td,
 .ck-content .table table th {
     min-width: 2em;
     padding: .4em;
     border: 1px solid hsl(0, 0%, 75%);
 }
+
 /* ckeditor5-table/theme/table.css */
 .ck-content .table table th {
     font-weight: bold;
     background: hsla(0, 0%, 0%, 5%);
 }
+
 /* ckeditor5-table/theme/table.css */
 .ck-content[dir="rtl"] .table th {
     text-align: right;
 }
+
 /* ckeditor5-table/theme/table.css */
 .ck-content[dir="ltr"] .table th {
     text-align: left;
 }
+
 /* ckeditor5-table/theme/tablecolumnresize.css */
 .ck-content .table .ck-table-resized {
     table-layout: fixed;
 }
+
 /* ckeditor5-table/theme/tablecolumnresize.css */
 .ck-content .table table {
     overflow: hidden;
 }
+
 /* ckeditor5-table/theme/tablecolumnresize.css */
 .ck-content .table td,
 .ck-content .table th {
@@ -223,7 +258,7 @@
     padding: 5px;
 }
 
-.ck-content p a{
+.ck-content p a {
     color: slateblue;
     text-decoration: underline;
 }
@@ -232,3 +267,28 @@
     padding: 5px;
     margin-top: auto;
 }
+
+.ck-content ul {
+    list-style-type: disc;
+    padding-left: 2rem;
+}
+
+.ck-content ol {
+    list-style-type: decimal;
+    padding-left: 2rem;
+}
+
+.video-wrapper {
+    position: relative;
+    width: 100%;
+    padding-top: calc(100% / (16 / 9)); /* 16:9 aspect ratio */
+    overflow: hidden;
+}
+
+.video-wrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}