97 lines
1.9 KiB
SCSS
97 lines
1.9 KiB
SCSS
content {
|
|
// height: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: left;
|
|
display: inline-block;
|
|
|
|
.parent {
|
|
display: grid;
|
|
height: 100%;
|
|
width: auto;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
margin: 0.5em 4% 0 0.5em;
|
|
overflow: hidden;
|
|
|
|
.content {
|
|
padding: 0 1em 6em 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.gallery {
|
|
img.project-logo {
|
|
margin-right: 2em;
|
|
border-radius: 0.8em;
|
|
height: 15em;
|
|
transition: ease-in-out 0.3s;
|
|
}
|
|
}
|
|
|
|
img.project-logo:hover {
|
|
box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5);
|
|
-webkit-box-shadow: 10px 10px 69px -32px rgba(0,0,0,0.5);
|
|
}
|
|
}
|
|
|
|
.button-container {
|
|
z-index: 1000;
|
|
position: fixed;
|
|
bottom: 10%;
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
align-self: start;
|
|
justify-self: start;
|
|
width: 85%;
|
|
|
|
// Create the gradient rectangle
|
|
&::before {
|
|
content: '';
|
|
position: fixed;
|
|
left: 9%;
|
|
bottom: calc(10% - 0.96em);
|
|
height: calc(100% + 1em); // 1em higher than the button
|
|
height: 15%;
|
|
width: 82%;
|
|
pointer-events: none;
|
|
background: linear-gradient(to top, $space-gray, transparent);
|
|
background: -webkit-linear-gradient(to top, $space-gray, transparent);
|
|
z-index: 1001; // Place it behind the button
|
|
}
|
|
|
|
button {
|
|
display: flex;
|
|
position: relative; // Ensure the button is above the gradient
|
|
z-index: 1002;
|
|
background-color: $deep-sky-blue;
|
|
color: white;
|
|
border: 0;
|
|
border-radius: 0.8em;
|
|
padding: 0.7em;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: ease-in-out 0.1s;
|
|
|
|
p {
|
|
margin: 0;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
button:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
a.button {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|