rimarima/themes/hugo-liftoff/assets/scss/pages/_home.scss
Adrian Amaglio c09f092db4 init
2023-11-17 10:54:41 +01:00

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);
}