diff --git a/static/css/v3/buttons.css b/static/css/v3/buttons.css index 378e98423..a23537dee 100644 --- a/static/css/v3/buttons.css +++ b/static/css/v3/buttons.css @@ -3,12 +3,11 @@ --color-button-primary: var(--color-primary-grey-200); --color-button-secondary: var(--color-primary-white); - --button-padding-x: var(--space-default); - --button-padding-y: var(--space-s); + --button-padding: var(--space-default); --button-gap: var(--space-default); --button-radius: var(--border-radius-m); --button-font-size: var(--font-size-small); - --button-font-weight: 600; + --button-font-weight: var(--font-weight-medium); --button-line-height: var(--line-height-default); --button-font-family: var(--font-sans); } @@ -18,168 +17,158 @@ align-items: center; justify-content: center; text-align: center; - gap: var(--space-default, 8px); + gap: var(--space-default); font-family: var(--font-sans); - font-size: var(--font-size-small, 14px); - font-weight: var(--font-weight-medium, 500); - line-height: var(--line-height-relaxed, 1.24); + font-size: var(--font-size-small); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-relaxed); letter-spacing: -0.01em; - border-radius: var(--border-radius-l, 8px); + border-radius: var(--border-radius-l); border: 1px solid transparent; - min-height: 36px; - width: 128px; - padding: 8px 16px; + min-width: 128px; + padding: var(--space-default); cursor: pointer; - transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease; } .btn-row { display: flex; flex-wrap: wrap; - gap: 40px; + gap: var(--space-default); align-items: stretch; } -.btn-row>.btn-error { - flex: 0 0 128px; - width: 128px; - min-width: 128px; +.btn-row > .btn-error { + flex: 0 0 auto; } -.btn-row>.btn-flex { +.btn-row > .btn-flex { flex: 1 0 0; display: flex; min-width: 128px; } .btn-primary { - background-color: var(--color-button-secondary, #fff); - border-color: var(--color-stroke-strong, #05081640); - color: var(--color-text-primary, #050816); + background-color: var(--color-button-primary); + color: var(--color-text-primary); } -.btn-primary:hover { - background-color: var(--color-secondary-dark-blue, #00778B); - border-color: var(--color-secondary-dark-blue, #00778B); - color: var(--color-text-reversed, #fff); +.btn-primary:hover, +.btn-primary[data-hover] { + background-color: var(--color-secondary-dark-blue); + color: var(--color-text-reversed); } .btn-secondary { - border-color: var(--color-stroke-strong, #05081640); - color: var(--color-text-primary, #050816); -} - -.btn-secondary:hover { - background-color: var(--color-button-secondary, #fff); - border-color: var(--color-secondary-dark-blue, #0077B8); - color: var(--color-secondary-dark-blue, #0077B8); -} - -.btn-primary-outline { - background-color: var(--color-button-secondary, #fff); - border-color: var(--color-stroke-link-accent, #0077B8); - color: var(--color-text-link-accent, #0077B8); -} - -.btn-primary-outline:hover { - background-color: var(--color-secondary-light-blue, #f7fdfe); - border-color: var(--color-text-link-accent, #00778B); - color: var(--color-text-link-accent, #00778B); -} - -.btn-secondary-grey { - background-color: var(--color-button-primary, #efeff1); - border-color: var(--color-border, #d5d6d8); - color: var(--color-text-primary, #050816); + border-color: var(--color-stroke-strong); + color: var(--color-text-primary); } -.btn-secondary-grey:hover { - background-color: var(--color-primary-grey-300, #d5d6d8); - border-color: var(--color-primary-grey-300, #d5d6d8); - color: var(--color-text-primary, #050816); +.btn-secondary:hover, +.btn-secondary[data-hover] { + border-color: var(--color-secondary-dark-blue); + color: var(--color-secondary-dark-blue); } .btn-green { - background-color: var(--color-surface-strong-accent-green-default, #CACA62); + background-color: var(--color-surface-strong-accent-green-default); border-color: transparent; - color: var(--color-text-primary, #050816); + color: var(--color-text-primary); } -.btn-green:hover { - background-color: var(--color-surface-strong-accent-green-hover, #CACA62BF); +.btn-green:hover, +.btn-green[data-hover] { + background-color: var(--color-surface-strong-accent-green-hover); border-color: transparent; - color: var(--color-text-primary, #050816); + color: var(--color-text-primary); } .btn-yellow { - background-color: var(--color-surface-strong-accent-yellow-default, #F5D039); + background-color: var(--color-surface-strong-accent-yellow-default); border-color: transparent; - color: var(--color-text-primary, #050816); + color: var(--color-text-primary); } -.btn-yellow:hover { - background-color: var(--color-surface-strong-accent-yellow-hover, #F5D039BF); +.btn-yellow:hover, +.btn-yellow[data-hover] { + background-color: var(--color-surface-strong-accent-yellow-hover); border-color: transparent; - color: var(--color-text-primary, #050816); + color: var(--color-text-primary); } .btn-teal { - background-color: var(--color-surface-strong-accent-teal-default, #64DACE); + background-color: var(--color-surface-strong-accent-teal-default); border-color: transparent; - color: var(--color-text-primary, #050816); + color: var(--color-text-primary); } -.btn-teal:hover { - background-color: var(--color-surface-strong-accent-teal-hover, #64DACEBF); +.btn-teal:hover, +.btn-teal[data-hover] { + background-color: var(--color-surface-strong-accent-teal-hover); border-color: transparent; - color: var(--color-text-primary, #050816); + color: var(--color-text-primary); } .btn-primary.btn-error, .btn-error { - background-color: var(--color-surface-error-weak, #fdf2f2); - border-color: var(--color-stroke-error, #d53f3f33); - color: var(--color-text-error, #d32f2f); + background-color: var(--color-surface-error-weak); + border-color: var(--color-stroke-error); + color: var(--color-text-error); } -.btn-error:hover { - background-color: var(--color-surface-error-weak, #fdf2f2); - border-color: var(--color-error-strong, #d32f2f); - color: var(--color-text-error, #d32f2f); +.btn-error:hover, +.btn-error[data-hover] { + background-color: var(--color-surface-error-weak); + border-color: var(--color-error-strong); + color: var(--color-text-error); } .btn-hero { min-height: 48px; - padding: var(--space-medium, 12px) var(--space-large, 24px); - font-size: var(--font-size-base, 16px); - gap: var(--space-default, 8px); + padding: var(--space-medium) var(--space-xl) var(--space-medium) + var(--space-xlarge); + font-size: var(--font-size-base); + gap: var(--space-medium); width: auto; } .btn.btn-hero.btn-primary { background-color: var(--color-surface-brand-accent-default); border-color: var(--color-surface-brand-accent-default); - color: var(--color-text-reversed); + color: var(--color-text-on-accent); } -.btn.btn-hero.btn-primary:hover { +.btn.btn-hero.btn-primary:hover, +.btn.btn-hero.btn-primary[data-hover] { background-color: var(--color-surface-brand-accent-hovered); border-color: var(--color-surface-brand-accent-hovered); - color: var(--color-text-reversed); +} + +.btn.btn-hero.btn-secondary { + border-color: var(--color-stroke-weak); +} + +.btn.btn-hero.btn-secondary:hover, +.btn.btn-hero.btn-secondary[data-hover] { + border-color: var(--color-secondary-dark-blue); } .btn-hero .btn-icon { - width: 20px; + width: 16px; + height: 16px; flex-shrink: 0; } .btn-card-link { display: inline-flex; align-items: center; - gap: var(--space-s, 4px); + gap: var(--space-s); font-family: var(--font-sans); - font-size: var(--font-size-small, 14px); - font-weight: var(--font-weight-medium, 500); - color: var(--color-text-link-accent, #00778B); + font-size: var(--font-size-small); + font-weight: var(--font-weight-medium); + color: var(--color-text-link-accent); background: none; border: none; padding: 0; @@ -198,46 +187,46 @@ .btn-list-link { display: inline-flex; align-items: center; - gap: var(--space-default, 8px); + gap: var(--space-default); font-family: var(--font-sans); - font-size: var(--font-size-base, 16px); - font-weight: var(--font-weight-regular, 400); - color: var(--color-text-primary, #050816); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + color: var(--color-text-primary); background: none; border: none; - padding: var(--space-s, 4px) 0; + padding: var(--space-s) 0; cursor: pointer; text-align: left; } .btn-list-link:hover { - color: var(--color-text-link-accent, #00778B); + color: var(--color-text-link-accent); } .btn-list-link .btn-icon { width: 20px; height: 20px; flex-shrink: 0; - color: var(--color-icon-link-accent, #00778B); + color: var(--color-icon-link-accent); } .btn-icon-library { display: inline-flex; align-items: center; - gap: var(--space-default, 8px); - padding: var(--space-default, 8px) var(--space-medium, 12px); + gap: var(--space-default); + padding: var(--space-default) var(--space-medium); font-family: var(--font-sans); - font-size: var(--font-size-small, 14px); - font-weight: var(--font-weight-regular, 400); - color: var(--color-text-primary, #050816); - background-color: var(--color-button-primary, #efeff1); - border: 1px solid var(--color-border, #d5d6d8); - border-radius: var(--border-radius-l, 8px); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + color: var(--color-text-primary); + background-color: var(--color-button-primary); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-l); cursor: pointer; } .btn-icon-library:hover { - background-color: var(--color-primary-grey-300, #d5d6d8); + background-color: var(--color-primary-grey-300); } .btn-icon-library .btn-icon { diff --git a/static/css/v3/card.css b/static/css/v3/card.css index f77204cb2..9a00e752b 100644 --- a/static/css/v3/card.css +++ b/static/css/v3/card.css @@ -10,20 +10,18 @@ */ .card { - /*Layout*/ - display: flex; - flex-direction: column; - align-items: flex-start; - gap: var(--space-large, 16px); - /*Style*/ - width: 100%; - border-radius: var(--border-radius-xl); - border: 1px solid var(--color-stroke-weak, rgba(5, 8, 22, 0.10)); - background: var(--color-surface-weak, #FFF); + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-large); + width: 100%; + border-radius: var(--border-radius-xl); + border: 1px solid var(--color-stroke-weak); + background: var(--color-surface-weak); } .basic-card { - max-width: 458px; + max-width: 458px; } .card .btn-row { @@ -31,43 +29,54 @@ } .card .field { - width: 100%; + width: 100%; } .card__column { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: var(--space-large, 16px); + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-large); } .card__header { - align-self: stretch; - display: flex; - padding: 0 var(--space-large, 1rem); + align-self: stretch; + display: flex; + padding: 0 var(--space-large); } .card__image { - width: 100%; + width: 100%; } .card__title { - flex: 1 0 0; - color: var(--color-text-primary, #050816); - font-family: var(--font-display, "Mona Sans Display SemiCondensed"); - font-size: var(--font-size-large, 24px); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: var(--line-height-tight); - letter-spacing: var(--letter-spacing-display-regular); + flex: 1 0 0; + color: var(--color-text-primary); + font-family: var(--font-display); + font-size: var(--font-size-large); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-tight); + letter-spacing: var(--letter-spacing-display-regular); } .card__hr { - width: 100%; - height: 1px; - background: var(--color-stroke-weak, rgba(5, 8, 22, 0.10)); - border: none; - margin: 0; + width: 100%; + height: 1px; + background: var(--color-stroke-weak); + border: none; + margin: 0; +} + +.card__cta_section { + display: flex; + gap: var(--space-default); + align-self: stretch; + padding: 0 var(--space-card); +} + +.card__cta_section .btn { + flex: 1 0 0; } /* Horizontal card — text + image side by side */ diff --git a/static/css/v3/event-cards.css b/static/css/v3/event-cards.css index a24cabb7a..50480d1a8 100644 --- a/static/css/v3/event-cards.css +++ b/static/css/v3/event-cards.css @@ -13,7 +13,7 @@ border: 1px solid var(--color-accent-strong-yellow); } -.event-cards--beige { +.event-cards--green { background: var(--color-surface-weak-accent-green); border: 1px solid var(--color-accent-strong-green); } @@ -104,7 +104,7 @@ a:hover .content-card { html.dark .event-cards--teal, html.dark .event-cards--yellow, -html.dark .event-cards--beige{ +html.dark .event-cards--beige { background: var(--color-primary-grey-850); border: 1px solid var(--color-primary-grey-850); } diff --git a/static/css/v3/post-cards.css b/static/css/v3/post-cards.css index 95b98da13..3c8c56edb 100644 --- a/static/css/v3/post-cards.css +++ b/static/css/v3/post-cards.css @@ -193,34 +193,6 @@ justify-content: center; } -.post-cards__cta { - display: flex; - gap: var(--space-default); - padding: 0 var(--space-card); -} - -.post-cards__cta .btn { - flex: 1 1 0; - min-width: 128px; - text-decoration: none; -} - -.post-cards__cta .btn:hover { - text-decoration: none; -} - -.post-cards__cta .btn-secondary-grey { - background-color: var(--color-button-primary); - border-color: var(--color-border); - color: var(--color-text-primary); -} - -.post-cards__cta .btn-secondary { - background-color: transparent; - border: 1px solid var(--color-stroke-strong); - color: var(--color-text-primary); -} - .post-cards--content .post-cards__list { gap: 0; } @@ -264,7 +236,9 @@ padding: var(--space-card); font-family: var(--font-sans); color: var(--color-text-primary); - transition: background-color 0.2s ease, border-color 0.2s ease; + transition: + background-color 0.2s ease, + border-color 0.2s ease; } .content-card__title { @@ -379,7 +353,6 @@ border-right: none; } - .cards-carousel { display: flex; flex-direction: column; diff --git a/static/css/v3/primitives.css b/static/css/v3/primitives.css index 8923a867b..1b257735f 100644 --- a/static/css/v3/primitives.css +++ b/static/css/v3/primitives.css @@ -15,48 +15,48 @@ ============================================ */ /* Accent Colors */ - --color-accent-strong-green: #CACA62; - --color-accent-strong-teal: #64DACE; - --color-accent-strong-yellow: #F5D039; - --color-accent-weak-green: #E4E4C0; - --color-accent-weak-teal: #C9F2EE; - --color-accent-weak-yellow: #FBEBA9; + --color-accent-strong-green: #caca62; + --color-accent-strong-teal: #64dace; + --color-accent-strong-yellow: #f5d039; + --color-accent-weak-green: #e4e4c0; + --color-accent-weak-teal: #c9f2ee; + --color-accent-weak-yellow: #fbeba9; /* Error Colors */ - --color-error-mid: #FF3B30; - --color-error-strong: #D32F2F; - --color-error-weak: #FDF2F2; + --color-error-mid: #ff3b30; + --color-error-strong: #d32f2f; + --color-error-weak: #fdf2f2; /* Primary Colors */ --color-primary-black: #050816; - --color-primary-grey-100: #F7F7F8; - --color-primary-grey-200: #EFEFF1; - --color-primary-grey-300: #D5D6D8; - --color-primary-grey-400: #CACBCE; - --color-primary-grey-500: #ACADB1; - --color-primary-grey-600: #82848A; - --color-primary-grey-700: #71737B; - --color-primary-grey-800: #585A64; + --color-primary-grey-100: #f7f7f8; + --color-primary-grey-200: #efeff1; + --color-primary-grey-300: #d5d6d8; + --color-primary-grey-400: #cacbce; + --color-primary-grey-500: #acadb1; + --color-primary-grey-600: #82848a; + --color-primary-grey-700: #71737b; + --color-primary-grey-800: #585a64; --color-primary-grey-850: #444651; - --color-primary-grey-900: #2F313D; - --color-primary-grey-950: #1A1C29; - --color-primary-orange-mustard: #FFA000; - --color-primary-white: #FFFFFF; + --color-primary-grey-900: #2f313d; + --color-primary-grey-950: #1a1c29; + --color-primary-orange-mustard: #ffa000; + --color-primary-white: #ffffff; /* Secondary Colors */ - --color-secondary-dark-blue: #00778B; - --color-secondary-light-blue: #F7FDFE; - --color-secondary-mid-blue: #6DCDF7; + --color-secondary-dark-blue: #0077b8; + --color-secondary-light-blue: #f7fdfe; + --color-secondary-mid-blue: #6dcdf7; /* Syntax Colors */ - --color-syntax-strong-blue: #1345E8; - --color-syntax-strong-green: #289D30; - --color-syntax-strong-grey: #9E9E9E; - --color-syntax-strong-pink: #D31FA7; - --color-syntax-strong-yellow: #A3A38C; - --color-syntax-weak-blue: #38DDFF; - --color-syntax-weak-green: #72FE92; - --color-syntax-weak-grey: #A3A3A3; - --color-syntax-weak-pink: #F358C0; - --color-syntax-weak-yellow: #FFF173; + --color-syntax-strong-blue: #1345e8; + --color-syntax-strong-green: #289d30; + --color-syntax-strong-grey: #9e9e9e; + --color-syntax-strong-pink: #d31fa7; + --color-syntax-strong-yellow: #a3a38c; + --color-syntax-weak-blue: #38ddff; + --color-syntax-weak-green: #72fe92; + --color-syntax-weak-grey: #a3a3a3; + --color-syntax-weak-pink: #f358c0; + --color-syntax-weak-yellow: #fff173; } diff --git a/static/css/v3/stats.css b/static/css/v3/stats.css index ff6f5ccfd..fcdfc8e2e 100644 --- a/static/css/v3/stats.css +++ b/static/css/v3/stats.css @@ -96,8 +96,6 @@ min-height: 160px; } - - .stats--in-numbers .stats__bar-wrap { flex: 1 1 0; min-width: max(8px, 100cqh * 0.04); @@ -146,18 +144,8 @@ flex-shrink: 0; } -.stats__cta a { - color: inherit; - text-decoration: none; -} - -.stats__cta a:hover { - text-decoration: none; -} - .stats__cta .btn { - flex: 1 1 0; - min-width: 128px; + flex: 1 0 0; } .stats--benchmarks { diff --git a/static/css/v3/v3-examples-section.css b/static/css/v3/v3-examples-section.css index af5cd98e4..c4a693e61 100644 --- a/static/css/v3/v3-examples-section.css +++ b/static/css/v3/v3-examples-section.css @@ -36,7 +36,7 @@ } html.dark .v3-examples-section__example-box { - background: var(--color-surface-mid) + background: var(--color-surface-mid); } .v3-examples-section__tools { @@ -120,59 +120,6 @@ html.dark .v3-examples-section__example-box { margin: 0 0 var(--space-default, 8px); } -/* Demo hover overrides for this section only */ -.v3-examples-section [data-hover].btn-primary { - background-color: var(--color-secondary-dark-blue, #00778B); - border-color: var(--color-secondary-dark-blue, #00778B); - color: var(--color-text-reversed, #fff); -} - -.v3-examples-section [data-hover].btn-primary-outline { - background-color: var(--color-secondary-light-blue, #f7fdfe); - border-color: var(--color-text-link-accent, #00778B); - color: var(--color-text-link-accent, #00778B); -} - -.v3-examples-section [data-hover].btn-secondary { - background-color: var(--color-button-secondary, #fff); - border-color: var(--color-secondary-dark-blue, #0077B8); - color: var(--color-secondary-dark-blue, #0077B8); -} - -.v3-examples-section [data-hover].btn-secondary-grey { - background-color: var(--color-primary-grey-300, #d5d6d8); - border-color: var(--color-primary-grey-300, #d5d6d8); - color: var(--color-text-primary, #050816); -} - -.v3-examples-section [data-hover].btn-green { - background-color: var(--color-surface-strong-accent-green-hover, #CACA62BF); - border-color: transparent; - color: var(--color-text-primary, #050816); -} - -.v3-examples-section [data-hover].btn-yellow { - background-color: var(--color-surface-strong-accent-yellow-hover, #F5D039BF); - border-color: transparent; - color: var(--color-text-primary, #050816); -} - -.v3-examples-section [data-hover].btn-teal { - background-color: var(--color-surface-strong-accent-teal-hover, #64DACEBF); - border-color: transparent; - color: var(--color-text-primary, #050816); -} - -.v3-examples-section [data-hover].btn-carousel { - color: var(--color-secondary-dark-blue, #0077B8); -} - -.v3-examples-section [data-hover].btn.btn-hero.btn-primary { - background-color: var(--color-surface-brand-accent-hovered); - border-color: var(--color-surface-brand-accent-hovered); - color: var(--color-text-primary); -} - .v3-examples-section .cards-carousel { display: flex; flex-direction: column; @@ -189,7 +136,9 @@ html.dark .v3-examples-section__example-box { -webkit-overflow-scrolling: touch; } -.v3-examples-section .post-cards--carousel .post-cards__list::-webkit-scrollbar { +.v3-examples-section + .post-cards--carousel + .post-cards__list::-webkit-scrollbar { display: none; } diff --git a/templates/v3/examples/_v3_example_buttons_block.html b/templates/v3/examples/_v3_example_buttons_block.html index 6edd82b05..67fbbf63f 100644 --- a/templates/v3/examples/_v3_example_buttons_block.html +++ b/templates/v3/examples/_v3_example_buttons_block.html @@ -1,42 +1,44 @@

Default

- - - - - + + + + + +
+

Hovered

- - - - - -
-
- + + + + + +
-
-

Hero

-
+

Hero Buttons

+
diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html index 021b5d17c..2321d80b2 100644 --- a/templates/v3/examples/_v3_example_section.html +++ b/templates/v3/examples/_v3_example_section.html @@ -1,14 +1,10 @@
{% comment %}V3 examples section for testing. To be removed – everything under v3/examples/ is disposable.{% endcomment %}

V3 Examples for testing

-

Buttons

-
- {% include "v3/examples/_v3_example_buttons_block.html" %} -
+
{% include "v3/examples/_v3_example_buttons_block.html" %}
-

Tooltip button

@@ -26,7 +22,6 @@

Tooltip button

-

Avatar

@@ -111,37 +106,28 @@

Avatar

- - -

Carousel buttons

-
- {% include "v3/includes/_carousel_buttons.html" %} -
+
{% include "v3/includes/_carousel_buttons.html" %}
-

Detail card carousel

{% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo" heading="Libraries categories" cards=demo_cards_carousel_cards %}
-

Detail card carousel with autoplay

{% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo-autoplay" heading="Libraries categories" cards=demo_cards_carousel_cards autoplay=True autoplay_delay=5000 %}
-

Detail card carousel with infinite looping and autoplay

{% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo-infinite-autoplay" heading="Libraries categories" cards=demo_cards_carousel_cards infinite=True autoplay=True autoplay_delay=5000 %}
-

Post cards list

@@ -166,13 +152,12 @@

{% endwith %} -
- View all posts +
+ {% include "v3/includes/_button.html" with label="View all posts" url="#" %}

-

Detail card (single)

@@ -181,72 +166,82 @@

Detail card (single)

{% endwith %}
-

Search Card

{% include "v3/includes/_search_card.html" with heading="What are you trying to find?" action_url="#" popular_terms=popular_terms %}
- {% if library_intro %} -
-

Library Intro Card

-
- {% with intro=library_intro %} - {% include "v3/includes/_library_intro_card.html" with library_name=intro.library_name description=intro.description authors=intro.authors cta_url=intro.cta_url %} - {% endwith %} +
+

Library Intro Card

+
+ {% with intro=library_intro %} + {% include "v3/includes/_library_intro_card.html" with library_name=intro.library_name description=intro.description authors=intro.authors cta_url=intro.cta_url %} + {% endwith %} +
-
{% endif %} - {% if example_library_choices %} -
-

Commits per release (by library)

-
-
- - -
- {% if example_library_not_found %} -

Library “{{ example_library_not_found }}” not found.

- {% elif example_library_commits_bars %} -
- {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="default" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="yellow" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} -
-
-

Full width

- {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Takes full width of container; up to 20 bars." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} -
-
-
-

5 bars only

- {% with example_bars_5=example_library_commits_bars|slice:":5" %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Same data limited to 5 bars." bars=example_bars_5 theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% endwith %} +
+

Commits per release (by library)

+
+
+ + +
+ {% if example_library_not_found %} +

Library “{{ example_library_not_found }}” not found.

+ {% elif example_library_commits_bars %} +
+ {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="default" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="yellow" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %}
-
- {% endif %} +
+

Full width

+ {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Takes full width of container; up to 20 bars." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} +
+
+
+

5 bars only

+ {% with example_bars_5=example_library_commits_bars|slice:":5" %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Same data limited to 5 bars." bars=example_bars_5 theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% endwith %} +
+
+ {% endif %} +
-
{% endif %} - {% include "v3/examples/_v3_example_section_wysiwyg.html" %} -

Create Account Card

{% include "v3/includes/_create_account_card.html" with heading="Contribute to earn badges, track your progress and grow your impact" body_html=create_account_card_body_html preview_image_url=create_account_card_preview_url cta_url="#" cta_label="Start contributing" %}
-

Form inputs

@@ -260,17 +255,15 @@

Form inputs

- -

Basic Card

{% with basic_card_data as card %} -
-

Card with two buttons

- {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label secondary_button_url=card.secondary_button_url secondary_button_label=card.secondary_button_label %} -

Card with one button

- {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label %} -
+
+

Card with two buttons

+ {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label secondary_button_url=card.secondary_button_url secondary_button_label=card.secondary_button_label %} +

Card with one button

+ {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label %} +
{% endwith %}
@@ -291,37 +284,29 @@

Learn Card

{% endwith %}
- -
+

Testimonial Card

{% include "v3/includes/_testimonial_card.html" with heading=testimonial_data.heading testimonials=testimonial_data.testimonials %}
-

Thread Archive Card

{% with basic_card_data as card %} -
- {% include "v3/includes/_thread_archive_card.html" %} -
+
{% include "v3/includes/_thread_archive_card.html" %}
{% endwith %}
-

Vertical Layout Card

{% with basic_card_data as card %} -
- {% include "v3/includes/_vertical_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label primary_style="secondary-grey" image_url=card.image %} -
+
+ {% include "v3/includes/_vertical_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label primary_style="secondary-grey" image_url=card.image %} +
{% endwith %}
-

Mailing List Card

-
- {% include "v3/includes/_mailing_list_card.html" %} -
+
{% include "v3/includes/_mailing_list_card.html" %}

Why Boost

@@ -345,51 +330,62 @@

Why Boost?

-

Category tags

{% include "v3/includes/_category_cards.html" with show_version_tags=True %}
-

Event cards

-
- {% include "v3/includes/_event_cards.html" %} -
+
{% include "v3/includes/_event_cards.html" %}
-

Content event list – clickable cards (link wraps each card)

-
-

Releases

+
+

+ Releases +

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=False %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=False %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=False %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=False %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=False %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=False %} +
-
View all
+
{% include "v3/includes/_button.html" with label="View all" url="#" %}
-

Content event card – clickable cards (link wraps each card)

-
-

Releases

+
+

+ Releases +

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=True %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=True %} +
-
View all
+
{% include "v3/includes/_button.html" with label="View all" url="#" %}
-

Content detail card

@@ -409,7 +405,6 @@

Content detail card

-

Code blocks

diff --git a/templates/v3/includes/_basic_card.html b/templates/v3/includes/_basic_card.html index 1bed48c2d..6f69f6406 100644 --- a/templates/v3/includes/_basic_card.html +++ b/templates/v3/includes/_basic_card.html @@ -6,7 +6,6 @@ Primary Button Url, Label, and Style: Optional. Url is the destination of the button, label is the text of the button, style is from the style list Secondary Button Url, Label, and Style: Optional, same use as primary {% endcomment %} -
{{ title }} @@ -16,12 +15,12 @@ {{ text }}
-
+
{% if primary_button_url and primary_button_label %} - {% include 'v3/includes/_button.html' with style=primary_style url=primary_button_url label=primary_button_label extra_classes="btn-flex" only %} + {% include "v3/includes/_button.html" with style="primary" url=primary_button_url label=primary_button_label only %} {% endif %} {% if secondary_button_url and secondary_button_label %} - {% include 'v3/includes/_button.html' with style=secondary_style url=secondary_button_url label=secondary_button_label extra_classes="btn-flex" only %} + {% include "v3/includes/_button.html" with style="secondary" url=secondary_button_url label=secondary_button_label only %} {% endif %}
diff --git a/templates/v3/includes/_button.html b/templates/v3/includes/_button.html index 03c2c2b95..f2cdf7661 100644 --- a/templates/v3/includes/_button.html +++ b/templates/v3/includes/_button.html @@ -1,27 +1,32 @@ {% comment %} V3 foundation button: style able button. Optional leading icon. Variables: - label (required), - url (optional), - icon_html (optional; HTML for icon, use with |safe), - type (optional) - style (optional): Choice between - - primary + - label (required), + - url (optional), + - icon_html (optional; HTML for icon, use with |safe), + - type (optional): button type (e.g. "button", "submit"); defaults to "button" if url is not provided, otherwise "a" + - style (optional): Choice between + - primary (default) - secondary - - primary-outline - - secondary-grey - green - yellow - teal - error - Defaults to primary - extra classes (optional) : Any extra classes that the button should have, as a string - aria_label (optional): An optional label for assistive technology. Defaults to the button label + - extra_classes (optional) : Any extra classes that the button should have, as a string + - aria_label (optional): An optional label for assistive technology. Defaults to the button label Icon must be wrapped in .... Usage: {% include "v3/includes/_button.html" with label="Get started" icon_html='' style="secondary" extra_classes="btn-flex" %} {% endcomment %} {% if url %} -{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }} + + {% if icon_html %}{{ icon_html|safe }}{% endif %} + {{ label }} {% else %} - + {% endif %} diff --git a/templates/v3/includes/_button_hero.html b/templates/v3/includes/_button_hero.html new file mode 100644 index 000000000..2679fab98 --- /dev/null +++ b/templates/v3/includes/_button_hero.html @@ -0,0 +1,32 @@ +{% comment %} + V3 foundation button: hero (larger, for hero sections). Always includes an icon. + Defaults to arrow-right if icon_html is not provided. + Variables: + - label (required) + - url (optional) + - icon_name (optional): defaults to "arrow-right". Please use icons from the _icon.html include for consistency. + - style (optional): "primary" or "secondary", defaults to "primary" + - type (optional) + - extra_classes (optional): string of additional styling classes to add to the button + + Usage: + {% include "v3/includes/_button_hero.html" with label="Learn more" style="secondary" %} + {% include "v3/includes/_button_hero.html" with label="Custom icon" icon_name="get-help" %} +{% endcomment %} +{% if url %} + + + {% include "includes/icon.html" with icon_name=icon_name|default:"arrow-right" icon_size=16 %} + + {{ label }} + +{% else %} + +{% endif %} diff --git a/templates/v3/includes/_button_hero_primary.html b/templates/v3/includes/_button_hero_primary.html deleted file mode 100644 index bd898871e..000000000 --- a/templates/v3/includes/_button_hero_primary.html +++ /dev/null @@ -1,11 +0,0 @@ -{% comment %} - V3 foundation button: hero primary (larger, for hero section). Optional leading icon. - Variables: label (required), url (optional), icon_html (optional; HTML for icon, use with |safe), type (optional), extra_classes (optional), aria_label(optional). - Icon must be wrapped in .... - Usage: {% include "v3/includes/_button_hero_primary.html" with label="Get started" icon_html='' %} -{% endcomment %} -{% if url %} -{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }} -{% else %} - -{% endif %} diff --git a/templates/v3/includes/_button_hero_secondary.html b/templates/v3/includes/_button_hero_secondary.html deleted file mode 100644 index 17312a423..000000000 --- a/templates/v3/includes/_button_hero_secondary.html +++ /dev/null @@ -1,10 +0,0 @@ -{% comment %} - V3 foundation button: hero secondary. - Variables: label (required), url (optional), icon_html (optional), type (optional), extra_classes (optional), aria_label (optional). - Usage: {% include "v3/includes/_button_hero_secondary.html" with label="Learn more" %} -{% endcomment %} -{% if url %} -{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }} -{% else %} - -{% endif %} diff --git a/templates/v3/includes/_code_block_card.html b/templates/v3/includes/_code_block_card.html index 063f3fb60..d7ae99cd3 100644 --- a/templates/v3/includes/_code_block_card.html +++ b/templates/v3/includes/_code_block_card.html @@ -14,15 +14,11 @@ {% endcomment %}

{{ heading }}

- {% if description %} -

{{ description }}

- {% endif %} + {% if description %}

{{ description }}

{% endif %} {% include "v3/includes/_code_block.html" with code=code code_html=code_html language=language variant=block_variant|default:"grey-bg" %} {% if button_text %} -
- - {{ button_text }} - -
+
+ {% include "v3/includes/_button.html" with label=button_text url=button_url|default:'#' aria_label=button_aria_label|default:button_text %} +
{% endif %}
diff --git a/templates/v3/includes/_create_account_card.html b/templates/v3/includes/_create_account_card.html index 57b5d13c4..af3935e35 100644 --- a/templates/v3/includes/_create_account_card.html +++ b/templates/v3/includes/_create_account_card.html @@ -40,7 +40,7 @@

{{ heading|default:"Contribute to earn badges, track you
-
- {% include "v3/includes/_button.html" with url=cta_url|default:'#' label=cta_label|default:"Start contributing" extra_classes="btn-flex" %} +
+ {% include "v3/includes/_button.html" with url=cta_url|default:'#' label=cta_label|default:"Start contributing" %}
diff --git a/templates/v3/includes/_event_cards.html b/templates/v3/includes/_event_cards.html index d19c2cd57..7aa372c68 100644 --- a/templates/v3/includes/_event_cards.html +++ b/templates/v3/includes/_event_cards.html @@ -4,7 +4,7 @@ Variables (for dynamic use from view): event_list (optional) — list of events. Each item: title, description, date, datetime (optional). - variant (optional) — "white" | "grey" | "yellow" | "beige" | "teal". If omitted, shows the variant gallery. + variant (optional) — "white" | "grey" | "yellow" | "green" | "teal". If omitted, shows the variant gallery. section_heading (optional) — section heading, default "Upcoming Events" primary_btn_text (optional) — primary button text primary_btn_url (optional) — primary button URL @@ -20,90 +20,132 @@ {% if event_list and variant %} {% include "v3/includes/_event_cards_section.html" with section_heading=section_heading event_list=event_list variant=variant primary_btn_text=primary_btn_text primary_btn_url=primary_btn_url secondary_btn_text=secondary_btn_text secondary_btn_url=secondary_btn_url %} {% else %} - {% comment %}Gallery: all 5 variants (white, grey, yellow, beige, teal) with sample content.{% endcomment %} + {% comment %}Gallery: all 5 variants (white, grey, yellow, green, teal) with sample content.{% endcomment %}
-
+

Upcoming Events

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=False %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=False %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=False %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=False %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=False %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=False %} +
-
- Download latest release - View events calendar +
+ {% include "v3/includes/_button.html" with label="Download latest release" url="#" style="primary" %} + {% include "v3/includes/_button.html" with label="View events calendar" url="#" style="secondary" %}
-
+

Upcoming Events

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %} +
-
- Button - Button +
+ {% include "v3/includes/_button.html" with label="Primary action" url="#" style="primary" %} + {% include "v3/includes/_button.html" with label="Secondary action" url="#" style="secondary" %}
-
+

Upcoming Events

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %} +
-
- Button - Button +
+ {% include "v3/includes/_button.html" with label="Primary action" url="#" style="yellow" %} + {% include "v3/includes/_button.html" with label="Secondary action" url="#" style="secondary" %}
-
-

Upcoming Events

+
+

Upcoming Events

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %} +
-
- Button - Button +
+ {% include "v3/includes/_button.html" with label="Primary action" url="#" style="green" %} + {% include "v3/includes/_button.html" with label="Secondary action" url="#" style="secondary" %}
-
+

Upcoming Events

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True %} +
-
- Button - Button +
+ {% include "v3/includes/_button.html" with label="Primary action" url="#" style="teal" %} + {% include "v3/includes/_button.html" with label="Secondary action" url="#" style="secondary" %}
{% comment %}Event cards with clickable cards (link wraps each card).{% endcomment %} -
+

Upcoming Event

    -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True card_url="#release-1" card_aria_label="Boost 1.90.0 closed for major changes" %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True card_url="#cpp-now" card_aria_label="C++ Now 2025 call for submissions" %}
    • -
  • {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True card_url="#release-89" card_aria_label="Boost 1.89.0 released" %}
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" event_card_wrapper=True card_url="#release-1" card_aria_label="Boost 1.90.0 closed for major changes" %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" event_card_wrapper=True card_url="#cpp-now" card_aria_label="C++ Now 2025 call for submissions" %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" event_card_wrapper=True card_url="#release-89" card_aria_label="Boost 1.89.0 released" %} +
-
- Download latest release - View events calendar +
+ {% include "v3/includes/_button.html" with label="Download latest release" url="#" style="primary" %} + {% include "v3/includes/_button.html" with label="View events calendar" url="#" style="secondary" %}
diff --git a/templates/v3/includes/_event_cards_section.html b/templates/v3/includes/_event_cards_section.html index 0f4988b6f..a577af6e9 100644 --- a/templates/v3/includes/_event_cards_section.html +++ b/templates/v3/includes/_event_cards_section.html @@ -1,11 +1,14 @@ {% comment %} V3 Event cards – one section (one colour variant). Variables: section_heading, event_list, variant, primary_btn_text, primary_btn_url, secondary_btn_text, secondary_btn_url. - variant: white | grey | yellow | beige | teal + variant: white | grey | yellow | green | teal Each event in event_list may have: title, description, date, datetime (optional), card_url (optional), card_aria_label (optional). {% endcomment %} -
-

{{ section_heading|default:"Upcoming Events" }}

+
+

+ {{ section_heading|default:"Upcoming Events" }} +

    {% for event in event_list %}
  • @@ -13,8 +16,16 @@

    {{ sectio

    • {% endfor %}
-
- {% if primary_btn_text %}{{ primary_btn_text }}{% endif %} - {% if secondary_btn_text %}{{ secondary_btn_text }}{% endif %} +
+ {% if primary_btn_text %} + {% include "v3/includes/_button.html" with label=primary_btn_text url=primary_btn_url|default:'#' style=variant aria_label=primary_btn_text only %} + {% endif %} + {% if secondary_btn_text %} + {% if variant == 'white' or variant == 'grey' %} + {% include "v3/includes/_button.html" with label=secondary_btn_text url=secondary_btn_url|default:'#' style="primary" aria_label=secondary_btn_text only %} + {% else %} + {% include "v3/includes/_button.html" with label=secondary_btn_text url=secondary_btn_url|default:'#' style="secondary" aria_label=secondary_btn_text only %} + {% endif %} + {% endif %}
diff --git a/templates/v3/includes/_horizontal_card.html b/templates/v3/includes/_horizontal_card.html index 71dccc1f1..a002d092f 100644 --- a/templates/v3/includes/_horizontal_card.html +++ b/templates/v3/includes/_horizontal_card.html @@ -27,8 +27,8 @@
{% if button_url and button_label %}
-
- {% include 'v3/includes/_button.html' with style=button_style url=button_url label=button_label extra_classes="btn-flex" only %} +
+ {% include 'v3/includes/_button.html' with style=button_style url=button_url label=button_label only %}
{% endif %}
diff --git a/templates/v3/includes/_learn_card.html b/templates/v3/includes/_learn_card.html index c3ae9b6fc..e4787e550 100644 --- a/templates/v3/includes/_learn_card.html +++ b/templates/v3/includes/_learn_card.html @@ -8,7 +8,6 @@ - url (required) - Url for the hero button - image_src (required) - Url at which the image can be found {% endcomment %} -
@@ -18,9 +17,14 @@ {{ text }}
{% for link in links %} - - - + + + {{ link.label }} @@ -30,9 +34,7 @@
-
- {% include 'v3/includes/_button_hero_primary.html' with label=label url=url icon_html='' extra_classes='btn-flex' %} -
+
{% include "v3/includes/_button_hero.html" with label=label url=url %}
diff --git a/templates/v3/includes/_library_intro_card.html b/templates/v3/includes/_library_intro_card.html index 2e9169ef7..43efece23 100644 --- a/templates/v3/includes/_library_intro_card.html +++ b/templates/v3/includes/_library_intro_card.html @@ -17,7 +17,6 @@ Usage: {% include "v3/includes/_library_intro_card.html" with library_name="Boost.Core." description="Lightweight utilities that power dozens of other Boost libraries" authors=library_authors cta_url="/libs/core/" %} {% endcomment %} -
@@ -25,34 +24,30 @@

{{ description }}

- {% for author in authors %} -
-
- {% include "v3/includes/_avatar_v3.html" with src=author.avatar_url name=author.name size="xl" %} -
-
-

{{ author.name }}

- {% if author.role %} -

{{ author.role }}

- {% endif %} - {% if author.badge %} - - {% elif author.badge_url %} - - {% endif %} +
+
+ {% include "v3/includes/_avatar_v3.html" with src=author.avatar_url name=author.name size="xl" %} +
+
+

{{ author.name }}

+ {% if author.role %}

{{ author.role }}

{% endif %} + {% if author.badge %} + + {% elif author.badge_url %} + + {% endif %} +
+ {% if author.bio %}

{{ author.bio }}

{% endif %}
- {% if author.bio %} -

{{ author.bio }}

- {% endif %}
-
{% endfor %} - {% if cta_url %} -
-
- {{ cta_label|default:"Use "|add:library_name }} -
+
+
+ {% include "v3/includes/_button.html" with url=cta_url label=cta_label|default:"Use "|add:library_name only %} +
{% endif %}
diff --git a/templates/v3/includes/_mailing_list_card.html b/templates/v3/includes/_mailing_list_card.html index f82fbc5a3..c2d5904e1 100644 --- a/templates/v3/includes/_mailing_list_card.html +++ b/templates/v3/includes/_mailing_list_card.html @@ -1,5 +1,4 @@ {% comment %}Card with an input to sign up for the mailing list{% endcomment %} -
Join the Boost Developers Mailing List @@ -9,7 +8,5 @@ Get the latest on releases, features, security patches, fixes and all major announcements. {% include 'v3/includes/_field_text.html' with name='mailing_email' placeholder='Email Address' required='True' type='email' submit_icon='arrow-right' %}
-
- {% include 'v3/includes/_button.html' with style='secondary-grey' type='submit' label='Subscribe' extra_classes='btn-flex' only %} -
+
{% include "v3/includes/_button.html" with type="submit" label="Subscribe" only %}
diff --git a/templates/v3/includes/_post_cards_v3.html b/templates/v3/includes/_post_cards_v3.html index 6250e9773..5d84ce3b7 100644 --- a/templates/v3/includes/_post_cards_v3.html +++ b/templates/v3/includes/_post_cards_v3.html @@ -5,34 +5,32 @@ No defaults for content; only output what is passed. {% endcomment %} {% if heading or posts or view_all_url or secondary_cta_url %} -
- {% if heading %} -

- {% if heading_url %} - {{ heading }} - {% else %} - {{ heading }} +
+ {% if heading %} +

+ {% if heading_url %} + {{ heading }} + {% else %} + {{ heading }} + {% endif %} +

{% endif %} -

- {% endif %} - {% if posts %} -
    - {% for item in posts %} -
  • - {% include "v3/includes/_post_card_v3.html" with post=item %} -
    • - {% endfor %} -
- {% endif %} - {% if view_all_url or secondary_cta_url %} -
- {% if view_all_url %} - {{ view_all_label|default:"View all" }} + {% if posts %} +
    + {% for item in posts %} +
  • {% include "v3/includes/_post_card_v3.html" with post=item %}
    • + {% endfor %} +
{% endif %} - {% if secondary_cta_url %} - {{ secondary_cta_label }} + {% if view_all_url or secondary_cta_url %} +
+ {% if view_all_url %} + {% include "v3/includes/_button.html" with label=view_all_label|default:"View all" url=view_all_url style="primary" only %} + {% endif %} + {% if secondary_cta_url %} + {% include "v3/includes/_button.html" with label=secondary_cta_label url=secondary_cta_url style="secondary" only %} + {% endif %} +
{% endif %} -
- {% endif %} -
+ {% endif %} diff --git a/templates/v3/includes/_stats_in_numbers.html b/templates/v3/includes/_stats_in_numbers.html index c32b98a12..71492c3f5 100644 --- a/templates/v3/includes/_stats_in_numbers.html +++ b/templates/v3/includes/_stats_in_numbers.html @@ -15,27 +15,29 @@ Usage: {% include "v3/includes/_stats_in_numbers.html" with heading="Boost in numbers" description="Some detail about a graph in here" bars=stats_bars theme="default" primary_cta_label="Boost Org on GitHub" primary_cta_url="#" secondary_cta_label="Button" secondary_cta_url="#" %} {% endcomment %} -
-

{{ heading }}

+
+

{{ heading }}

{{ description }}

-
+
{% if theme == 'default' or not theme %} - {{ primary_cta_label }} + {% include "v3/includes/_button.html" with label=primary_cta_label url=primary_cta_url style="primary" only %} {% else %} - {{ primary_cta_label }} + {% include "v3/includes/_button.html" with label=primary_cta_label url=primary_cta_url style=theme only %} {% endif %} {% if secondary_cta_label %} - {{ secondary_cta_label }} + {% include "v3/includes/_button.html" with label=secondary_cta_label url=secondary_cta_url style="secondary" only %} {% endif %}
diff --git a/templates/v3/includes/_thread_archive_card.html b/templates/v3/includes/_thread_archive_card.html index 4dc8ed231..d0cd22bea 100644 --- a/templates/v3/includes/_thread_archive_card.html +++ b/templates/v3/includes/_thread_archive_card.html @@ -4,7 +4,6 @@ NOTE: This currently contains a placeholder image that should be replaced. {% endcomment %} {% load static %} -
Explore The Boost Developers Mailing List @@ -14,8 +13,8 @@
-
- {% include 'v3/includes/_button.html' with style="primary" url="https://lists.boost.org/archives/list/boost@lists.boost.org/latest" label="Recent Threads" extra_classes="btn-flex" only %} - {% include 'v3/includes/_button.html' with style="secondary" url="https://lists.boost.org/archives/list/boost@lists.boost.org/" label="View Archive" extra_classes="btn-flex" only %} -
+
+ {% include "v3/includes/_button.html" with style="primary" url="https://lists.boost.org/archives/list/boost@lists.boost.org/latest" label="Recent Threads" only %} + {% include "v3/includes/_button.html" with style="secondary" url="https://lists.boost.org/archives/list/boost@lists.boost.org/" label="View Archive" only %} +
diff --git a/templates/v3/includes/_vertical_card.html b/templates/v3/includes/_vertical_card.html index 2fca6a492..35911e2e7 100644 --- a/templates/v3/includes/_vertical_card.html +++ b/templates/v3/includes/_vertical_card.html @@ -7,29 +7,22 @@ Primary Button Url, Label, and Style: Optional. Url is the destination of the button, label is the text of the button, style is from the style list Secondary Button Url, Label, and Style: Optional, same use as primary {% endcomment %} -
- {% if title %} - {{ title }} - {% endif %} + {% if title %}{{ title }}{% endif %}
- {% if text %} - {{ text }} - {% endif %} - {% if image_url %} - - {% endif %} + {% if text %}{{ text }}{% endif %} + {% if image_url %}{% endif %}
-
+
{% if primary_button_url and primary_button_label %} - {% include 'v3/includes/_button.html' with style=primary_style url=primary_button_url label=primary_button_label extra_classes="btn-flex" only %} + {% include "v3/includes/_button.html" with style="primary" url=primary_button_url label=primary_button_label only %} {% endif %} {% if secondary_button_url and secondary_button_label %} - {% include 'v3/includes/_button.html' with style=secondary_style url=secondary_button_url label=secondary_button_label extra_classes="btn-flex" only %} + {% include "v3/includes/_button.html" with style="secondary" url=secondary_button_url label=secondary_button_label only %} {% endif %}