projects.sass 2.98 KiB
.block-projects
.list
.project-title
@include hover-translate-icon
display: flex
align-items: center
text-decoration: none
padding-bottom: $spacing-3
padding-top: $spacing-3
gap: $spacing-3
border-bottom: 1px solid var(--color-border)
@include icon(arrow-right, after)
margin-left: auto
display: inline
opacity: 0
margin-right: $spacing-1
a
flex: 1
text-decoration: none
&:hover
&,
a
color: $color-accent
&::after
opacity: 1
@include in-page-without-sidebar
@include h2
.grid
@include grid(2, md)
@include media-breakpoint-down(desktop)
.project + .project
margin-top: $spacing-4
&--alternate
.alternate
@include media-breakpoint-down(desktop)
.project + .project
margin-top: $spacing-4
@include in-page-with-sidebar
article
width: columns(5)
@include in-page-without-sidebar
.top
.description
@include body-text
article
width: columns(7)
.large
.project
.project-meta
line-height: $body-size
margin-bottom: $spacing-2
margin-top: $spacing-2
time::after
content: ' —'
margin-right: $spacing-1
time,
ul.project-categories
align-self: baseline
display: inline
.project-categories
li
display: inline
+ .project
margin-top: $spacing-4
.more
@include icon(arrow-right, after)
margin-left: $spacing-1
transition: transform 0.55s $arrow-ease-transition
&:hover
.more::after
transform: translateX(5px)
@include media-breakpoint-up(desktop)
.project
align-items: flex-end
flex-direction: row
gap: var(--grid-gutter)
.media
margin-bottom: 0
@include in-page-with-sidebar
.project
&-title
@include h2
margin-bottom: $spacing-1
&-content
flex: 1
.media
flex: 1
@include in-page-without-sidebar
.project
&-title
@include lead
margin-bottom: space(4)
&-content
width: columns(5)
.media
width: columns(7)