Шаблон:MainPage/styles.css: различия между версиями

← Предыдущая правка

@@ Строка 1: / Строка 1: @@
 .main-page {
 	display: flex;
+	flex-direction: column-reverse;
+	gap: 16px;
+}
+@media (min-width: 960px) {
+	.main-page {
+		flex-direction: row;
+	}
+}
+@media (min-width: 560px) {
+	.main-page {
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
+	.main-page-container {
+		align-items: center;
+	}
+	.main-page-blocks {
+		justify-content: flex-start;
+	}
+}
+.main-page-blocks {
 	justify-content: center;
-	align-items: center;
-	text-align: center;
-	gap: 16px;
 }
 .main-page-container {
-	flex: 1;
+	width: 800px;
+	max-width: 100%;
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
 }
 .main-page-blocks {
 	flex-shrink: 0;
 	flex-wrap: wrap;
-}
-.main-page-editing-warning {
-	color: gray;
 }
 .main-page-buttons {
 	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
 	justify-content: space-between;
+	gap: 12px;
+}
+@media (min-width: 560px) {
+	.main-page-buttons {
+		flex-direction: row;
+		gap: 24px;
+	}
 }
 .main-page-buttons-section {
@@ Строка 25: / Строка 54: @@
 	align-items: flex-start;
 	text-align: left;
-	gap: 24px;
+	flex-shrink: 0;
 }
 .main-page-buttons-section-label {
 	font-weight: 600;
 	font-size: 24px;
+}
+.main-page-join {
+	margin: 64px 0 32px 0;
+}
+.main-page-editing-warning {
+	width: 600px;
+	max-width: 100%;
+	color: gray;
 }