98 lines
1.4 KiB
CSS
98 lines
1.4 KiB
CSS
.Project {
|
|
position: relative;
|
|
background: var(--clr-bg-trietary);
|
|
border-radius: var(--radius-md);
|
|
width: 100%;
|
|
height: 400px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
padding: var(--gap-md);
|
|
gap: var(--gap-md);
|
|
}
|
|
|
|
.Project_odd {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.Project_halfWidth {
|
|
width: calc(50% - var(--gap-lg) / 2);
|
|
flex-direction: column-reverse;
|
|
align-items: end;
|
|
}
|
|
|
|
.Project_halfWidth .preview {
|
|
height: 40%;
|
|
}
|
|
|
|
.preview {
|
|
max-height: 100%;
|
|
max-width: 50%;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
gap: var(--gap-sm);
|
|
}
|
|
|
|
.name {
|
|
font-weight: 300;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--gap-sm);
|
|
}
|
|
|
|
.description {
|
|
font: var(--font-sm);
|
|
}
|
|
|
|
.techIcons {
|
|
position: absolute;
|
|
left: var(--gap-sm);
|
|
bottom: var(--gap-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.techIcon {
|
|
padding: calc(var(--gap-sm) / 2);
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (max-width: 1080px) {
|
|
.Project {
|
|
flex-direction: column-reverse;
|
|
align-items: end;
|
|
height: unset;
|
|
gap: var(--gap-lg);
|
|
}
|
|
|
|
.Project_halfWidth {
|
|
width: 100%;
|
|
}
|
|
|
|
.Project_halfWidth .preview {
|
|
height: 200px;
|
|
width: auto;
|
|
}
|
|
|
|
.preview {
|
|
height: 200px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.techIcons {
|
|
display: none;
|
|
}
|
|
|
|
.Project_desktopOnly {
|
|
display: none;
|
|
}
|
|
} |