friendenstein/sass/_home.scss

93 lines
1.4 KiB
SCSS

div.home-container {
width: 100%;
height: 100%;
display: flex;
div.home {
margin: 35% auto;
text-align: center;
h1 {
margin: 0;
font-size: 4rem;
color: var(--fgColor);
background-color: var(--bgColor);
&::before {
content: none;
}
}
}
@media (max-width: 650px) {
div.home {
margin: auto auto;
}
}
}
.social-icon {
padding: .2em .3em 0 .3em;
font-size: 32px;
cursor: pointer;
&-container {
position: relative;
display: inline-block;
text-align: center;
}
&-menu {
position: absolute;
display: none;
opacity: 0;
transition: all 0.15s ease-out 0.15s;
background-color: transparent;
left: 50%;
transform: translateX(-50%);
top: 100%;
z-index: 10;
&-arrow {
margin: 0 auto;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid var(--metaColor);
padding-top: .5em;
}
&-inner {
padding-top: .5em;
font-weight: bold;
position: relative;
padding: .4em 1em;
border: 2px dashed var(--metaColor);
border-radius: 0.8rem;
&:before {
content: "";
border-color: transparent;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
box-shadow: 0 0 20px 1px #000;
border-radius: 0.8rem;
}
}
}
}
.nolink:hover .social-icon-menu {
display: inline-block;
opacity: 1;
}