@gravity-ui/blog-constructor 1.0.0-alpha.1

package/styles/yfm.scss

@@ -0,0 +1,123 @@
+@import './mixins.scss';
+@import './variables.scss';
+
+.yfm_blog {
+    @include text-size(body-3);
+    color: var(--yc-color-text-primary);
+
+    h1:first-child,
+    h2:first-child,
+    h3:first-child,
+    h4:first-child {
+        padding: 0;
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    h2 {
+        @include text-size(display-2);
+    }
+
+    h3 {
+        @include text-size(header-2);
+    }
+
+    h4 {
+        @include text-size(header-1);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-bottom: $indentXS;
+        margin-top: $indentL;
+        padding-top: 0;
+        font-weight: var(--yc-text-header-font-weight);
+    }
+
+    blockquote,
+    dl,
+    ol,
+    p,
+    pre,
+    table,
+    ul {
+        margin: 0 0 $indentXS;
+    }
+
+    img {
+        margin-bottom: $indentM;
+        margin-top: $indentXS;
+        border-radius: $indentSM;
+    }
+
+    hr {
+        height: 1px;
+    }
+
+    ol,
+    ul {
+        padding-left: 1.4em;
+    }
+
+    code {
+        color: var(--yc-color-text-misc);
+    }
+
+    pre > code {
+        color: var(--yc-color-text-primary);
+    }
+
+    table {
+        color: var(--yc-color-text-primary);
+        border: 1px solid var(--yc-color-line-generic);
+        background: var(--yc-color-base-background);
+    }
+
+    thead tr,
+    table tr:nth-child(2n) {
+        background-color: var(--yc-color-base-generic);
+    }
+
+    &_media {
+        @include text-size(body-3);
+        color: var(--yc-color-text-secondary);
+    }
+
+    &_breadcrumbs {
+        @include text-size(body-2);
+        color: var(--yc-text-color-base);
+    }
+
+    a {
+        color: var(--yc-color-text-link);
+
+        &:hover {
+            color: var(--yc-color-text-link-hover);
+        }
+    }
+
+    .yfm-tab {
+        &:hover,
+        &:active {
+            color: var(--yc-color-text-link-hover);
+        }
+
+        &.active {
+            border-bottom-color: var(--yc-color-text-link);
+        }
+    }
+
+    .yfm-clipboard {
+        margin: $indentM 0;
+    }
+}
+
+.yfm_blog_card {
+    p {
+        color: var(--pc-text-header-color);
+    }
+}