From 5dc0681fe7a92008d9efb0bd69a2362769dd78e6 Mon Sep 17 00:00:00 2001 From: Abinash Bhattarai Date: Fri, 18 Apr 2025 13:51:13 +0545 Subject: [PATCH] Updated the codebase for UI updates --- .ruby-version | 1 + Gemfile.lock | 11 ++- _config.yml | 2 +- _sass/_footer.scss | 6 -- _sass/_showcase.scss | 69 ------------------ _sass/_variable.scss | 12 ---- _sass/main.scss | 87 ----------------------- assets/css/module/_base.sass | 65 +++++++++++++++++ {_sass => assets/css/module}/_button.sass | 3 +- assets/css/module/_misc.sass | 54 ++++++++++++++ assets/css/module/_showcase.sass | 54 ++++++++++++++ assets/css/module/_variable.sass | 12 ++++ assets/css/module/module.sass | 9 +++ assets/css/style.sass | 4 ++ assets/css/style.scss | 68 ------------------ 15 files changed, 211 insertions(+), 246 deletions(-) create mode 100644 .ruby-version delete mode 100644 _sass/_footer.scss delete mode 100644 _sass/_showcase.scss delete mode 100644 _sass/_variable.scss delete mode 100755 _sass/main.scss create mode 100644 assets/css/module/_base.sass rename {_sass => assets/css/module}/_button.sass (93%) create mode 100644 assets/css/module/_misc.sass create mode 100644 assets/css/module/_showcase.sass create mode 100644 assets/css/module/_variable.sass create mode 100755 assets/css/module/module.sass create mode 100755 assets/css/style.sass delete mode 100755 assets/css/style.scss diff --git a/.ruby-version b/.ruby-version new file mode 100644 index 0000000..94ff29c --- /dev/null +++ b/.ruby-version @@ -0,0 +1 @@ +3.1.1 diff --git a/Gemfile.lock b/Gemfile.lock index d37f312..f30a4f1 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -14,10 +14,14 @@ GEM http_parser.rb (~> 0) eventmachine (1.2.7) ffi (1.17.2-arm64-darwin) + ffi (1.17.2-x86_64-darwin) forwardable-extended (2.6.0) google-protobuf (4.30.2-arm64-darwin) bigdecimal rake (>= 13) + google-protobuf (4.30.2-x86_64-darwin) + bigdecimal + rake (>= 13) http_parser.rb (0.8.0) i18n (1.14.7) concurrent-ruby (~> 1.0) @@ -90,6 +94,8 @@ GEM safe_yaml (1.0.5) sass-embedded (1.86.3-arm64-darwin) google-protobuf (~> 4.30) + sass-embedded (1.86.3-x86_64-darwin) + google-protobuf (~> 4.30) sinatra (4.1.1) logger (>= 1.6.0) mustermann (~> 3.0) @@ -109,14 +115,15 @@ GEM tilt (2.6.0) tzinfo (1.2.11) thread_safe (~> 0.1) - tzinfo-data (1.2024.1) + tzinfo-data (1.2025.2) tzinfo (>= 1.0.0) unicode-display_width (2.6.0) - wdm (0.1.1) + wdm (0.2.0) webrick (1.9.1) PLATFORMS arm64-darwin-23 + x86_64-darwin-24 DEPENDENCIES cowsay (~> 0.3.0) diff --git a/_config.yml b/_config.yml index 6afc9cc..a2fe6c7 100755 --- a/_config.yml +++ b/_config.yml @@ -34,7 +34,7 @@ spotify_username: / # SASS sass: - sass_dir: _sass + sass_dir: ./_sass style: compressed # Build settings diff --git a/_sass/_footer.scss b/_sass/_footer.scss deleted file mode 100644 index 40816f1..0000000 --- a/_sass/_footer.scss +++ /dev/null @@ -1,6 +0,0 @@ -.footer { - background-color: $brand-color-3; - color: $brand-color-5; - padding: 1rem 0; - margin-top: 2rem; -} \ No newline at end of file diff --git a/_sass/_showcase.scss b/_sass/_showcase.scss deleted file mode 100644 index 5516a8d..0000000 --- a/_sass/_showcase.scss +++ /dev/null @@ -1,69 +0,0 @@ -.project{ - &__showcase{ - margin-top: -120px; - border-radius: 8px; - box-shadow: 0px 4px 36px rgba(0, 0, 0, 0.07); - width: 100%; - padding: $padding-30; - @media (min-width: 992px) { - max-width: 91.66666667%; - } - - } - &__industry { - color: $brand-color; - font-size: 12px; - margin-bottom: 4px; - } - &__name{ - color: $brand-color-3; - } - &__image{ - box-shadow: 0px -3px 28px rgba(121, 28, 18, 0.1); - } - &__description{ - font-size: 14px; - color: #615455; - } - &__type{ - font-weight: 500; - font-size: 13px; - } - - &__label{ - color: lighten(#615455, 15%); - font-size: 14px; - } - &__data{ - color: $brand-color-3; - font-weight: 500; - font-size: 14px; - } -} -.bwr-masonry{ - .showcase{ - &__item{ - background-color: transparent; - &--inner{ - height: 100%; - padding-top: 56.5%; - width: 100%; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - } - - } -} - -.btn{ - &__submit{ - &--project{ - position: fixed; - top: 1.5rem; - right: 1.5rem; - z-index: 9; - } - } -} diff --git a/_sass/_variable.scss b/_sass/_variable.scss deleted file mode 100644 index d8126a0..0000000 --- a/_sass/_variable.scss +++ /dev/null @@ -1,12 +0,0 @@ -//brand Color -$brand-color: #D80021; -$brand-color-2: #8B0015; -$brand-color-3: #36000E; -$brand-color-4: #B27582; -$brand-color-5: #FFF3F4; - - -$padding-10: 10px; -$padding-20: 20px; -$padding-30: 30px; -$padding-40: 40px; \ No newline at end of file diff --git a/_sass/main.scss b/_sass/main.scss deleted file mode 100755 index 7e223b6..0000000 --- a/_sass/main.scss +++ /dev/null @@ -1,87 +0,0 @@ -@charset "utf-8"; -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); -@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css'); - -@import "variable.scss"; -@import "footer.scss"; -@import "showcase.scss"; -@import "button.sass"; - -html, -body { - font-family: 'Poppins', sans-serif; - scroll-behavior: smooth !important; - transition: all 0.25s ease; - -webkit-font-smoothing: antialiased; -} - -main{ - min-height: calc(100vh - 330px); -} -a { - text-decoration: none; -} -.project main{ - min-height: calc(100vh - 220px); -} - -/* width */ -::-webkit-scrollbar { - width: 0.5vmax !important; -} - -/* Track */ -::-webkit-scrollbar-track { - background: white !important; -} - -/* Handle */ -::-webkit-scrollbar-thumb { - background: #363636 !important; -} - -/* Handle on hover */ -::-webkit-scrollbar-thumb:hover { - background: black !important; -} - -::placeholder { - font-family: 'Poppins', sans-serif; -} - -#navbar { - .navbar-burger { - span:nth-child(2) { - left: calc(50%); - width: 8px; - } - } -} - -.is-active { - font-weight: bold; -} - -.columns { - .button { - margin: 0.5rem !important; - } -} - -hr { - margin: 1rem auto; - height: 1px; -} - -.column { - margin: auto 0.5rem; - padding: 0.5rem; -} - -.searchResult { - a { - .title { - text-decoration: underline; - } - } -} \ No newline at end of file diff --git a/assets/css/module/_base.sass b/assets/css/module/_base.sass new file mode 100644 index 0000000..7d90874 --- /dev/null +++ b/assets/css/module/_base.sass @@ -0,0 +1,65 @@ +@use 'variable' as * +html, +body + font-family: 'Poppins', sans-serif + scroll-behavior: smooth !important + transition: all 0.25s ease + -webkit-font-smoothing: antialiased + +main + min-height: calc(100vh - 330px) +a + text-decoration: none +.project main + min-height: calc(100vh - 220px) + +/* width */ +::-webkit-scrollbar + width: 0.5vmax !important + +/* Track */ +::-webkit-scrollbar-track + background: white !important + +/* Handle */ +::-webkit-scrollbar-thumb + background: #363636 !important + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover + background: black !important + +::placeholder + font-family: 'Poppins', sans-serif + +#navbar + .navbar-burger + span:nth-child(2) + left: calc(50%) + width: 8px + +.is-active + font-weight: bold + +.columns + .button + margin: 0.5rem !important + +hr + margin: 1rem auto + height: 1px + +.column + margin: auto 0.5rem + padding: 0.5rem + +.searchResult + a + .title + text-decoration: underline + +.footer + background-color: $brand-color-3 + color: $brand-color-5 + padding: 1rem 0 + margin-top: 2rem \ No newline at end of file diff --git a/_sass/_button.sass b/assets/css/module/_button.sass similarity index 93% rename from _sass/_button.sass rename to assets/css/module/_button.sass index 0f30120..09d6b02 100644 --- a/_sass/_button.sass +++ b/assets/css/module/_button.sass @@ -1,3 +1,4 @@ +@use 'variable' as * .btn &-primary background-color: $brand-color-3 @@ -22,7 +23,7 @@ &:active background-color: $brand-color-3 color: $brand-color-5 - border-color: $brand-color-3 + border-color: $brand-color-5 &-sm border-radius: 50px background-color: $brand-color-2 diff --git a/assets/css/module/_misc.sass b/assets/css/module/_misc.sass new file mode 100644 index 0000000..314e9f9 --- /dev/null +++ b/assets/css/module/_misc.sass @@ -0,0 +1,54 @@ +@use 'variable' as * +body + background-color: #FEF5F6 + +#navbar + opacity: 0.95 + +.is-active + font-weight: 600 +.header + background-color: #36000E + padding: 20px 0 150px 0 + img + height: 86px + + &__text + color: #FFF3F4 + font-weight: 24px + margin-top: 16px + +:root + counter-reset: masonry +.masonry + display: grid + grid-gap: 30px + grid-template-columns: repeat(auto-fill, minmax(400px,1fr)) + grid-auto-rows: min-content + margin-top: -120px + +.masonry-item + border-radius: 8px + background-color: #eee + border-radius: 5px + overflow: hidden + box-shadow: 0px -3px 28px rgba(121, 28, 18, 0.1) + +.masonry-item, +.masonry-item img + position: relative + width: 100% + max-width: 100% + +.masonry-item:hover:after + font-size: 30px + background-color: rgba(0, 0, 0, .75) + +.masonry-item-name + border-top: 1px solid $brand-color-4 + color: $brand-color-3 + position: absolute + bottom: 0 + width: 100% + border-bottom-left-radius: 5px + border-bottom-right-radius: 5px \ No newline at end of file diff --git a/assets/css/module/_showcase.sass b/assets/css/module/_showcase.sass new file mode 100644 index 0000000..cd68fe6 --- /dev/null +++ b/assets/css/module/_showcase.sass @@ -0,0 +1,54 @@ +@use "sass:color" +@use 'variable' as * +.project + &__showcase + margin-top: -120px + border-radius: 8px + box-shadow: 0px 4px 36px rgba(0, 0, 0, 0.07) + width: 100% + padding: $padding-30 + @media (min-width: 992px) + max-width: 91.66666667% + + &__industry + color: $brand-color + font-size: 12px + margin-bottom: 4px + &__name + color: $brand-color-3 + &__image + box-shadow: 0px -3px 28px rgba(121, 28, 18, 0.1) + &__description + font-size: 14px + color: #615455 + &__type + font-weight: 500 + font-size: 13px + + &__label + color: color.adjust(#615455, $lightness: 15%) + font-size: 14px + &__data + color: $brand-color-3 + font-weight: 500 + font-size: 14px + +.bwr-masonry + .showcase + &__item + background-color: transparent + &--inner + height: 100% + padding-top: 56.5% + width: 100% + background-size: cover + background-position: center + background-repeat: no-repeat + +.btn + &__submit + &--project + position: fixed + top: 1.5rem + right: 1.5rem + z-index: 9 \ No newline at end of file diff --git a/assets/css/module/_variable.sass b/assets/css/module/_variable.sass new file mode 100644 index 0000000..d9b95c4 --- /dev/null +++ b/assets/css/module/_variable.sass @@ -0,0 +1,12 @@ +//brand Color +$brand-color: #D80021 +$brand-color-2: #8B0015 +$brand-color-3: #36000E +$brand-color-4: #B27582 +$brand-color-5: #FFF3F4 + + +$padding-10: 10px +$padding-20: 20px +$padding-30: 30px +$padding-40: 40px \ No newline at end of file diff --git a/assets/css/module/module.sass b/assets/css/module/module.sass new file mode 100755 index 0000000..2cf7829 --- /dev/null +++ b/assets/css/module/module.sass @@ -0,0 +1,9 @@ +@charset "utf-8" + +@use "base" +@use "showcase" +@use "button" +@use "misc" + +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap') +@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css') \ No newline at end of file diff --git a/assets/css/style.sass b/assets/css/style.sass new file mode 100755 index 0000000..4cfcea9 --- /dev/null +++ b/assets/css/style.sass @@ -0,0 +1,4 @@ +--- +--- + +@use "./module/module" \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss deleted file mode 100755 index 685c7d9..0000000 --- a/assets/css/style.scss +++ /dev/null @@ -1,68 +0,0 @@ ---- ---- - -@import "main.scss"; -@import "variable.scss"; -body{ - background-color: #FEF5F6; -} - -#navbar { - opacity: 0.95; -} - -.is-active { - font-weight: 600; -} -.header{ - background-color: #36000E; - padding: 20px 0 150px 0; - img { - height: 86px; - } - &__text { - color: #FFF3F4; - font-weight: 24px; - margin-top: 16px; - } -} -:root { - counter-reset: masonry; -} -.masonry { - display: grid; - grid-gap: 30px; - grid-template-columns: repeat(auto-fill, minmax(400px,1fr)); - grid-auto-rows: min-content; - margin-top: -120px; -} - -.masonry-item { - border-radius: 8px; - background-color: #eee; - border-radius: 5px; - overflow: hidden; - box-shadow: 0px -3px 28px rgba(121, 28, 18, 0.1); -} - -.masonry-item, -.masonry-item img { - position: relative; - width: 100%; - max-width: 100%; -} - -.masonry-item:hover:after { - font-size: 30px; - background-color: rgba(0, 0, 0, .75); -} - -.masonry-item-name{ - border-top: 1px solid $brand-color-4; - color: $brand-color-3; - position: absolute; - bottom: 0; - width: 100%; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; -} \ No newline at end of file