my-portfolio/src/css/cv.css

96 lines
2.0 KiB
CSS
Raw Normal View History

2021-09-01 20:37:31 +01:00
/****** CV Styles *******/
section#curriculumVitae{
2021-09-01 20:37:31 +01:00
background-color: var(--primaryDefault);
color: #FFFFFF;
padding: 2em 0;
}
section#curriculumVitae .cvGrid {
2021-09-01 20:37:31 +01:00
display: flex;
flex-direction: row;
padding: 0 1.5rem;
flex-wrap: wrap;
}
section#curriculumVitae .cvGrid > div {
2021-09-01 20:37:31 +01:00
width: 45%;
display: flex;
flex-direction: column;
min-height: 100%;
}
section#curriculumVitae .cvGrid h2 {
2021-09-01 20:37:31 +01:00
text-align: center;
}
section#curriculumVitae .timeline {
2021-09-01 20:37:31 +01:00
position: relative;
max-width: 30em;
gap: 1em;
display: flex;
flex-direction: column;
height: 100%;
}
section#curriculumVitae #work {
2021-09-01 20:37:31 +01:00
margin: 0 auto 0 8rem;
}
section#curriculumVitae .timeline:before {
2021-09-01 20:37:31 +01:00
content: "";
position: absolute;
height: 100%;
border: 4px var(--timelineItemBrdr) solid;
right: 194px;
top: 0;
}
section#curriculumVitae .timeline:after {
2021-09-01 20:37:31 +01:00
content: "";
display: table;
clear: both;
}
section#curriculumVitae .timelineItem {
2021-09-01 20:37:31 +01:00
border: 2px solid var(--timelineItemBrdr);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0 1rem;
width: 50%;
position: relative;
background-color: var(--primaryHover);
}
section#curriculumVitae .timelineItem:before, .timelineItem:after {
2021-09-01 20:37:31 +01:00
content: '';
position: absolute;
}
section#curriculumVitae .timelineItem:before{
2021-09-01 20:37:31 +01:00
content: '';
right: -20px;
top: calc(50% - 5px);
border-style: solid;
border-color: var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;
border-width: 20px;
transform: rotate(45deg);
}
section#curriculumVitae .timelineItem:nth-child(2n) {
2021-09-01 20:37:31 +01:00
margin-left: 21em;
}
section#curriculumVitae .timelineItem:nth-child(2n):before {
2021-09-01 20:37:31 +01:00
right: auto;
left: -20px;
border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
}
section#curriculumVitae .timelineItem h3 {
2021-09-01 20:37:31 +01:00
font-weight: normal;
}
section#curriculumVitae .timelineItem span {
2021-09-01 20:37:31 +01:00
color: hsl(0, 0%, 90%);
}