hugo-theme-almeida/assets/scss/components/_experience.scss

109 lines
2.2 KiB
SCSS
Raw Normal View History

2020-08-16 12:21:35 +00:00
.experience {
2023-01-04 22:22:11 +00:00
&__extra_padding {
padding-top: 4rem !important;
}
2020-08-16 12:21:35 +00:00
&__item {
display: block;
2023-01-04 22:22:11 +00:00
position: relative;
2020-08-17 07:39:41 +00:00
@include avoid-break;
&:not(:first-child) {
padding-top: 1.5rem;
}
2023-01-04 22:22:11 +00:00
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;
}
2020-08-16 12:21:35 +00:00
}
&__header,
&__subheader {
2023-01-04 22:22:11 +00:00
display: flex;
2020-08-16 12:21:35 +00:00
width: 100%;
height: 2.4rem;
}
&__job {
position: relative;
transition: transform 0.2s cubic-bezier($cubic);
2023-01-04 22:22:11 +00:00
margin-bottom: 2rem;
2020-08-16 12:21:35 +00:00
&:hover {
transform: translateX(0.5rem);
}
}
&__company,
&__position {
text-align: left;
width: 70%;
float: left;
}
&__company {
color: $color-dark;
2020-08-16 12:21:35 +00:00
}
&__position {
text-transform: uppercase;
font-size: 1.3rem;
color: $color-dark;
2023-01-04 22:22:11 +00:00
margin-left: 1rem;
2020-08-16 12:21:35 +00:00
}
2020-08-29 11:16:29 +00:00
2020-08-16 12:21:35 +00:00
&__date,
&__place {
float: right;
text-align: right;
width: 30%;
2020-08-29 11:16:29 +00:00
color: $color-secondary;
2020-08-16 12:21:35 +00:00
}
&__date {
font-weight: 400;
}
&__place {
&::before {
font-family: 'Material Icons';
color: $color-icon-background;
2020-08-16 12:21:35 +00:00
font-size: 1.4rem;
2020-08-29 11:16:29 +00:00
content: 'place';
2020-08-16 12:21:35 +00:00
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
}
&__bullet {
2023-01-04 22:22:11 +00:00
list-style: square inside;
margin-left: 1rem;
2020-08-16 12:21:35 +00:00
}
&__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;
2020-08-16 12:21:35 +00:00
border-radius: 1rem;
padding: 0.1rem 0.6rem;
}
2020-08-29 11:16:29 +00:00
}