infinity-forge/dist/ui/atena/presentation/dynamic-elements/pages/post/styles.js

codie Library

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Post = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.Post = styled_components_1.default.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 20px 0;\n\n  .container {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    justify-content: center;\n    column-gap: 25px;\n  }\n\n  .container-breadcrumb {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    justify-content: space-between;\n\n    > div {\n      flex-wrap: wrap;\n    }\n\n    > span {\n      min-width: 140px;\n      text-align: left;\n    }\n  }\n\n  .titles {\n    grid-row: 1;\n\n    > div {\n      margin-bottom: 20px;\n\n      > a:last-child {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    h2 {\n      line-height: 1.25;\n    }\n  }\n\n  .posts-box,\n  .box-actions {\n    grid-row: 2;\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n  }\n\n  @media only screen and (max-width: 1400px) {\n    padding: 80px 0;\n  }\n\n  @media only screen and (max-width: 1200px) {\n    .titles {\n      > div {\n        margin-bottom: 15px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    padding: 60px 0;\n\n    .container-breadcrumb {\n      margin-bottom: 0 !important;\n    }\n\n    .container {\n      gap: 20px;\n      grid-template-columns: 1fr;\n    }\n\n    .posts-box {\n      grid-row: unset;\n    }\n\n    .box-actions {\n      grid-row: unset;\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 20px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    padding: 40px 0;\n  }\n\n  @media only screen and (max-width: 560px) {\n    .posts-box,\n    .box-actions {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  @media only screen and (max-width: 500px) {\n    .container-breadcrumb {\n      gap: 2px;\n      flex-direction: column;\n      align-items: flex-start;\n\n      > span {\n        min-width: unset;\n      }\n    }\n  }\n"], ["\n  padding: 20px 0;\n\n  .container {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    justify-content: center;\n    column-gap: 25px;\n  }\n\n  .container-breadcrumb {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    justify-content: space-between;\n\n    > div {\n      flex-wrap: wrap;\n    }\n\n    > span {\n      min-width: 140px;\n      text-align: left;\n    }\n  }\n\n  .titles {\n    grid-row: 1;\n\n    > div {\n      margin-bottom: 20px;\n\n      > a:last-child {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    h2 {\n      line-height: 1.25;\n    }\n  }\n\n  .posts-box,\n  .box-actions {\n    grid-row: 2;\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n  }\n\n  @media only screen and (max-width: 1400px) {\n    padding: 80px 0;\n  }\n\n  @media only screen and (max-width: 1200px) {\n    .titles {\n      > div {\n        margin-bottom: 15px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    padding: 60px 0;\n\n    .container-breadcrumb {\n      margin-bottom: 0 !important;\n    }\n\n    .container {\n      gap: 20px;\n      grid-template-columns: 1fr;\n    }\n\n    .posts-box {\n      grid-row: unset;\n    }\n\n    .box-actions {\n      grid-row: unset;\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 20px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    padding: 40px 0;\n  }\n\n  @media only screen and (max-width: 560px) {\n    .posts-box,\n    .box-actions {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  @media only screen and (max-width: 500px) {\n    .container-breadcrumb {\n      gap: 2px;\n      flex-direction: column;\n      align-items: flex-start;\n\n      > span {\n        min-width: unset;\n      }\n    }\n  }\n"])));
var templateObject_1;
//# sourceMappingURL=styles.js.map