From 23d6cd5521a4cb6bfb24d0cc02d0f602ba6e0bae Mon Sep 17 00:00:00 2001
From: Pau Trepat Segura <pau.trepat.segura@gmail.com>
Date: Sun, 5 Jul 2020 03:45:24 +0200
Subject: [PATCH] Update styles for experiences section

---
 layouts/partials/experiences.html |  2 +-
 static/assets/css/experiences.css | 59 +++++++++++++++++++++++++++----
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html
index d63b319..1b21f29 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/experiences.html
@@ -1,6 +1,6 @@
 <div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
   {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
+    <h2 class="text-center">{{ .section.name }}</h1>
   {{ end }}
 
   <div class="container timeline text-justify">
diff --git a/static/assets/css/experiences.css b/static/assets/css/experiences.css
index 977a28e..331870c 100644
--- a/static/assets/css/experiences.css
+++ b/static/assets/css/experiences.css
@@ -15,6 +15,19 @@
   color: #3c4858;
 }
 
+#experiences h5 {
+  margin-bottom: 0.2rem;
+}
+
+.positions > h6 {
+  margin-bottom: 0.2rem;
+}
+
+.positions > .text-muted {
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
 .experiences-section .designation{
  font-weight: 600;
 }
@@ -25,9 +38,14 @@
   background-color: #248aaa;
   color: #f9fafc;
   max-height: 50px;
+  margin-left: 2px;
   z-index: 2;
 }
 
+.vertical-line-left-adjustment > .circle {
+  margin-right: 6px;
+}
+
 .timeline .vertical-line {
   align-self: stretch;
 }
@@ -116,32 +134,53 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-}
+  .positions {
+    font-size: 0.95em;
+    margin-bottom: 0.5rem;
+  }
 
+  .circle {
+    padding: 8px 15px;
+    max-height: 40px;
+  }
+}
 
 /* iPhoneX, iPhone 6,7,8 */
 @media only screen and (max-width: 375px) {
   .top-left {
     left: -52%;
-    top: -50%;
   }
   
   .top-right {
     left: 52%;
-    top: -50%;
   }
+
+  .bottom-right {
+    left: 52%;
+  }
+
+  .bottom-left {
+    left: -52%;
+  }
+
 }
 
 /* Galaxy S5, Moto G4 */
 @media only screen and (max-width: 360px) {
   .top-left {
     left: -56%;
-    top: -50%;
   }
   
   .top-right {
     left: 56%;
-    top: -50%;
+  }
+
+  .bottom-right {
+    left: 56%;
+  }
+
+  .bottom-left {
+    left: -56%;
   }
 }
 
@@ -149,11 +188,17 @@
 @media only screen and (max-width: 320px) {
   .top-left {
     left: -64%;
-    top: -50%;
   }
   
   .top-right {
     left: 64%;
-    top: -50%;
+  }
+
+  .bottom-right {
+    left: 64%;
+  }
+
+  .bottom-left {
+    left: -64%;
   }
 }