hugo-theme-almeida/assets/scss/components/_experience.scss
2023-01-04 22:22:11 +00:00

108 lines
2.2 KiB
SCSS

.experience {
&__extra_padding {
padding-top: 4rem !important;
}
&__item {
display: block;
position: relative;
@include avoid-break;
&:not(:first-child) {
padding-top: 1.5rem;
}
margin-bottom: 10px;
margin-top: 10px;
&::before {
content: "";
height: 90%;
width: 1.5px;
position: absolute;
background: linear-gradient($color-page-background, rgba(255, 255, 255, 0));
//background: linear-gradient(blue, red);
margin-top: 25px;
}
}
&__header,
&__subheader {
display: flex;
width: 100%;
height: 2.4rem;
}
&__job {
position: relative;
transition: transform 0.2s cubic-bezier($cubic);
margin-bottom: 2rem;
&:hover {
transform: translateX(0.5rem);
}
}
&__company,
&__position {
text-align: left;
width: 70%;
float: left;
}
&__company {
color: $color-dark;
}
&__position {
text-transform: uppercase;
font-size: 1.3rem;
color: $color-dark;
margin-left: 1rem;
}
&__date,
&__place {
float: right;
text-align: right;
width: 30%;
color: $color-secondary;
}
&__date {
font-weight: 400;
}
&__place {
&::before {
font-family: 'Material Icons';
color: $color-icon-background;
font-size: 1.4rem;
content: 'place';
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
}
&__bullet {
list-style: square inside;
margin-left: 1rem;
}
&__badges {
display: block;
text-align: right;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
&__badge {
font-size: 0.9rem;
font-weight: 400;
display: inline-block;
background-color: $color-icon-background;
color: $color-icon-primary;
border-radius: 1rem;
padding: 0.1rem 0.6rem;
}
}