From f18ce9313f6349eb5d9f88e6fe62d123160b97c2 Mon Sep 17 00:00:00 2001 From: bhansa Date: Tue, 8 Jul 2025 00:13:22 +0530 Subject: [PATCH 1/7] feat: Introduce bento grid with quick links --- _data/bento_grid.yml | 79 ++++++++++++ _sass/_bento.scss | 277 +++++++++++++++++++++++++++++++++++++++++++ _sass/main.scss | 5 +- bento.html | 30 +++++ 4 files changed, 390 insertions(+), 1 deletion(-) create mode 100644 _data/bento_grid.yml create mode 100644 _sass/_bento.scss create mode 100644 bento.html diff --git a/_data/bento_grid.yml b/_data/bento_grid.yml new file mode 100644 index 0000000..937eb01 --- /dev/null +++ b/_data/bento_grid.yml @@ -0,0 +1,79 @@ +- title: "About HydPy" + url: "/about/" + icon: "fas fa-users" + background: "bg-secondary" + text_color: "text-white" + description: "Discover our community and mission" + button_text: "Explore" + button_class: "btn-light" + external: false + +- title: "Call for Papers" + url: "/cfp/" + icon: "fas fa-microphone" + background: "bento__bg--purple" + text_color: "" + description: "Submit your talk proposals" + button_text: "Submit" + button_class: "btn-light" + external: false + +- title: "Code of Conduct" + url: "/coc/" + icon: "fas fa-handshake" + background: "bento__bg--pink" + text_color: "" + description: "Our community guidelines" + button_text: "Read" + button_class: "btn-light" + external: false + +- title: "Venue Collab" + url: "/venue-partner.html" + icon: "fas fa-map-marker-alt" + background: "bento__bg--orange" + text_color: "" + description: "Collaborate with us for the event" + button_text: "View" + button_class: "btn-light" + external: false + +- title: "GitHub" + url: "https://github.com/hydpy" + icon: "fab fa-github" + background: "bg-dark" + text_color: "text-white" + description: "View our code repositories" + button_text: "Visit" + button_class: "btn-light" + external: true + +- title: "Twitter" + url: "https://twitter.com/hydpython" + icon: "fab fa-twitter" + background: "bg-info" + text_color: "text-white" + description: "Follow us for updates" + button_text: "Follow" + button_class: "btn-light" + external: true + +- title: "Learn Python" + url: "https://python.org" + icon: "fab fa-python" + background: "bg-warning" + text_color: "text-dark" + description: "Resources for beginners" + button_text: "Start" + button_class: "btn-dark" + external: true + +- title: "Contact Us" + url: "mailto:contact@hydpy.org" + icon: "fas fa-envelope" + background: "bento__bg--pink" + text_color: "text-white" + description: "Get in touch with the team" + button_text: "Email" + button_class: "btn-light" + external: false diff --git a/_sass/_bento.scss b/_sass/_bento.scss new file mode 100644 index 0000000..668ce8e --- /dev/null +++ b/_sass/_bento.scss @@ -0,0 +1,277 @@ +// Import color variables from main.scss +$colors: ( + primary: #3E77A3, + primary_rgb: "rgb(62, 119, 163)", + secondary: #CCAD33, + white: #FFFFFF, + black: #000000, + text_dark: #333333, + text_light: #FFFFFF +); + +$screen_widths: ( + md: 768px, + lg: 992px, +); + +// BENTO GRID STYLES +// Following BEM convention: +// Block: bento +// Elements: bento__grid, bento__item, bento__content, etc. +// Modifiers: bento__item--large, bento__item--tall, etc. + +// Main container +.bento__grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + grid-auto-rows: minmax(240px, auto); + gap: 1.5rem; + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; + + @media (min-width: map-get($screen_widths, md)) { + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(220px, auto); + } + + @media (min-width: map-get($screen_widths, lg)) { + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(200px, auto); + } +} + +// Individual card item +.bento__item { + border-radius: 16px; + padding: 1.5rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + height: 100%; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); + } + + // Modifiers for different card sizes + &--large { + @media (min-width: map-get($screen_widths, md)) { + grid-column: span 2; + grid-row: span 2; + min-height: 440px; + } + } + + &--tall { + @media (min-width: map-get($screen_widths, md)) { + grid-row: span 2; + min-height: 440px; + } + } + + &--wide { + @media (min-width: map-get($screen_widths, md)) { + grid-column: span 2; + } + } +} + +// Card content container +.bento__content { + text-align: center; + position: relative; + z-index: 2; + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + pointer-events: none; + + &__heading { + margin-bottom: 0.5rem; + font-weight: 700; + } + + &__text { + margin-bottom: 1rem; + opacity: 0.9; + font-size: 0.9rem; + } + + &__icon { + opacity: 0.8; + margin-bottom: 0.75rem; + + &--large { + font-size: 3rem; + } + + &--medium { + font-size: 2rem; + } + } + + &__btn { + border-radius: 25px; + padding: 0.5rem 1.5rem; + font-weight: 600; + text-decoration: none; + display: inline-block; + transition: all 0.3s ease; + margin-top: auto; + align-self: center; + pointer-events: none; + opacity: 0.9; + } +} + +// Event list styles +.bento__events { + text-align: left; + margin-bottom: 1rem; + max-height: 150px; + overflow-y: auto; + padding-right: 5px; + + &__item { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; + + &:last-child { + border-bottom: none; + margin-bottom: 0; + } + } + + &__date { + font-size: 0.75rem; + opacity: 0.7; + display: block; + margin-bottom: 2px; + } + + &__title { + font-size: 0.85rem; + font-weight: 500; + margin: 0; + } +} + +// Link wrapper +.bento__link { + text-decoration: none; + color: inherit; + display: block; + + &:hover, &:focus, &:active { + text-decoration: none; + color: inherit; + outline: none; + } + + &:hover .bento__item { + transform: translateY(-5px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); + } +} + +// Background variations +.bento__bg { + &--purple { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: map-get($colors, text_light); + } + + &--pink { + background: linear-gradient(135deg, #f55e98 0%, #f5576c 100%); + color: map-get($colors, text_light); + } + + &--orange { + background: linear-gradient(135deg, #fcbb76 0%, #fcb69f 100%); + color: #333; + + .bento__content__btn { + background-color: #333; + color: white; + + &:hover { + background-color: darken(#333, 10%); + } + } + } + + &--teal { + background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); + color: #333; + + .bento__content__btn { + background-color: #333; + color: white; + + &:hover { + background-color: darken(#333, 10%); + } + } + } +} + +// Responsive adjustments for bento grid +@media (max-width: 767px) { + .bento__grid { + grid-template-columns: 1fr; + gap: 1.25rem; + } + + .bento__item { + min-height: 220px; + padding: 1.25rem; + + &--large, + &--tall, + &--wide { + grid-column: span 1; + grid-row: span 1; + min-height: 250px; + } + } + + .bento__content { + &__icon { + &--large { + font-size: 2rem; + margin-bottom: 0.5rem; + } + + &--medium { + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + } + + &__heading { + font-size: 1.35rem; + } + + &__text { + margin-bottom: 0.75rem; + } + + &__btn { + padding: 0.4rem 1.25rem; + margin-top: 0.5rem; + } + } + + .bento__events { + max-height: 120px; + } +} diff --git a/_sass/main.scss b/_sass/main.scss index d361f6e..66f07ce 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -203,4 +203,7 @@ h6 { :hover { color: map-get($colors, white) } -} \ No newline at end of file +} + +// Import Bento Grid Styles +@import "bento"; \ No newline at end of file diff --git a/bento.html b/bento.html new file mode 100644 index 0000000..b8f1630 --- /dev/null +++ b/bento.html @@ -0,0 +1,30 @@ +--- +layout: base +title: Quick Links +permalink: /bento/ +--- + +
+
+
+ + {% for item in site.data.bento_grid %} + + +
+
+ + {{ item.title }} +

