Trying to get rid of Bootstrap...

assets/css/styles.css

@@ -20,6 +20,7 @@ body {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin: 0;
 }
 h1,
 h2,
@@ -31,6 +32,8 @@ h6 {
   font-weight: 700;
   color: #778492;
 }
+
+
 a {
   color: #3aaa64;
   -webkit-transition: all 0.4s ease-in-out;
@@ -116,6 +119,13 @@ iframe {
 }
 */
 
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 /* ======= Images ======= */
 img.circle {
   border-radius: 50%;
@@ -139,6 +149,7 @@ img.drop {
 }
 .header .profile-image {
   margin-right: 30px;
+  display: block;
 }
 .header .profile-content {
   display: inline-block;
@@ -172,6 +183,18 @@ img.drop {
   font-size: 20px;
   padding-top: 8px;
 }
+.header .social ul {
+  list-style: none;
+  padding-left: 0;
+  margin-left: -5px;
+  margin-bottom: 10px;
+}
+.header .social li {
+  display: inline-block;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+/* TODO: try to get rid of bootstrap... */
 .header .profile-bio {
   width: 20em;
   display: inline-block;
@@ -645,6 +668,12 @@ img.drop {
   margin-bottom: 15px;
 }
 
+/* ======= Blog ======= */
+.blog-box {
+  box-shadow: 0px 0px 30px -10px #dddddd;
+  margin : 10px;
+}
+
 /* ======= Footer ======= */
 .footer {
   background: #32383e;

templates/blog.html.twig

@@ -8,7 +8,7 @@
 
 {% block page_content %}
     <section id="body-wrapper" class="section blog-listing">
-        <section class="container {{ grid_size }}">
+        <section>
 
             <div>
             {% for child in collection %}

templates/partials/blog-list-item.html.twig

@@ -1,4 +1,4 @@
-<div class="card">
+<div class="blog-box">
     {% set image = page.media.images|first %}
     {% if image %}
     <div class="card-image">

templates/partials/profile.html.twig

@@ -7,7 +7,7 @@
       <h1 class="name">{{ theme_config.profile.name | default(site.author.name) }}</h1>
       <h2 class="desc">{{ attribute(theme_config.profile.desc,grav.language.getActive) | default(site.metadata.description) }}</h2>
       {% if theme_config.social.networks | length %}
-        <ul class="social list-inline">
+        <ul class="social">
           {% for network in theme_config.social.networks %}
             <li class="{% if network == theme_config.social.networks | last %}last-item{% endif %}"><a href="{{ network.url }}" {%if network.icon == "mastodon" %}rel="me"{% endif %}><i class="fa fa-{{ network.icon }}"></i>{{ network.title }}</a></li>
           {% endfor %}