Шаблон:Mainpage - Історія редагувань

YakovBerringer в 23:48, 14 квітня 2025

2025-04-14T23:48:24Z

← Попередня версія		Версія за 02:48, 15 квітня 2025
Рядок 90:		Рядок 90:
	}		}
	}}		}}

	<div class="flex-container">		<div class="flex-container">
	{{#if: {{{1\|}}} \| <div class="mainpage-card">{{{1}}}</div> }}		{{#if: {{{1\|}}} \| <div class="mainpage-card">{{{1}}}</div> }}

YakovBerringer в 23:29, 4 квітня 2025

2025-04-04T23:29:22Z

← Попередня версія		Версія за 02:29, 5 квітня 2025
Рядок 84:		Рядок 84:

	.CategoryTreeItem {		.CategoryTreeItem {
	font-size: 0.~~95em~~ !important;		font-size: 1.1em !important;
	line-height: 1.7 !important;		line-height: 1.7 !important;
	text-align: left !important;		text-align: left !important;

YakovBerringer в 23:26, 4 квітня 2025

2025-04-04T23:26:23Z

← Попередня версія		Версія за 02:26, 5 квітня 2025
Рядок 84:		Рядок 84:

	.CategoryTreeItem {		.CategoryTreeItem {
	font-size: 1.~~10em~~ !important;		font-size: 0.95em !important;
	line-height: 1.7 !important;		line-height: 1.7 !important;
	text-align: left !important;		text-align: left !important;

YakovBerringer в 09:01, 4 квітня 2025

2025-04-04T09:01:45Z

← Попередня версія		Версія за 12:01, 4 квітня 2025
Рядок 70:		Рядок 70:
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
	margin-bottom: 1.~~2em~~;		margin-bottom: 0.5em;
	width: 100%;		width: 100%;
	}		}

YakovBerringer в 09:00, 4 квітня 2025

2025-04-04T09:00:01Z

← Попередня версія		Версія за 12:00, 4 квітня 2025
Рядок 84:		Рядок 84:

	.CategoryTreeItem {		.CategoryTreeItem {
	font-size: 1.~~50em~~ !important;		font-size: 1.10em !important;
	line-height: 1.7 !important;		line-height: 1.7 !important;
	text-align: left !important;		text-align: left !important;

YakovBerringer в 08:59, 4 квітня 2025

2025-04-04T08:59:48Z

← Попередня версія		Версія за 11:59, 4 квітня 2025
Рядок 84:		Рядок 84:

	.CategoryTreeItem {		.CategoryTreeItem {
	font-size: 1.~~10em~~ !important;		font-size: 1.50em !important;
	line-height: 1.7 !important;		line-height: 1.7 !important;
	text-align: left !important;		text-align: left !important;

YakovBerringer в 08:59, 4 квітня 2025

2025-04-04T08:59:29Z

← Попередня версія		Версія за 11:59, 4 квітня 2025
Рядок 84:		Рядок 84:

	.CategoryTreeItem {		.CategoryTreeItem {
	font-size: 1.~~15em~~ !important;		font-size: 1.10em !important;
	line-height: 1.7 !important;		line-height: 1.7 !important;
	text-align: left !important;		text-align: left !important;

YakovBerringer в 08:55, 4 квітня 2025

2025-04-04T08:55:58Z

← Попередня версія		Версія за 11:55, 4 квітня 2025
Рядок 2:		Рядок 2:
	.flex-container {		.flex-container {
	display: flex;		display: flex;
	flex-wrap: wrap; ~~/* Разрешаем перенос строк */~~		flex-wrap: wrap;
	justify-content: space-between;~~/* Распределяем карточки по всей ширине */~~		justify-content: space-between;
	gap: 20px; ~~/* Расстояние между карточками */~~		gap: 20px;
	margin: 40px auto; ~~/* Отступы сверху и снизу */~~		margin: 40px auto;
	padding: 0 ~~48px~~; ~~/* Отступы по бокам */~~		padding: 0 32px;
	}		}

	/* По умолчанию (~~до 767px~~) — одна колонка */		/* По умолчанию (mobile-first) — одна колонка */
	.mainpage-card {		.mainpage-card {
	flex: 0 0 100%;		flex: 0 0 100%;
Рядок 27:		Рядок 27:
	}		}

	/* ~~От 768px до 1199px — две~~ колонки */		/* Две колонки (пример) */
	@media (min-width: 768px) and (max-width: 1199px) {		@media (min-width: 768px) and (max-width: 1199px) {
	.mainpage-card {		.mainpage-card {
Рядок 34:		Рядок 34:
	}		}

	/* ~~От 1200px и выше — три~~ колонки */		/* Три колонки (пример) */
	@media (min-width: 1200px) {		@media (min-width: 1200px) {
	.mainpage-card {		.mainpage-card {
	flex: 0 0 calc((100% - 40px) / 3);		flex: 0 0 calc((100% - 40px) / 3);
			}
			}

			/* >>> ВАЖНО: уменьшаем отступы на мобильных (до 767px) <<< */
			@media (max-width: 767px) {
			.flex-container {
			margin: 20px auto; /* вместо 40px, чтобы уменьшить верх/низ */
			padding: 0 10px; /* вместо 32px, чтобы карточка стала шире */
	}		}
	}		}
Рядок 56:		Рядок 64:
	}		}

	~~/* Блок для изображения */~~
	.mainpage-card .image {		.mainpage-card .image {
	height: auto;		height: auto;
	min-height: 140px;		min-height: 140px;
	/* Если хотите ограничить высоту, можно поставить max-height: 200px, но на мобильном экране это может обрезать картинку */
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
Рядок 68:		Рядок 74:
	}		}

	~~/* Изображение внутри карточки */~~
	.mainpage-card .image img {		.mainpage-card .image img {
	width: 100%; ~~/* Подстраивается под ширину родительского блока */~~		width: 100%;
	height: auto; ~~/* Пропорции сохраняются */~~		height: auto;
	max-width: 100%; ~~/* Не выходит за пределы контейнера */~~		max-width: 100%;
	object-fit: contain;		object-fit: contain;
	display: block;		display: block;

YakovBerringer в 08:53, 4 квітня 2025

2025-04-04T08:53:16Z

← Попередня версія		Версія за 11:53, 4 квітня 2025
Рядок 6:		Рядок 6:
	gap: 20px; /* Расстояние между карточками */		gap: 20px; /* Расстояние между карточками */
	margin: 40px auto; /* Отступы сверху и снизу */		margin: 40px auto; /* Отступы сверху и снизу */
	padding: 0 ~~64px~~; /* Отступы по бокам */		padding: 0 48px; /* Отступы по бокам */
	}		}

YakovBerringer в 08:52, 4 квітня 2025

2025-04-04T08:52:02Z

← Попередня версія		Версія за 11:52, 4 квітня 2025
Рядок 2:		Рядок 2:
	.flex-container {		.flex-container {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap; /* Разрешаем перенос строк */
	/* ~~карточки переносятся вниз, если не помещаются~~ */		justify-content: space-between;/* Распределяем карточки по всей ширине */
	justify-content: space-between;		gap: 20px; /* Расстояние между карточками */
	gap: 20px; /* ~~расстояние~~ между карточками */		margin: 40px auto; /* Отступы сверху и снизу */
	margin: 40px auto; /* ~~отступ~~ сверху/снизу */		padding: 0 64px; /* Отступы по бокам */
	padding: 0 64px; /* ~~отступы слева/справа~~ */
	}		}

	/* По умолчанию (~~мобильные устройства~~ до ~~1024px~~): одна колонка */		/* По умолчанию (до 767px) — одна колонка */
	.mainpage-card {		.mainpage-card {
	flex: 0 0 100%;		flex: 0 0 100%;
Рядок 28:		Рядок 27:
	}		}

	/* ~~При ширине экрана от 1024px~~ до ~~1439px:~~ две колонки */		/* От 768px до 1199px — две колонки */
	@media (min-width: ~~1024px~~) and (max-width: ~~1439px~~) {		@media (min-width: 768px) and (max-width: 1199px) {
	.mainpage-card {		.mainpage-card {
	flex: 0 0 calc((100% - 20px) / 2);		flex: 0 0 calc((100% - 20px) / 2);
	~~/* 1 горизонтальный gap = 20px, значит вычитаем 20px из 100%, делим на 2 */~~
	}		}
	}		}

	/* ~~При ширине экрана от 1440px~~ и выше: три колонки */		/* От 1200px и выше — три колонки */
	@media (min-width: ~~1440px~~) {		@media (min-width: 1200px) {
	.mainpage-card {		.mainpage-card {
	flex: 0 0 calc((100% - 40px) / 3);		flex: 0 0 calc((100% - 40px) / 3);
	~~/* 2 горизонтальных gap (три колонки => два «пробела») = 2 * 20px = 40px */~~
	}		}
	}		}
Рядок 59:		Рядок 56:
	}		}

			/* Блок для изображения */
	.mainpage-card .image {		.mainpage-card .image {
	height: auto;		height: auto;
	min-height: 140px;		min-height: 140px;
	max-height: 200px;		/* Если хотите ограничить высоту, можно поставить max-height: 200px, но на мобильном экране это может обрезать картинку */
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
Рядок 70:		Рядок 68:
	}		}

			/* Изображение внутри карточки */
	.mainpage-card .image img {		.mainpage-card .image img {
	width: 100%;		width: 100%; /* Подстраивается под ширину родительского блока */
	height: auto;		height: auto; /* Пропорции сохраняются */
	max-width: 100%;		max-width: 100%; /* Не выходит за пределы контейнера */
	object-fit: contain;		object-fit: contain;
			display: block;
			margin: 0 auto;
	}		}


	.CategoryTreeItem {		.CategoryTreeItem {