diff --git a/assets/styles/landing.css b/assets/styles/landing.css index 1b82576..0832721 100644 --- a/assets/styles/landing.css +++ b/assets/styles/landing.css @@ -1,717 +1 @@ -.home { - display: flex; - align-items: center; - flex-direction: column; - background-color: #696969; - margin: 0; -} -.home header { - width: 100%; -} -.home header h1 { - margin: 0; -} -.home header h1 a { - display: block; - font-size: 1.5rem; - text-decoration: none; - color: #1d1f20; - background-color: #d7b94c; - border: 2px solid #d7b94c; - padding: 2px 2px; -} -.home header h1 a:hover { - color: #d7b94c; - background-color: unset; -} -.home header nav { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 2rem; - overflow: hidden; - position: relative; -} -.home header nav .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) { - .home header nav .icon.icon-menu { - display: none; - } -} -.home header nav .icon.icon-menu:before { - content: ""; - display: block; - background-image: url("/icons/menu-grid.svg"); - background-size: 100%; - position: absolute; - width: 30px; - height: 30px; -} -.home header nav .icon.icon-menu:hover { - cursor: pointer; -} -.home header nav .icon.icon-menu.open { - right: 200px; -} -.home header nav .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; - background-color: #d7b94c; -} -.home header nav .front-menu.open { - right: 0; -} -@media screen and (min-width: 600px) { - .home header nav .front-menu { - flex-direction: row; - position: relative; - top: unset; - right: unset; - background-color: unset; - } -} -.home header nav .front-menu { - list-style: none; -} -.home header nav .front-menu li { - display: block; - padding: 5px 10px; -} -.home header nav .front-menu li a { - display: block; - font-family: Amarante; - color: #FBFCFF; - font-size: 1.5rem; - text-decoration: none; - padding-bottom: 2px; -} -@media (min-width: 600px) { - .home header nav .front-menu li a { - color: #d7b94c; - } -} -.home header nav .front-menu li a:hover { - border-bottom: 2px solid #d7b94c; - padding-bottom: 0; -} -.home #root.v1 { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: auto; - width: 100%; - margin: 0 auto; -} -.home #root.v1 section { - margin: 0; - padding: 1rem 0; -} -.home #root.v1 section .title { - margin: 0; -} -.home #root.v1 .top { - display: flex; - min-height: 100vh; - justify-content: center; - align-items: flex-start; - width: 100%; -} -@media (min-width: 600px) { - .home #root.v1 .top { - align-items: center; - } -} -.home #root.v1 .top .computer { - display: block; - max-width: 800px; - max-height: 400px; - width: 100%; - height: 100%; - background-color: #1d1f20; - border: 2rem solid #a6a695; - padding: 1rem 1rem; - box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45); - margin-top: 5rem; -} -@media (min-width: 600px) { - .home #root.v1 .top .computer { - margin-top: -2rem; - } -} -.home #root.v1 .top .computer .heading { - margin: 0; - font-size: 0.85rem; - font-family: Montserrat-Light; - color: #d7b94c; - position: relative; - padding-left: 1rem; -} -@media screen and (min-width: 600px) { - .home #root.v1 .top .computer .heading { - font-size: 1rem; - } -} -.home #root.v1 .top .computer .heading:before { - content: ">"; - position: absolute; - left: 0; - width: 100%; -} -.home #root.v1 .top .computer .heading:after { - content: "|"; - position: absolute; - right: 0; - width: 100%; - background: #1d1f20; - animation: typing 0.5s steps(16) forwards, cursor 1s infinite; -} -@media screen and (min-width: 600px) { - .home #root.v1 .top .computer .heading:after { - animation: typing 0.5s steps(16) forwards, cursor 1s infinite; - } -} -.home #root.v1 .top .computer #intro { - width: fit-content; -} -.home #root.v1 .top .computer #intro .heading { - width: 260px; -} -.home #root.v1 .top .computer #body { - width: fit-content; -} -.home #root.v1 .top .computer #body .about { - opacity: 0; - animation: showText 0.1s forwards; - animation-delay: 1s; - font-size: 0.95rem; - color: #d7b94c; -} -@media screen and (min-width: 600px) { - .home #root.v1 .top .computer #body .about { - font-size: 1.125rem; - animation: showText 0.1s forwards; - animation-delay: 1s; - } -} -.home #root.v1 .top .computer #outro { - width: fit-content; -} -.home #root.v1 .top .computer #outro .heading { - width: 160px; -} -.home #root.v1 .top .computer #outro .heading:after { - color: #1d1f20; - animation: typing 0.5s steps(16) forwards, cursor 1s infinite; - animation-delay: 2.5s; -} -@media screen and (min-width: 600px) { - .home #root.v1 .top .computer #outro .heading:after { - animation: typing 0.5s steps(16) forwards, cursor 1s infinite; - animation-delay: 2.5s; - } -} -.home #root.v1 .top .computer #outro .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) { - .home #root.v1 .top .computer #outro .menu { - animation-delay: 3.5s; - } -} -.home #root.v1 .top .computer #outro .menu a { - font-size: 0.95rem; - color: #d7b94c; - cursor: pointer; -} -@media screen and (min-width: 600px) { - .home #root.v1 .top .computer #outro .menu a { - font-size: 1.125rem; - } -} -.home #root.v1 .bottom { - width: 100%; - height: 100%; -} -.home #root.v1 .bottom section { - box-shadow: 0 0 5px 4px rgba(29, 31, 32, 0.45); - margin: 4rem 0; -} -.home #root.v1 .bottom #cool-stuff { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - height: auto; - background-color: #d7b94c; - padding: 2rem 0; -} -.home #root.v1 .bottom #cool-stuff .title:after { - content: ""; - display: block; - width: 150px; - margin: 0 auto; - border-bottom: 5px solid #04392f; -} -.home #root.v1 .bottom #cool-stuff .highlights { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - gap: 2rem; - position: relative; - height: 100%; - width: 100%; - padding-top: 1rem; -} -.home #root.v1 .bottom #cool-stuff .highlights .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: 300px; -} -@media (min-width: 600px) { - .home #root.v1 .bottom #cool-stuff .highlights .highlight { - max-width: 400px; - } -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight { - box-shadow: 0 0 5px 0 rgba(29, 31, 32, 0.45); -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight img { - width: 75%; -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight p { - font-size: 1.25rem; - text-align: center; -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight a { - display: block; - font-family: Orbitron-Regular; - color: #49111C; - font-size: 1.5rem; - font-weight: bold; - text-decoration: none; - padding-bottom: 5px; -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight a:hover { - border-bottom: 5px solid #49111C; - padding-bottom: 0; -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip { - position: absolute; - top: 0; - left: 0; -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip:before { - content: ""; - display: block; - background-image: url("/icons/paperclip.svg"); - background-size: 100%; - position: absolute; - width: 50px; - height: 50px; - top: -10px; - left: -10px; -} -.home #root.v1 .bottom #cool-stuff .highlights .highlight:hover { - box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45); -} -.home #root.v1 .bottom #work { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #a6a695; - padding: 1rem 2rem; -} -.home #root.v1 .bottom #work > .title { - color: #49111C; - font-weight: bold; -} -.home #root.v1 .bottom #work > .title:after { - content: ""; - display: block; - width: 50px; - margin: 0 auto; - border-bottom: 5px solid #d7b94c; -} -.home #root.v1 .bottom #work .jobs { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 2rem; - width: 100%; - height: 100%; -} -@media screen and (min-width: 800px) { - .home #root.v1 .bottom #work .jobs { - flex-wrap: nowrap; - } -} -.home #root.v1 .bottom #work .jobs .left, .home #root.v1 .bottom #work .jobs .right { - width: 100%; - height: 100%; -} -@media screen and (min-width: 800px) { - .home #root.v1 .bottom #work .jobs .left, .home #root.v1 .bottom #work .jobs .right { - width: 50%; - } -} -.home #root.v1 .bottom #work .jobs .left .title, .home #root.v1 .bottom #work .jobs .right .title { - text-align: center; - color: #49111C; -} -.home #root.v1 .bottom #work .jobs .left .wrapper { - display: flex; - flex-direction: column; - justify-content: space-between; -} -.home #root.v1 .bottom #work .jobs .left .job { - padding: 1rem 2rem; - margin-top: 1rem; - padding: 5px; - position: relative; - box-shadow: 0 0 5px 0px rgba(29, 31, 32, 0.45); -} -.home #root.v1 .bottom #work .jobs .left .job .title { - text-align: left; - color: #49111C; -} -.home #root.v1 .bottom #work .jobs .left .job:hover { - cursor: pointer; -} -.home #root.v1 .bottom #work .jobs .left .job.active { - border-left: 1rem solid #d7b94c; - box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45); -} -.home #root.v1 .bottom #work .jobs .right .highlights { - display: block; - height: 100%; - width: 100%; - margin-top: 1rem; -} -.home #root.v1 .bottom #work .jobs .right .job-highlight { - padding: 1rem 2rem; -} -.home #root.v1 .bottom #work .jobs .right .job-highlight ul { - padding: 0; -} -.home #root.v1 .bottom #work .jobs .right .job-highlight ul li { - font-size: 1.125rem; -} -.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul { - padding-left: 1rem; -} -.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul li { - padding: 2px 0; -} -.home #root.v1 .bottom #work .jobs .right .job-highlight.show { - display: block; - border-left: 1rem solid #d7b94c; - box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45); -} -@media screen and (min-width: 800px) { - .home #root.v1 .bottom #work .jobs .right .job-highlight.show { - border-right: 1rem solid #d7b94c; - border-left: unset; - } -} -.home #root.v1 .bottom #work .jobs .right .job-highlight.hide { - display: none; -} -.home #root.v1 .bottom #work .tech { - padding: 2rem 0; -} -.home #root.v1 .bottom #work .tech .title { - color: #49111C; - text-align: center; -} -.home #root.v1 .bottom #work .tech .title:after { - content: ""; - display: block; - width: 50px; - margin: 0 auto; - border-bottom: 5px solid #d7b94c; -} -.home #root.v1 .bottom #work .tech .education { - text-align: center; - font-size: 1.125rem; -} -.home #root.v1 .bottom #work .tech .list { - display: flex; - justify-content: center; - column-gap: 2rem; - row-gap: 1rem; - flex-wrap: wrap; - padding: 0; -} -.home #root.v1 .bottom #work .tech .list li { - font-size: 1.125rem; -} -.home #root.v1 .bottom #contact { - display: block; - background-color: #1F2421; -} -.home #root.v1 .bottom #contact .title { - color: #FBFCFF; - text-align: center; -} -.home #root.v1 .bottom #contact .title:after { - content: ""; - display: block; - width: 75px; - margin: 0 auto; - border-bottom: 5px solid #696969; -} -.home #root.v1 .bottom #contact .info { - display: flex; - justify-content: center; - padding: 1rem 0; -} -.home #root.v1 .bottom #contact .info .icon.icon-email { - position: relative; -} -.home #root.v1 .bottom #contact .info .icon.icon-email:before { - content: ""; - display: block; - background-image: url("/icons/email.svg"); - background-size: 100%; - width: 30px; - height: 30px; -} -.home #root.v1 #continue { - display: block; - position: absolute; - bottom: 5rem; - left: 50%; - transform: translateX(-50%); - text-align: center; - width: 100%; - opacity: 0; - color: #FBFCFF; - animation: showText 0.1s forwards, continue 0.5s steps(50) forwards; - animation-delay: 4s; -} -@media screen and (min-width: 600px) { - .home #root.v1 #continue { - animation-delay: 6s; - } -} -.home #root.v1 #continue .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: #d7b94c; - } - 100% { - width: 0; - color: #1d1f20; - } -} -@keyframes typing2 { - 0% { - color: #d7b94c; - } - 99.9% { - color: #d7b94c; - } - 100% { - width: 0; - color: #1d1f20; - } -} -@keyframes cursor { - 50% { - color: transparent; - } -} -@keyframes showText { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes continue { - 0% { - bottom: 5rem; - } - 100% { - bottom: 4rem; - } -} -@font-face { - font-family: RobotoSlab-Regular; - src: url("/fonts/RobotoSlab-Regular.ttf") format("opentype"); -} -@font-face { - font-family: RobotoSlab-Medium; - src: url("/fonts/RobotoSlab-Regular.ttf") format("opentype"); -} -@font-face { - font-family: RobotoSlab-Bold; - src: url("/fonts/RobotoSlab-Bold.ttf") format("opentype"); -} -@font-face { - font-family: RobotoSlab-Black; - src: url("/fonts/RobotoSlab-Black.ttf") format("opentype"); -} -@font-face { - font-family: AtomicAge-Regular; - src: url("/fonts/AtomicAge-Regular.ttf") format("opentype"); -} -@font-face { - font-family: Montserrat-Regular; - src: url("/fonts/Montserrat-Regular.ttf") format("opentype"); -} -@font-face { - font-family: Montserrat-Light; - src: url("/fonts/Montserrat-Light.ttf") format("opentype"); -} -@font-face { - font-family: Montserrat-Italic; - src: url("/fonts/Montserrat-Italic.ttf") format("opentype"); -} -@font-face { - font-family: Montserrat-Bold; - src: url("/fonts/Montserrat-Bold.ttf") format("opentype"); -} -@font-face { - font-family: Montserrat-SemiBold; - src: url("/fonts/Montserrat-SemiBold.ttf") format("opentype"); -} -@font-face { - font-family: Orbitron-Regular; - src: url("/fonts/Orbitron-Regular.ttf") format("opentype"); -} -@font-face { - font-family: Amarante; - src: url("/fonts/Amarante-Regular.ttf") format("opentype"); -} -h1, h2, h3, h4, h5, h6 { - font-family: Amarante; - letter-spacing: 2px; -} - -h1 { - font-size: 2rem; -} -@media screen and (min-width: 600px) { - h1 { - font-size: 3rem; - } -} - -h2 { - font-size: 1.75rem; -} -@media screen and (min-width: 600px) { - h2 { - font-size: 2.5rem; - } -} - -h3 { - font-size: 1.5rem; -} -@media screen and (min-width: 600px) { - h3 { - font-size: 2rem; - } -} - -h4 { - font-size: 1.25rem; -} -@media screen and (min-width: 600px) { - h4 { - font-size: 1.5rem; - } -} - -h5 { - font-size: 1rem; -} -@media screen and (min-width: 600px) { - h5 { - font-size: 1.25rem; - } -} - -h6 { - font-size: 1rem; -} -@media screen and (min-width: 600px) { - h6 { - font-size: 1em; - } -} - -p, a, li, span { - font-family: RobotoSlab-Regular; - letter-spacing: 1px; -} - -strong { - font-family: Montserrat-Bold; -} - -em { - font-family: Montserrat-Italic; -} - -u { - font-family: Montserrat-SemiBold; -} - -cite, q, small { - font-family: Orbitron-Regular; -} - -s { - font-family: Montserrat-SemiBold; -} - -/*# sourceMappingURL=landing.css.map */ +.home{display:flex;align-items:center;flex-direction:column;background-color:dimgray;margin:0}.home header{width:100%}.home header h1{margin:0}.home header h1 a{display:block;font-size:1.5rem;text-decoration:none;color:#1d1f20;background-color:#d7b94c;border:2px solid #d7b94c;padding:2px 2px}.home header h1 a:hover{color:#d7b94c;background-color:unset}.home header nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;overflow:hidden;position:relative}.home header nav .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){.home header nav .icon.icon-menu{display:none}}.home header nav .icon.icon-menu:before{content:"";display:block;background-image:url("/icons/menu-grid.svg");background-size:100%;position:absolute;width:30px;height:30px}.home header nav .icon.icon-menu:hover{cursor:pointer}.home header nav .icon.icon-menu.open{right:200px}.home header nav .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;background-color:#d7b94c}.home header nav .front-menu.open{right:0}@media screen and (min-width: 600px){.home header nav .front-menu{flex-direction:row;position:relative;top:unset;right:unset;background-color:unset}}.home header nav .front-menu{list-style:none}.home header nav .front-menu li{display:block;padding:5px 10px}.home header nav .front-menu li a{display:block;font-family:Amarante;color:#fbfcff;font-size:1.5rem;text-decoration:none;padding-bottom:2px}@media(min-width: 600px){.home header nav .front-menu li a{color:#d7b94c}}.home header nav .front-menu li a:hover{border-bottom:2px solid #d7b94c;padding-bottom:0}.home #root.v1{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;width:100%;margin:0 auto}.home #root.v1 section{margin:0;padding:1rem 0}.home #root.v1 section .title{margin:0}.home #root.v1 .top{display:flex;min-height:100vh;justify-content:center;align-items:flex-start;width:100%}@media(min-width: 600px){.home #root.v1 .top{align-items:center}}.home #root.v1 .top .computer{display:block;max-width:800px;max-height:400px;width:100%;height:100%;background-color:#1d1f20;border:2rem solid #a6a695;padding:1rem 1rem;box-shadow:0 0 5px 10px rgba(29,31,32,.45);margin-top:5rem}@media(min-width: 600px){.home #root.v1 .top .computer{margin-top:-2rem}}.home #root.v1 .top .computer .heading{margin:0;font-size:.85rem;font-family:Montserrat-Light;color:#d7b94c;position:relative;padding-left:1rem}@media screen and (min-width: 600px){.home #root.v1 .top .computer .heading{font-size:1rem}}.home #root.v1 .top .computer .heading:before{content:">";position:absolute;left:0;width:100%}.home #root.v1 .top .computer .heading:after{content:"|";position:absolute;right:0;width:100%;background:#1d1f20;animation:typing .5s steps(16) forwards,cursor 1s infinite}@media screen and (min-width: 600px){.home #root.v1 .top .computer .heading:after{animation:typing .5s steps(16) forwards,cursor 1s infinite}}.home #root.v1 .top .computer #intro{width:fit-content}.home #root.v1 .top .computer #intro .heading{width:260px}.home #root.v1 .top .computer #body{width:fit-content}.home #root.v1 .top .computer #body .about{opacity:0;animation:showText .1s forwards;animation-delay:1s;font-size:.95rem;color:#d7b94c}@media screen and (min-width: 600px){.home #root.v1 .top .computer #body .about{font-size:1.125rem;animation:showText .1s forwards;animation-delay:1s}}.home #root.v1 .top .computer #outro{width:fit-content}.home #root.v1 .top .computer #outro .heading{width:160px}.home #root.v1 .top .computer #outro .heading:after{color:#1d1f20;animation:typing .5s steps(16) forwards,cursor 1s infinite;animation-delay:2.5s}@media screen and (min-width: 600px){.home #root.v1 .top .computer #outro .heading:after{animation:typing .5s steps(16) forwards,cursor 1s infinite;animation-delay:2.5s}}.home #root.v1 .top .computer #outro .menu{opacity:0;animation:showText .1s forwards;animation-delay:3s;display:flex;flex-wrap:wrap;gap:1rem;padding-top:2rem;padding-bottom:2rem}@media screen and (min-width: 600px){.home #root.v1 .top .computer #outro .menu{animation-delay:3.5s}}.home #root.v1 .top .computer #outro .menu a{font-size:.95rem;color:#d7b94c;cursor:pointer}@media screen and (min-width: 600px){.home #root.v1 .top .computer #outro .menu a{font-size:1.125rem}}.home #root.v1 .bottom{width:100%;height:100%}.home #root.v1 .bottom section{box-shadow:0 0 5px 4px rgba(29,31,32,.45);margin:4rem 0}.home #root.v1 .bottom #cool-stuff{display:flex;flex-direction:column;align-items:center;width:100%;height:auto;background-color:#d7b94c;padding:2rem 0}.home #root.v1 .bottom #cool-stuff .title:after{content:"";display:block;width:150px;margin:0 auto;border-bottom:5px solid #04392f}.home #root.v1 .bottom #cool-stuff .highlights{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem;position:relative;height:100%;width:100%;padding-top:1rem}.home #root.v1 .bottom #cool-stuff .highlights .highlight{display:flex;flex-direction:column;justify-content:space-between;align-items:center;align-self:stretch;padding:1rem 1rem;position:relative;width:100%;height:auto;max-width:300px}@media(min-width: 600px){.home #root.v1 .bottom #cool-stuff .highlights .highlight{max-width:400px}}.home #root.v1 .bottom #cool-stuff .highlights .highlight{box-shadow:0 0 5px 0 rgba(29,31,32,.45)}.home #root.v1 .bottom #cool-stuff .highlights .highlight img{width:75%}.home #root.v1 .bottom #cool-stuff .highlights .highlight p{font-size:1.25rem;text-align:center}.home #root.v1 .bottom #cool-stuff .highlights .highlight a{display:block;font-family:Orbitron-Regular;color:#49111c;font-size:1.5rem;font-weight:bold;text-decoration:none;padding-bottom:5px}.home #root.v1 .bottom #cool-stuff .highlights .highlight a:hover{border-bottom:5px solid #49111c;padding-bottom:0}.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip{position:absolute;top:0;left:0}.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip:before{content:"";display:block;background-image:url("/icons/paperclip.svg");background-size:100%;position:absolute;width:50px;height:50px;top:-10px;left:-10px}.home #root.v1 .bottom #cool-stuff .highlights .highlight:hover{box-shadow:0 0 5px 5px rgba(29,31,32,.45)}.home #root.v1 .bottom #work{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#a6a695;padding:1rem 2rem}.home #root.v1 .bottom #work>.title{color:#49111c;font-weight:bold}.home #root.v1 .bottom #work>.title:after{content:"";display:block;width:50px;margin:0 auto;border-bottom:5px solid #d7b94c}.home #root.v1 .bottom #work .jobs{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;width:100%;height:100%}@media screen and (min-width: 800px){.home #root.v1 .bottom #work .jobs{flex-wrap:nowrap}}.home #root.v1 .bottom #work .jobs .left,.home #root.v1 .bottom #work .jobs .right{width:100%;height:100%}@media screen and (min-width: 800px){.home #root.v1 .bottom #work .jobs .left,.home #root.v1 .bottom #work .jobs .right{width:50%}}.home #root.v1 .bottom #work .jobs .left .title,.home #root.v1 .bottom #work .jobs .right .title{text-align:center;color:#49111c}.home #root.v1 .bottom #work .jobs .left .wrapper{display:flex;flex-direction:column;justify-content:space-between}.home #root.v1 .bottom #work .jobs .left .job{padding:1rem 2rem;margin-top:1rem;padding:5px;position:relative;box-shadow:0 0 5px 0px rgba(29,31,32,.45)}.home #root.v1 .bottom #work .jobs .left .job .title{text-align:left;color:#49111c}.home #root.v1 .bottom #work .jobs .left .job:hover{cursor:pointer}.home #root.v1 .bottom #work .jobs .left .job.active{border-left:1rem solid #d7b94c;box-shadow:0 0 5px 5px rgba(29,31,32,.45)}.home #root.v1 .bottom #work .jobs .right .highlights{display:block;height:100%;width:100%;margin-top:1rem}.home #root.v1 .bottom #work .jobs .right .job-highlight{padding:1rem 2rem}.home #root.v1 .bottom #work .jobs .right .job-highlight ul{padding:0}.home #root.v1 .bottom #work .jobs .right .job-highlight ul li{font-size:1.125rem}.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul{padding-left:1rem}.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul li{padding:2px 0}.home #root.v1 .bottom #work .jobs .right .job-highlight.show{display:block;border-left:1rem solid #d7b94c;box-shadow:0 0 5px 5px rgba(29,31,32,.45)}@media screen and (min-width: 800px){.home #root.v1 .bottom #work .jobs .right .job-highlight.show{border-right:1rem solid #d7b94c;border-left:unset}}.home #root.v1 .bottom #work .jobs .right .job-highlight.hide{display:none}.home #root.v1 .bottom #work .tech{padding:2rem 0}.home #root.v1 .bottom #work .tech .title{color:#49111c;text-align:center}.home #root.v1 .bottom #work .tech .title:after{content:"";display:block;width:50px;margin:0 auto;border-bottom:5px solid #d7b94c}.home #root.v1 .bottom #work .tech .education{text-align:center;font-size:1.125rem}.home #root.v1 .bottom #work .tech .list{display:flex;justify-content:center;column-gap:2rem;row-gap:1rem;flex-wrap:wrap;padding:0}.home #root.v1 .bottom #work .tech .list li{font-size:1.125rem}.home #root.v1 .bottom #contact{display:block;background-color:#1f2421}.home #root.v1 .bottom #contact .title{color:#fbfcff;text-align:center}.home #root.v1 .bottom #contact .title:after{content:"";display:block;width:75px;margin:0 auto;border-bottom:5px solid dimgray}.home #root.v1 .bottom #contact .info{display:flex;justify-content:center;padding:1rem 0}.home #root.v1 .bottom #contact .info .icon.icon-email{position:relative}.home #root.v1 .bottom #contact .info .icon.icon-email:before{content:"";display:block;background-image:url("/icons/email.svg");background-size:100%;width:30px;height:30px}.home #root.v1 #continue{display:block;position:absolute;bottom:5rem;left:50%;transform:translateX(-50%);text-align:center;width:100%;opacity:0;color:#fbfcff;animation:showText .1s forwards,continue .5s steps(50) forwards;animation-delay:4s}@media screen and (min-width: 600px){.home #root.v1 #continue{animation-delay:6s}}.home #root.v1 #continue .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:#d7b94c}100%{width:0;color:#1d1f20}}@keyframes typing2{0%{color:#d7b94c}99.9%{color:#d7b94c}100%{width:0;color:#1d1f20}}@keyframes cursor{50%{color:rgba(0,0,0,0)}}@keyframes showText{0%{opacity:0}100%{opacity:1}}@keyframes continue{0%{bottom:5rem}100%{bottom:4rem}}@font-face{font-family:RobotoSlab-Regular;src:url("/fonts/RobotoSlab-Regular.ttf") format("opentype")}@font-face{font-family:RobotoSlab-Medium;src:url("/fonts/RobotoSlab-Regular.ttf") format("opentype")}@font-face{font-family:RobotoSlab-Bold;src:url("/fonts/RobotoSlab-Bold.ttf") format("opentype")}@font-face{font-family:RobotoSlab-Black;src:url("/fonts/RobotoSlab-Black.ttf") format("opentype")}@font-face{font-family:AtomicAge-Regular;src:url("/fonts/AtomicAge-Regular.ttf") format("opentype")}@font-face{font-family:Montserrat-Regular;src:url("/fonts/Montserrat-Regular.ttf") format("opentype")}@font-face{font-family:Montserrat-Light;src:url("/fonts/Montserrat-Light.ttf") format("opentype")}@font-face{font-family:Montserrat-Italic;src:url("/fonts/Montserrat-Italic.ttf") format("opentype")}@font-face{font-family:Montserrat-Bold;src:url("/fonts/Montserrat-Bold.ttf") format("opentype")}@font-face{font-family:Montserrat-SemiBold;src:url("/fonts/Montserrat-SemiBold.ttf") format("opentype")}@font-face{font-family:Orbitron-Regular;src:url("/fonts/Orbitron-Regular.ttf") format("opentype")}@font-face{font-family:Amarante;src:url("/fonts/Amarante-Regular.ttf") format("opentype")}h1,h2,h3,h4,h5,h6{font-family:Amarante;letter-spacing:2px}h1{font-size:2rem}@media screen and (min-width: 600px){h1{font-size:3rem}}h2{font-size:1.75rem}@media screen and (min-width: 600px){h2{font-size:2.5rem}}h3{font-size:1.5rem}@media screen and (min-width: 600px){h3{font-size:2rem}}h4{font-size:1.25rem}@media screen and (min-width: 600px){h4{font-size:1.5rem}}h5{font-size:1rem}@media screen and (min-width: 600px){h5{font-size:1.25rem}}h6{font-size:1rem}@media screen and (min-width: 600px){h6{font-size:1em}}p,a,li,span{font-family:RobotoSlab-Regular;letter-spacing:1px}strong{font-family:Montserrat-Bold}em{font-family:Montserrat-Italic}u{font-family:Montserrat-SemiBold}cite,q,small{font-family:Orbitron-Regular}s{font-family:Montserrat-SemiBold} diff --git a/assets/styles/scss/landing/_computer.scss b/assets/styles/scss/landing/_computer.scss index 6c0d80e..de75942 100644 --- a/assets/styles/scss/landing/_computer.scss +++ b/assets/styles/scss/landing/_computer.scss @@ -328,7 +328,7 @@ .highlight { display: flex; flex-direction: column; - justify-content: center; + justify-content: space-between; align-items: center; align-self: stretch; padding: 1rem 1rem;