@charset “utf-8”;
@mixin square-shadow {
-moz-box-shadow: 0px 0px 10px -4px rgba(0,0,0,1); -webkit-box-shadow: 0px 0px 10px -4px rgba(0,0,0,1); box-shadow: 0px 0px 10px -4px rgba(0,0,0,1);
}
a.navbar-item, .navbar-link {
&.is-active, &:hover, &:focus, &:focus-within { background-color: transparent; }
}
hr {
background-color: $grey-lightest;
}
main {
min-height: 100vh; .contacts, .projects, .resume, .error { background-color: $primary-invert; color: $primary; margin: 0; min-height: 100vh; padding: 8rem 0; } .container.page { @include square-shadow; background-color: $white; margin-top: -8rem; padding: 4rem; &.page-resume { padding: 0; .columns { margin: 0; padding: 0; .column { padding: 4rem; &.resume-profile { background-color: $primary; color: $primary-invert; h1 { margin-top: 1rem; } } &.resume-info { margin-left: 5rem; overflow-wrap: break-word; .info { position: relative; top: -1.5rem; } .years { border-top: 4px solid $primary-invert; left: -6rem; position: relative; text-align: right; text-overflow: clip; width: 5rem; } } } } } } .page-head { background-color: $primary; color: $primary-invert; margin: 0; padding: 8rem; } .projects { figure { .overlay { background-color: $primary; bottom: 1rem; color: $white; padding: 0 1rem 0 0.4rem; position: absolute; right: -0.5rem; z-index: 1000; } } .columns { padding: 1rem; } } .container .columns { padding-bottom: 5rem; } &>.section:nth-child(even) { background-color: $white; } &>.section:nth-child(odd) { background-color: $grey-lighter; }
}
ul:not(.task-list) {
list-style: square inside;
}
.button {
&.is-link { background-color: $primary-invert; color: $primary; } &.is-primary:hover, &.is-primary.is-hovered, &.is-primary:active, &.is-primary.is-active, &.is-primary:focus, &.is-primary.is-focused { background-color: $primary-invert; color: $primary; }
}
.button, .file-cta, .file-name, .input, .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea{
border-radius: 0;
}
.buttons {
padding: 1rem 0;
}
.categories {
span { background-color: $grey-lightest; margin: 2px 0; padding: 4px; }
}
.centered {
margin: auto;
}
.column.contact {
@include square-shadow; background-color: $primary; color: $primary-invert; height: 100%; margin-right: 3rem; padding: 1rem; .links { line-height: 5rem; padding: 1rem; .link { margin: 1rem; } }
}
.grid {
.card { height: max-content; margin-bottom: 1.5rem; } .column { .card:last-child { margin-bottom: 0; } }
}
.has-text-pink {
color: $pink;
}
.hero {
&-background { -webkit-filter: opacity(20%); filter: opacity(20%); height: 100%; left: 0; object-fit: cover; object-position: center center; position: absolute; top: 0; transition: ease 1s; width: 100%; } &.has-background { overflow: hidden; position: relative; } &:hover { .hero-background { height: 120%; left: -10%; max-width: 120%; top: -10%; width: 120%; } }
}
.image.project {
background-color: $primary;
}
.navbar {
@include square-shadow; &-brand { padding-left: 3rem; position: relative; } &-burger { position: absolute; right: 3rem; top: calc(50% - 1.625rem); } &-dropdown { background-color: $info; border-radius: 0; border: none; .navbar-item { a { &:hover, &:focus, &:focus-within { background-color: transparent; } } } } &-menu { background-color: $primary; padding-right: 3rem; }
}
.navbar-item {
img { max-height: 3rem; }
}
.post-body {
margin: 1.5rem 0; .task-list-item-checkbox { margin: 0.5rem; }
}
.progress {
background-color: $progress-bar-background-color; // Bulma bug fix (not released yeet) border: 4px solid $primary-invert;
}
.project {
@include square-shadow; .hover { -ms-flex-align: center; -ms-flex-pack: center; -webkit-box-align: center; -webkit-box-pack: center; align-items: center; background: rgba(0, 0, 0, 0.75); bottom: 0; display: none; font-size: 2rem; font-weight: bold; justify-content: center; left: 0; position: absolute; right: 0; top: 0; z-index: 1; span { margin: 1rem; } } &:hover { .hover { display: flex; } }
}
.resume {
.skill { margin: 1rem; margin-left: 3rem; .icon { position: relative; top: 1.6rem; left: -2.5rem; } }
}
.section.section-card {
background-color: inherit; margin-top: 10rem; h1 { font-weight: bold; }
}
.navbar-not(.is-arrowless)::after, .select:not(.is-multiple):not(.is-loading)::after {
border-radius: 0;
}
.paper:not(:last-child) {
margin-bottom: 1rem;
}
.timeline {
margin: 0 auto; max-width: 1000px; position: relative; .left { left: 0; &::before { right: 33px; } } .right { left: 50%; &::after { left: -10px; } &::before { left: 33px; } } &-card { padding: 10px 40px; position: relative; width: 50%; .timeline-content { background-color: $primary; color: $primary-invert; padding: 20px 30px; position: relative; transition: ease 0.5s; } &::after { background-color: $primary-invert; border: 4px solid $primary; content: ""; height: 20px; position: absolute; right: -10px; top: 22px; transform: rotate(45deg); transition: ease 0.5s; width: 20px; z-index: 1; } &:hover { font-size: larger; &::after { transform: rotate(90deg); } } } .left::before, .right::before { background-color: $primary; content: ""; height: 15px; position: absolute; top: 25px; transform: rotate(45deg); width: 15px; z-index: 1; } &::after { background-color: $primary; bottom: 0; content: ""; left: 50%; margin-left: -3px; position: absolute; top: 0; width: 6px; }
}
@media screen and (min-width: 1px) {
.navbar.is-primary .navbar-start .navbar-link, .navbar.is-primary .navbar-end .navbar-link { &::after { border-color: $primary-invert transparent transparent transparent; border-style: solid; border-width: 10px 5px 0 5px; height: 0; margin-top: -0.275em; transform: none; width: 0; } }
}
@media screen and (max-width: 500px) {
.timeline { .right { left: 0%; } &-card { padding: 5px 0 5px 70px; width: 100%; &::before { left: 60px; } } .left::after, .right::after { left: 26px; } .left::before, .right::before { left: 62px; } &::after { left: 36px; } }
}
@media screen and (min-width: 1000px) {
.column.contact { margin-left: -8rem; } .contacts .section.section-card { margin-left: 10rem; margin-right: 5rem; }
}