@gravity-ui/blog-constructor 1.0.0 → 2.0.0-alpha.0

package/styles/styles.css

@@ -0,0 +1,196 @@
+@import '~@gravity-ui/uikit/styles/styles.css';
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-light.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-light.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+.YSDisplay-Thin {
+  font-family: "YS Display", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Light {
+  font-family: "YS Display", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Regular {
+  font-family: "YS Display", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Medium {
+  font-family: "YS Display", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Bold {
+  font-family: "YS Display", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Heavy {
+  font-family: "YS Display", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-Light {
+  font-family: "YS Text", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-LightItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+  font-stretch: normal;
+}
+
+.YSText-Regular {
+  font-family: "YS Text", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-RegularItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+  font-stretch: normal;
+}
+
+.YSText-Medium {
+  font-family: "YS Text", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-MediumItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 500;
+  font-style: italic;
+  font-stretch: normal;
+}
+
+.YSText-Bold {
+  font-family: "YS Text", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-BoldItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+  font-stretch: normal;
+}

package/styles/yfm.css

@@ -0,0 +1,103 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.yfm_blog {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--yc-color-text-primary);
+}
+.yfm_blog h1:first-child,
+.yfm_blog h2:first-child,
+.yfm_blog h3:first-child,
+.yfm_blog h4:first-child {
+  padding: 0;
+  margin-top: 0;
+  padding-top: 0;
+}
+.yfm_blog h2 {
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+}
+.yfm_blog h3 {
+  font-size: var(--yc-text-header-2-font-size);
+  line-height: var(--yc-text-header-2-line-height);
+}
+.yfm_blog h4 {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+}
+.yfm_blog h1,
+.yfm_blog h2,
+.yfm_blog h3,
+.yfm_blog h4,
+.yfm_blog h5,
+.yfm_blog h6 {
+  margin-bottom: 16px;
+  margin-top: 48px;
+  padding-top: 0;
+  font-weight: var(--yc-text-header-font-weight);
+}
+.yfm_blog blockquote,
+.yfm_blog dl,
+.yfm_blog ol,
+.yfm_blog p,
+.yfm_blog pre,
+.yfm_blog table,
+.yfm_blog ul {
+  margin: 0 0 16px;
+}
+.yfm_blog img {
+  margin-bottom: 32px;
+  margin-top: 16px;
+  border-radius: 24px;
+}
+.yfm_blog hr {
+  height: 1px;
+}
+.yfm_blog ol,
+.yfm_blog ul {
+  padding-left: 1.4em;
+}
+.yfm_blog code {
+  color: var(--yc-color-text-misc);
+}
+.yfm_blog pre > code {
+  color: var(--yc-color-text-primary);
+}
+.yfm_blog table {
+  color: var(--yc-color-text-primary);
+  border: 1px solid var(--yc-color-line-generic);
+  background: var(--yc-color-base-background);
+}
+.yfm_blog thead tr,
+.yfm_blog table tr:nth-child(2n) {
+  background-color: var(--yc-color-base-generic);
+}
+.yfm_blog_media {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--yc-color-text-secondary);
+}
+.yfm_blog_breadcrumbs {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  color: var(--yc-text-color-base);
+}
+.yfm_blog a {
+  color: var(--yc-color-text-link);
+}
+.yfm_blog a:hover {
+  color: var(--yc-color-text-link-hover);
+}
+.yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
+  color: var(--yc-color-text-link-hover);
+}
+.yfm_blog .yfm-tab.active {
+  border-bottom-color: var(--yc-color-text-link);
+}
+.yfm_blog .yfm-clipboard {
+  margin: 32px 0;
+}
+
+.yfm_blog_card p {
+  color: var(--pc-text-header-color);
+}