154 lines
3.2 KiB
SCSS
154 lines
3.2 KiB
SCSS
@use "layout";
|
|
@use "colors";
|
|
|
|
.page-index {
|
|
header {
|
|
width: 100%;
|
|
height: 75vh;
|
|
background-image: url('https://kakigoori.dev/752fbeb0-b181-4ed5-bd08-f622c3fb52f4/width/2560/auto');
|
|
background-size: cover;
|
|
background-position: left center;
|
|
position: relative;
|
|
|
|
nav {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
width: auto;
|
|
font-size: 1.2rem;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
|
|
// https://www.tyleo.com/guides/html-glass
|
|
box-shadow: /* Bottom and right depth effect */
|
|
inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
|
|
/* Top and left depth effect */
|
|
inset 0.75px 0.5px rgba(255, 255, 255, 0.025),
|
|
/* Shadow effect */
|
|
3px 2px 10px rgba(0, 0, 0, 0.25),
|
|
/* Short subsurface effect */
|
|
inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
|
|
/* Long subsurface effect */
|
|
inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
|
|
|
|
a, a:hover, a:focus, a:active, a:visited {
|
|
color: white;
|
|
}
|
|
|
|
& > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
max-width: 80%;
|
|
|
|
@media screen and (max-width: 992px) {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
img {
|
|
height: 3em;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
& > div:first-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
font-weight: 700;
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
& > div:last-child {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
|
|
#presentation {
|
|
margin-bottom: 2rem;
|
|
|
|
.image-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
img {
|
|
max-height: 500px;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
border-radius: 1rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
#on-the-internet {
|
|
img {
|
|
max-height: 1em;
|
|
}
|
|
|
|
.columns {
|
|
@media (max-width: 768px) {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
}
|
|
|
|
.columns > div > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
#main-projects {
|
|
& > div {
|
|
display: flex;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 200px;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
& > div {
|
|
flex: 1;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
@include layout.light-hr;
|
|
}
|
|
} |