hugo-toha/static/assets/css/experiences.css
2020-07-15 11:19:57 +02:00

186 lines
No EOL
2.8 KiB
CSS

.experiences-section {
padding-bottom: 1rem;
}
.experiences-section .timeline {
margin-top: 1.5rem !important;
}
.experiences-section ul {
padding-left: 1rem;
}
.experiences-section ul > li {
margin-left: 0;
color: #3c4858;
}
#experiences h5 {
margin-bottom: 0.2rem;
}
.experiences-section .designation{
font-weight: 600;
text-align: left;
margin-bottom: 0.25em;
}
.company{
display: flex;
align-items: center;
}
.company-logo {
height: 56px;
width: 56px;
}
.company-logo img {
border-radius: 15%;
width: 100%;
height: 100%;
}
.company-info {
margin-left: 24px;
width: 75%;
}
.company-timeline {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 10px 0 0 0;
}
.company-timeline > h6 {
margin-bottom: 0.2rem;
}
.company-timeline > .text-muted {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.experience:not(:last-child) {
margin-bottom: 1rem;
border-bottom: 2px solid #e6e9ec;
}
.responsabilities {
margin-bottom: 1rem;
}
.company-timeline-item {
position: relative;
padding-bottom: 20px;
margin-bottom: 8px;
padding-left: 80px;
}
.company-timeline-item.position::before {
content: "";
position: absolute;
top: 8px;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #7cb2c3;
left: 24px;
}
.company-timeline-item.position::after {
content: "";
position: absolute;
top: 24px;
height: calc(100% - 18px);
width: 2px;
background-color: #7cb2c3;
left: 27px;
}
.company-timeline-item:last-child::after {
content: none;
}
/* ============= Device specific fixes ======= */
/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
}
@media (max-width: 1200px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.container.timeline {
padding-left: 0px;
padding-right: 10px;
}
.company-timeline-item {
padding-left: 55px;
}
.company-logo {
height: 42px;
width: 42px;
}
.company-info {
margin-left: 16px;
}
.company-timeline-item.position::before {
left: 17px;
}
.company-timeline-item.position::after {
left: 20px;
}
.responsabilities {
margin-top: 0.5em;
display: none;
}
.company-period {
color: #808080 !important;
}
}
/* iPhoneX, iPhone 6,7,8 */
@media only screen and (max-width: 375px) {
}
/* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) {
}
/* iPhone 5 or before */
@media only screen and (max-width: 320px) {
}