@teamsparta/blog-system
Version:
37 lines • 8.81 kB
JavaScript
"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.ShareBtnWrapper = exports.BlogShareBtnContainer = exports.BlogShareText = exports.BlogShareContainer = exports.BlogCopyrightInfo = exports.BlogFooter = exports.InfoElement = exports.InfoContainer = exports.Info = exports.ContentSectionTitle = exports.ContentSectionCategory = exports.ContentSection = exports.BannerSectionImg = exports.BannerSection = exports.BlogContent = exports.BlogContentWrapper = void 0;
var styled_1 = __importDefault(require("@emotion/styled"));
var design_system_1 = require("@teamsparta/design-system");
var variables_1 = require("../../style/variables");
exports.BlogContentWrapper = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n /* margin-bottom: 16px; */\n width: 100%;\n line-height: 1.5;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n /* margin-bottom: 16px; */\n width: 100%;\n line-height: 1.5;\n"])));
exports.BlogContent = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n @media ", " {\n width: 840px;\n /* margin-bottom: 60px; */\n }\n"], ["\n width: 100%;\n @media ", " {\n width: 840px;\n /* margin-bottom: 60px; */\n }\n"])), variables_1.device.desktop);
exports.BannerSection = styled_1.default.section(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n width: calc(100% - 48px);\n height: 153px;\n margin: 98px auto 48px auto;\n @media ", " {\n margin: 140px auto 64px auto;\n width: 636px;\n height: 318px;\n }\n"], ["\n position: relative;\n width: calc(100% - 48px);\n height: 153px;\n margin: 98px auto 48px auto;\n @media ", " {\n margin: 140px auto 64px auto;\n width: 636px;\n height: 318px;\n }\n"])), variables_1.device.desktop);
exports.BannerSectionImg = styled_1.default.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n height: 50vw;\n object-fit: cover;\n object-position: 5% 20%;\n @media ", " {\n height: 318px;\n }\n"], ["\n width: 100%;\n height: 50vw;\n object-fit: cover;\n object-position: 5% 20%;\n @media ", " {\n height: 318px;\n }\n"])), variables_1.device.desktop);
exports.ContentSection = styled_1.default.section(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: auto;\n padding: 0 24px;\n max-width: none;\n min-width: 0;\n @media ", " {\n width: 100%;\n max-width: 636px;\n padding: 0;\n }\n\n li {\n list-style-type: none;\n }\n"], ["\n margin: auto;\n padding: 0 24px;\n max-width: none;\n min-width: 0;\n @media ", " {\n width: 100%;\n max-width: 636px;\n padding: 0;\n }\n\n li {\n list-style-type: none;\n }\n"])), variables_1.device.desktop);
exports.ContentSectionCategory = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n color: ", ";\n margin-bottom: 12px;\n @media ", " {\n ", "\n color: ", ";\n }\n"], ["\n ", "\n color: ", ";\n margin-bottom: 12px;\n @media ", " {\n ", "\n color: ", ";\n }\n"])), design_system_1.mBody1, function (_a) {
var color = _a.color;
return "".concat(color);
}, variables_1.device.desktop, design_system_1.wBody1, function (_a) {
var color = _a.color;
return "".concat(color);
});
exports.ContentSectionTitle = styled_1.default.h1(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n margin: 0 0 12px 0;\n @media ", " {\n margin-bottom: 24px;\n font-size: 32px;\n line-height: 1.5;\n }\n\n color: ", ";\n"], ["\n ", "\n margin: 0 0 12px 0;\n @media ", " {\n margin-bottom: 24px;\n font-size: 32px;\n line-height: 1.5;\n }\n\n color: ", ";\n"])), design_system_1.mHeader1, variables_1.device.desktop, design_system_1.neutralDay.gray100);
exports.Info = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", "\n color: ", ";\n\n @media ", " {\n ", "\n color: ", ";\n margin-bottom: 40px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n ", "\n color: ", ";\n\n @media ", " {\n ", "\n color: ", ";\n margin-bottom: 40px;\n }\n"])), design_system_1.mBody4, design_system_1.neutralDay.gray60, variables_1.device.desktop, design_system_1.wBody4, design_system_1.neutralDay.gray60);
exports.InfoContainer = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n"], ["\n display: flex;\n gap: 5px;\n"])));
exports.InfoElement = styled_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 14px;\n"], ["\n font-size: 14px;\n"])));
exports.BlogFooter = styled_1.default.footer(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n align-items: center;\n margin-top: 36px;\n @media ", " {\n width: 636px;\n margin-top: 52px;\n }\n"], ["\n width: 100%;\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n align-items: center;\n margin-top: 36px;\n @media ", " {\n width: 636px;\n margin-top: 52px;\n }\n"])), variables_1.device.desktop);
exports.BlogCopyrightInfo = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n color: ", ";\n text-align: left;\n background: ", ";\n padding: 14px;\n border-radius: 8px;\n margin-bottom: 60px;\n box-sizing: border-box;\n @media ", " {\n width: 100%;\n ", "\n color: ", ";\n }\n"], ["\n ", "\n color: ", ";\n text-align: left;\n background: ", ";\n padding: 14px;\n border-radius: 8px;\n margin-bottom: 60px;\n box-sizing: border-box;\n @media ", " {\n width: 100%;\n ", "\n color: ", ";\n }\n"])), design_system_1.mCaption1, design_system_1.neutralDay.gray60, design_system_1.neutralDay.gray5, variables_1.device.desktop, design_system_1.wCaption1, design_system_1.neutralDay.gray60);
exports.BlogShareContainer = styled_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
exports.BlogShareText = styled_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n color: ", ";\n margin-bottom: 12px;\n font-weight: 500;\n\n strong {\n font-weight: 700;\n }\n\n @media ", " {\n ", "\n color: ", ";\n margin-bottom: 12px;\n font-weight: 500;\n }\n"], ["\n ", "\n color: ", ";\n margin-bottom: 12px;\n font-weight: 500;\n\n strong {\n font-weight: 700;\n }\n\n @media ", " {\n ", "\n color: ", ";\n margin-bottom: 12px;\n font-weight: 500;\n }\n"])), design_system_1.mBody1, design_system_1.neutralDay.gray80, variables_1.device.desktop, design_system_1.wBody1, design_system_1.neutralDay.gray80);
exports.BlogShareBtnContainer = styled_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n width: 190px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n margin-bottom: 70px;\n @media ", " {\n margin-bottom: 80px;\n }\n"], ["\n width: 190px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n margin-bottom: 70px;\n @media ", " {\n margin-bottom: 80px;\n }\n"])), variables_1.device.desktop);
exports.ShareBtnWrapper = styled_1.default.button(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n padding: 0;\n border: none;\n background: none;\n border-radius: 50%;\n cursor: pointer;\n"], ["\n padding: 0;\n border: none;\n background: none;\n border-radius: 50%;\n cursor: pointer;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
//# sourceMappingURL=StoryContent.style.js.map