104 lines
1.8 KiB
SCSS
104 lines
1.8 KiB
SCSS
// -----------------------------------------------------------------------------
|
|
// This file contains styles that are specific to the home page.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
.hero {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 3rem 5vw;
|
|
|
|
@include respond-to('medium') {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
@include respond-to('m-large') {
|
|
padding: 80px 0;
|
|
}
|
|
}
|
|
|
|
.hero-info {
|
|
|
|
@include respond-to('medium') {
|
|
flex: 0 1 65%;
|
|
}
|
|
|
|
.hero-title {
|
|
font-weight: 900;
|
|
margin-top: 0;
|
|
@include font-size('xl');
|
|
}
|
|
|
|
.hero-subtitle {
|
|
color: var(--color-contrast-medium-high);
|
|
@include font-size('base');
|
|
}
|
|
}
|
|
|
|
.hero-owner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
row-gap: 20px;
|
|
|
|
@include respond-to('medium') {
|
|
flex: 0 1 35%;
|
|
}
|
|
|
|
.hero-avatar {
|
|
max-width: 300px;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 20px;
|
|
|
|
@include respond-to('medium') {
|
|
max-width: 100%;
|
|
width: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-section-title {
|
|
|
|
&::after {
|
|
background-color: var(--color-contrast-medium);
|
|
content: "";
|
|
display: block;
|
|
height: 2px;
|
|
position: relative;
|
|
width: 80px;
|
|
top: 8px;
|
|
}
|
|
}
|
|
|
|
.home-section-posts-title {
|
|
@extend .home-section-title;
|
|
margin: 0;
|
|
}
|
|
|
|
.home-title-dropdown {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 30px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
#select-posts {
|
|
@include font-size('sm');
|
|
padding: 0.4rem;
|
|
border: 1px solid var(--color-contrast-medium-low);
|
|
border-radius: 5px;
|
|
color: var(--color-contrast-high);
|
|
background-color: var(--color-contrast-lower);
|
|
}
|
|
|
|
.see-more {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.see-more-projects {
|
|
color: var(--color-contrast-medium);
|
|
font-weight: 300;
|
|
font-size: var(--font-size-base);
|
|
} |