From 558ebf443162236450bc920335be71bc79be4c50 Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.top>
Date: Tue, 25 Oct 2022 06:19:46 +0400
Subject: [PATCH] Removed grid layout. Use column instead.

---
 homepage/static/assets/css/main.css | 44 +++++++++++++++--------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/homepage/static/assets/css/main.css b/homepage/static/assets/css/main.css
index 579f59a..de83973 100644
--- a/homepage/static/assets/css/main.css
+++ b/homepage/static/assets/css/main.css
@@ -66,36 +66,37 @@ h1 {
 h1,
 h2 { font-variant: small-caps; }
 
+h2 { font-size: 1.4rem; }
+
 h2,
 h3 {
 	text-align: center;
 	margin: 1rem; }
 
-h2 { font-size: 1.4rem; }
-
 h3 { font-size: 1.05rem; }
 
-h3.service-up::after { content: '●';  }
-
-h3.service-down::after { content: '○'; }
-
 h3:is(.service-up, .service-down)::after {
 	font-size: 1rem;
 	margin-right: -.9rem;
 	vertical-align: text-top;
 	padding-left: .2rem; }
 
+.service-up::after { content: '●';  }
+
+.service-down::after { content: '○'; }
+
+.highlighted { color: var(--primary-color); }
+
 small,
 figure figcaption { font-size: .8rem; }
 
-figure.center { text-align: center; }
+figure.center,
+figure figcaption { text-align: center; }
 
 figure img { width: 100%; }
 
 figure.center img { width: 60%; }
 
-figure figcaption { text-align: center; }
-
 table {
 	border-collapse: collapse;
 	margin-bottom: .5rem; }
@@ -106,20 +107,21 @@ tr :is(th, td) {
 
 tr :is(th, td):not(:last-child) { padding-right: .5rem; }
 
-#banners figure img { width: auto; }
+.columns {
+	column-count: 3;
+	column-fill: balance-all;
+	column-gap: 1rem;
+	column-span: none; }
 
-.highlighted { color: var(--primary-color); }
+.columns.figs { column-count: 2; }
 
-.grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-gap: 1rem; }
+.columns > div {
+	display: inline-block;
+	width: 100%; }
 
-.grid h3 { color: var(--primary-color); }
+.columns h3 { color: var(--primary-color); }
 
-.grid.figs { grid-template-columns: 1fr 1fr; }
-
-.grid.banners {
+.banners {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center; }
@@ -202,5 +204,5 @@ footer {
 
 	body > header nav { text-align: center; }
 
-	.grid,
-	.grid.figs { grid-template-columns: 1fr; } }
\ No newline at end of file
+	.columns,
+	.columns.figs { column-count: 1; } }
\ No newline at end of file