156 lines
2.5 KiB
SCSS
156 lines
2.5 KiB
SCSS
/* layout */
|
|
|
|
.section {
|
|
height: 100vh;
|
|
scroll-snap-align: start;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
text-align: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#projects {
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
margin: 2em;
|
|
|
|
svg.logo {
|
|
margin-right: 1em;
|
|
height: 3em;
|
|
width: 3em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0px;
|
|
}
|
|
}
|
|
|
|
content {
|
|
display: flex;
|
|
height: 80%;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.container {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 8em 8em 8em 8em;
|
|
grid-template-rows: 8em 8em 8em;
|
|
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;
|
|
align-items: center;
|
|
}
|
|
|
|
.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');
|
|
}
|
|
|
|
.explorecraft {
|
|
background-image: url('/assets/logos/explorecraft.svg');
|
|
}
|
|
|
|
.dashinit {
|
|
background-image: url('/assets/logos/dashinit.svg');
|
|
}
|
|
|
|
.sangefault {
|
|
background-image: url('/assets/logos/sangefault.svg');
|
|
}
|
|
|
|
.next {
|
|
background-color: $space-cadet;
|
|
background-image: url('/assets/icons/next.svg');
|
|
background-size: 3em;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@import './mobile/projects.scss';
|
|
}
|