diff --git a/static/sass/style.css b/static/sass/style.css index 7231641db..09c849482 100644 --- a/static/sass/style.css +++ b/static/sass/style.css @@ -396,7 +396,7 @@ form, .header-banner, .success-stories-widget .quote-from { .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} */ - /* FlexSlider Necessary Styles + /* FlexSlider Necessary Styles .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping .flexslider .slides img {width: 100%; display: block;} @@ -2350,7 +2350,7 @@ table tfoot { /* ! ===== Success Stories landing page ===== */ .featured-success-story { padding: 1.3125em 0; - background: center -230px no-repeat url('../img/success-glow2.png?1646853871') transparent; + background: center -230px no-repeat url('../img/success-glow2.png?1726783859') transparent; /*blockquote*/ } .featured-success-story img { padding: 10px 30px; } @@ -2881,11 +2881,10 @@ p.quote-by-organization { background-color: #bcc2c7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE6E8EA', endColorstr='#FFBCC2C7'); - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNlNmU4ZWEiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2JjYzJjNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #e6e8ea), color-stop(90%, #bcc2c7)); - background-image: -moz-linear-gradient(#e6e8ea 10%, #bcc2c7 90%); background-image: -webkit-linear-gradient(#e6e8ea 10%, #bcc2c7 90%); + background-image: -moz-linear-gradient(#e6e8ea 10%, #bcc2c7 90%); + background-image: -o-linear-gradient(#e6e8ea 10%, #bcc2c7 90%); background-image: linear-gradient(#e6e8ea 10%, #bcc2c7 90%); } .user-profile-controls + .return-link { margin-top: -1.3125em; } @@ -3612,7 +3611,7 @@ span.highlighted { font-weight: bold; font-style: normal; } -/* +/* * Generated by Font Squirrel (http://www.fontsquirrel.com) on July 2, 2013 10:19:24 AM America/New_York * Adobe Source Pro Sans, Open Source License: http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1959 */ @@ -3636,6 +3635,7 @@ span.highlighted { src: url("../fonts/SourceSansPro-It-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansPro-It-webfont.woff") format("woff"), url("../fonts/SourceSansPro-It-webfont.ttf") format("truetype"), url("../fonts/SourceSansPro-It-webfont.svg#source_sans_proitalic") format("svg"); font-weight: normal; font-style: italic; } + /* ! ===== SPONSORSHIP APP ===== */ .ui-tooltip-content { font-size: 75%; } @@ -3686,15 +3686,14 @@ span.highlighted { margin-top: 0.5em; font-size: 65%; border-color: #82b043; - color: #fff !important; + color: white !important; background-color: #82b043; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFB2D287', endColorstr='#FF82B043'); - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNiMmQyODciLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzgyYjA0MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #b2d287), color-stop(90%, #82b043)); - background-image: -moz-linear-gradient(#b2d287 10%, #82b043 90%); background-image: -webkit-linear-gradient(#b2d287 10%, #82b043 90%); + background-image: -moz-linear-gradient(#b2d287 10%, #82b043 90%); + background-image: -o-linear-gradient(#b2d287 10%, #82b043 90%); background-image: linear-gradient(#b2d287 10%, #82b043 90%); } #new_sponsorship_application_container .sponsor-contacts-container .contact-form, #edit-sponsor-information .sponsor-contacts-container .contact-form { margin-bottom: 1em; } @@ -3906,7 +3905,7 @@ span.highlighted { border-radius: 20px; text-align: center; } #select_sponsorship_benefits_container .submit-row .btn:hover, #select_sponsorship_benefits_container .submit-row .btn:focus { - background: #ffd95d; + background: #ffd95c; text-shadow: 0 0 5px rgba(255, 211, 67, 0.2); } @media (max-width: 1200px) { #select_sponsorship_benefits_container .submit-row { @@ -3924,11 +3923,7 @@ span.highlighted { */ flex-flow: column wrap !important; } #select_sponsorship_benefits_container #package-selection .row .col:not(first-child) { - width: 50%; } } - @media (max-width: 1200px) and (max-width: 640px) { - #select_sponsorship_benefits_container #package-selection .row .col:not(first-child) { - width: 80%; } } -@media (max-width: 1200px) { + width: 50%; } #select_sponsorship_benefits_container #package-selection .row .col:first-child { width: 20%; } #select_sponsorship_benefits_container #package-selection .col, #select_sponsorship_benefits_container #package-selection .col-items { @@ -3949,6 +3944,9 @@ span.highlighted { padding-right: 1em; } #select_sponsorship_benefits_container #package-selection .package-input input { order: 1; } } + @media (max-width: 1200px) and (max-width: 640px) { + #select_sponsorship_benefits_container #package-selection .row .col:not(first-child) { + width: 80%; } } @media (min-width: 1200px) { #select_sponsorship_benefits_container { /* Destkop version have the package selection row as a fixed header after some scrolling. @@ -3962,11 +3960,10 @@ span.highlighted { background-color: #fcfcfc; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF9F9F9', endColorstr='#FFFCFCFC'); - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #f9f9f9), color-stop(90%, #fcfcfc)); - background-image: -moz-linear-gradient(#f9f9f9 10%, #fcfcfc 90%); background-image: -webkit-linear-gradient(#f9f9f9 10%, #fcfcfc 90%); + background-image: -moz-linear-gradient(#f9f9f9 10%, #fcfcfc 90%); + background-image: -o-linear-gradient(#f9f9f9 10%, #fcfcfc 90%); background-image: linear-gradient(#f9f9f9 10%, #fcfcfc 90%); } } #thank-you-container { @@ -4049,7 +4046,7 @@ span.highlighted { margin-top: 1rem; } #sponsorship-detail-container .benefit-item { display: flex; - align-items: center; + flex-direction: column; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 4px; @@ -4057,23 +4054,26 @@ span.highlighted { transition: background-color 0.2s ease; } #sponsorship-detail-container .benefit-item:hover { background-color: #f8f9fa; } - #sponsorship-detail-container .benefit-icon { - flex-shrink: 0; - margin-right: 0.75rem; - color: #28a745; - font-size: 1rem; } #sponsorship-detail-container .benefit-content { flex-grow: 1; } #sponsorship-detail-container .benefit-name { display: block; font-weight: 500; font-size: 0.9rem; - line-height: 1.2; } + line-height: 1.2; + margin-bottom: 0.25rem; } #sponsorship-detail-container .benefit-description { - margin-left: 0.25rem; color: #6c757d; cursor: help; font-size: 0.8rem; } + #sponsorship-detail-container .benefit-category { + display: inline-block; + background-color: #e9ecef; + color: #495057; + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 4px; + margin-top: 0.5rem; } @media (max-width: 768px) { #sponsorship-detail-container .info-cards { grid-template-columns: 1fr; } @@ -4088,5 +4088,3 @@ span.highlighted { font-size: 75%; } #update-sponsorship-assets .form-actions { margin: 0.5em 0; } - -/*# sourceMappingURL=style.css.map */ diff --git a/static/sass/style.scss b/static/sass/style.scss index f2613e1b7..cb78d9a4d 100644 --- a/static/sass/style.scss +++ b/static/sass/style.scss @@ -3037,7 +3037,7 @@ $breakpoint-desktop: 1200px; text-align: right; } - .benefits-grid { + .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; @@ -3046,7 +3046,7 @@ $breakpoint-desktop: 1200px; .benefit-item { display: flex; - align-items: center; + flex-direction: column; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 4px; @@ -3058,13 +3058,6 @@ $breakpoint-desktop: 1200px; background-color: #f8f9fa; } - .benefit-icon { - flex-shrink: 0; - margin-right: 0.75rem; - color: #28a745; - font-size: 1rem; - } - .benefit-content { flex-grow: 1; } @@ -3074,15 +3067,25 @@ $breakpoint-desktop: 1200px; font-weight: 500; font-size: 0.9rem; line-height: 1.2; + margin-bottom: 0.25rem; } .benefit-description { - margin-left: 0.25rem; color: #6c757d; cursor: help; font-size: 0.8rem; } + .benefit-category { + display: inline-block; + background-color: #e9ecef; + color: #495057; + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 4px; + margin-top: 0.5rem; + } + @media (max-width: 768px) { .info-cards { grid-template-columns: 1fr; diff --git a/templates/users/sponsorship_detail.html b/templates/users/sponsorship_detail.html index 70129c122..a2d587d89 100644 --- a/templates/users/sponsorship_detail.html +++ b/templates/users/sponsorship_detail.html @@ -110,16 +110,14 @@

Sponsorship Benefits

{% for benefit in sponsorship.benefits.all %}
-
- -
{{ benefit.name_for_display }} {% if benefit.description %} - - + + {% endif %} + {{ benefit.program.name }}
{% endfor %}