diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss index ca89c31..053a1b8 100644 --- a/assets/styles/application.template.scss +++ b/assets/styles/application.template.scss @@ -12,6 +12,16 @@ @import '@fontsource/mulish/700'; @import './variables'; +@import './mixins'; + +// components +@import './components/cards'; +@import './components/buttons'; +@import './components/links'; +@import './components/texts'; +@import './components/images'; +@import './components/tables'; +@import './components/misc'; // layouts @import './layouts/main'; @@ -39,11 +49,6 @@ @import './sections/footer'; -// components -@import './components/cards'; -@import './components/buttons'; -@import './components/links'; - // override @import './override'; diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss index f80b3bf..d87f102 100644 --- a/assets/styles/components/buttons.scss +++ b/assets/styles/components/buttons.scss @@ -1,45 +1,44 @@ .btn-dark { - background-color: #3c4858 !important; - border-color: #3c4858 !important; - color: #e5e9f2 !important; - transition: all 0.3s ease-out !important; + background-color: $text-color !important; + border-color: $text-color !important; + color: $text-over-accent-color !important; + @include transition(); &:hover, &:focus { - background-color: #248aaa !important; - border-color: #248aaa !important; - transition: all 0.3s ease-out !important; + background-color: $accent-color !important; + border-color: $accent-color !important; + @include transition(); } } .btn-info { - background-color: #248aaa !important; - color: #e5e9f2 !important; + background-color: $accent-color !important; + color: $text-over-accent-color !important; &:hover, &:focus { - background-color: #2098d1 !important; - color: #e5e9f2 !important; + background-color: $hover-over-accent-color !important; } } .btn-outline-info { - color: #2098d1 !important; - border-color: #2098d1 !important; + color: $accent-color !important; + border-color: $accent-color !important; &:hover, &:focus { - background-color: #2098d1 !important; - color: #e5e9f2 !important; + background-color: $accent-color !important; + color: $text-over-accent-color !important; } } .btn-link { - color: #248aaa; + color: $accent-color; &:hover, &:focus { - color: #207089; + color: $hover-over-accent-color; } } @@ -47,7 +46,7 @@ background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; - color: #8392a5; + color: $muted-text-color; } .tags { @@ -57,18 +56,18 @@ font-size: 0.5em; list-style-type: none; display: inline-block; - background: #248aaa; + background: $accent-color; margin-left: 0.1em; margin-right: 0.1em; } a { - color: #f9fafc; + color: $text-over-accent-color; } } .icon-button { - background-color: #3c4858; - color: #e5e9f2 !important; + background-color: $text-color; + color: $text-over-accent-color !important; padding: 0.25rem 0.5rem; line-height: 1.5; border-radius: 0.2rem; @@ -76,19 +75,19 @@ &:hover, &:focus { - background-color: #248aaa !important; - transition: all 0.3s ease-out !important; + background-color: $accent-color !important; + @include transition(); } } .filled-button { - color: #f9fafc !important; - background-color: #248aaa !important; - transition: all 0.3s ease-out; + background-color: $accent-color !important; + color: $text-over-accent-color !important; + @include transition(); &:hover, &:active { - background-color: #0cafe1 !important; - transition: all 0.3 ease-out; + background-color: $hover-over-accent-color !important; + @include transition(); } } diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss index e14b4b0..8e247f8 100644 --- a/assets/styles/components/cards.scss +++ b/assets/styles/components/cards.scss @@ -1,13 +1,14 @@ .card { box-shadow: none; - transition: all 0.3s ease-out; + @include transition(); overflow: hidden; + background: $bg-card; &:hover, &:focus { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; - transition: all 0.3s ease-out; + box-shadow: $box-shadow; + border: 1px solid $bg-primary; + @include transition(); } .card-head { @@ -21,7 +22,7 @@ } .card-img-top { - transition: all 0.3s ease-out !important; + @include transition(); } .card-img-sm { @@ -35,7 +36,7 @@ } .card-footer { - background: #fff; + background: $bg-card !important; } } @@ -55,7 +56,7 @@ &:focus { .card-img-top { transform: scale(1.2); - transition: all 0.3s ease-out; + @include transition(); } } @@ -79,7 +80,7 @@ span { font-size: 10pt; - color: #6c757d !important; + color: $muted-text-color !important; padding-top: 5px; } } diff --git a/assets/styles/components/images.scss b/assets/styles/components/images.scss new file mode 100644 index 0000000..14a4e09 --- /dev/null +++ b/assets/styles/components/images.scss @@ -0,0 +1,34 @@ +img { + display: block; + max-width: 100%; + + &.center { + margin-left: auto; + margin-right: auto; + } + + &.left { + margin-right: auto; + } + + &.right { + margin-left: auto; + } +} + +figure { + border: 1px solid $border-color; + height: -moz-fit-content; + height: fit-content; + width: -moz-fit-content; + width: fit-content; + align-self: center; + margin: auto; +} + +caption, +figcaption { + caption-side: bottom; + text-align: center; + color: $muted-text-color; +} diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss index a302632..bcd663a 100644 --- a/assets/styles/components/links.scss +++ b/assets/styles/components/links.scss @@ -1,15 +1,52 @@ +a { + color: $accent-color; + @include transition(); + + &:hover, + &:focus { + text-decoration: $hover-over-accent-color underline; + color: $hover-over-accent-color; + @include transition(); + } +} + .list-link { - text-decoration: none; - color: #131313; - transition: all 0.3s ease-out; - &.active { - display: inline; - color: #2098d1; + text-decoration: none; + color: $text-color; + @include transition(); + &.active { + display: inline; + color: $accent-color; + } + + &:hover { + margin-left: 3px; + color: $accent-color; + @include transition(); + } +} + +a.header-anchor { + text-decoration: none; + color: $heading-color; + i, + svg { + font-size: 10pt; + color: $text-color; + display: none; + margin-left: 0.5rem; + } + &:hover { + i, + svg { + display: inline-block; } - - &:hover { - margin-left: 3px; - color: #2098d1; - transition: all 0.3s ease-out; - } - } \ No newline at end of file + } + code { + color: $inline-code-color; + } +} + +.anchor { + padding-top: 3.5rem; +} diff --git a/assets/styles/components/misc.scss b/assets/styles/components/misc.scss new file mode 100644 index 0000000..67b6c93 --- /dev/null +++ b/assets/styles/components/misc.scss @@ -0,0 +1,33 @@ +.paginator { + width: -moz-fit-content; + width: fit-content; + margin: auto; + vertical-align: bottom; + + .page-item { + & > a { + color: $accent-color; + } + &.active, + &:hover > a { + background-color: $accent-color !important; + color: $text-over-accent-color !important; + } + } +} + +pre { + margin: 5px; + & > code { + padding: 10px !important; + } +} + +@include media('<=large') { + pre { + margin: 0px; + & > code { + padding: 0px !important; + } + } +} diff --git a/assets/styles/components/tables.scss b/assets/styles/components/tables.scss new file mode 100644 index 0000000..af0b246 --- /dev/null +++ b/assets/styles/components/tables.scss @@ -0,0 +1,74 @@ +table { + border-radius: 0.1rem; + border: 1px solid $border-color; + min-width: 10rem; + padding: 0.1rem; + thead { + tr { + background: $accent-color; + color: $text-over-accent-color; + } + } + + tbody { + tr { + height: 40px !important; + color: $text-color; + &:nth-child(odd) { + background-color: $bg-primary; + } + &:nth-child(even) { + background-color: rgba($accent-color, 0.05); + } + } + } + th, + td { + padding-top: 0.2rem; + padding-bottom: 0.2rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + } +} + +.gist { + table { + border-radius: unset; + background: unset; + border: unset; + padding: unset; + + tr { + height: unset !important; + } + + th, + td { + padding: unset; + border-left: unset; + border-bottom: unset; + } + td, + tc { + border-right: 1px solid $border-color; + } + + thead { + tr { + background: unset; + color: unset; + } + } + + tbody { + tr { + &:nth-child(odd) { + background-color: unset; + } + &:hover { + background: unset; + } + } + } + } +} diff --git a/assets/styles/components/texts.scss b/assets/styles/components/texts.scss new file mode 100644 index 0000000..e406772 --- /dev/null +++ b/assets/styles/components/texts.scss @@ -0,0 +1,62 @@ +h1, +h2, +h3, +h4, +h5 { + color: $heading-color; +} + +strong { + color: $heading-color !important; +} + +p { + color: $text-color; +} + +blockquote { + border-left: 4px solid $accent-color; + background-color: rgba($accent-color, 0.05); + padding: 0.3rem; + padding-left: 1rem; + + & > p { + color: $text-color; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } +} + +.text-muted { + color: $muted-text-color !important; +} + +.text-heading { + font-weight: bold; + color: $muted-text-color; +} + +.sub-title { + color: $muted-text-color; + font-size: 10pt; +} + +::-moz-selection { + @include selection-color(); +} + +::selection { + @include selection-color(); +} + +@include media('<=small') { + h1 { + font-size: 2.2rem; + } +} + +@include media('<=tiny') { + h1 { + font-size: 1.5rem; + } +} diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss index a46325a..8b530b2 100644 --- a/assets/styles/layouts/list.scss +++ b/assets/styles/layouts/list.scss @@ -49,12 +49,12 @@ body.kind-page { .page-item { & > a { - color: #248aaa; + color: $accent-color; } &.active > a { - background-color: #248aaa; - color: #f9fafc; + background-color: $accent-color; + color: $text-over-accent-color; } } } @@ -84,18 +84,18 @@ body.kind-page { width: 100%; padding-left: 0; padding-right: 0; - transition: all ease-out 0.3s; + @include transition(); } &.hide { .content { margin-top: 0; padding-top: 0; - transition: all ease-out 0.3s; + @include transition(); } .post-card-holder { margin-top: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); } } } @@ -136,7 +136,7 @@ body.kind-page { padding-left: 0.5rem; padding-right: 0.5rem; position: relative; - transition: all ease-out 0.3s; + @include transition(); } } .container { diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss index 3ee539b..942dcae 100644 --- a/assets/styles/layouts/main.scss +++ b/assets/styles/layouts/main.scss @@ -1,18 +1,3 @@ -/* ========= Colors ============ -Heading: #1C2D41 -Paragraph: #3C4858 -Iconography: #8392A5 -Secondary: #C0CCDA -Dirty Snow: #E5E9F2 -Snow: #F9FAFC - -Magenta: #7551E9 -Orange: #FF7D51 -Pink: #ED63D2 -Green: #2DCA73 -Yellow: #FFC212 -*/ - /* Removed smooth scrolling implementation in main.js in favor of simpler css approach. @@ -35,71 +20,16 @@ html { } body { - background-color: #f9fafc; + background-color: $bg-primary; font-family: 'Mulish'; } -h1, -h2, -h3, -h4, -h5 { - color: #1c2d41; +.bg-primary { + background-color: $bg-primary !important; } -strong { - color: #1c2d41 !important; -} - -p { - color: #3c4858; -} - -a { - color: #248aaa; -} - -a:hover { - color: #207089; -} -a.focused { - color: #2098d1 !important; -} - - - -.bg-white { - background-color: #f9fafc !important; -} - -.bg-dimmed { - background-color: #e5e9f2; -} - -.anchor { - padding-top: 3.5rem; -} - -img.center { - display: block; - margin-left: auto; - margin-right: auto; -} - -img.left { - display: block; - margin-right: auto; -} - -img.right { - display: block; - margin-left: auto; -} - - -.sub-title { - color: #c0ccda; - font-size: 10pt; +.bg-secondary { + background-color: $bg-secondary !important; } .flag-icon { @@ -112,220 +42,36 @@ img.right { display: none !important; } -/* ====== table ====== */ -table { - border-radius: 0.1rem; - background: #e5e9f2; - border: 1px solid #c0ccda; - padding: 0.1rem; -} - -table tr { - height: 40px !important; -} - -table th, -td { - padding: 0.5rem; - border-left: 1px solid #8392a5; - border-bottom: 1px solid #8392a5; -} - -table thead tr { - background: #248aaa; - color: #e5e9f2; -} - -tbody tr:nth-child(odd) { - background-color: #e5e9f2; -} - -tbody tr:hover { - background: #c0ccda; -} - -/* ====== don't apply css to tables inside gist ====== */ -.gist table { - border-radius: unset; - background: unset; - border: unset; - padding: unset; -} - -.gist table tr { - height: unset !important; -} - -.gist table th, -td { - padding: unset; - border-left: unset; - border-bottom: unset; -} - -.gist table thead tr { - background: unset; - color: unset; -} - -.gist tbody tr:nth-child(odd) { - background-color: unset; -} - -.gist tbody tr:hover { - background: unset; -} - -.gist table td, -.gist table tc { - border-right: 1px solid #eee; -} - -figure { - border: 1px solid #c0ccda; - height: -moz-fit-content; - height: fit-content; - width: -moz-fit-content; - width: fit-content; - align-self: center; - margin: auto; -} - -img { - max-width: 100%; -} - -caption, -figcaption { - caption-side: bottom; - text-align: center; - color: #8392a5; -} - -pre { - margin: 5px; -} - -pre > code { - padding: 10px !important; -} - -a.header-anchor { - text-decoration: none; - color: #1c2d41; -} - -a.header-anchor i, -a.header-anchor svg { - font-size: 10pt; - color: #3c4858; - display: none; - margin-left: 0.5rem; -} -a.header-anchor:hover i, -a.header-anchor:hover svg { - display: inline-block; -} -a.header-anchor code { - color: #e83e8c; -} - -.content ul > ol, -.content ol > ul, -.content ul > ul, -.content ol > ol, -.content li > ol, -.content li > ul { - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; +.content { + ul > ol, + ol > ul, + ul > ul, + ol > ol, + li > ol, + li > ul { + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; + } } kbd { - background-color: #248aaa !important; - color: #f9fafc; + background-color: $accent-color; + color: $text-over-accent-color; } mark { - background-color: #ffc21280; + background-color: $highlight-color; + border-radius: 0.25rem; } -/* ======= Paginator ========= */ -.paginator { - width: -moz-fit-content; - width: fit-content; - margin: auto; - vertical-align: bottom; -} - -.paginator .page-item > a { - color: #248aaa; -} - -.paginator .page-item.active > a { - background-color: #248aaa; - color: #f9fafc; -} - -/* ============= Media Query Template ======= */ -@include media('=medium','=large','=very-large','=extra-large') { -} - -/* Large screens such as TV */ -@media only screen and (min-width: 1824px) { -} - -/* Extra large devices (large desktops, 1200px and up) */ - -@media (max-width: 1400px) { -} - -@media (max-width: 1200px) { -} - -/* IPad Pro */ -@media (max-width: 1024px) { - .content-section .languageSelector { - position: fixed; - right: 0.5rem; - bottom: 1rem; - z-index: 10000000; - background-color: #f9fafc; - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - } - pre { - margin: 0px; - } - code { - padding: 0px; - } -} - -/* Large devices (desktops, 992px and up) */ - -@media (max-width: 992px) { -} - -/* Medium devices (tablets, 768px and up) */ - -@media only screen and (max-width: 768px) { -} - -/* Small devices (landscape phones, 576px and up) */ - -@media only screen and (max-width: 576px) { - .skills-section .container, - .projects-section .container, - .publications-section .container { - padding-left: 0.3rem; - padding-right: 0.3rem; +@include media('<=small') { + .skills-section, + .projects-section, + .publications-section { + .container { + padding-left: 0.3rem; + padding-right: 0.3rem; + } } .section-holder { @@ -341,36 +87,4 @@ mark { padding-left: 0; padding-right: 0; } - - pre { - margin: 0px; - } - code { - padding: 0px; - } - - h1 { - font-size: 2.2rem; - } -} - -/* iPhoneX, iPhone 6,7,8 */ -@media only screen and (max-width: 375px) { - h1 { - font-size: 2rem; - } -} - -/* Galaxy S5, Moto G4 */ -@media only screen and (max-width: 360px) { - h1 { - font-size: 1.8rem; - } -} - -/* iPhone 5 or before */ -@media only screen and (max-width: 320px) { - h1 { - font-size: 1.5rem; - } } diff --git a/assets/styles/layouts/notes.scss b/assets/styles/layouts/notes.scss index 29d22dc..c9bce23 100644 --- a/assets/styles/layouts/notes.scss +++ b/assets/styles/layouts/notes.scss @@ -48,7 +48,7 @@ body.type-notes { .note-title { padding-left: 1rem; - color: #248aaa; + color: $accent-color; &:before { content: ''; @@ -56,11 +56,11 @@ body.type-notes { width: 98%; height: 100%; margin-bottom: -26px; - border-bottom: 1px solid #248aaa; + border-bottom: 1px solid $accent-color; } span { - background: #e5e9f2; + background: $bg-secondary; padding-right: 5px; } } @@ -86,7 +86,7 @@ body.type-notes { max-width: 100%; order: 2; padding-bottom: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); .content { overflow: hidden; @@ -97,7 +97,7 @@ body.type-notes { padding-left: 0.5rem; padding-right: 0.5rem; position: relative; - transition: all ease-out 0.3s; + @include transition(); .note-card { flex: 50%; } @@ -109,7 +109,7 @@ body.type-notes { &.hide { max-width: 60%; - transition: all ease-out 0.3s; + @include transition(); } } } @@ -119,13 +119,13 @@ body.type-notes { .note-card-holder .note-card { max-width: 50%; min-width: 50%; - transition: all ease-out 0.3s; + @include transition(); } .content-section.hide .note-card-holder .note-card { max-width: 100%; min-width: 100%; - transition: all ease-out 0.3s; + @include transition(); } } @@ -141,16 +141,16 @@ body.type-notes { width: 100%; padding-left: 0; padding-right: 0; - transition: all ease-out 0.3s; + @include transition(); .note-card-holder { margin-top: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); .note-card { flex: 100%; max-width: 100%; - transition: all ease-out 0.3s; + @include transition(); } } } @@ -159,13 +159,13 @@ body.type-notes { max-width: 100%; padding-left: 0; width: 100%; - transition: all ease-out 0.3s; + @include transition(); .content { .note-card-holder { margin-top: 0; padding-top: 0; - transition: all ease-out 0.3s; + @include transition(); } } } diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss index faa00b9..db52be1 100644 --- a/assets/styles/layouts/single.scss +++ b/assets/styles/layouts/single.scss @@ -1,5 +1,5 @@ body.kind-page { - background-color: #e5e9f2; + background-color: $bg-secondary; position: relative; .wrapper { @@ -20,11 +20,10 @@ body.kind-page { padding-right: 1rem; .content { - background: #e5e9f2; padding-top: 1.5rem; .read-area { - background-color: #f9fafc; + background-color: $bg-primary; .hero-area { margin-top: 3rem; @@ -55,12 +54,9 @@ body.kind-page { width: 120px; -o-object-fit: cover; object-fit: cover; - background-color: #f9fafc; + background-color: $bg-primary; padding: 5px; } - p { - color: #8392a5; - } } .title { @@ -84,19 +80,6 @@ body.kind-page { h6 { margin-top: 1.3rem; } - - blockquote { - border-left: 4px solid #248aaa; - background-color: #248baa15; - padding: 0.3rem; - padding-left: 1rem; - - & > p { - color: #3c4858; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } - } } .next-prev-navigator { @@ -120,7 +103,7 @@ body.kind-page { flex: 20%; order: 3; max-width: 20%; - transition: all ease-out 0.5s; + @include transition(); .toc-holder { position: sticky; @@ -128,14 +111,14 @@ body.kind-page { padding-top: 1rem; overflow-x: hidden; overflow-y: auto; - background-color: #f9fafc; + background-color: $bg-primary; margin-right: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); .toc { position: relative; padding-top: 0px; - transition: all ease-out 0.3s; + @include transition(); nav { padding-top: 0px; @@ -143,7 +126,7 @@ body.kind-page { display: flex; flex-direction: column; align-items: flex-start; - transition: all ease-out 0.3s; + @include transition(); ul { list-style: none; @@ -155,17 +138,17 @@ body.kind-page { .nav-link { padding: 0; padding-left: 0.5rem; - transition: all ease-out 0.3s; - color: #1c2d41; + @include transition(); + color: $heading-color; &:hover, &:focus, &.active { padding-left: 1rem; padding-right: 0.5rem; - background-color: #248aaa; - color: #f9f9f9; - transition: all ease-out 0.3s; + background-color: $accent-color; + color: $text-over-accent-color; + @include transition(); } } } @@ -193,21 +176,21 @@ body.kind-page { position: fixed; bottom: 0rem; right: 1rem; - color: #248aaa; + color: $accent-color; font-size: 24pt; z-index: 900000; visibility: hidden; &:hover { - color: #2098d1; + color: $hover-over-accent-color; } &.show { visibility: visible; } i { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - background-color: #f9f9f9; + box-shadow: $box-shadow; + background-color: $bg-primary; border-radius: 50%; } } diff --git a/assets/styles/mixins.scss b/assets/styles/mixins.scss new file mode 100644 index 0000000..ec26fd8 --- /dev/null +++ b/assets/styles/mixins.scss @@ -0,0 +1,30 @@ +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +@mixin section-title-adjustment() { + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; + } +} + +@mixin brand-background() { + @each $brand, $color in $brand-colors { + .bg-#{$brand} { + background-color: $color; + } + } +} + +@mixin transition() { + transition: all $transition-type $transition-duration; +} + +@mixin selection-color() { + background: $accent-color; + color: $text-over-accent-color; +} diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss index 8a7efb8..fbbcd58 100644 --- a/assets/styles/navigators/navbar.scss +++ b/assets/styles/navigators/navbar.scss @@ -1,9 +1,8 @@ @mixin nav-item-hover-effect() { - color: #2098d1 !important; - transition: all 0.3s ease-out; - border-bottom: 2px solid #2098d1 !important; - background: rgb(2, 0, 36); - background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%); + color: $accent-color !important; + border-bottom: 2px solid $accent-color !important; + background: rgba($accent-color, 0.1); + @include transition(); } .top-navbar { @@ -13,18 +12,25 @@ width: 100%; height: 50px; z-index: 99999; - transition: all 0.4s ease-out; margin: 0px; padding-top: 0.4rem; + color: $heading-color; text-align: center; - - background-color: #f9fafc; - color: #1c2d41; - transition: all 0.3s ease-out; + background-color: $bg-primary; + @include transition(); .navbar-brand { - color: #1c2d41; + color: $heading-color; font-weight: 600; + img { + width: 42px; + padding: 5px; + margin-left: -10px; + } + } + + img { + display: inline-block; } .sidebar-icon { @@ -35,9 +41,9 @@ li { a { - color: #1c2d41; + color: $heading-color; font-weight: 500; - transition: all 0.3s ease-out; + @include transition(); border-bottom: 2px solid transparent; &:hover { @include nav-item-hover-effect(); @@ -50,25 +56,28 @@ } #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); + margin-top: 10px; + background-color: $muted-text-color; + height: 20px; + width: 2px; } .dropdown-menu { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; + box-shadow: $box-shadow; + border: 1px solid $border-color; max-height: 0vh; overflow: hidden; display: block; visibility: hidden; - transition: all 0.3s ease-out; + @include transition(); &.show { max-height: 100vh; visibility: visible; - transition: all 0.3s ease-in; + @include transition(); a { - color: #1c2d41 !important; + color: $heading-color !important; &:hover { @include nav-item-hover-effect(); @@ -81,22 +90,22 @@ margin-top: -5px; &.show, &.collapsing { - background-color: #f9fafc; + background-color: $bg-primary; padding-left: 1rem; li { a { - color: #1c2d41; + color: $heading-color; font-weight: 500; - transition: all 0.3s ease-out; + @include transition(); } } .navbar-nav { .active { - color: #2098d1; + color: $accent-color; } a:hover { - color: #2098d1; + color: $accent-color; } } } @@ -105,32 +114,19 @@ &.transparent-navbar { background-color: transparent; .navbar-brand { - color: #c0ccda; + color: $inverse-text-color; font-weight: 600; } li { a { - color: #c0ccda; + color: $inverse-text-color; } } .feather-menu { - stroke: #8392a5; + stroke: $inverse-text-color; } } - #top-navbar-divider { - margin-top: 10px; - background: rgba(192, 204, 218, 0.8); - height: 20px; - width: 2px; - } - - .navbar-brand img { - width: 42px; - padding: 5px; - margin-left: -10px; - } - @include media('<=large') { height: -moz-fit-content; height: fit-content; @@ -144,39 +140,31 @@ &.transparent-navbar { .navbar-nav .active, li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; + color: $accent-color; + @include transition(); } } - &.final-navbar { - .navbar-nav .active, - li a:hover { - color: #2098d1; - transition: none; - - border-bottom: none !important; - background: transparent; - } - li a { - border-bottom: none; - } - } - - .dropdown-divider { - border-top: 1px solid #c0ccda; - } #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); height: auto; width: auto; margin-right: 15px; + border-top: 1px solid #c0ccda; } + .dropdown-menu { text-align: center; - margin-bottom: 0.5rem; margin-right: 1rem; - transition: all 0.3s ease-out; + @include transition(); + } + + .languageSelector { + position: fixed; + right: 0.5rem; + bottom: 1rem; + z-index: 10000000; + background-color: $bg-primary; + box-shadow: $box-shadow; } } @@ -192,5 +180,5 @@ .feather-menu { width: 1.5rem; height: 1.5rem; - stroke: #3c4858; + stroke: $text-color; } diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss index 82e9fb1..125c52b 100644 --- a/assets/styles/navigators/sidebar.scss +++ b/assets/styles/navigators/sidebar.scss @@ -2,22 +2,21 @@ order: 1; flex: 20%; max-width: 20%; - /* background-color: lightsalmon; */ - transition: all ease-out 0.5s; + @include transition(); .sidebar-holder { top: 2.5rem; position: sticky; - background-color: #f9fafc; + background-color: $bg-primary; height: 100vh; overflow: auto; - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - transition: all ease-out 0.3s; + box-shadow: $box-shadow; + @include transition(); .sidebar { - background: #f9fafc; + background: $bg-primary; height: 100vh; - transition: all ease-out 0.3s; + @include transition(); #search-box { margin-left: 5%; @@ -28,12 +27,12 @@ margin-top: 30px; margin-bottom: 10px; border-radius: 5px; - background-color: #e5e9f2; - transition: all 0.3s ease-out; - border: 1px solid #c0ccda; + background-color: $bg-secondary; + @include transition(); + border: 1px solid $border-color; &:focus { - border: 1pt solid #248aaa; + border: 1pt solid $accent-color; outline: none; } } @@ -57,11 +56,11 @@ margin: 0; padding: 0 1em; line-height: 2em; - color: #3c4858; + color: $heading-color; position: relative; i { - color: #3c4858; + color: $heading-color; font-size: 12px; margin-right: 5px; } @@ -81,7 +80,7 @@ top: 2.5rem; left: 1.5rem; bottom: 0.9rem; - border-left: 1px solid; + border-left: 1px solid $text-color; } li { &:before { @@ -89,14 +88,14 @@ display: block; width: 18px; height: 0; - border-top: 1px solid; + border-top: 1px solid $text-color; margin-top: -1px; position: absolute; top: 18px; left: -2px; } &:last-child:before { - background: #f9fafc; + background: $bg-primary; height: auto; top: 1.1rem; bottom: 0; @@ -154,7 +153,7 @@ flex: 0%; max-width: 0%; min-height: 100vh; - transition: all ease-out 0.3s; + @include transition(); .sidebar-holder { position: sticky; @@ -168,7 +167,7 @@ flex: 30%; max-width: 30%; margin-right: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); } } @@ -176,7 +175,7 @@ flex: 0%; max-width: 0%; min-height: 100vh; - transition: all ease-out 0.3s; + @include transition(); .sidebar-holder { position: sticky; @@ -188,7 +187,7 @@ flex: 40%; max-width: 40%; margin-right: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); } } @@ -197,7 +196,7 @@ min-height: 0; max-height: 0; max-width: 100%; - transition: all ease-out 0.5s; + @include transition(); .sidebar-holder { max-height: 0; @@ -205,7 +204,7 @@ height: fit-content; overflow: hidden; max-width: 100%; - transition: all ease-out 0.5s; + @include transition(); .sidebar { position: relative; @@ -216,12 +215,12 @@ width: 100vw; min-height: 0; overflow: hidden; - transition: all ease-out 0.5s; + @include transition(); .sidebar-tree { margin-left: 0rem; max-height: 0; - transition: all 0.5s ease-out; + @include transition(); } } } @@ -234,15 +233,15 @@ flex: none; max-height: 300vh; max-width: 100%; - transition: all ease-out 0.5s; + @include transition(); .sidebar-holder { max-height: 200vh; - transition: all ease-out 0.5s; + @include transition(); .sidebar-tree { max-height: 200vh; - transition: all 0.5s ease-out; + @include transition(); } } } diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss index 201e500..1ef7eee 100644 --- a/assets/styles/sections/about.scss +++ b/assets/styles/sections/about.scss @@ -1,3 +1,52 @@ +@use 'sass:map'; + +$progress-bar-colors: ( + 'blue': #048dff, + 'yellow': #eebb4d, + 'pink': #ed63d2, + 'green': #2dca73, + 'sky': #00c9e3, + 'orange': #ff7c7c, +); + +@mixin circular-progress-bar-color() { + @each $color, $value in $progress-bar-colors { + &.#{$color} { + .circular-progress-bar { + border-color: $value; + } + } + } +} + +@mixin circular-progress-animation-breakpoints() { + $progress: 50; + $duration: 0; + + @for $i from 1 through 10 { + .circular-progress-percentage-#{$progress} { + animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s; + } + $progress: $progress + 5; + $duration: $duration + 0.18; + } +} + +@mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) { + @for $i from 1 through $keyframes { + @keyframes circular-loading-#{$progress} { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(#{$degree}deg); + } + } + $progress: $progress + 5; + $degree: $degree + 18; + } +} + .about-section { .social-link { list-style: none; @@ -5,12 +54,12 @@ a { font-size: 1.5rem; - color: #3c4858; + color: $text-color; padding: 0.5rem; &:hover { - color: #248aaa; - transition: all 0.3s ease-in; + color: $accent-color; + @include transition(); } } } @@ -29,7 +78,7 @@ width: 100%; height: 100%; border-radius: 50%; - border: 12px solid #f9fafc; + border: 12px solid $bg-primary; position: absolute; top: 0; left: 0; @@ -42,9 +91,7 @@ top: 0; z-index: 1; } - .circular-progress-left { - left: 0; - } + .circular-progress-bar { width: 100%; height: 100%; @@ -54,32 +101,38 @@ position: absolute; top: 0; } - .circular-progress-left .circular-progress-bar { - left: 100%; - border-top-right-radius: 80px; - border-bottom-right-radius: 80px; - border-left: 0; - transform-origin: center left; + + .circular-progress-left { + left: 0; + + .circular-progress-bar { + left: 100%; + border-top-right-radius: 80px; + border-bottom-right-radius: 80px; + border-left: 0; + transform-origin: center left; + } } .circular-progress-right { right: 0; - } - .circular-progress-right .circular-progress-bar { - left: -100%; - border-top-left-radius: 80px; - border-bottom-left-radius: 80px; - border-right: 0; - transform-origin: center right; - animation: circular-loading-1 1.8s linear forwards; + + .circular-progress-bar { + left: -100%; + border-top-left-radius: 80px; + border-bottom-left-radius: 80px; + border-right: 0; + transform-origin: center right; + animation: circular-loading-1 1.8s linear forwards; + } } .circular-progress-value { width: 90%; height: 90%; padding: 1rem; border-radius: 50%; - background: #3c4858; + background: $text-color; font-size: 1rem; - color: #f9fafc; + color: $bg-primary; line-height: initial; text-align: center; position: absolute; @@ -89,211 +142,10 @@ justify-content: center; align-items: center; } - &.blue .circular-progress-bar { - border-color: #048dff; - } - &.yellow .circular-progress-bar { - border-color: #eebb4d; - } - &.pink .circular-progress-bar { - border-color: #ed63d2; - } - &.green .circular-progress-bar { - border-color: #2dca73; - } - &.sky .circular-progress-bar { - border-color: #00c9e3; - } - &.orange .circular-progress-bar { - border-color: #ff7c7c; - } - .circular-progress-percentage-50 { - animation: circular-loading-50 0s linear forwards 1.8s; - } - - .circular-progress-percentage-55 { - animation: circular-loading-55 0.18s linear forwards 1.8s; - } - - .circular-progress-percentage-60 { - animation: circular-loading-60 0.36s linear forwards 1.8s; - } - - .circular-progress-percentage-65 { - animation: circular-loading-65 0.54s linear forwards 1.8s; - } - - .circular-progress-percentage-70 { - animation: circular-loading-70 0.72s linear forwards 1.8s; - } - - .circular-progress-percentage-75 { - animation: circular-loading-75 0.9s linear forwards 1.8s; - } - - .circular-progress-percentage-80 { - animation: circular-loading-80 1.08s linear forwards 1.8s; - } - - .circular-progress-percentage-85 { - animation: circular-loading-85 1.26s linear forwards 1.8s; - } - - .circular-progress-percentage-90 { - animation: circular-loading-90 1.44s linear forwards 1.8s; - } - - .circular-progress-percentage-95 { - animation: circular-loading-95 1.62s linear forwards 1.8s; - } - - .circular-progress-percentage-100 { - animation: circular-loading-100 1.8s linear forwards 1.8s; - } - - @keyframes circular-loading-50 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(0deg); - } - } - - @keyframes circular-loading-55 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(18deg); - } - } - - @keyframes circular-loading-60 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(36deg); - } - } - - @keyframes circular-loading-65 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(54deg); - } - } - - @keyframes circular-loading-70 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(72deg); - } - } - - @keyframes circular-loading-75 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(90deg); - } - } - - @keyframes circular-loading-80 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(108deg); - } - } - - @keyframes circular-loading-85 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(126deg); - } - } - - @keyframes circular-loading-90 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(144deg); - } - } - - @keyframes circular-loading-95 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(162deg); - } - } - - @keyframes circular-loading-100 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(180deg); - } - } - - @keyframes circular-loading-1 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(180deg); - } - } - - @keyframes circular-loading-2 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(144deg); - } - } - - @keyframes circular-loading-3 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(90deg); - } - } - - @keyframes circular-loading-4 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(36deg); - } - } - - @keyframes circular-loading-5 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(126deg); - } - } + @include circular-progress-bar-color(); + @include circular-progress-animation-breakpoints(); + @include circular-progress-animation-keyframes($progress: 50, $degree: 0, $keyframes: 10); + @include circular-progress-animation-keyframes($progress: 1, $degree: 180, $keyframes: 5); } @include media('<=large') { diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss index c4e1ebb..00bebac 100644 --- a/assets/styles/sections/accomplishments.scss +++ b/assets/styles/sections/accomplishments.scss @@ -2,13 +2,13 @@ @include section-title-adjustment(); .card { - background: #fff; - border-top: 2px solid #248aaa; + background: $bg-card; + border-top: 2px solid $accent-color; height: 100%; &:hover, &:focus { - border-top: 2px solid #248aaa; + border-top: 2px solid $hover-over-accent-color; } .card-header { @@ -16,7 +16,7 @@ border: none; .sub-title { - color: #8392a5; + color: $muted-text-color; margin-top: 0.4rem; } } @@ -28,7 +28,7 @@ } .card-footer { - background: #fff; + background: $bg-card; border: none; padding: 0; padding-left: 0.7rem; diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss index e389c3c..e0d5482 100644 --- a/assets/styles/sections/achievements.scss +++ b/assets/styles/sections/achievements.scss @@ -12,17 +12,17 @@ margin-left: 7px; margin-right: 7px; z-index: 1; - background-color: #e5e9f2; + background-color: $bg-secondary; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; overflow: hidden; - transition: all 0.3s ease-out; + @include transition(); .title { - color: #e5e9f2; - background-color: rgba(0, 0, 0, 0.7); + color: $inverse-text-color; + background-color: rgba($bg-primary-inverse, 0.7); opacity: 0; padding: 5px; position: absolute; @@ -35,19 +35,19 @@ &:hover { cursor: pointer; transform: scale(1.1); - transition: all 0.3s ease-out; + @include transition(); z-index: 20000; .svg-inline--fa { opacity: 1; font-size: 1rem; - transition: all 0.3s ease-out; + @include transition(); } .title { opacity: 1; bottom: 0px; - transition: bottom 0.3s ease-out; + @include transition(); } } } @@ -85,28 +85,28 @@ } .svg-inline--fa { - color: #8392a5; - background-color: rgba(0, 0, 0, 0.7); + color: $muted-text-color; + background-color: rgba($bg-primary-inverse, 0.7); padding: 10px; font-size: 0rem; opacity: 0; } .caption { - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba($bg-primary-inverse, 0.7); bottom: 1rem; left: 1rem; - color: #e5e9f2; + color: $inverse-text-color; padding: 15px; position: absolute; - transition: all 0.3s ease-out; + @include transition(); h4 { - color: #e5e9f2; + color: $inverse-text-color; } p { font-size: 16px; font-weight: 300; - color: #e5e9f2; + color: $inverse-text-color; } } diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss index 1cb363a..7d065d1 100644 --- a/assets/styles/sections/education.scss +++ b/assets/styles/sections/education.scss @@ -4,7 +4,7 @@ .card { &:hover, &:focus { - border-left: 2px solid #248aaa; + border-left: 2px solid $accent-color; } } @@ -23,19 +23,19 @@ position: absolute; left: 1rem; top: 0; - background-color: #248aaa; + background-color: $accent-color; height: 100%; width: 2px; } .icon-holder { - background-color: #248aaa; + background-color: $accent-color; border-radius: 50%; height: 2rem; width: 2rem; padding: 0.2rem; text-align: center; - color: #e5e9f2; + color: $text-over-accent-color; position: relative; } } @@ -71,9 +71,8 @@ div { height: 2px; - /* width: 100%; */ margin-right: -1px; - background-color: #248aaa; + background-color: $accent-color; } } @@ -82,10 +81,10 @@ padding: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; - border-left: 2px solid #248aaa; - border-top: 1px solid #c0ccda; - border-bottom: 1px solid #c0ccda; - border-right: 1px solid #c0ccda; + border-left: 2px solid $accent-color; + border-top: 1px solid $bg-primary; + border-bottom: 1px solid $bg-primary; + border-right: 1px solid $bg-primary; border-radius: 5px; h5 { @@ -93,7 +92,7 @@ } .timeframe { - color: #8392a5; + color: $muted-text-color; text-align: right; } @@ -101,7 +100,7 @@ table { margin-left: 1rem; width: 100%; - transition: all 0.3s ease-out; + @include transition(); background: none; border: none; @@ -110,7 +109,7 @@ th { background: none; border: none; - color: #212529; + color: $text-color; } tr { @@ -123,7 +122,7 @@ } .hidden-course { display: none; - transition: all 1s ease-out; + @include transition(); } ul { margin-bottom: 0; @@ -168,5 +167,5 @@ } .education-alt .degree-info { - border-right: 2px solid #248aaa; + border-right: 2px solid $accent-color; } diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss index df639b4..5578dd6 100644 --- a/assets/styles/sections/experiences.scss +++ b/assets/styles/sections/experiences.scss @@ -7,7 +7,7 @@ padding-left: 1rem; & > li { margin-left: 0; - color: #3c4858; + color: $text-color; } } @@ -18,8 +18,8 @@ .circle { padding: 13px 20px; border-radius: 50%; - background-color: #248aaa; - color: #f9fafc; + background-color: $accent-color; + color: $text-over-accent-color; max-height: 50px; z-index: 2; } @@ -33,7 +33,7 @@ &::after { content: ''; position: absolute; - border-left: 3px solid #248aaa; + border-left: 3px solid $accent-color; z-index: 1; height: 100%; left: 50%; @@ -48,7 +48,7 @@ height: 40px; } hr { - border-top: 3px solid #248aaa; + border-top: 3px solid $accent-color; margin: 0; top: 17px; position: relative; @@ -58,7 +58,7 @@ overflow: hidden; } .corner { - border: 3px solid #248aaa; + border: 3px solid $accent-color; width: 100%; position: relative; border-radius: 15px; diff --git a/assets/styles/sections/footer.scss b/assets/styles/sections/footer.scss index 52c643d..bc2e10b 100644 --- a/assets/styles/sections/footer.scss +++ b/assets/styles/sections/footer.scss @@ -1,19 +1,20 @@ .footer { - color: #8392a5 !important; - background-color: #1c2d41; + color: $muted-text-color !important; + background-color: $bg-primary-inverse; position: relative; z-index: 9999; h5 { - color: #c0ccda; + color: $inverse-text-color; } a { - color: #8392a5; - transition: all 0.3s ease-out; + color: $muted-text-color; + @include transition(); &:hover { margin-left: 5px; - transition: all 0.3s ease-out; + text-decoration: $muted-text-color underline; + @include transition(); } } @@ -27,37 +28,42 @@ } hr { - background-color: #8392a5; + background-color: $muted-text-color; } p:first-child { - color: #c0ccda; + color: $inverse-text-color; } input { - background-color: #c0ccda; + background-color: $inverse-text-color; &:focus { - background-color: #e5e9f2; + background-color: $bg-secondary; } } #disclaimer { - color: #8392a5 !important; + color: $muted-text-color !important; text-align: justify; & > strong { - color: #c0ccda !important; + color: $inverse-text-color !important; } } #theme { - color: #c0ccda; + color: $inverse-text-color; img { width: 32px; + display: inline-block; } } - - #hugo:hover { - margin-right: 5px; - transition: all 0.3s ease-out; + #hugo { + &:hover { + margin-right: 5px; + @include transition(); + } + img { + display: inline-block; + } } } diff --git a/assets/styles/sections/home.scss b/assets/styles/sections/home.scss index b5eeb0a..58f8db8 100644 --- a/assets/styles/sections/home.scss +++ b/assets/styles/sections/home.scss @@ -2,7 +2,7 @@ height: 100vh; padding: 0; margin: 0; - color: #f9fafc; + color: $text-over-accent-color; overflow: hidden; .background { @@ -16,12 +16,12 @@ filter: blur(3px); background-size: cover; } - + .arrow-center { display: flex; justify-content: center; } - + /* Resolves https://github.com/hugo-toha/toha/issues/70 @@ -34,45 +34,46 @@ background-attachment: scroll; } } - + .content { position: relative; top: -65%; height: 60%; } - + img { width: 148px; height: 148px; - background-color: #e7e7ef; + background-color: $bg-secondary; padding: 5px; margin-bottom: 10px; } - - .greeting, .greeting-subtitle { - color: #f9fafc; + + .greeting, + .greeting-subtitle { + color: $text-over-accent-color; } - + .typing-carousel { font-size: 14pt; - color: #f0f0f0; + color: $text-over-accent-color; } - + #typing-carousel-data { display: none; } - + .arrow { position: absolute; - color: #f9fafc; + color: $text-over-accent-color; font-size: 1.5rem; bottom: 0; } - + .bounce { animation: bounce 2s infinite; } - + @keyframes bounce { 0%, 20%, @@ -88,64 +89,22 @@ transform: translateY(-15px); } } - - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { - } - - /* Extra large devices (large desktops, 1200px and up) */ - - @media (max-width: 1400px) { - } - - @media (max-width: 1200px) { - } - - /* IPad Pro */ - @media (max-width: 1024px) { - } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { - } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + + @include media('<=small') { .content { position: relative; top: -75%; height: 65%; } - + img { width: 140px; max-width: 50%; height: auto; } - + .greeting { font-size: 24pt; } } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } -} \ No newline at end of file +} diff --git a/assets/styles/sections/projects.scss b/assets/styles/sections/projects.scss index 2724bac..5e53492 100644 --- a/assets/styles/sections/projects.scss +++ b/assets/styles/sections/projects.scss @@ -1,7 +1,7 @@ .projects-section { .card { .card-header { - background-color: #f9fafc; + background-color: $bg-card; padding: 0.7rem; padding-bottom: 0rem; text-decoration: none; @@ -10,7 +10,7 @@ margin-right: 0.5rem; } .sub-title { - color: #8392a5; + color: $muted-text-color; margin-top: 0.4rem; span { diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss index ba2ee1d..94fc385 100644 --- a/assets/styles/sections/publications.scss +++ b/assets/styles/sections/publications.scss @@ -2,12 +2,12 @@ @include section-title-adjustment(); .card { - background: #fff; - border-top: 2px solid #248aaa; + background: $bg-card; + border-top: 2px solid $accent-color; &:hover, &:focus { - border-top: 2px solid #248aaa; + border-top: 2px solid $accent-color; } .card-header { @@ -17,7 +17,7 @@ flex-direction: column; .sub-title { - color: #8392a5; + color: $muted-text-color; margin-top: 0.4rem; span:nth-child(2) { @@ -33,7 +33,7 @@ } .card-footer { - background: #fff; + background: $bg-card; border: none; padding: 0; padding-left: 1rem; diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss index dde264a..d181948 100644 --- a/assets/styles/sections/recent-posts.scss +++ b/assets/styles/sections/recent-posts.scss @@ -16,7 +16,7 @@ width: 98%; } } - @include media('>=medium','=medium', ' span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; - } -} - -@mixin brand-background() { - @each $brand, $color in $brand-colors { - .bg-#{$brand} { - background-color: $color; - } - } -} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 58d631b..1b6b397 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -15,7 +15,7 @@ -
+
{{ block "navbar" . }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 761f668..6192952 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -39,7 +39,7 @@
Author Image
{{ partial "helpers/get-author-name.html" . }}
-

{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}

+

{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}

diff --git a/layouts/index.html b/layouts/index.html index 77b7e19..91d2690 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -33,7 +33,7 @@ {{ end }} {{ if $sections }} - {{ $background:= "bg-white"}} + {{ $background:= "bg-primary"}} {{ range sort $sections "section.weight" }} {{ if .section.enable }}
@@ -44,10 +44,10 @@ {{ end }}
- {{ if eq $background "bg-white" }} - {{ $background = "bg-dimmed" }} + {{ if eq $background "bg-primary" }} + {{ $background = "bg-secondary" }} {{ else }} - {{ $background = "bg-white" }} + {{ $background = "bg-primary" }} {{end}} {{ end }} {{ end }} diff --git a/layouts/partials/navigators/lang-selector.html b/layouts/partials/navigators/lang-selector.html index b5b16bf..9232e44 100644 --- a/layouts/partials/navigators/lang-selector.html +++ b/layouts/partials/navigators/lang-selector.html @@ -1,3 +1,7 @@ +{{ $pageURL:= .RelPermalink }} +{{ if site.IsMultiLingual }} + {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }} +{{ end }}
  • {{ range site.Home.AllTranslations }} - + {{ if ne site.Params.features.flags.enable false }} {{ $countryCode := partial "helpers/country-code.html" . }} diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html index 9071004..57f3a8e 100644 --- a/layouts/partials/navigators/navbar.html +++ b/layouts/partials/navigators/navbar.html @@ -112,7 +112,7 @@ {{- end }} {{ $shouldAddSeparator:= partial "helpers/add-navbar-separator.html" . }} {{ if $shouldAddSeparator }} - +
    {{ end }} {{ if $blogEnabled }}
  • diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html index eaaca53..b6996df 100644 --- a/layouts/partials/sections/education-alt.html +++ b/layouts/partials/sections/education-alt.html @@ -43,11 +43,11 @@
    • {{ .name }}
    {{ if .grade }} -
    {{ .grade.scale }}: {{ .grade.achieved }} {{ i18n "out_of" }} {{ .grade.outOf }}
    +
    {{ .grade.scale }}: {{ .grade.achieved }} {{ i18n "out_of" }} {{ .grade.outOf }}
    {{ end }} {{ if .publications }}
    -
    {{i18n "publications"}}
    +
    {{i18n "publications"}}:
      {{ range .publications }} {{ if .url }} @@ -62,7 +62,7 @@ {{ if .takenCourses }} {{ $collapseAfter := .takenCourses.collapseAfter | default 2 }}
      -
      {{ i18n "taken_courses" }}
      +
      {{ i18n "taken_courses" }}:
      {{ if .takenCourses.showGrades }} {{ $hideScale := .takenCourses.hideScale }} @@ -98,7 +98,7 @@ {{ end }} {{ if .extracurricularActivities }}
      -
      {{ i18n "extracurricular_activities" }}
      +
      {{ i18n "extracurricular_activities" }}:
        {{ range .extracurricularActivities }}
      • {{ . | markdownify }}
        • diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html index 22f4048..6a7fb74 100644 --- a/layouts/partials/sections/education.html +++ b/layouts/partials/sections/education.html @@ -43,11 +43,11 @@
      {{ .name }}
      {{ if .grade }} -
      {{ .grade.scale }}: {{ .grade.achieved }} {{ i18n "out_of"}} {{ .grade.outOf }}
      +
      {{ .grade.scale }}: {{ .grade.achieved }} {{ i18n "out_of"}} {{ .grade.outOf }}
      {{ end }} {{ if .publications }}
      -
      {{ i18n "publications"}}
      +
      {{ i18n "publications"}}:
        {{ range .publications }} {{ if .url }} @@ -62,7 +62,7 @@ {{ if .takenCourses }} {{ $collapseAfter := .takenCourses.collapseAfter | default 2 }}
        -
        {{ i18n "taken_courses"}}
        +
        {{ i18n "taken_courses"}}:
        {{ if .takenCourses.showGrades }} {{ $hideScale := .takenCourses.hideScale }}
      @@ -98,7 +98,7 @@ {{ end }} {{ if .extracurricularActivities }}
      -
      {{ i18n "extracurricular_activities"}}
      +
      {{ i18n "extracurricular_activities"}}:
        {{ range .extracurricularActivities }}
      • {{ . | markdownify }}
        • diff --git a/layouts/partials/sections/experiences/single-position.html b/layouts/partials/sections/experiences/single-position.html index b49fced..4b0e500 100644 --- a/layouts/partials/sections/experiences/single-position.html +++ b/layouts/partials/sections/experiences/single-position.html @@ -13,7 +13,7 @@

        {{ .company.overview | markdownify }}

        {{ if $position.responsibilities }} -
        {{ i18n "responsibilities" }}
        +
        {{ i18n "responsibilities" }}
          {{ range $position.responsibilities }}
        • {{ . | markdownify }}