From aab4f52b9c6b654907e2e5e039c8938f06fe405a Mon Sep 17 00:00:00 2001
From: Egor Tensin <Egor.Tensin@gmail.com>
Date: Wed, 23 Mar 2022 16:22:54 +0300
Subject: switch from flexbox to Bootstrap grid

Makes the list groups fill the entire screen on mobile.
---
 index.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index abc2062..89ec7ee 100644
--- a/index.html
+++ b/index.html
@@ -23,10 +23,12 @@ projects:
 <h1>{{ site.settings.author.name }}</h1>
 <hr/>
 
-<div style="display: flex; flex-wrap: wrap; column-gap: 1em;">
+<div class="row">
 
 {% if page.projects %}
-  <div class="list-group wide-enough">
+  <div class="col-sm-6 col-md-5 col-lg-4">
+
+  <div class="list-group">
     <div class="list-group-item disabled">
       <h4 class="list-group-item-heading">projects</h4>
     </div>
@@ -39,9 +41,13 @@ projects:
       </a>
     {% endfor %}
   </div>
+
+  </div>
 {% endif %}
 
-  <div class="list-group wide-enough">
+  <div class="col-sm-5 col-md-4 col-lg-3">
+
+  <div class="list-group">
     <div class="list-group-item disabled">
       <h4 class="list-group-item-heading">links</h4>
     </div>
@@ -60,4 +66,5 @@ projects:
     {% endif %}
   </div>
 
+  </div>
 </div>
-- 
cgit v1.2.3