src/scss/layout/_article.scss - master - creativezen/insidium

src/scss/layout/_article.scss
178 строк4 KB
Anton Goul'art
updated table styles
03 ноя 2024, 20:23
03 ноя 2024, 20:236530f55
@use './mixins/fluid-size' as size;

/* article settings */
/* ======================== */
.article-settings {
	--article-space: calc(var(--scale) * 1.6);
	--article-space-small: calc(var(--scale) * 1);
}

/* article prototype */
/* ======================= */
.article-proto {
	@extend .article-settings;

	padding: var(--article-space);
	background-color: var(--brand-dark);
	color: var(--white);
    
    *:not([class]):not(h2):not(h3):not(h4):not(h5):not(h6) {
        color: inherit;
        font-size: inherit;
    }
}

/* article */
/* ======================= */
.article {
	@extend .article-proto;

	> * + h2 {
		margin-top: calc(var(--scale) * 1.8);
	}

	> * + h3 {
		margin-top: calc(var(--scale) * 1.8);
	}

	> * + h4 {
		margin-top: calc(var(--scale) * 1.6);
	}

	> * + h5 {
		margin-top: calc(var(--scale) * 1);
	}

	> * + h6 {
		margin-top: calc(var(--scale) * 0.8);
	}

	> * + ul,
	> * + ol {
		margin-top: calc(var(--scale) * 0.8);
	}

	> *:not(h2):not(h3):not(h4):not(h5):not(h6) + p,
	> *:not(h2):not(h3):not(h4):not(h5):not(h6) + blockquote,
	> *:not(h2):not(h3):not(h4):not(h5):not(h6) + .blockquote,
	> *:not(h2):not(h3):not(h4):not(h5):not(h6) + img,
    > *:not(h2):not(h3):not(h4):not(h5):not(h6) + table {
		margin-top: calc(var(--scale) * 1);
	}

    h2,h3,h4,h5,h6 {
        text-transform: none;
    }

	img {
		border-radius: calc(var(--radius) * 0.4);
	}

	ol:not([class]),
	ul:not([class]) {
		padding-left: var(--article-space-small);
		/* @include size.calculate(font-size, 480px, 1680px, 16px, 22px); */
		line-height: 1.4;

		li {
			font-size: inherit;
			line-height: inherit;
		}
	}

	ul {
		li {
			position: relative;
			padding-left: 15px;

			&:before {
				content: '';
				width: 7px;
				height: 7px;
				display: block;
				position: absolute;
				top: 0.6em;
				left: 0;
				margin: auto;
				border-radius: 100px;
				background: var(--btn-link-color);
			}
		}

		*:not(small) {
			font-size: inherit;
			line-height: inherit;
		}
	}

	blockquote {
		margin-top: var(--article-space);
		padding: var(--article-space-small);
		border-radius: var(--radius-medium);
		border: 1px solid var(--dark-border) !important;
		@include size.calculate(font-size, 480px, 1680px, 16px, 26px);
		line-height: 1.4;
		letter-spacing: -0.02em;
		background: var(--brand-dark);
		border: none;

		& + * {
			margin-top: var(--article-space);
		}
	}

	a:not([class]) {
		/* margin-top: 15px; */
		display: inline-block;
		font-weight: inherit;
		/* @include size.calculate(font-size, 480px, 1680px, 14px, 18px); */
        font-size: inherit;
		line-height: 140%;
		letter-spacing: -0.03em;
		color: var(--brand-dark-blue);
		text-decoration: underline;

		&:hover {
			color: var(--brand-green);
		}
	}

	* + .block-offer {
		margin-top: var(--article-space);
	}

    h2,h3,h4,h5,h6,p,blockquote,strong,b {
        position: relative;
    }

    table {
        border: 1px solid var(--gray-arsenic);
        width: 100%;
        @include size.calculate(font-size, 480px, 1460px, 12px, 18px);
        
        td {
            @include size.calculate(padding-inline, 480px, 1460px, 8px, 12px);
            @include size.calculate(padding-top, 480px, 1460px, 4px, 8px);
            @include size.calculate(padding-bottom, 480px, 1460px, 4px, 8px);
            border: 1px solid var(--gray-arsenic);
        }
    }

    .alert {
        @include size.calculate(padding, 480px, 1460px, 14px, 20px);
        background: #564f4f;
        border-left: 2px solid var(--brand-yellow);
    }

    * + .alert {
        margin-top: calc(var(--scale)* 1);
    }

    b,strong {
        color: var(--brand-yellow) !important;
    }
}

.article + .article {
	margin-top: calc(var(--scale) * 1.4);
}