Initial Build
This commit is contained in:
Alex
parent
71cd3acccd
commit
6c0d9a3f98
140 changed files with 9802 additions and 2403 deletions
619
assets/styles/scss/landing/_computer.scss
Normal file
619
assets/styles/scss/landing/_computer.scss
Normal file
|
|
@ -0,0 +1,619 @@
|
|||
@use '../shared/colors' as colors;
|
||||
|
||||
.home {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: colors.$primaryGrey;
|
||||
margin: 0;
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
color: colors.$primaryBlack;
|
||||
background-color: colors.$primaryYellow;
|
||||
border: 2px solid colors.$primaryYellow;
|
||||
padding: 2px 2px;
|
||||
|
||||
&:hover {
|
||||
color: colors.$primaryYellow;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
&.icon-menu {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
right: 2rem;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: right 100ms ease;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url('/icons/menu-grid.svg');
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.open {
|
||||
right: calc(1/3 * 100% + 1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.front-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
position: fixed;
|
||||
right: -100%;
|
||||
top: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
transition: right 200ms ease;
|
||||
|
||||
&.open {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
top: unset;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
font-family: AtomicAge-Regular;
|
||||
color: colors.$primaryYellow;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid colors.$primaryYellow;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#root {
|
||||
&.v1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
section {
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.computer {
|
||||
display: block;
|
||||
max-width: 1024px;
|
||||
max-height: 1024px;
|
||||
width: 100%;
|
||||
background-color: colors.$primaryBlack;
|
||||
border: 2rem solid colors.$computerBorder;
|
||||
padding: 1rem 1rem;
|
||||
|
||||
box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45);
|
||||
|
||||
.heading {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-family: Montserrat-Light;
|
||||
color: colors.$primaryYellow;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
//background: #1d1f20;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "|";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: colors.$primaryBlack;
|
||||
animation: typing 0.5s steps(16) forwards,
|
||||
cursor 1s infinite;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
animation: typing 0.5s steps(16) forwards,
|
||||
cursor 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#intro {
|
||||
width: fit-content;
|
||||
|
||||
.heading {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
#body {
|
||||
width: fit-content;
|
||||
|
||||
.about {
|
||||
opacity: 0;
|
||||
animation: showText 0.1s forwards;
|
||||
animation-delay: 1s;
|
||||
font-size: 1rem;
|
||||
color: colors.$primaryYellow;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
font-size: 2rem;
|
||||
animation: showText 0.1s forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#outro {
|
||||
width: fit-content;
|
||||
|
||||
.heading {
|
||||
width: 160px;
|
||||
|
||||
&:after{
|
||||
color: colors.$primaryBlack;
|
||||
animation: typing 0.5s steps(16) forwards,
|
||||
cursor 1s infinite;
|
||||
animation-delay: 2.5s;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
animation: typing 0.5s steps(16) forwards,
|
||||
cursor 1s infinite;
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
opacity: 0;
|
||||
animation: showText 0.1s forwards;
|
||||
animation-delay: 3s;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1rem;
|
||||
color: colors.$primaryYellow;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
section {
|
||||
box-shadow: 0 0 5px 4px rgba(29, 31, 32, 0.45);
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
#cool-stuff{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: colors.$primaryYellow;
|
||||
padding: 2rem 0;
|
||||
|
||||
.title {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 5px solid colors.$primaryGreen;
|
||||
}
|
||||
}
|
||||
|
||||
.highlights {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
|
||||
.highlight {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
padding: 1rem 1rem;
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 400px;
|
||||
|
||||
box-shadow: 0 0 5px 0 rgba(29, 31, 32, 0.45);
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-family: Orbitron-Regular;
|
||||
color: colors.$primaryRed;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
padding-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 5px solid colors.$primaryRed;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.icon-paperclip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url('/icons/paperclip.svg');
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#work {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: colors.$computerBorder;
|
||||
padding: 1rem 2rem;
|
||||
|
||||
> .title {
|
||||
color: colors.$primaryRed;
|
||||
font-weight: bold;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 5px solid colors.$primaryYellow;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.jobs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
color: colors.$primaryRed;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.job {
|
||||
padding: 1rem 2rem;
|
||||
margin-top: 1rem;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 5px 0px rgba(29, 31, 32, 0.45);
|
||||
|
||||
.title {
|
||||
text-align: left;
|
||||
color: colors.$primaryRed;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-left: 1rem solid colors.$primaryYellow;
|
||||
box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.highlights {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.job-highlight {
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
padding: 1rem 2rem;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
//margin: 0;
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
border-left: 1rem solid colors.$primaryYellow;
|
||||
box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
border-right: 1rem solid colors.$primaryYellow;
|
||||
border-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
display: block;
|
||||
background-color: colors.$carbonBlack;
|
||||
|
||||
.title {
|
||||
color: colors.$primaryWhite;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 75px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 5px solid colors.$primaryGrey;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1rem 0;
|
||||
|
||||
.icon {
|
||||
&.icon-email {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url('/icons/email.svg');
|
||||
background-size: 100%;
|
||||
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#continue {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
color: colors.$primaryWhite;
|
||||
animation: showText 0.1s forwards,
|
||||
continue 0.5s steps(50) forwards;
|
||||
|
||||
animation-delay: 4s;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.icon-arrow-down {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background-image: url('/icons/arrow-down-top-line.svg');
|
||||
background-size: 100%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0% {
|
||||
color: colors.$primaryYellow;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
color: colors.$primaryBlack;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing2 {
|
||||
0% {
|
||||
color: colors.$primaryYellow;
|
||||
}
|
||||
99.9% {
|
||||
color: colors.$primaryYellow;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
color: colors.$primaryBlack;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cursor {
|
||||
50% { color: transparent }
|
||||
}
|
||||
|
||||
@keyframes showText {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes continue {
|
||||
0% {
|
||||
bottom: 5rem;
|
||||
}
|
||||
100% {
|
||||
bottom: 4rem;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue