<commit_before>import styled, {css} from 'styled-components';
import { bp } from './mixins';
import WIDTHS from './widths';
import COLORS from './colors';

export const MaxWidthContainer = styled.div`
	${props => (props.isSmall ? css`max-width: 700px;` : css`max-width: 1000px;`)}
	padding: 0 15px;
	margin: 0 auto;

	${bp(
		WIDTHS.M,
		`
		padding: 0 30px;		
	`
	)}
`;

export const ScreenReaderText = styled.span`
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
`;

export const NoWrap = styled.span`
	white-space: nowrap;
`;

export const AlbumBlock = styled.div`
	display: grid;
	grid-template-rows: auto;
	grid-template-areas:
		'c'
		'a'
		'b'
		'd';
	margin-bottom: 50px;
	align-items: center;
	overflow: hidden;
	background-color: ${COLORS.PRIMARY};
	color: ${COLORS.TEXT};
	transform: translate(-2px,-2px);
        box-shadow: 4px 4px 0 0 #111;
        border: 2px solid #111;

	${bp(
		460,
		css`
		grid-template-columns: 3fr 1fr;
		align-items: center;
		grid-template-areas: 
			"a c"
			"b c"
			"d d";
	`
	)}

	.title {
		grid-area: b;
		font-size: 2.8rem;
		margin-bottom: 20px;

		${bp(
			460,
			css`
			margin: 0 0 auto;
		`
		)}
	}

	.artist {
		grid-area: a;
		font-size: 2rem;
		margin: auto 0 0;
	}

	img {
		grid-area: c;
		margin-bottom: 20px;
		width: 100%;

		${bp(
			460,
			css`
			width: auto;
			margin-bottom: 0;
			align-self: stretch;
		`
		)}
	}

	.snippet {
		grid-area: d;
		padding: 20px;
	}
`;

export const BlogHeader = styled.div`
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: ${COLORS.SECONDARY};
	position: relative;
	background-color: ${COLORS.PRIMARY};
	${bp(
		WIDTHS.S,
		`
			margin-top: -60px;
			margin-bottom: 0;<commit_msg>chore: increase elevation of album block<commit_after>import styled, { css } from 'styled-components';
import { bp } from './mixins';
import WIDTHS from './widths';
import COLORS from './colors';

export const MaxWidthContainer = styled.div`
	${props =>
		props.isSmall
			? css`
					max-width: 700px;
			  `
			: css`
					max-width: 1000px;
			  `}
	padding: 0 15px;
	margin: 0 auto;

	${bp(
		WIDTHS.M,
		`
		padding: 0 30px;		
	`
	)}
`;

export const ScreenReaderText = styled.span`
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
`;

export const NoWrap = styled.span`
	white-space: nowrap;
`;

export const AlbumBlock = styled.div`
	display: grid;
	grid-template-rows: auto;
	grid-template-areas:
		'c'
		'a'
		'b'
		'd';
	margin-bottom: 50px;
	align-items: center;
	overflow: hidden;
	background-color: ${COLORS.PRIMARY};
	color: ${COLORS.TEXT};
	transform: translate(-5px, -5px);
	box-shadow: 7px 7px 0 0 #111;
	border: 2px solid #111;

	${bp(
		460,
		css`
			grid-template-columns: 3fr 1fr;
			align-items: center;
			grid-template-areas:
				'a c'
				'b c'
				'd d';
		`
	)}

	.title {
		grid-area: b;
		font-size: 2.8rem;
		margin-bottom: 20px;

		${bp(
			460,
			css`
				margin: 0 0 auto;
			`
		)}
	}

	.artist {
		grid-area: a;
		font-size: 2rem;
		margin: auto 0 0;
	}

	img {
		grid-area: c;
		margin-bottom: 20px;
		width: 100%;

		${bp(
			460,
			css`
				width: auto;
				margin-bottom: 0;
				align-self: stretch;
			`
		)}
	}

	.snippet {
		grid-area: d;
		padding: 20px;
	}
`;

export const BlogHeader = styled.div`
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: ${COLORS.SECONDARY};
	position: relative;
	background-color: ${COLORS.PRIMARY};
	${bp(
		WIDTHS.S,
		`
			margin-top: -60px;
			margin-bottom: 0;
{'fraction_non_alphanumeric': 0.15940815187046342, 'fraction_numerical': 0.03740926856504746, 'mean_word_length': 2.933040614709111, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3263986', 'n_tokens_mistral': 1750, 'n_tokens_neox': 1460, 'n_words': 359}