website/src/styles/projects.scss

156 lines
2.5 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;
2023-12-08 16:52:50 +00:00
.container {
2023-12-07 18:14:10 +00:00
height: 100%;
display: flex;
align-items: center;
justify-content: center;
2023-12-08 16:52:50 +00:00
.grid {
2023-12-07 18:14:10 +00:00
display: grid;
2023-12-08 16:52:50 +00:00
grid-template-columns: 8em 8em 8em 8em;
grid-template-rows: 8em 8em 8em;
2023-12-07 18:14:10 +00:00
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;
2023-12-08 16:52:50 +00:00
align-items: center;
2023-12-07 18:14:10 +00:00
}
.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');
}
2023-12-08 16:52:50 +00:00
.explorecraft {
background-image: url('/assets/logos/explorecraft.svg');
}
2023-12-07 18:14:10 +00:00
2023-12-08 16:52:50 +00:00
.dashinit {
background-image: url('/assets/logos/dashinit.svg');
}
2023-12-07 18:14:10 +00:00
2023-12-08 16:52:50 +00:00
.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;
}
2023-12-07 18:14:10 +00:00
.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';
}