Merge pull request #4 from boostorg/v3

V3

Author: fromagge

core/views.py

@@ -1133,6 +1133,9 @@ def get_context_data(self, **kwargs):
                 {"value": "networking", "label": "Networking"},
             ]
         )
+        context["create_account_card_preview_url"] = (
+            f"{settings.STATIC_URL}img/checker.png"
+        )
         context["basic_card_data"] = {
             "title": "Found a Bug?",
             "text": "We rely on developers like you to keep Boost solid. Here's how to report issues that help the whole comm",
@@ -1215,6 +1218,19 @@ def get_context_data(self, **kwargs):
             },
         ]
 
+        context["learn_card_data"] = {
+            "title": "I want to learn:",
+            "text": "How to install Boost, use its libraries, build projects, and get help when you need it.",
+            "links": [
+                {"label": "Explore common use cases", "url": "https://www.example.com"},
+                {"label": "Build with CMake", "url": "https://www.example.com"},
+                {"label": "Visit the FAQ", "url": "https://www.example.com"},
+            ],
+            "url": "https://www.example.com",
+            "label": "Learn more about Boost",
+            "image_src": "/static/img/v3/examples/Learn Card Image.png",
+        }
+
         context["testimonial_data"] = {
             "heading": "What Engineers are saying",
             "testimonials": [

static/css/v3/components.css

@@ -18,7 +18,9 @@
 @import './category-tags.css';
 @import './code-block.css';
 @import './search-card.css';
+@import './create-account-card.css';
 @import './privacy-policy.css';
 @import './library-intro-card.css';
+@import './learn-cards.css';
 @import './terms-of-use.css';
 @import './thread-archive-card.css';

static/css/v3/create-account-card.css

@@ -0,0 +1,52 @@
+.create-account-card {
+  box-sizing: border-box;
+  max-width: 459px;
+  padding: var(--space-large, 16px) 0;
+}
+
+.create-account-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-large, 16px);
+  padding: 0 var(--space-large, 16px);
+}
+
+.create-account-card__richtext {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-default, 8px);
+  color: var(--color-text-secondary, #585a64);
+}
+
+.create-account-card__richtext p {
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-size-base, 16px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-default, 1.2);
+  letter-spacing: -0.01em;
+}
+
+.create-account-card__richtext ul {
+  margin: 0;
+  padding-left: 1.2em;
+  list-style: disc;
+  list-style-position: outside;
+}
+
+.create-account-card__richtext li {
+  font-size: var(--font-size-base, 16px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-default, 1.2);
+  letter-spacing: -0.01em;
+}
+
+.create-account-card__richtext li + li {
+  margin-top: var(--space-default, 8px);
+}
+
+.create-account-card__preview {
+  width: 100%;
+  display: block;
+  border-radius: var(--border-radius-l, 8px);
+}

static/css/v3/learn-cards.css

@@ -0,0 +1,84 @@
+.learn-card {
+    max-width: 696px;
+}
+
+.learn-card__row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-large, 16px);
+    align-self: stretch;
+    flex-direction: row;
+}
+
+@media (max-width: 768px) {
+    .learn-card__row {
+        flex-direction: column;
+    }
+}
+
+.learn-card__column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+}
+
+.learn-card__title {
+    color: var(--color-text-primary, #050816);
+
+    /* Display/Desktop/Medium/Large */
+    font-family: var(--font-display, "Mona Sans Display SemiCondensed");
+    font-size: var(--font-size-large, 24px);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--tight);
+    /* 24px */
+    letter-spacing: -0.24px;
+}
+
+.learn-card__text {
+    color: var(--color-text-secondary, #585A64);
+
+    /* Sans/Desktop/Regular/Base */
+    font-family: var(--font-sans, "Mona Sans VF");
+    font-size: var(--font-size-base, 16px);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-default);
+    /* 19.2px */
+    letter-spacing: -0.16px;
+}
+
+.learn-card__link-container {
+    display: flex;
+    min-width: 128px;
+    align-items: center;
+    gap: var(--space-s, 4px);
+}
+
+.learn-card__link-icon {
+    fill: var(--color-icon-primary)
+}
+
+.learn-card__link {
+    font-size: var(--font-sizes-small, 14px);
+    font-weight: var(--font-weight-medium);
+    line-height: 124%;
+    /* 17.36px */
+    letter-spacing: -0.14px;
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: 7.5%;
+    /* 1.05px */
+    text-underline-offset: 15.2%;
+    /* 2.128px */
+    text-underline-position: from-font;
+}
+
+.learn-card__image {
+    flex: 1 0 0;
+    aspect-ratio: 1/1;
+    border-radius: var(--border-radius-default, 8px);
+    background: url(<path-to-image>) lightgray 50% / cover no-repeat, url(<path-to-image>) lightgray 50% / cover no-repeat;
+}

