From eb8ccba871c92b7d72dec0d87be45bf1d20155ef Mon Sep 17 00:00:00 2001 From: Abdur-Rahmaan Janhangeer Date: Thu, 3 Jul 2025 21:52:31 +0400 Subject: [PATCH 1/3] style: Add cards for featured speakers --- PyBay/content/contents.lr | 3 +- PyBay/webpack/scss/main.scss | 137 +++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 2 deletions(-) diff --git a/PyBay/content/contents.lr b/PyBay/content/contents.lr index b4286eb..bff5ee7 100644 --- a/PyBay/content/contents.lr +++ b/PyBay/content/contents.lr @@ -15,7 +15,6 @@ center_image: #### text-block #### text: -

-

+ ---- class: centered #### countdown-timer #### diff --git a/PyBay/webpack/scss/main.scss b/PyBay/webpack/scss/main.scss index b22c3a7..8c74067 100644 --- a/PyBay/webpack/scss/main.scss +++ b/PyBay/webpack/scss/main.scss @@ -1145,4 +1145,141 @@ header.navbar-custom { } +/* +Sessionize +*/ +.sessionize-loader { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: #333; + padding: 20px; + border-radius: 8px; + max-width: 1200px; /* Limit overall width */ + margin: 20px auto; /* Center the entire block */ + box-sizing: border-box; /* Include padding in element's total width and height */ +} + + +.sessionize-wrapper > link[rel="stylesheet"] { + display: none; +} + +/* Speakers Wall (the main grid) */ +.sz-speakers--wall { + list-style: none; /* Remove bullet points */ + padding: 0; + margin: 0; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */ + gap: 30px; /* Space between speaker cards */ + justify-content: center; /* Center items if they don't fill the row */ +} + +/* Individual Speaker Card */ +.sz-speaker { + background-color: #fff; + border: 1px solid #eee; + border-radius: 8px; + padding: 20px; + text-align: center; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.sz-speaker:hover { + transform: translateY(-5px); /* Lift effect on hover */ + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); +} + +/* Speaker Photo */ +.sz-speaker__photo { + width: 120px; /* Fixed size for the photo container */ + height: 120px; + border-radius: 50%; /* Make it round */ + overflow: hidden; /* Hide anything outside the circle */ + margin-bottom: 15px; + border: 3px solid #007bff; /* Accent border color */ + box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2); /* Subtle glow effect */ +} + +.sz-speaker__photo img { + width: 100%; + height: 100%; + object-fit: cover; /* Crop image to fit without distortion */ + display: block; /* Remove extra space below image */ +} + +/* Speaker Name */ +.sz-speaker__name { + margin: 0 0 5px 0; /* Adjust spacing */ + font-size: 1.5em; /* Larger name */ + font-weight: 600; /* Bolder */ + line-height: 1.2; +} + +.sz-speaker__name a { + text-decoration: none; /* Remove underline */ + color: #007bff; /* Primary link color */ + transition: color 0.2s ease-in-out; +} + +.sz-speaker__name a:hover { + color: #0056b3; /* Darker on hover */ +} + +/* Speaker Tagline/Title */ +.sz-speaker__tagline { + margin: 0; /* Remove default margin */ + font-size: 0.95em; + color: #666; + font-weight: 400; + line-height: 1.3; +} + +/* Optional: If you want to customize the modal */ +#sz-modal-container { + background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */ + z-index: 1000; /* Ensure it's on top */ +} + +/* Responsive adjustments for smaller screens */ +@media (max-width: 768px) { + .sz-speakers--wall { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + } + + .sz-speaker { + padding: 15px; + } + + .sz-speaker__photo { + width: 100px; + height: 100px; + } + + .sz-speaker__name { + font-size: 1.3em; + } + + .sz-speaker__tagline { + font-size: 0.9em; + } +} + +@media (max-width: 480px) { + .sz-speakers--wall { + grid-template-columns: 1fr; /* Stack items vertically on very small screens */ + } + + .sessionize-loader { + padding: 15px; + } +} + + + + // background-image: url(../images/waves.png), ; \ No newline at end of file From 692d00a11c3c0dc3b2879ea52b8a6f5594988aac Mon Sep 17 00:00:00 2001 From: Abdur-Rahmaan Janhangeer Date: Sun, 13 Jul 2025 21:47:27 +0400 Subject: [PATCH 2/3] chore: simpler working version --- PyBay/webpack/scss/main.scss | 134 ++++------------------------------- 1 file changed, 12 insertions(+), 122 deletions(-) diff --git a/PyBay/webpack/scss/main.scss b/PyBay/webpack/scss/main.scss index 8c74067..2e77b68 100644 --- a/PyBay/webpack/scss/main.scss +++ b/PyBay/webpack/scss/main.scss @@ -1145,141 +1145,31 @@ header.navbar-custom { } -/* -Sessionize -*/ -.sessionize-loader { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #333; - padding: 20px; - border-radius: 8px; - max-width: 1200px; /* Limit overall width */ - margin: 20px auto; /* Center the entire block */ - box-sizing: border-box; /* Include padding in element's total width and height */ -} - - -.sessionize-wrapper > link[rel="stylesheet"] { - display: none; -} -/* Speakers Wall (the main grid) */ -.sz-speakers--wall { - list-style: none; /* Remove bullet points */ - padding: 0; - margin: 0; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */ - gap: 30px; /* Space between speaker cards */ - justify-content: center; /* Center items if they don't fill the row */ -} - -/* Individual Speaker Card */ .sz-speaker { - background-color: #fff; - border: 1px solid #eee; - border-radius: 8px; - padding: 20px; - text-align: center; - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - display: flex; - flex-direction: column; - align-items: center; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); + background: white; + border-radius: 12px; + margin: 10px !important; + padding: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + transition: transform 0.2s ease, box-shadow 0.2s ease; } .sz-speaker:hover { - transform: translateY(-5px); /* Lift effect on hover */ - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); -} - -/* Speaker Photo */ -.sz-speaker__photo { - width: 120px; /* Fixed size for the photo container */ - height: 120px; - border-radius: 50%; /* Make it round */ - overflow: hidden; /* Hide anything outside the circle */ - margin-bottom: 15px; - border: 3px solid #007bff; /* Accent border color */ - box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2); /* Subtle glow effect */ -} - -.sz-speaker__photo img { - width: 100%; - height: 100%; - object-fit: cover; /* Crop image to fit without distortion */ - display: block; /* Remove extra space below image */ -} - -/* Speaker Name */ -.sz-speaker__name { - margin: 0 0 5px 0; /* Adjust spacing */ - font-size: 1.5em; /* Larger name */ - font-weight: 600; /* Bolder */ - line-height: 1.2; -} - -.sz-speaker__name a { - text-decoration: none; /* Remove underline */ - color: #007bff; /* Primary link color */ - transition: color 0.2s ease-in-out; + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } -.sz-speaker__name a:hover { - color: #0056b3; /* Darker on hover */ -} -/* Speaker Tagline/Title */ -.sz-speaker__tagline { - margin: 0; /* Remove default margin */ - font-size: 0.95em; - color: #666; - font-weight: 400; - line-height: 1.3; -} -/* Optional: If you want to customize the modal */ -#sz-modal-container { - background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */ - z-index: 1000; /* Ensure it's on top */ +.sz-modal .sz-speaker{ + padding: 10px !important } -/* Responsive adjustments for smaller screens */ -@media (max-width: 768px) { - .sz-speakers--wall { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - } - - .sz-speaker { - padding: 15px; - } - - .sz-speaker__photo { - width: 100px; - height: 100px; - } - - .sz-speaker__name { - font-size: 1.3em; - } - - .sz-speaker__tagline { - font-size: 0.9em; - } +.sz-modal .sz-speaker__photo{ + margin: 5px !important } -@media (max-width: 480px) { - .sz-speakers--wall { - grid-template-columns: 1fr; /* Stack items vertically on very small screens */ - } - - .sessionize-loader { - padding: 15px; - } -} - - // background-image: url(../images/waves.png), ; \ No newline at end of file From 33921fff5e8e24bf2a951503e7cfde7d4bf70825 Mon Sep 17 00:00:00 2001 From: Abdur-Rahmaan Janhangeer Date: Sun, 13 Jul 2025 22:06:56 +0400 Subject: [PATCH 3/3] chore: improve bottom card to fit elegant cards style --- PyBay/content/contents.lr | 65 ++++++++++++++++++++---------------- PyBay/webpack/scss/main.scss | 38 +++++++++++++++++++++ 2 files changed, 75 insertions(+), 28 deletions(-) diff --git a/PyBay/content/contents.lr b/PyBay/content/contents.lr index fdef174..2854205 100644 --- a/PyBay/content/contents.lr +++ b/PyBay/content/contents.lr @@ -64,38 +64,47 @@ text:
-
-
-
- -
-
- attending -

