Update styles for experiences section

This commit is contained in:
Pau Trepat Segura 2020-07-05 03:45:24 +02:00
parent 4ff5846be8
commit 23d6cd5521
2 changed files with 53 additions and 8 deletions

View file

@ -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">

View file

@ -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%;
}
}