depot/web/lukegbcom/lib/HeroImage/index.module.scss

74 lines
1.1 KiB
SCSS
Raw Normal View History

2022-04-03 23:32:57 +00:00
.container {
position: relative;
margin-bottom: 1em;
}
.heroCard {
display: flex;
flex-direction: column;
padding: 5rem 0;
padding: 10vh 0;
text-align: center;
}
.fullHeight {
&.container {
height: 100vh;
}
.heroCard {
left: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.heroTitle {
font-size: 30pt;
}
}
.heroCard:after {
clear: both;
display: block;
}
.heroTitle {
color: white;
font-size: 20pt;
line-height: 1;
text-shadow: 0 0 6px #111, 0 0 2px #111;
letter-spacing: 1px;
}
.heroCredit {
position: absolute;
bottom: 0.2em;
right: 0.3em;
opacity: 0.2;
color: var(--colorNeutralLight);
transition: opacity 0.5s ease-out;
}
.heroCredit:hover {
opacity: 1;
}
.heroCredit a::after {
content: "";
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 1px solid var(--colorNeutralLight);
margin-top: 5px;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.heroCredit:hover a::after {
opacity: 1;
}
.heroCredit a:hover {
text-decoration: none;
}