We will be returning to the Mission Bay Conference Center

- Learn More + +
+
+
+
+ +
+
+
Attending
+

We will be returning to the Mission Bay Conference Center

+ Learn More +
+
-
-
-
- +
+
+
+ +
+
+
Sponsoring
+

PyBay wouldn't be possible without our sponsors. Check out our prospectus and sponsor PyBay today.

+ Sponsor Us +
+
-
- sponsoring -

PyBay wouldn't be possible without our sponsors. Check out our prospectus and sponsor PyBay today.

- Sponsor Us +
+
+
+ +
+
+
Speaking
+

Every year we have top speakers.

+ Check out our speakers! +
+
-
-
- -
-
- speaking -

Every year we have top speakers.

- Check out our speakers! -
-
-
+ + ---- class: default --- diff --git a/PyBay/webpack/scss/main.scss b/PyBay/webpack/scss/main.scss index 2e77b68..7c90644 100644 --- a/PyBay/webpack/scss/main.scss +++ b/PyBay/webpack/scss/main.scss @@ -1145,11 +1145,13 @@ header.navbar-custom { } +/* SpeakerCards */ .sz-speaker { background: white; border-radius: 12px; margin: 10px !important; + padding: 24px 20px !important; padding: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; @@ -1171,5 +1173,41 @@ header.navbar-custom { } +/* BottomCards */ + +.bottom-card { + background: #fff; + border-radius: 16px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); + padding: 24px 20px; + transition: all 0.3s ease; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.bottom-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); +} + +.card-icon { + font-size: 2.5rem; + margin-bottom: 16px; + color: #006B8F; /* Bootstrap primary color, change as needed */ +} + +.card-title { + font-weight: 600; + margin-bottom: 10px; + text-transform: capitalize; +} + +.card-body{ + background-color: white !important; +} + + // background-image: url(../images/waves.png), ; \ No newline at end of file