diff --git a/assets/brain.js b/assets/brain.js index 05d20bd..90c88c3 100644 --- a/assets/brain.js +++ b/assets/brain.js @@ -1,5 +1,5 @@ import './styles/brain.css'; -//import './stimulus_bootstrap.js'; +import './stimulus_bootstrap.js'; const init = () => { menu(); diff --git a/assets/styles/brain.css b/assets/styles/brain.css index 7368933..f1a002a 100644 --- a/assets/styles/brain.css +++ b/assets/styles/brain.css @@ -1 +1 @@ -.page{max-width:800px;width:100%;margin:0 auto}.page h2{margin:0}.page .row{display:block;padding:1rem 0}.page .row label{display:block}.page .row input{height:30px;width:300px}.page .row #post_published{width:30px;height:30px}.page .row #post_save{width:100px;height:30px;background-color:green;border:none;color:#fff}#brain-wrapper header .level-1{display:flex;justify-content:center;align-items:flex-start;position:relative;list-style-type:none}#brain-wrapper header .level-1--item{padding:1rem 2rem}#brain-wrapper header .level-1 .level-2{display:none;margin:0;padding:0}#brain-wrapper header .level-1 .level-2.open{display:block;position:absolute}#brain-wrapper header .level-1 .level-2--item{padding:1rem 0}body{background-color:#d3d3d3} +.actions{padding-bottom:1rem}.actions .list{display:flex;gap:2rem;list-style:none;margin:0;padding:0}.page{max-width:800px;width:100%;margin:0 auto}.page h2{margin:0}.page .row{display:block;padding:1rem 0}.page .row label{display:block}.page .row input{height:30px;width:300px}.page .row #post_published{width:30px;height:30px}.page .row #post_save{width:100px;height:30px;background-color:green;border:none;color:#fff}#brain-wrapper header .level-1{display:flex;justify-content:center;align-items:flex-start;position:relative;list-style-type:none}#brain-wrapper header .level-1--item{padding:1rem 2rem}#brain-wrapper header .level-1 .level-2{display:none;margin:0;padding:0}#brain-wrapper header .level-1 .level-2.open{display:block;position:absolute}#brain-wrapper header .level-1 .level-2--item{padding:1rem 0}#brain-wrapper a{color:#171a21}body{background-color:#d3d3d3} diff --git a/assets/styles/landing.css b/assets/styles/landing.css index 1b82576..24403b9 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:-6rem}}.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/main.css b/assets/styles/main.css index afe06b1..ea4a737 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@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}h1,h2,h3,h4,h5,h6,p,a,span,time{color:#fbfcff}.secondary.layout--v1{display:block;position:relative;padding:.5rem .5rem;background-color:#d7b94c}.secondary.layout--v1 #root{display:flex;flex-direction:column}@media(min-width: 800px){.secondary.layout--v1 #root{display:grid;grid-template-columns:25% 75%;grid-template-rows:1fr;margin:0 auto;padding:1rem 1rem}}.secondary.layout--v1 #root{gap:1rem;position:relative;width:100%;height:100%;min-height:100vh;max-width:1200px;background-color:#1f2421;box-shadow:0 0 5px 10px rgba(29,31,32,.45)}.secondary.layout--v1 #root main{padding:1rem 1rem}.secondary.layout--v1.menu-open,.secondary.layout--v1.photo-open{overflow:hidden}.secondary.layout--v1.photo-open .overlay{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#171a21;opacity:.9}header{display:block;position:sticky;overflow:auto;width:100%;height:50px;top:0;padding-bottom:1rem;background-color:#1f2421}@media(min-width: 600px){header{height:500px}}header.open{overflow:visible}header.open .top h1{display:none}header nav.main{display:block;position:relative}@media(min-width: 600px){header nav.main{display:flex;flex-direction:column;gap:2rem}}header nav.main .top{display:flex}header nav.main .top h1{margin:0}header nav.main .top h1 a{display:block;position:relative;top:1rem;left:1rem;font-size:1.5rem;text-decoration:none;color:#1d1f20;background-color:#d7b94c;border:2px solid #d7b94c;padding:2px 2px}header nav.main .top h1 a:hover{color:#d7b94c;background-color:unset}header nav.main .top .icon.icon-menu{display:block;position:absolute;top:1rem;right:1rem;width:35px;height:35px;z-index:999;transition:right 100ms ease}@media screen and (min-width: 600px){header nav.main .top .icon.icon-menu{display:none}}header nav.main .top .icon.icon-menu:before{content:"";display:block;background-image:url("/icons/menu-grid.svg");background-size:100%;position:absolute;width:35px;height:35px}header nav.main .top .icon.icon-menu:hover{cursor:pointer}header nav.main .top .icon.icon-menu.open{right:325px}header nav.main .top .icon.icon-menu.open:before{background-image:url("/icons/menu-close.svg")}header nav.main menu{position:absolute;right:0;top:0;width:0;background-color:#d7b94c;overflow:hidden;padding:0;margin:0;transition:width 100ms ease}@media(min-width: 600px){header nav.main menu{position:relative;top:unset;right:unset;width:100%;transition:unset;background-color:unset}}header nav.main menu.open{width:300px;box-shadow:0 0 5px 10px rgba(29,31,32,.45)}header nav.main menu li{padding:1rem 2rem}header nav.main menu li a{display:block;color:#fbfcff;text-decoration:none}header nav.main menu li a:hover{text-decoration:underline}.posts .list ul{list-style:none;padding:0}.posts .list ul li{padding:1rem 0}.posts .list ul li a{color:#fbfcff;text-decoration:none;display:block}.posts .list ul li a .post-title{margin:0}.photos{display:block}.photos .albums{display:flex;flex-direction:column;width:100%}@media(min-width: 800px){.photos .albums{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto}}.photos .albums{gap:1rem;list-style:none;padding:0}.photos .albums .album{display:block;width:100%}.photos .albums .album a{display:block;position:relative;color:#fff;text-decoration:none;overflow:hidden}.photos .albums .album a img{display:block;width:100%;height:auto}.photos .albums .album a .title,.photos .albums .album a .date,.photos .albums .album a .overlay{position:absolute;visibility:visible;margin:0}.photos .albums .album a .title,.photos .albums .album a .date,.photos .albums .album a .category{z-index:2}.photos .albums .album a .title{top:1rem;left:1rem}.photos .albums .album a .date{bottom:1rem;left:1rem;font-weight:bold}.photos .albums .album a .overlay{width:100%;height:auto;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.333);z-index:1}.photos .albums .album a:hover .title,.photos .albums .album a:hover .date,.photos .albums .album a:hover .category,.photos .albums .album a:hover .overlay{visibility:hidden}.photos .albums .album a:hover img{transform:scale(1.01);transition:transform 100ms ease-in-out}.photos img{width:100%}#album .title{margin:0}#album .meta{border-bottom:5px solid #a6a695}#album .photos{display:flex;flex-direction:column;width:100%}@media(min-width: 800px){#album .photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto}}#album .photos{gap:1rem;list-style:none;padding:0}#album .photos .photo{width:100%;overflow:hidden}#album .photos .photo img{transition:transform 100ms ease-in-out}#album .photos .photo:hover{cursor:pointer}#album .photos .photo:hover img{transform:scale(1.01);transition:transform 100ms ease-in-out}#open-image{display:none;position:absolute;top:0;left:0;z-index:999;width:100%;height:100vh}#open-image .wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:75%;height:75%}#open-image .wrapper .close{cursor:pointer;font-family:AtomicAge-Regular;font-size:2rem;position:absolute;right:5px;top:0}#open-image .wrapper img{width:100%;height:auto}#open-image .wrapper #details{display:block;height:auto;padding:1rem 1rem;background-color:#a6a695}#open-image .wrapper #details p{margin:0}#open-image .wrapper #details #caption{font-size:1.5rem;padding-bottom:1rem}#open-image .wrapper #details #location,#open-image .wrapper #details #date,#open-image .wrapper #details #equipment{font-size:1.25rem}#open-image.open{display:block}.posts{display:block}.posts h2,.posts h3{position:relative;margin:0;width:fit-content}.posts h2:after,.posts h3:after{content:"";display:block;width:75px;height:5px;background-color:#a6a695}.posts .intro{padding:1rem 0}.posts .list{padding:2rem 0;border-top:5px solid #d7b94c}.posts .list .post a .title{padding:.5rem 0}.posts .list .post a:hover{text-decoration:underline;text-decoration-color:#a6a695}.posts .list .post .description{margin-top:1rem;padding-left:1rem;border-left:5px solid #a6a695}.posts .list .post .description p{padding:1rem 0}.post{display:block}.post .title{margin:.5rem 0}.post .meta{padding-bottom:1rem;border-bottom:5px solid #a6a695}.post .meta .admin-actions{padding-bottom:1rem}.post .meta .published{font-size:1.125rem}.post .meta .category{font-size:1.125rem}.post .text p{font-size:1.25rem;line-height:1.5}.post .tags{margin-top:2rem;background-color:dimgray}.post .tags .list{display:flex;align-items:center;gap:1rem;margin:0;list-style:none;padding:.5rem .5rem}.post .tags .list p{font-size:.85rem}.post .tags .list .tag a{font-size:.85rem}.category .posts ul,.category .photos ul,.tag .posts ul,.tag .photos ul{list-style-type:square;color:#fbfcff}.category .posts ul li,.category .photos ul li,.tag .posts ul li,.tag .photos ul li{padding:.5rem 0} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@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}h1,h2,h3,h4,h5,h6,p,a,span,time{color:#fbfcff}.secondary.layout--v1{display:block;position:relative;padding:.5rem .5rem;background-color:#d7b94c}.secondary.layout--v1 #root{display:flex;flex-direction:column}@media(min-width: 800px){.secondary.layout--v1 #root{display:grid;grid-template-columns:25% 75%;grid-template-rows:1fr;margin:0 auto;padding:1rem 1rem}}.secondary.layout--v1 #root{gap:1rem;position:relative;width:100%;height:100%;min-height:100vh;max-width:1200px;background-color:#1f2421;box-shadow:0 0 5px 10px rgba(29,31,32,.45)}.secondary.layout--v1 #root main{padding:1rem 1rem}.secondary.layout--v1.menu-open,.secondary.layout--v1.photo-open{overflow:hidden}.secondary.layout--v1.photo-open .overlay{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#171a21;opacity:.9}header{display:block;position:sticky;overflow:auto;width:100%;height:50px;top:0;padding-bottom:1rem;background-color:#1f2421}@media(min-width: 600px){header{height:500px}}header.open{overflow:visible}header.open .top h1{display:none}header nav.main{display:block;position:relative}@media(min-width: 600px){header nav.main{display:flex;flex-direction:column;gap:2rem}}header nav.main .top{display:flex}header nav.main .top h1{margin:0}header nav.main .top h1 a{display:block;position:relative;top:1rem;left:1rem;font-size:1.5rem;text-decoration:none;color:#1d1f20;background-color:#d7b94c;border:2px solid #d7b94c;padding:2px 2px}header nav.main .top h1 a:hover{color:#d7b94c;background-color:unset}header nav.main .top .icon.icon-menu{display:block;position:absolute;top:1rem;right:1rem;width:35px;height:35px;z-index:999;transition:right 100ms ease}@media screen and (min-width: 600px){header nav.main .top .icon.icon-menu{display:none}}header nav.main .top .icon.icon-menu:before{content:"";display:block;background-image:url("/icons/menu-grid.svg");background-size:100%;position:absolute;width:35px;height:35px}header nav.main .top .icon.icon-menu:hover{cursor:pointer}header nav.main .top .icon.icon-menu.open{right:325px}header nav.main .top .icon.icon-menu.open:before{background-image:url("/icons/menu-close.svg")}header nav.main menu{position:absolute;right:0;top:0;width:0;background-color:#d7b94c;overflow:hidden;padding:0;margin:0;transition:width 100ms ease}@media(min-width: 600px){header nav.main menu{position:relative;top:unset;right:unset;width:100%;transition:unset;background-color:unset}}header nav.main menu.open{width:300px;box-shadow:0 0 5px 10px rgba(29,31,32,.45)}header nav.main menu li{padding:1rem 2rem}header nav.main menu li a{display:block;color:#fbfcff;text-decoration:none}header nav.main menu li a:hover{text-decoration:underline}.posts .list ul{list-style:none;padding:0}.posts .list ul li{padding:1rem 0}.posts .list ul li a{color:#fbfcff;text-decoration:none;display:block}.posts .list ul li a .post-title{margin:0}.page .text ul li,.page .text ol li{color:#fbfcff}.photos{display:block}.photos .albums{display:flex;flex-direction:column;width:100%}@media(min-width: 800px){.photos .albums{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto}}.photos .albums{gap:1rem;list-style:none;padding:0}.photos .albums .album{display:block;width:100%}.photos .albums .album a{display:block;position:relative;color:#fff;text-decoration:none;overflow:hidden}.photos .albums .album a img{display:block;width:100%;height:auto}.photos .albums .album a .title,.photos .albums .album a .date,.photos .albums .album a .overlay{position:absolute;visibility:visible;margin:0}.photos .albums .album a .title,.photos .albums .album a .date,.photos .albums .album a .category{z-index:2}.photos .albums .album a .title{top:1rem;left:1rem}.photos .albums .album a .date{bottom:1rem;left:1rem;font-weight:bold}.photos .albums .album a .overlay{width:100%;height:auto;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.333);z-index:1}.photos .albums .album a:hover .title,.photos .albums .album a:hover .date,.photos .albums .album a:hover .category,.photos .albums .album a:hover .overlay{visibility:hidden}.photos .albums .album a:hover img{transform:scale(1.01);transition:transform 100ms ease-in-out}.photos img{width:100%}#album .title{margin:0}#album .meta{border-bottom:5px solid #a6a695}#album .photos{display:flex;flex-direction:column;width:100%}@media(min-width: 800px){#album .photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto}}#album .photos{gap:1rem;list-style:none;padding:0}#album .photos .photo{width:100%;overflow:hidden}#album .photos .photo img{transition:transform 100ms ease-in-out}#album .photos .photo:hover{cursor:pointer}#album .photos .photo:hover img{transform:scale(1.01);transition:transform 100ms ease-in-out}#open-image{display:none;position:fixed;top:0;left:0;z-index:999;width:100%;height:100vh}#open-image .wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;max-width:700px;height:75%;max-height:100vh}#open-image .wrapper .close{cursor:pointer;font-family:AtomicAge-Regular;font-size:2rem;position:absolute;right:5px;top:0}#open-image .wrapper img{width:100%;height:auto}#open-image .wrapper #details{display:block;height:auto;padding:1rem 1rem;background-color:#a6a695}#open-image .wrapper #details p{margin:0}#open-image .wrapper #details #caption{font-size:1.5rem;padding-bottom:1rem}#open-image .wrapper #details #location,#open-image .wrapper #details #date,#open-image .wrapper #details #equipment{font-size:1.25rem}#open-image.open{display:block}.posts{display:block}.posts h2,.posts h3{position:relative;margin:0;width:fit-content}.posts h2:after,.posts h3:after{content:"";display:block;width:75px;height:5px;background-color:#a6a695}.posts .intro{padding:1rem 0}.posts .list{padding:2rem 0;border-top:5px solid #d7b94c}.posts .list .post a .title{padding:.5rem 0}.posts .list .post a:hover{text-decoration:underline;text-decoration-color:#a6a695}.posts .list .post .description{margin-top:1rem;padding-left:1rem;border-left:5px solid #a6a695}.posts .list .post .description p{padding:1rem 0}.post{display:block}.post .title{margin:.5rem 0}.post .meta{padding-bottom:1rem;border-bottom:5px solid #a6a695}.post .meta .admin-actions{padding-bottom:1rem}.post .meta .published{font-size:1.125rem}.post .meta .category{font-size:1.125rem}.post .text p{font-size:1.25rem;line-height:1.5}.post .tags{margin-top:2rem;background-color:dimgray}.post .tags .list{display:flex;align-items:center;gap:1rem;margin:0;list-style:none;padding:.5rem .5rem}.post .tags .list p{font-size:.85rem}.post .tags .list .tag a{font-size:.85rem}.category .posts ul,.category .photos ul,.tag .posts ul,.tag .photos ul{list-style-type:square;color:#fbfcff}.category .posts ul li,.category .photos ul li,.tag .posts ul li,.tag .photos ul li{padding:.5rem 0} diff --git a/assets/styles/scss/brain.scss b/assets/styles/scss/brain.scss index 685f968..24de1a3 100644 --- a/assets/styles/scss/brain.scss +++ b/assets/styles/scss/brain.scss @@ -1,3 +1,4 @@ +@use './brain/actions'; @use './brain/form'; @use './brain/layout'; diff --git a/assets/styles/scss/brain/_actions.scss b/assets/styles/scss/brain/_actions.scss new file mode 100644 index 0000000..ee6badc --- /dev/null +++ b/assets/styles/scss/brain/_actions.scss @@ -0,0 +1,11 @@ +.actions { + padding-bottom: 1rem; + + .list { + display: flex; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; + } +} \ No newline at end of file diff --git a/assets/styles/scss/brain/_layout.scss b/assets/styles/scss/brain/_layout.scss index 73539d0..e657329 100644 --- a/assets/styles/scss/brain/_layout.scss +++ b/assets/styles/scss/brain/_layout.scss @@ -1,3 +1,5 @@ +@use '../shared/colors' as colors; + #brain-wrapper { header { .level-1 { @@ -30,4 +32,8 @@ } } } + + a { + color: colors.$inkBlack; + } } \ No newline at end of file diff --git a/assets/styles/scss/front/_pages.scss b/assets/styles/scss/front/_pages.scss new file mode 100644 index 0000000..5dc2bea --- /dev/null +++ b/assets/styles/scss/front/_pages.scss @@ -0,0 +1,11 @@ +@use '../shared/colors' as colors; + +.page { + .text { + ul, ol { + li { + color: colors.$primaryWhite; + } + } + } +} \ No newline at end of file diff --git a/assets/styles/scss/front/_photos.scss b/assets/styles/scss/front/_photos.scss index 4d67a8d..88f3935 100644 --- a/assets/styles/scss/front/_photos.scss +++ b/assets/styles/scss/front/_photos.scss @@ -133,7 +133,7 @@ #open-image { display: none; - position: absolute; + position: fixed; top: 0; left: 0; z-index: 999; @@ -145,8 +145,15 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 75%; + width: 100%; + max-width: 700px; height: 75%; + max-height: 100vh; + +/* @media (min-width: 600px) { + top: 2rem; + transform: translate(-50%, 0); + } */ .close { cursor: pointer; diff --git a/assets/styles/scss/landing/_computer.scss b/assets/styles/scss/landing/_computer.scss index 6c0d80e..f5a7c3f 100644 --- a/assets/styles/scss/landing/_computer.scss +++ b/assets/styles/scss/landing/_computer.scss @@ -172,7 +172,7 @@ margin-top: 5rem; @media (min-width: 600px) { - margin-top: -2rem; + margin-top: -6rem; } .heading { @@ -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; diff --git a/assets/styles/scss/main.scss b/assets/styles/scss/main.scss index 155067e..0ca9f1d 100644 --- a/assets/styles/scss/main.scss +++ b/assets/styles/scss/main.scss @@ -4,6 +4,7 @@ @use './front/layout'; @use './front/menu'; @use './front/lists'; +@use './front/pages'; @use './front/photos'; @use './front/posts'; @use './front/taxonomy'; \ No newline at end of file diff --git a/src/Controller/Brain/BrainPageController.php b/src/Controller/Brain/BrainPageController.php index 4192b6a..165bfc4 100644 --- a/src/Controller/Brain/BrainPageController.php +++ b/src/Controller/Brain/BrainPageController.php @@ -51,7 +51,7 @@ final class BrainPageController extends AbstractController $entityManager->flush(); - return $this->redirectToRoute('brain_page_list'); + return $this->redirectToRoute('front_end_page', ['url' => $data->getUrl()]); } return $this->render('brain/page/create.html.twig', [ @@ -86,7 +86,7 @@ final class BrainPageController extends AbstractController $entityManager->flush(); - return $this->redirectToRoute('brain_page_list'); + return $this->redirectToRoute('front_end_page', ['url' => $data->getUrl()]); } return $this->render('brain/page/create.html.twig', [ diff --git a/src/Controller/Brain/BrainPhotosController.php b/src/Controller/Brain/BrainPhotosController.php index 06e72a2..8924843 100644 --- a/src/Controller/Brain/BrainPhotosController.php +++ b/src/Controller/Brain/BrainPhotosController.php @@ -83,7 +83,7 @@ final class BrainPhotosController extends AbstractController $entityManager->flush(); - return $this->redirectToRoute('brain_photos_list'); + return $this->redirectToRoute('front_end_photos_detail', ['url' => $data->getUrl()]); } return $this->render('brain/photos/create.html.twig', [ @@ -128,7 +128,7 @@ final class BrainPhotosController extends AbstractController $entityManager->flush(); - return $this->redirectToRoute('brain_photos_list'); + return $this->redirectToRoute('front_end_photos_detail', ['url' => $data->getUrl()]); } return $this->render('brain/photos/create.html.twig', [ diff --git a/src/Controller/Brain/BrainPostController.php b/src/Controller/Brain/BrainPostController.php index 1777d9d..030c4e6 100644 --- a/src/Controller/Brain/BrainPostController.php +++ b/src/Controller/Brain/BrainPostController.php @@ -78,7 +78,7 @@ final class BrainPostController extends AbstractController $entityManager->flush(); - return $this->redirectToRoute('brain_post_list'); + return $this->redirectToRoute('front_end_post_detail', ['url' => $data->getUrl()]); } return $this->render('brain/post/create.html.twig', [ @@ -134,7 +134,7 @@ final class BrainPostController extends AbstractController $entityManager->flush(); - return $this->redirectToRoute('brain_post_list'); + return $this->redirectToRoute('front_end_post_detail', ['url' => $data->getUrl()]); } return $this->render('brain/post/create.html.twig', [ 'action' => 'edit', diff --git a/templates/brain/home/index.html.twig b/templates/brain/home/index.html.twig index 3c38351..cdeb027 100644 --- a/templates/brain/home/index.html.twig +++ b/templates/brain/home/index.html.twig @@ -7,9 +7,32 @@ {% endblock %} {% block actions %} - this will be some global admin actions +
+ +
{% endblock %} {% block admin %} -

This will be a dashboard of sorts

+
+

Dashboard

+

To Do

+ +
+ {% endblock %} diff --git a/templates/front/home/index.html.twig b/templates/front/home/index.html.twig index 95c0766..7b594b0 100644 --- a/templates/front/home/index.html.twig +++ b/templates/front/home/index.html.twig @@ -55,7 +55,7 @@
-

Item 1

+

Photos

I embarked on a cross country road trip and back. See some photos!

Check It Out @@ -69,10 +69,10 @@
-

Item 3

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Check It Out +

Site Tech

+ +

Site framework, libraries, and tools used to make this site

+ Check It Out
diff --git a/templates/front/post/index.html.twig b/templates/front/post/index.html.twig index 5dd2f1f..b125f19 100644 --- a/templates/front/post/index.html.twig +++ b/templates/front/post/index.html.twig @@ -18,6 +18,9 @@

A truly random smattering of thoughts and feelings. Things may not always be relevant, but they will always be irreverant.

Recent

+ {% if app.user %} +
Add New Post + {% endif %}