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) " " "-" }}">
|
<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
|
||||||
{{ if not (.section.hideTitle) }}
|
{{ if not (.section.hideTitle) }}
|
||||||
<h1 class="text-center">{{ .section.name }}</h1>
|
<h2 class="text-center">{{ .section.name }}</h1>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div class="container timeline text-justify">
|
<div class="container timeline text-justify">
|
||||||
|
|
|
@ -15,6 +15,19 @@
|
||||||
color: #3c4858;
|
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{
|
.experiences-section .designation{
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
@ -25,9 +38,14 @@
|
||||||
background-color: #248aaa;
|
background-color: #248aaa;
|
||||||
color: #f9fafc;
|
color: #f9fafc;
|
||||||
max-height: 50px;
|
max-height: 50px;
|
||||||
|
margin-left: 2px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vertical-line-left-adjustment > .circle {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.timeline .vertical-line {
|
.timeline .vertical-line {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
@ -116,32 +134,53 @@
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
@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 */
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
@media only screen and (max-width: 375px) {
|
@media only screen and (max-width: 375px) {
|
||||||
.top-left {
|
.top-left {
|
||||||
left: -52%;
|
left: -52%;
|
||||||
top: -50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-right {
|
.top-right {
|
||||||
left: 52%;
|
left: 52%;
|
||||||
top: -50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-right {
|
||||||
|
left: 52%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-left {
|
||||||
|
left: -52%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
/* Galaxy S5, Moto G4 */
|
||||||
@media only screen and (max-width: 360px) {
|
@media only screen and (max-width: 360px) {
|
||||||
.top-left {
|
.top-left {
|
||||||
left: -56%;
|
left: -56%;
|
||||||
top: -50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-right {
|
.top-right {
|
||||||
left: 56%;
|
left: 56%;
|
||||||
top: -50%;
|
}
|
||||||
|
|
||||||
|
.bottom-right {
|
||||||
|
left: 56%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-left {
|
||||||
|
left: -56%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -149,11 +188,17 @@
|
||||||
@media only screen and (max-width: 320px) {
|
@media only screen and (max-width: 320px) {
|
||||||
.top-left {
|
.top-left {
|
||||||
left: -64%;
|
left: -64%;
|
||||||
top: -50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-right {
|
.top-right {
|
||||||
left: 64%;
|
left: 64%;
|
||||||
top: -50%;
|
}
|
||||||
|
|
||||||
|
.bottom-right {
|
||||||
|
left: 64%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-left {
|
||||||
|
left: -64%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue