Update styles for experiences section
This commit is contained in:
parent
4ff5846be8
commit
23d6cd5521
2 changed files with 53 additions and 8 deletions
|
@ -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">
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue