| | |
| | | @use 'modules/color_theme' as color; |
| | | @use 'modules/config' as conf; |
| | | |
| | | .portfolio { |
| | | position: relative; |
| | | padding-left: 0px; |
| | |
| | | padding-bottom: 0px; |
| | | padding-top: 48px; |
| | | |
| | | @include desktop { |
| | | @include conf.desktop { |
| | | padding: 48px; |
| | | } |
| | | |
| | |
| | | background: transparent; |
| | | border-radius: 0.5em; |
| | | |
| | | @include desktop { |
| | | @include themed() { |
| | | border: t('border'); |
| | | @include conf.desktop { |
| | | @include color.themed() { |
| | | border: color.t('border'); |
| | | } |
| | | } |
| | | } |
| | |
| | | &__image { |
| | | max-width: 100%; |
| | | min-width: 100%; |
| | | box-shadow: t('shadow'); |
| | | box-shadow: color.t('shadow'); |
| | | overflow: hidden; |
| | | transition: box-shadow 0.3s ease; |
| | | object-fit: cover; |
| | |
| | | padding: 32px 32px 0px 32px; |
| | | max-width: inherit; |
| | | |
| | | @include themed() { |
| | | background-color: t('accent'); |
| | | @include color.themed() { |
| | | background-color: color.t('accent'); |
| | | } |
| | | |
| | | @include desktop { |
| | | @include conf.desktop { |
| | | width: 60%; |
| | | object-fit: contain; |
| | | max-width: none; |
| | |
| | | } |
| | | |
| | | &--left { |
| | | @include desktop { |
| | | @include conf.desktop { |
| | | margin-right: auto; |
| | | margin-left: 0; |
| | | } |
| | | } |
| | | |
| | | &--right { |
| | | @include desktop { |
| | | @include conf.desktop { |
| | | margin-right: 0; |
| | | margin-left: auto; |
| | | } |
| | |
| | | padding: 32px; |
| | | position: relative; |
| | | |
| | | @include themed() { |
| | | background-color: t('accent'); |
| | | @include color.themed() { |
| | | background-color: color.t('accent'); |
| | | } |
| | | |
| | | @include desktop { |
| | | @include conf.desktop { |
| | | padding: 48px; |
| | | border-radius: 0.5em; |
| | | |
| | | @include themed() { |
| | | box-shadow: t('shadow'); |
| | | @include color.themed() { |
| | | box-shadow: color.t('shadow'); |
| | | } |
| | | } |
| | | |
| | |
| | | &--right { |
| | | margin-top: -24px; |
| | | |
| | | @include themed() { |
| | | border-bottom: t('border'); |
| | | @include color.themed() { |
| | | border-bottom: color.t('border'); |
| | | } |
| | | |
| | | @include desktop { |
| | | @include themed() { |
| | | background: t('primary-lighter'); |
| | | @include conf.desktop { |
| | | @include color.themed() { |
| | | background: color.t('primary-lighter'); |
| | | } |
| | | border-bottom: 0px; |
| | | width: 60%; |
| | |
| | | } |
| | | |
| | | &--right { |
| | | @include desktop { |
| | | @include conf.desktop { |
| | | margin-left: auto; |
| | | } |
| | | } |
| | |
| | | border-radius: 999em; |
| | | padding: 10px; |
| | | |
| | | @include themed() { |
| | | border: 1px solid t('primary-light'); |
| | | color: t('info'); |
| | | @include color.themed() { |
| | | border: 1px solid color.t('primary-light'); |
| | | color: color.t('info'); |
| | | } |
| | | |
| | | &:hover { |