+ {{ item.description }} +

+ {{ item.button_text }} +
+
+ + {% endfor %} +
+
+
From 9e1f5a69e61084f3c16a21cfe8d08888f020a3aa Mon Sep 17 00:00:00 2001 From: Bharat Saraswat Date: Thu, 10 Jul 2025 22:30:45 +0530 Subject: [PATCH 2/7] fix: Fix CFP link in bento page --- _data/bento_grid.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/bento_grid.yml b/_data/bento_grid.yml index 937eb01..c7c3d7c 100644 --- a/_data/bento_grid.yml +++ b/_data/bento_grid.yml @@ -9,7 +9,7 @@ external: false - title: "Call for Papers" - url: "/cfp/" + url: "/cfp.html" icon: "fas fa-microphone" background: "bento__bg--purple" text_color: "" From bc8668a6c7952861f3cd7fb752954d2c0b0f3695 Mon Sep 17 00:00:00 2001 From: bhansa Date: Fri, 11 Jul 2025 22:58:01 +0530 Subject: [PATCH 3/7] feat: update social links in bento --- _data/bento_grid.yml | 30 +++++++++++++++++ _sass/_bento.scss | 78 ++++++++++++++++++++++++++++---------------- 2 files changed, 79 insertions(+), 29 deletions(-) diff --git a/_data/bento_grid.yml b/_data/bento_grid.yml index c7c3d7c..422e2e2 100644 --- a/_data/bento_grid.yml +++ b/_data/bento_grid.yml @@ -58,6 +58,36 @@ button_class: "btn-light" external: true +- title: "LinkedIn" + url: "https://www.linkedin.com/company/hydpy/" + icon: "fab fa-linkedin" + background: "bg-primary" + text_color: "text-white" + description: "Connect with our professional network" + button_text: "Connect" + button_class: "btn-light" + external: true + +- title: "Instagram" + url: "https://www.instagram.com/hydpython/" + icon: "fab fa-instagram" + background: "bento__bg--teal" + text_color: "text-dark" + description: "Check out our visual updates" + button_text: "Follow" + button_class: "btn-dark" + external: true + +- title: "Meetup" + url: "https://www.meetup.com/HydPyGroup/" + icon: "fab fa-meetup" + background: "bg-danger" + text_color: "text-white" + description: "Join our local meetup events" + button_text: "Join" + button_class: "btn-light" + external: true + - title: "Learn Python" url: "https://python.org" icon: "fab fa-python" diff --git a/_sass/_bento.scss b/_sass/_bento.scss index 668ce8e..8425cb6 100644 --- a/_sass/_bento.scss +++ b/_sass/_bento.scss @@ -23,28 +23,31 @@ $screen_widths: ( // Main container .bento__grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - grid-auto-rows: minmax(240px, auto); - gap: 1.5rem; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-auto-rows: minmax(180px, auto); + gap: 1rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; + grid-auto-flow: row dense; // Allows items to fill gaps for better packing @media (min-width: map-get($screen_widths, md)) { - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: minmax(220px, auto); + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + grid-auto-rows: minmax(200px, auto); + gap: 1.25rem; } @media (min-width: map-get($screen_widths, lg)) { - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: minmax(200px, auto); + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-auto-rows: minmax(220px, auto); + gap: 1.5rem; } } // Individual card item .bento__item { border-radius: 16px; - padding: 1.5rem; + padding: 1.25rem; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; @@ -52,7 +55,7 @@ $screen_widths: ( align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - height: 100%; + min-height: 180px; &:hover { transform: translateY(-5px); @@ -64,14 +67,12 @@ $screen_widths: ( @media (min-width: map-get($screen_widths, md)) { grid-column: span 2; grid-row: span 2; - min-height: 440px; } } &--tall { @media (min-width: map-get($screen_widths, md)) { grid-row: span 2; - min-height: 440px; } } @@ -80,6 +81,15 @@ $screen_widths: ( grid-column: span 2; } } + + @media (min-width: map-get($screen_widths, md)) { + padding: 1.5rem; + min-height: 200px; + } + + @media (min-width: map-get($screen_widths, lg)) { + min-height: 220px; + } } // Card content container @@ -90,45 +100,51 @@ $screen_widths: ( width: 100%; display: flex; flex-direction: column; - justify-content: space-between; - height: 100%; + justify-content: center; + align-items: center; + gap: 1rem; pointer-events: none; &__heading { - margin-bottom: 0.5rem; + margin: 0; font-weight: 700; + line-height: 1.2; } &__text { - margin-bottom: 1rem; + margin: 0.2rem 0; opacity: 0.9; font-size: 0.9rem; + line-height: 1.4; + flex-grow: 1; + display: flex; + align-items: center; } &__icon { opacity: 0.8; - margin-bottom: 0.75rem; + flex-shrink: 0; &--large { - font-size: 3rem; + font-size: 2.5rem; } &--medium { - font-size: 2rem; + font-size: 1.8rem; } } &__btn { - border-radius: 25px; - padding: 0.5rem 1.5rem; + border-radius: 20px; + padding: 0.4rem 1.2rem; font-weight: 600; text-decoration: none; display: inline-block; transition: all 0.3s ease; - margin-top: auto; - align-self: center; pointer-events: none; opacity: 0.9; + font-size: 0.85rem; + flex-shrink: 0; } } @@ -228,19 +244,23 @@ $screen_widths: ( @media (max-width: 767px) { .bento__grid { grid-template-columns: 1fr; - gap: 1.25rem; + grid-auto-rows: minmax(180px, auto); + gap: 1rem; } .bento__item { - min-height: 220px; - padding: 1.25rem; + min-height: 180px; + padding: 1rem; + + &--large { + min-height: 220px; + padding: 1.25rem; + } - &--large, &--tall, &--wide { - grid-column: span 1; - grid-row: span 1; - min-height: 250px; + min-height: 200px; + padding: 1.25rem; } } From 148a3b1cebe11276acca1e787e0f41247c433687 Mon Sep 17 00:00:00 2001 From: bhansa Date: Fri, 11 Jul 2025 23:38:51 +0530 Subject: [PATCH 4/7] feat: add telegram --- _data/bento_grid.yml | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/_data/bento_grid.yml b/_data/bento_grid.yml index 422e2e2..733ab5c 100644 --- a/_data/bento_grid.yml +++ b/_data/bento_grid.yml @@ -88,6 +88,16 @@ button_class: "btn-light" external: true +- title: "Telegram" + url: "https://t.me/HydPy" + icon: "fab fa-telegram" + background: "bg-info" + text_color: "text-white" + description: "Join our community chat" + button_text: "Join Chat" + button_class: "btn-light" + external: true + - title: "Learn Python" url: "https://python.org" icon: "fab fa-python" From 1aeb0832890e23eb9188f6b905759b1bcf5ae49b Mon Sep 17 00:00:00 2001 From: Rajat Rajdeep Date: Sun, 13 Jul 2025 14:49:18 +0530 Subject: [PATCH 5/7] Add current logo variants and reorganize logo folder structure --- _includes/navbar.html | 4 +- assets/img/{ => logo/archive/v2}/hydpy.png | Bin assets/img/logo/archive/v2/hydpy.svg | 1341 +++++++++++++++++ assets/img/logo/current/square/dark/hydpy.png | Bin 0 -> 723952 bytes assets/img/logo/current/square/dark/hydpy.svg | 229 +++ assets/img/logo/current/square/dark/print.svg | 75 + .../img/logo/current/square/light/hydpy.png | Bin 0 -> 694639 bytes .../img/logo/current/square/light/hydpy.svg | 253 ++++ .../img/logo/current/square/light/print.svg | 75 + .../img/logo/current/standard/dark/hydpy.png | Bin 0 -> 343967 bytes .../img/logo/current/standard/dark/hydpy.svg | 228 +++ .../img/logo/current/standard/dark/print.svg | 74 + .../img/logo/current/standard/light/hydpy.png | Bin 0 -> 409547 bytes .../img/logo/current/standard/light/hydpy.svg | 252 ++++ .../img/logo/current/standard/light/print.svg | 74 + 15 files changed, 2603 insertions(+), 2 deletions(-) rename assets/img/{ => logo/archive/v2}/hydpy.png (100%) create mode 100644 assets/img/logo/archive/v2/hydpy.svg create mode 100644 assets/img/logo/current/square/dark/hydpy.png create mode 100644 assets/img/logo/current/square/dark/hydpy.svg create mode 100644 assets/img/logo/current/square/dark/print.svg create mode 100644 assets/img/logo/current/square/light/hydpy.png create mode 100644 assets/img/logo/current/square/light/hydpy.svg create mode 100644 assets/img/logo/current/square/light/print.svg create mode 100644 assets/img/logo/current/standard/dark/hydpy.png create mode 100644 assets/img/logo/current/standard/dark/hydpy.svg create mode 100644 assets/img/logo/current/standard/dark/print.svg create mode 100644 assets/img/logo/current/standard/light/hydpy.png create mode 100644 assets/img/logo/current/standard/light/hydpy.svg create mode 100644 assets/img/logo/current/standard/light/print.svg diff --git a/_includes/navbar.html b/_includes/navbar.html index a6abd5e..1a85f9d 100644 --- a/_includes/navbar.html +++ b/_includes/navbar.html @@ -1,7 +1,7 @@