website/src/styles/projects.scss

147 lines
2.2 KiB
SCSS
Raw Normal View History

/* layout */
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: flex-start;
align-items: flex-start;
text-align: center;
flex-direction: column;
2023-11-05 23:02:42 +00:00
}
#projects {
2023-11-14 07:52:27 +00:00
header {
display: flex;
align-items: center;
justify-content: start;
margin: 2em;
2023-11-05 23:02:42 +00:00
2023-11-14 07:52:27 +00:00
svg.logo {
margin-right: 1em;
height: 3em;
width: 3em;
cursor: pointer;
}
2023-11-05 23:02:42 +00:00
2023-11-14 07:52:27 +00:00
h1 {
margin: 0px;
}
}
2023-11-05 23:02:42 +00:00
2023-11-14 07:52:27 +00:00
content {
display: flex;
height: 80%;
2023-12-07 18:14:10 +00:00
width: 100%;
align-items: center;
justify-content: center;
.content-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.container {
display: grid;
grid-template-columns: 7em 7em 7em 7em;
grid-template-rows: 7em 7em 7em;
gap: 2em 2em;
grid-template-areas:
'one one one one'
'two two two two'
'thr thr thr thr';
transform: rotate(-45deg);
margin-right: -4em;
margin-bottom: -15%;
user-select: none;
cursor: default;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.thr {
grid-area: thr;
}
.button {
width: 8em;
height: 8em;
border-radius: 25px;
border: none;
color: white;
cursor: pointer;
transition: ease-in-out 0.1s;
margin: 0 0 0 2em;
overflow: hidden;
background-size: 8em;
}
.button:hover {
opacity: 0.9;
}
.button:active {
opacity: 0.8;
}
.inactive {
visibility: hidden;
}
.sangelo {
background-image: url('/assets/logos/sangelo.svg');
}
.lunivity {
background-image: url('/assets/logos/lunivity.svg');
}
.gitpot {
background-color: #161417;
background-image: url('/assets/logos/gitpot.svg');
}
.utility {
background-image: url('/assets/logos/utilityclient.svg');
}
// .spectrumgal {
// grid-area: 🌕;
// }
// .spacebot {
// grid-area: 🤖;
// }
// .sangefault {
// grid-area: 🎨;
// }
.tip {
width: 10em;
text-align: left;
font-weight: 600;
font-size: 25px;
z-index: 100;
margin-left: 1em;
.capri {
color: $capri;
}
.french-sky {
color: $french-sky-blue;
}
}
}
2023-11-14 07:52:27 +00:00
}
2023-11-14 07:52:27 +00:00
@import './mobile/projects.scss';
}