my-portfolio/src/css/cv.css

99 lines
2.0 KiB
CSS

/****** CV Styles *******/
section#curriculumvitae{
background-color: var(--primaryDefault);
color: #FFFFFF;
padding: 2em 0;
}
section#curriculumvitae .cvGrid {
display: flex;
flex-direction: row;
padding: 0 1.5rem;
flex-wrap: wrap;
}
section#curriculumvitae .cvGrid > div {
width: 45%;
display: flex;
flex-direction: column;
min-height: 100%;
}
section#curriculumvitae .cvGrid h2 {
text-align: center;
}
section#curriculumvitae .timeline {
position: relative;
max-width: 30em;
gap: 1em;
display: flex;
flex-direction: column;
margin: 0 auto;
height: 100%;
}
section#curriculumvitae #work {
margin: 0 auto 0 8rem;
}
section#curriculumvitae .timeline:before {
content: "";
position: absolute;
height: 100%;
border: 4px var(--timelineItemBrdr) solid;
/*border-bottom: 4;*/
right: 194px;
top: 0;
}
section#curriculumvitae .timeline:after {
content: "";
display: table;
clear: both;
}
section#curriculumvitae .timelineItem {
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 {
content: '';
position: absolute;
}
section#curriculumvitae .timelineItem:before{
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) {
margin-left: 21em;
}
section#curriculumvitae .timelineItem:nth-child(2n):before {
right: auto;
left: -20px;
border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
}
section#curriculumvitae .timelineItem h3 {
font-weight: normal;
}
section#curriculumvitae .timelineItem span {
color: hsl(0, 0%, 90%);
}