static/css/v3/terms-of-use.css

@@ -65,6 +65,7 @@
 
 .terms-page__body p {
   margin: 0 0 0.5em 0;
+  padding: 0;
 }
 
 .terms-page__body p:last-child {

static/css/v3/v3-examples-section.css

@@ -20,7 +20,7 @@
   margin-bottom: 0;
 }
 
-.v3-examples-section__block h3 {
+.v3-examples-section__block .block-title {
   font-size: var(--font-size-base, 16px);
   font-weight: var(--font-weight-medium, 500);
   margin-bottom: var(--space-default, 8px);

static/img/v3/examples/Learn Card Image.png

@@ -3,14 +3,14 @@
   <h2 id="v3-examples-heading" class="v3-examples-section__heading">V3 Examples for testing</h2>
 
   <div class="v3-examples-section__block">
-    <h3>Buttons</h3>
+    <h3 class="block-title">Buttons</h3>
     <div class="v3-examples-section__example-box">
       {% include "v3/examples/_v3_example_buttons_block.html" %}
     </div>
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Tooltip button</h3>
+    <h3 class="block-title">Tooltip button</h3>
     <div class="v3-examples-section__example-box">
       <div class="v3-examples-section__tools">
         {% include "v3/includes/_button_tooltip_v3.html" with label="Top" position="top" button_text="Help" %}
@@ -28,7 +28,7 @@ <h3>Tooltip button</h3>
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Avatar</h3>
+    <h3 class="block-title">Avatar</h3>
     <div class="v3-examples-section__example-box">
       <table class="v3-examples-section__avatar-table">
         <tbody>
@@ -115,13 +115,13 @@ <h3>Avatar</h3>
 
 
   <div class="v3-examples-section__block v3-examples-section__block--carousel">
-    <h3>Carousel buttons</h3>
+    <h3 class="block-title">Carousel buttons</h3>
     <div class="v3-examples-section__example-box">
       {% include "v3/includes/_carousel_buttons.html" %}
     </div>
   </div>
 
-  {% comment %} <div class="v3-examples-section__block">
+  <div class="v3-examples-section__block">
     <h3>Detail card carousel</h3>
     <div class="v3-examples-section__example-box">
       {% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo" heading="Libraries categories" cards=demo_cards_carousel_cards %}
@@ -140,10 +140,10 @@ <h3>Detail card carousel with infinite looping and autoplay</h3>
     <div class="v3-examples-section__example-box">
       {% 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 %}
     </div>
-  </div> {% endcomment %}
+  </div>
 
   <div class="v3-examples-section__block">
-    <h3>Post cards list</h3>
+    <h3 class="block-title">Post cards list</h3>
     <div class="v3-examples-section__example-box">
       <section class="post-cards post-cards--default post-cards--neutral post-cards--vertical">
         <h2 class="post-cards__heading">
@@ -183,7 +183,7 @@ <h3>Detail card (single)</h3>
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Search Card</h3>
+    <h3 class="block-title">Search Card</h3>
     <div class="v3-examples-section__example-box">
       {% include "v3/includes/_search_card.html" with heading="What are you trying to find?" action_url="#" popular_terms=popular_terms %}
     </div>
@@ -239,7 +239,14 @@ <h3>Commits per release (by library)</h3>
   {% endif %}
 
   <div class="v3-examples-section__block">
-    <h3>Form inputs</h3>
+    <h3 class="block-title">Create Account Card</h3>
+    <div class="v3-examples-section__example-box">
+      {% 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" %}
+    </div>
+  </div>
+
+  <div class="v3-examples-section__block">
+    <h3 class="block-title">Form inputs</h3>
     <div class="v3-examples-section__example-box">
       <div class="v3-examples-section__forms">
         {% include "v3/includes/_field_text.html" with name="ex_basic" label="Text field" placeholder="Enter text..." %}
@@ -265,6 +272,15 @@ <h4 class="py-large">Card with one button</h4>
     {% endwith %}
   </div>
 
+<div class="v3-examples-section__block">
+    <h3>Learn Card</h3>
+    <div class="v3-examples-section__example-box">
+      {% with learn_card_data as data %}
+        {% include "v3/includes/_learn_card.html" with title=data.title text=data.text links=data.links image_src=data.image_src url=data.url label=data.label %}
+      {% endwith %}
+    </div>
+  </div>
+
    <div class="v3-examples-section__block">
     <h3>Testimonial Card</h3>
     <div class="v3-examples-section__example-box">
@@ -281,7 +297,7 @@ <h3>Thread Archive Card</h3>
     {% endwith %}
   </div>
   <div class="v3-examples-section__block">
-    <h3>Why Boost</h3>
+    <h3 class="block-title">Why Boost</h3>
     <div class="v3-examples-section__example-box">
       {% comment %}Use 8 cards to test ACs: "Why Boost Cards render correctly with 1–8 cards" and "Cards wrap correctly after four items on desktop/tablet" (4+4 rows).{% endcomment %}
       <section class="why-boost-cards" aria-labelledby="why-boost-heading">
@@ -304,21 +320,21 @@ <h2 id="why-boost-heading" class="why-boost-cards__heading">Why Boost?</h2>
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Category tags</h3>
+    <h3 class="block-title">Category tags</h3>
     <div class="v3-examples-section__example-box">
       {% include "v3/includes/_category_cards.html" with show_version_tags=True %}
     </div>
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Event cards</h3>
+    <h3 class="block-title">Event cards</h3>
     <div class="v3-examples-section__example-box">
       {% include "v3/includes/_event_cards.html" %}
     </div>
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Content event list – clickable cards (link wraps each card)</h3>
+    <h3 class="block-title">Content event list – clickable cards (link wraps each card)</h3>
     <div class="v3-examples-section__example-box">
       <section class="post-cards post-cards--content post-cards--neutral post-cards--content-list" aria-labelledby="content-event-releases-links-list">
         <h2 id="content-event-releases-links-list" class="post-cards__heading"><a href="#" class="post-cards__heading-link">Releases</a></h2>
@@ -348,7 +364,7 @@ <h2 id="content-event-releases-links-card" class="post-cards__heading"><a href="
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Content detail card</h3>
+    <h3 class="block-title">Content detail card</h3>
     <div class="v3-examples-section__example-box">
       <section class="content-story-section">
         <h4 class="content-story-section__title">Content detail card</h4>
@@ -368,7 +384,7 @@ <h4 class="content-story-section__title">Content detail card</h4>
   </div>
 
   <div class="v3-examples-section__block">
-    <h3>Code blocks</h3>
+    <h3 class="block-title">Code blocks</h3>
     <div class="v3-examples-section__example-box">
       {% include "v3/includes/_code_blocks_story.html" with code_standalone_1=code_demo_beast code_standalone_2=code_demo_beast code_card_1=code_demo_hello code_card_2=code_demo_beast code_card_3=code_demo_install %}
     </div>

templates/v3/examples/_v3_example_section.html

@@ -1,11 +1,11 @@
 {% 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).
+  Variables: label (required), url (optional), icon_html (optional; HTML for icon, use with |safe), type (optional), extra_classes (optional).
   Icon must be wrapped in <span class="btn-icon" aria-hidden>...</span>.
   Usage: {% include "v3/includes/_button_hero_primary.html" with label="Get started" icon_html='<span class="btn-icon" aria-hidden><i class="fas fa-arrow-right"></i></span>' %}
 {% endcomment %}
 {% if url %}
-<a href="{{ url }}" class="btn btn-hero btn-primary">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
+<a href="{{ url }}" class="btn btn-hero btn-primary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
 {% else %}
-<button type="{{ type|default:'button' }}" class="btn btn-hero btn-primary">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
+<button type="{{ type|default:'button' }}" class="btn btn-hero btn-primary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
 {% endif %}

templates/v3/includes/_button_hero_primary.html

@@ -1,10 +1,10 @@
 {% comment %}
   V3 foundation button: hero secondary.
-  Variables: label (required), url (optional), icon_html (optional), type (optional).
+  Variables: label (required), url (optional), icon_html (optional), type (optional), extra_classes (optional).
   Usage: {% include "v3/includes/_button_hero_secondary.html" with label="Learn more" %}
 {% endcomment %}
 {% if url %}
-<a href="{{ url }}" class="btn btn-hero btn-secondary">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
+<a href="{{ url }}" class="btn btn-hero btn-secondary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
 {% else %}
-<button type="{{ type|default:'button' }}" class="btn btn-hero btn-secondary">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
+<button type="{{ type|default:'button' }}" class="btn btn-hero btn-secondary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
 {% endif %}