diff --git a/bedrock/base/templates/macros-m24.html b/bedrock/base/templates/macros-m24.html index f46e6f2bf0f..9dd41104b07 100644 --- a/bedrock/base/templates/macros-m24.html +++ b/bedrock/base/templates/macros-m24.html @@ -5,20 +5,23 @@ #} {# - Grid Tile - HTML Import: {% from "macros-m24.html" import grid_tile with context %} + Gallery Tile + HTML Import: {% from "macros-m24.html" import gallery_tile with context %} CSS Import: @import '[path to]/m24/grid'; Macro Parameters: class: String providing modifier class(es) to the tile component. cta_text: String indicating CTA text (usually a translation id wrapped in an ftl function). desc: String indicating paragraph text (usually a translation id wrapped in ftl function). heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling. - image: Image to be used in the tile. Can pass an element, resp_img or picture Python helpers. + image_desktop: Image to be used in the tile at desktop sizes. Can pass an element, resp_img or picture Python helpers. + image_mobile: Image to be used in the tile at desktop sizes. Can pass an element, resp_img or picture Python helpers. link_attributes: A generic parameter to add any extra attributes to the CTA link, such as target, rel, or data attributes for GA tracking. Note that the quotes will pass through unescaped. link_url (Required): String or url helper function provides href value for the tile link. + tag: A category tag for this gallery tile (e.g. product, program, event) (usually a translation id wrapped in ftl function). + tag_icon: (Do not translate) Last word of the icon class. Must be configured in the CSS. Currently supports: product, program, event. title (Required): String indicating heading text (usually a translation id wrapped in ftl function). #} -{% macro grid_tile( +{% macro gallery_tile( class=None, cta_text=None, desc=None, @@ -26,25 +29,37 @@ image=None, link_attributes=None, link_url=None, + tag='', + tag_icon=None, title='' ) -%} -
- - {% if image %} -
{{ image|safe }}
- {% endif %} -
- {{ title }} - {% if desc %} +
+ + + {{ title }} + + + {% if image %} +
+ {{ image|safe }} +
+ {% endif %} + {% if tag %} +
+ {% if tag_icon %}{% endif %} + {{ tag }} +
+ {% endif %} +
+ {% if desc %}

{{ desc }}

- {% endif %} - {% if cta_text %} + {% endif %} + {% if cta_text %}

{{ cta_text }}

- {% endif %} + {% endif %}
-
{%- endmacro %} @@ -59,9 +74,9 @@ image: Thumbnail image. Can pass an element, resp_img or picture Python helpers. link_attributes: A generic parameter to add any extra attributes to the CTA link, such as target, rel, or data attributes for GA tracking. Note that the quotes will pass through unescaped. link_url (Required): String or url helper function provides href value for item. - preview: Blurb / summary of the media. - topic: One or two word topic of the item. Perhaps one of the things the item is "tagged" with if it's a blog post. - type: (Should be translated) Type of media the item links to. Probably one of podcast, article, video. + preview: Blurb / summary of the media. (usually a translation id wrapped in ftl function). + topic: One or two word topic of the item. Perhaps one of the things the item is "tagged" with if it's a blog post. (usually a translation id wrapped in ftl function). + type: Type of media the item links to. Probably one of podcast, article, video. (usually a translation id wrapped in ftl function). type_icon: (Do not translate) Last word of the icon class. Must be configured in the CSS. Currently supports: podcast, article, video. #} {% macro springboard_item( diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/amplify.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/amplify.html deleted file mode 100644 index 15eff85d626..00000000000 --- a/bedrock/mozorg/templates/mozorg/about/includes/m24/amplify.html +++ /dev/null @@ -1,65 +0,0 @@ - -{# - This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at https://mozilla.org/MPL/2.0/. -#} - -{% from "macros-m24.html" import grid_tile with context %} - -
-
-

News and notes from our community

-
- -
- {{ grid_tile( - image=resp_img( - url="img/m24/todo-27-1.svg", - optional_attributes={ - "loading": "lazy", - "alt": "", - "width": "1440", - "height": "533", - } - ), - title='From class project to global movement - students redefine AI fairness', - link_url='#', - cta_text='Read more', - class='m24-l-grid-two-thirds' - ) }} -
- -
- {{ grid_tile( - image=resp_img( - url="img/m24/news-rise25-4-5.png", - srcset={'img/mozorg/about/m24/news-rise25-4-5-high-res.png': '2x'}, - optional_attributes={ - "loading": "lazy", - "alt": "", - "width": "448", - "height": "560", - } - ), - title='At the Rise25 Awards, the Future of AI is ethical, inclusive and accountable', - link_url='#', - ) }} - - {{ grid_tile( - image=resp_img( - url="img/mozorg/about/m24/news-chicago-high-res.png", - srcset={'img/mozorg/about/m24/news-chicago-high-res.png': '2x'}, - optional_attributes={ - "loading": "lazy", - "alt": "", - "width": "448", - "height": "448", - } - ), - title='Empowering Chicago’s entrepreneurs for generational change', - link_url='#', - cta_text='Read more', - ) }} -
-
diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/news.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/news.html new file mode 100644 index 00000000000..b9dd96e7931 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/about/includes/m24/news.html @@ -0,0 +1,108 @@ + +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{% from "macros-m24.html" import gallery_tile with context %} + +
+
+

Read the latest Mozilla news & articles

+
+
+ + {{ gallery_tile( + class='m24-l-grid-three-quarters', + image=picture( + url="img/m24/todo-27-1.svg", + optional_attributes={ + "loading": "lazy", + "alt": "", + "width": "1440", + "height": "533", + } + ), + title='14 AI projects to watch: Mozilla’s first Builders Accelerator cohort kicks off', + link_url='#', + cta_text='Read more' + ) }} +
+
+ {{ gallery_tile( + class='m24-l-grid-third', + image=picture( + url="img/mozorg/about/m24/rise25-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/mozorg/about/m24/rise25-mobile.jpg": "318w", + "img/mozorg/about/m24/rise25-mobile-high-res.jpg": "634w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + } + }, + { + 'srcset': { + 'img/mozorg/about/m24/news-rise25-4-5.png': '564w', + 'img/mozorg/about/m24/news-rise25-4-5-high-res.png': '1128w' + }, + 'sizes': { + "(min-width: 1440px)": "448px", + "default": "calc(33vw - 32px)", + } + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + title='At our Rise25 Awards, the future of AI is trustworthy, inclusive and accountable', + link_url='#', + cta_text='Read more' + ) }} + + {{ gallery_tile( + class='m24-l-grid-quarter', + image=picture( + url="img/mozorg/about/m24/chicago-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/mozorg/about/m24/chicago-mobile.jpg": "318w", + "img/mozorg/about/m24/chicago-mobile-high-res.jpg": "634w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + }, + }, + { + 'srcset': { + 'img/mozorg/about/m24/news-chicago.png': '332w', + 'img/mozorg/about/m24/news-chicago-high-res.png': '664w' + }, + 'sizes': { + "(min-width: 1440px)": "448px", + "default": "calc(25vw - 32px)", + }, + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + title='Empowering Chicago’s entrepreneurs for generational change', + link_url='#', + cta_text='Read more' + ) }} + +
+
diff --git a/bedrock/mozorg/templates/mozorg/about/index-m24.html b/bedrock/mozorg/templates/mozorg/about/index-m24.html index baacf48f415..13c442a455e 100644 --- a/bedrock/mozorg/templates/mozorg/about/index-m24.html +++ b/bedrock/mozorg/templates/mozorg/about/index-m24.html @@ -24,7 +24,7 @@
{% include 'mozorg/about/includes/m24/intro.html'%} {% include 'mozorg/about/includes/m24/manifesto.html'%} - {% include 'mozorg/about/includes/m24/amplify.html'%} + {% include 'mozorg/about/includes/m24/news.html'%} {% include 'mozorg/about/includes/m24/impact.html'%} {% include 'mozorg/about/includes/m24/careers.html'%} {% include 'mozorg/about/includes/m24/community.html'%} diff --git a/bedrock/mozorg/templates/mozorg/home/home-m24.html b/bedrock/mozorg/templates/mozorg/home/home-m24.html index 84d3b5b02f9..d5eecaac2bd 100644 --- a/bedrock/mozorg/templates/mozorg/home/home-m24.html +++ b/bedrock/mozorg/templates/mozorg/home/home-m24.html @@ -40,10 +40,10 @@ {% include 'mozorg/home/includes/m24/hero.html'%} {% include 'mozorg/home/includes/m24/products.html'%} {% include 'mozorg/home/includes/m24/donate.html'%} - {% include 'mozorg/home/includes/m24/ai-grid.html'%} + {% include 'mozorg/home/includes/m24/ai-gallery.html'%} {% include 'mozorg/home/includes/m24/media-springboard.html'%} {% include 'mozorg/home/includes/m24/showcase.html'%} - {% include 'mozorg/home/includes/m24/resources-grid.html'%} + {% include 'mozorg/home/includes/m24/resources-gallery.html'%}
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-gallery.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-gallery.html new file mode 100644 index 00000000000..f1c089a60db --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-gallery.html @@ -0,0 +1,270 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{% from "macros-m24.html" import gallery_tile with context %} + +
+
+
+

Join the movement:
AI for the people

+

Our mission is to make it easy to build with and collaborate on open-source, trustworthy AI.

+
+ + + +
+ + {{ gallery_tile( + class='m24-l-grid-half', + image=picture( + url="img/home/2024/ai-gallery/llama-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/home/2024/ai-gallery/llama-mobile.jpg": "316w", + "img/home/2024/ai-gallery/llama-mobile-high-res.jpg": "632w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + }, + }, + { + 'srcset': { + "img/home/2024/ai-gallery/llama-desktop.jpg": "680w", + "img/home/2024/ai-gallery/llama-desktop-high-res.jpg": "1360w", + }, + 'sizes': { + "(min-width: 1440px)": "680px", + "default": "calc(100vw - 64px)" + }, + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + tag='Product', + tag_icon='product', + title='Llamafile', + desc='Run large language models (LLMs) easily on your computer with llamafile — no installation needed, and your data stays safe on your device.', + link_url='https://github.com/Mozilla-Ocho/llamafile', + cta_text='Get started', + link_attributes='data-cta-text="Get started (Llamafile)"' + ) }} + + {{ gallery_tile( + class='m24-l-grid-quarter', + image=picture( + url="img/home/2024/ai-gallery/builders-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/home/2024/ai-gallery/builders-mobile.jpg": "318w", + "img/home/2024/ai-gallery/builders-mobile-high-res.jpg": "634w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + }, + }, + { + 'srcset': { + "img/home/2024/ai-gallery/builders-desktop.jpg": "334w", + "img/home/2024/ai-gallery/builders-desktop-high-res.jpg": "666w", + }, + 'sizes': { + "(min-width: 1440px)": "337px", + "default": "calc(25vw - 64px)", + }, + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + tag='Program', + tag_icon='program', + title='Mozilla Builders', + desc='Turn your AI idea into reality with our 12-week accelerator. Get funding, mentorship and a chance to pitch your innovation to investors', + link_url='https://future.mozilla.org/builders/builders_overview/', + cta_text='Read more', + link_attributes='data-cta-text="Read more (Builders)"' + ) }} + + {{ gallery_tile( + class='m24-l-grid-quarter', + image=picture( + url="img/home/2024/ai-gallery/trustworthy-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/home/2024/ai-gallery/trustworthy-mobile.jpg": "318w", + "img/home/2024/ai-gallery/trustworthy-mobile-high-res.jpg": "634w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + }, + }, + { + 'srcset': { + "img/home/2024/ai-gallery/trustworthy-desktop.jpg": "334w", + "img/home/2024/ai-gallery/trustworthy-desktop-high-res.jpg": "666w", + }, + 'sizes': { + "(min-width: 1440px)": "337px", + "default": "calc(25vw - 64px)", + }, + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + tag='Event', + tag_icon='event', + title='Can AI be trustworthy?', + desc='In a world where AI innovation is driven by a select few, we’re risking monopolization of this technology. Applying open-source concepts to AI could change that.', + link_url='https://www.youtube.com/watch?v=GOhibTSUTO0', + cta_text='Watch now', + link_attributes='data-cta-text="Watch now (Trustworthy AI)"' + ) }} + + {{ gallery_tile( + class='m24-l-grid-quarter', + image=picture( + url="img/home/2024/ai-gallery/voice-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/home/2024/ai-gallery/voice-mobile.jpg": "318w", + "img/home/2024/ai-gallery/voice-mobile-high-res.jpg": "634w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + }, + }, + { + 'srcset': { + "img/home/2024/ai-gallery/voice-desktop.jpg": "334w", + "img/home/2024/ai-gallery/voice-desktop-high-res.jpg": "666w", + }, + 'sizes': { + "(min-width: 1440px)": "337px", + "default": "calc(25vw - 64px)", + }, + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + tag='Product', + tag_icon='product', + title='Common Voice', + desc='Donate your voice to help make speech technology more inclusive and accessible for everyone.', + link_url='https://commonvoice.mozilla.org', + cta_text='Donate your voice', + link_attributes='data-cta-text="Donate your voice"' + ) }} + + {{ gallery_tile( + class='m24-l-grid-half', + image=picture( + url="img/home/2024/ai-gallery/ventures-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/home/2024/ai-gallery/ventures-mobile.jpg": "316w", + "img/home/2024/ai-gallery/ventures-mobile-high-res.jpg": "632w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + }, + }, + { + 'srcset': { + "img/home/2024/ai-gallery/ventures-desktop.jpg": "680w", + "img/home/2024/ai-gallery/ventures-desktop-high-res.jpg": "1360w", + }, + 'sizes': { + "(min-width: 1440px)": "680px", + "default": "calc(100vw - 64px)" + }, + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + tag='Program', + tag_icon='program', + title='Mozilla Ventures', + desc='Got an early-stage startup? Pitch your company to Mozilla Ventures and secure funding to drive positive change for the future of AI and the internet.', + link_url='https://mozilla.vc/', + cta_text='Read more', + link_attributes='data-cta-text="Read more (Ventures)"' + ) }} + + {{ gallery_tile( + class='m24-l-grid-quarter', + image=picture( + url="img/home/2024/ai-gallery/gator-mobile.jpg", + sources=[ + { + 'media': '(max-width: 1311px)', + 'srcset': { + "img/home/2024/ai-gallery/gator-mobile.jpg": "318w", + "img/home/2024/ai-gallery/gator-mobile-high-res.jpg": "634w", + }, + 'sizes': { + "(min-width: 768px)": "calc(50vw - 32px)", + "default": "calc(100vw - 32px)", + }, + }, + { + 'srcset': { + "img/home/2024/ai-gallery/gator-desktop.jpg": "334w", + "img/home/2024/ai-gallery/gator-desktop-high-res.jpg": "666w", + }, + 'sizes': { + "(min-width: 1440px)": "337px", + "default": "calc(25vw - 64px)", + }, + }, + ], + optional_attributes={ + "loading": "lazy", + "alt": "", + } + ), + tag='Product', + tag_icon='product', + title='Lumigator', + desc='Find the “just right” LLM for your needs, use case and data — like Goldilocks, but with sharper teeth.', + link_url='https://blog.mozilla.ai/introducing-lumigator-2/', + cta_text='Get started', + link_attributes='data-cta-text="Get started (Lumigator)"' + ) }} + +
+ +

Explore Mozilla AI

+
+
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html deleted file mode 100644 index 593f37be235..00000000000 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html +++ /dev/null @@ -1,96 +0,0 @@ -{# - This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at https://mozilla.org/MPL/2.0/. -#} - -{% from "macros-m24.html" import grid_tile with context %} - -
-
-
-

Join the movement:
AI for the people

-

Our mission is to make it easy for people to build with and collaborate on open-source, trustworthy AI.

-
- -
- {{ grid_tile( - class='m24-l-grid-half', - image=resp_img( - url="img/m24/todo-3-2.svg", - optional_attributes={ - "loading": "lazy", - "alt": "", - "width": "900", - "height": "600", - } - ), - title='Llamafile', - desc='Run large language models (LLMs) easily on your computer Llamafile – no installation needed, and your data stays safe on your device.', - link_url='#', - cta_text='Visit', - ) }} - - {{ grid_tile( - class='m24-l-grid-half', - image=resp_img( - url="img/m24/todo-3-2.svg", - optional_attributes={ - "loading": "lazy", - "alt": "", - "width": "900", - "height": "600", - } - ), - title='Lumigator', - desc='Find the “just right” LLM for your needs, use case, and data – like Goldilocks, but with sharper teeth.', - link_url='#', - cta_text='Visit', - ) }} - - {{ grid_tile( - class='m24-l-grid-third', - image=resp_img( - url="img/m24/todo-1-1.svg", - optional_attributes={ - "loading": "lazy", - "alt": "" - } - ), - title='Data Futures Lab', - link_url='#', - cta_text='Visit', - ) }} - - {{ grid_tile( - class='m24-l-grid-third', - image=resp_img( - url="img/m24/todo-5-4.svg", - optional_attributes={ - "loading": "lazy", - "alt": "" - } - ), - title='Trustworthy AI Fellow', - link_url='#', - cta_text='Visit', - ) }} - - {{ grid_tile( - class='m24-l-grid-third', - image=resp_img( - url="img/m24/todo-5-7.svg", - optional_attributes={ - "loading": "lazy", - "alt": "" - } - ), - title='Mozilla Builders', - link_url='#', - cta_text='Visit', - ) }} -
- -

Explore Mozilla AI

-
-
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/resources-grid.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/resources-gallery.html similarity index 94% rename from bedrock/mozorg/templates/mozorg/home/includes/m24/resources-grid.html rename to bedrock/mozorg/templates/mozorg/home/includes/m24/resources-gallery.html index a72fa2503c2..2d8980e9080 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/resources-grid.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/resources-gallery.html @@ -4,14 +4,15 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from "macros-m24.html" import grid_tile with context %} +{% from "macros-m24.html" import gallery_tile with context %}

Explore issues shaping the future of the internet

- {{ grid_tile( + + {{ gallery_tile( class='m24-l-grid-half', image=resp_img( url="img/home/2024/pni.jpg", @@ -32,7 +33,7 @@

Explore issues shaping the future of the internet< link_attributes='rel="external" target="_blank" data-link-type="link" data-link-text="Search now"', ) }} - {{ grid_tile( + {{ gallery_tile( class='m24-l-grid-half', image=resp_img( url="img/home/2024/irl-podcast.jpg", @@ -52,5 +53,6 @@

Explore issues shaping the future of the internet< cta_text='Listen', link_attributes='rel="external" data-link-type="link" data-link-text="Listen"', ) }} +

diff --git a/media/css/m24/gallery.scss b/media/css/m24/gallery.scss index 8c99303399d..a40fa4695c1 100644 --- a/media/css/m24/gallery.scss +++ b/media/css/m24/gallery.scss @@ -5,14 +5,16 @@ @use 'vars/lib' as *; .m24-c-gallery-container { + display: grid; + gap: $spacer-xl $grid-gutter; + grid-template-columns: repeat(1, 1fr); + margin-top: $spacer-xl; + @media #{$mq-md} { - gap: $spacer-xl $grid-gutter; - display: grid; grid-template-columns: repeat(2, 1fr); - margin-top: $spacer-xl; } - @media #{$mq-lg} { + @media #{$mq-xl} { grid-template-columns: repeat(12, 1fr); } @@ -22,32 +24,12 @@ } .m24-c-gallery-tile { - margin-bottom: $spacer-xl; - - .m24-c-gallery-tile-content > :last-child { - margin-bottom: 0; - } - - .m24-c-gallery-tile-image { - margin-bottom: $spacer-sm; - } - - .m24-c-gallery-tile-title { - font-size: $text-title-md; - text-decoration: underline 0.075em transparent; - transition: text-decoration-color 150ms ease-in-out, color 150ms ease-in-out; - } - - .m24-c-gallery-tile-cta > span { - font-size: $text-body-lg; - font-weight: bold; - text-decoration: underline 0.075em transparent; - transition: text-decoration-color 150ms ease-in-out, color 150ms ease-in-out; - } + display: flex; + flex-direction: column; + position: relative; - @media #{$mq-lg} { + @media #{$mq-xl} { grid-column: auto / span 3; - margin-bottom: 0; &.m24-l-grid-third { grid-column: auto / span 4; @@ -61,40 +43,110 @@ grid-column: auto / span 8; } - // Add the `.m24-l-grid-pair` class to the grid container for - // a minimal grid of two spaced out tiles. - .m24-l-grid-pair & { - &:nth-child(odd) { - grid-column: 2/6; - } - - &:nth-child(even) { - grid-column: 8/-2; - } + &.m24-l-grid-three-quarters { + grid-column: 4 / span 9; } } } +.m24-c-gallery-tile-title { + font-size: $text-title-md; + order: 2; + text-decoration: underline 0.075em transparent; + transition: text-decoration-color $fast $bezier, color $fast $bezier; +} + .m24-c-gallery-tile-link { text-decoration: none; color: inherit; - .m24-c-gallery-tile-image > * { - outline: $border-width solid transparent; - transition: outline-color 150ms ease-in-out; + span { + display: block; } &:hover, &:focus, &:active { - .m24-c-gallery-tile-image > * { - outline-color: $m24-color-dark-green; - } + color: $m24-color-dark-green; + text-decoration: underline; + } - .m24-c-gallery-tile-title, - .m24-c-gallery-tile-cta > span { - text-decoration-color: $m24-color-dark-green; - color: $m24-color-dark-green; - } + &[href]::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} + +.m24-c-gallery-tile-image { + margin-bottom: 16px; + order: 1; + + img { + display: block; + } +} + +.m24-c-gallery-tile-image-desktop { + display: none; + + @media #{$mq-xl} { + display: block; + } +} + +.m24-c-gallery-tile-image-mobile { + @media #{$mq-xl} { + display: none; + } +} + +.m24-c-gallery-tile-tag { + align-items: center; + background-color: $m24-color-white; + color: $m24-color-black; + display: flex; + font-size: 14px; // fixed size + font-weight: bold; + height: 32px; + order: 3; + padding: 0 8px; + + .m24-c-gallery-tile-image + & { + left: 8px; + position: absolute; + top: 8px; + } +} + +.m24-c-gallery-tile-content { + font-size: $text-body-sm; + order: 4; +} + +.m24-c-gallery-tile-desc { + margin-bottom: 4px; +} + +.m24-c-gallery-tile-cta { + display: none; +} + +.m24-c-gallery-tile-cta > span { + align-items: center; + display: flex; + font-size: $text-button-sm; + font-weight: bold; + min-height: 48px; + text-decoration: underline; +} + +@media #{$mq-lg} { + .m24-c-gallery-tile-cta { + display: block; } } diff --git a/media/img/home/2024/ai-gallery/builders-desktop-high-res.jpg b/media/img/home/2024/ai-gallery/builders-desktop-high-res.jpg new file mode 100644 index 00000000000..e54b887d2b9 Binary files /dev/null and b/media/img/home/2024/ai-gallery/builders-desktop-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/builders-desktop.jpg b/media/img/home/2024/ai-gallery/builders-desktop.jpg new file mode 100644 index 00000000000..00e2396543d Binary files /dev/null and b/media/img/home/2024/ai-gallery/builders-desktop.jpg differ diff --git a/media/img/home/2024/ai-gallery/builders-mobile-high-res.jpg b/media/img/home/2024/ai-gallery/builders-mobile-high-res.jpg new file mode 100644 index 00000000000..ad9c30f8b22 Binary files /dev/null and b/media/img/home/2024/ai-gallery/builders-mobile-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/builders-mobile.jpg b/media/img/home/2024/ai-gallery/builders-mobile.jpg new file mode 100644 index 00000000000..762013f77c1 Binary files /dev/null and b/media/img/home/2024/ai-gallery/builders-mobile.jpg differ diff --git a/media/img/home/2024/ai-gallery/gator-desktop-high-res.jpg b/media/img/home/2024/ai-gallery/gator-desktop-high-res.jpg new file mode 100644 index 00000000000..f0baef04c34 Binary files /dev/null and b/media/img/home/2024/ai-gallery/gator-desktop-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/gator-desktop.jpg b/media/img/home/2024/ai-gallery/gator-desktop.jpg new file mode 100644 index 00000000000..48568f8a7f2 Binary files /dev/null and b/media/img/home/2024/ai-gallery/gator-desktop.jpg differ diff --git a/media/img/home/2024/ai-gallery/gator-mobile-high-res.jpg b/media/img/home/2024/ai-gallery/gator-mobile-high-res.jpg new file mode 100644 index 00000000000..f4b3a759f6d Binary files /dev/null and b/media/img/home/2024/ai-gallery/gator-mobile-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/gator-mobile.jpg b/media/img/home/2024/ai-gallery/gator-mobile.jpg new file mode 100644 index 00000000000..c20153e17d5 Binary files /dev/null and b/media/img/home/2024/ai-gallery/gator-mobile.jpg differ diff --git a/media/img/home/2024/ai-gallery/llama-desktop-high-res.jpg b/media/img/home/2024/ai-gallery/llama-desktop-high-res.jpg new file mode 100644 index 00000000000..6d0dce4b29b Binary files /dev/null and b/media/img/home/2024/ai-gallery/llama-desktop-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/llama-desktop.jpg b/media/img/home/2024/ai-gallery/llama-desktop.jpg new file mode 100644 index 00000000000..9021f3ab784 Binary files /dev/null and b/media/img/home/2024/ai-gallery/llama-desktop.jpg differ diff --git a/media/img/home/2024/ai-gallery/llama-mobile-high-res.jpg b/media/img/home/2024/ai-gallery/llama-mobile-high-res.jpg new file mode 100644 index 00000000000..7355726200f Binary files /dev/null and b/media/img/home/2024/ai-gallery/llama-mobile-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/llama-mobile.jpg b/media/img/home/2024/ai-gallery/llama-mobile.jpg new file mode 100644 index 00000000000..f9b2616e1ff Binary files /dev/null and b/media/img/home/2024/ai-gallery/llama-mobile.jpg differ diff --git a/media/img/home/2024/ai-gallery/trustworthy-desktop-high-res.jpg b/media/img/home/2024/ai-gallery/trustworthy-desktop-high-res.jpg new file mode 100644 index 00000000000..900e29cfd5e Binary files /dev/null and b/media/img/home/2024/ai-gallery/trustworthy-desktop-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/trustworthy-desktop.jpg b/media/img/home/2024/ai-gallery/trustworthy-desktop.jpg new file mode 100644 index 00000000000..2a5e4538a81 Binary files /dev/null and b/media/img/home/2024/ai-gallery/trustworthy-desktop.jpg differ diff --git a/media/img/home/2024/ai-gallery/trustworthy-mobile-high-res.jpg b/media/img/home/2024/ai-gallery/trustworthy-mobile-high-res.jpg new file mode 100644 index 00000000000..0daabf6287a Binary files /dev/null and b/media/img/home/2024/ai-gallery/trustworthy-mobile-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/trustworthy-mobile.jpg b/media/img/home/2024/ai-gallery/trustworthy-mobile.jpg new file mode 100644 index 00000000000..18534d81bb1 Binary files /dev/null and b/media/img/home/2024/ai-gallery/trustworthy-mobile.jpg differ diff --git a/media/img/home/2024/ai-gallery/ventures-desktop-high-res.jpg b/media/img/home/2024/ai-gallery/ventures-desktop-high-res.jpg new file mode 100644 index 00000000000..ceb6ffcf1da Binary files /dev/null and b/media/img/home/2024/ai-gallery/ventures-desktop-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/ventures-desktop.jpg b/media/img/home/2024/ai-gallery/ventures-desktop.jpg new file mode 100644 index 00000000000..c9764cb0ac0 Binary files /dev/null and b/media/img/home/2024/ai-gallery/ventures-desktop.jpg differ diff --git a/media/img/home/2024/ai-gallery/ventures-mobile-high-res.jpg b/media/img/home/2024/ai-gallery/ventures-mobile-high-res.jpg new file mode 100644 index 00000000000..276dae4b8ee Binary files /dev/null and b/media/img/home/2024/ai-gallery/ventures-mobile-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/ventures-mobile.jpg b/media/img/home/2024/ai-gallery/ventures-mobile.jpg new file mode 100644 index 00000000000..97ddd320ee1 Binary files /dev/null and b/media/img/home/2024/ai-gallery/ventures-mobile.jpg differ diff --git a/media/img/home/2024/ai-gallery/voice-desktop-high-res.jpg b/media/img/home/2024/ai-gallery/voice-desktop-high-res.jpg new file mode 100644 index 00000000000..147114a2e0b Binary files /dev/null and b/media/img/home/2024/ai-gallery/voice-desktop-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/voice-desktop.jpg b/media/img/home/2024/ai-gallery/voice-desktop.jpg new file mode 100644 index 00000000000..67b78fda329 Binary files /dev/null and b/media/img/home/2024/ai-gallery/voice-desktop.jpg differ diff --git a/media/img/home/2024/ai-gallery/voice-mobile-high-res.jpg b/media/img/home/2024/ai-gallery/voice-mobile-high-res.jpg new file mode 100644 index 00000000000..2e11a22442b Binary files /dev/null and b/media/img/home/2024/ai-gallery/voice-mobile-high-res.jpg differ diff --git a/media/img/home/2024/ai-gallery/voice-mobile.jpg b/media/img/home/2024/ai-gallery/voice-mobile.jpg new file mode 100644 index 00000000000..05f4eec0d8d Binary files /dev/null and b/media/img/home/2024/ai-gallery/voice-mobile.jpg differ diff --git a/media/img/icons/m24-small/bell-white.svg b/media/img/icons/m24-small/bell-white.svg new file mode 100644 index 00000000000..866c11a3f51 --- /dev/null +++ b/media/img/icons/m24-small/bell-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/bell.svg b/media/img/icons/m24-small/bell.svg new file mode 100644 index 00000000000..5e35d38e723 --- /dev/null +++ b/media/img/icons/m24-small/bell.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/cursor-white.svg b/media/img/icons/m24-small/cursor-white.svg new file mode 100644 index 00000000000..56f433584d6 --- /dev/null +++ b/media/img/icons/m24-small/cursor-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/cursor.svg b/media/img/icons/m24-small/cursor.svg new file mode 100644 index 00000000000..6fc708e3254 --- /dev/null +++ b/media/img/icons/m24-small/cursor.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/curve-arrow1-white.svg b/media/img/icons/m24-small/curve-arrow1-white.svg new file mode 100644 index 00000000000..dcf0b9c34d0 --- /dev/null +++ b/media/img/icons/m24-small/curve-arrow1-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/curve-arrow1.svg b/media/img/icons/m24-small/curve-arrow1.svg new file mode 100644 index 00000000000..0c05c037283 --- /dev/null +++ b/media/img/icons/m24-small/curve-arrow1.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/curve-arrow2-white.svg b/media/img/icons/m24-small/curve-arrow2-white.svg new file mode 100644 index 00000000000..aeb9dc40485 --- /dev/null +++ b/media/img/icons/m24-small/curve-arrow2-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/curve-arrow2.svg b/media/img/icons/m24-small/curve-arrow2.svg new file mode 100644 index 00000000000..e8850253309 --- /dev/null +++ b/media/img/icons/m24-small/curve-arrow2.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/dollar-white.svg b/media/img/icons/m24-small/dollar-white.svg new file mode 100644 index 00000000000..2469af4d332 --- /dev/null +++ b/media/img/icons/m24-small/dollar-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/dollar.svg b/media/img/icons/m24-small/dollar.svg new file mode 100644 index 00000000000..ade1a5d2e36 --- /dev/null +++ b/media/img/icons/m24-small/dollar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/down-arrow-white.svg b/media/img/icons/m24-small/down-arrow-white.svg new file mode 100644 index 00000000000..51e993d42d3 --- /dev/null +++ b/media/img/icons/m24-small/down-arrow-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/down-arrow.svg b/media/img/icons/m24-small/down-arrow.svg new file mode 100644 index 00000000000..9eac6689637 --- /dev/null +++ b/media/img/icons/m24-small/down-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/footprint-white.svg b/media/img/icons/m24-small/footprint-white.svg new file mode 100644 index 00000000000..50a67159c18 --- /dev/null +++ b/media/img/icons/m24-small/footprint-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/footprint.svg b/media/img/icons/m24-small/footprint.svg new file mode 100644 index 00000000000..30d7ffe51bc --- /dev/null +++ b/media/img/icons/m24-small/footprint.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/globe-white.svg b/media/img/icons/m24-small/globe-white.svg new file mode 100644 index 00000000000..5bbd9275310 --- /dev/null +++ b/media/img/icons/m24-small/globe-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/globe.svg b/media/img/icons/m24-small/globe.svg new file mode 100644 index 00000000000..1e0a3209312 --- /dev/null +++ b/media/img/icons/m24-small/globe.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/heart-white.svg b/media/img/icons/m24-small/heart-white.svg new file mode 100644 index 00000000000..dfc7eac7275 --- /dev/null +++ b/media/img/icons/m24-small/heart-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/heart.svg b/media/img/icons/m24-small/heart.svg new file mode 100644 index 00000000000..4d3d66168d3 --- /dev/null +++ b/media/img/icons/m24-small/heart.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/home-white.svg b/media/img/icons/m24-small/home-white.svg new file mode 100644 index 00000000000..506b282a2af --- /dev/null +++ b/media/img/icons/m24-small/home-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/home.svg b/media/img/icons/m24-small/home.svg new file mode 100644 index 00000000000..c418810a278 --- /dev/null +++ b/media/img/icons/m24-small/home.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/left-arrow-white.svg b/media/img/icons/m24-small/left-arrow-white.svg new file mode 100644 index 00000000000..01d70106184 --- /dev/null +++ b/media/img/icons/m24-small/left-arrow-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/left-arrow.svg b/media/img/icons/m24-small/left-arrow.svg new file mode 100644 index 00000000000..dcf7e07c5f9 --- /dev/null +++ b/media/img/icons/m24-small/left-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/lock-white.svg b/media/img/icons/m24-small/lock-white.svg new file mode 100644 index 00000000000..ac9febab1e3 --- /dev/null +++ b/media/img/icons/m24-small/lock-white.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/media/img/icons/m24-small/lock.svg b/media/img/icons/m24-small/lock.svg new file mode 100644 index 00000000000..efbea814667 --- /dev/null +++ b/media/img/icons/m24-small/lock.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/media/img/icons/m24-small/pencil-white.svg b/media/img/icons/m24-small/pencil-white.svg new file mode 100644 index 00000000000..653eb831714 --- /dev/null +++ b/media/img/icons/m24-small/pencil-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/pencil.svg b/media/img/icons/m24-small/pencil.svg new file mode 100644 index 00000000000..318579a37c5 --- /dev/null +++ b/media/img/icons/m24-small/pencil.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/pizza-white.svg b/media/img/icons/m24-small/pizza-white.svg new file mode 100644 index 00000000000..0df37893192 --- /dev/null +++ b/media/img/icons/m24-small/pizza-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/pizza.svg b/media/img/icons/m24-small/pizza.svg new file mode 100644 index 00000000000..0812c13a20b --- /dev/null +++ b/media/img/icons/m24-small/pizza.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/protocol.svg b/media/img/icons/m24-small/protocol.svg new file mode 100644 index 00000000000..c05ea7582c4 --- /dev/null +++ b/media/img/icons/m24-small/protocol.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/protocolwhite.svg b/media/img/icons/m24-small/protocolwhite.svg new file mode 100644 index 00000000000..81f896e6daf --- /dev/null +++ b/media/img/icons/m24-small/protocolwhite.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/quotation-marks-white.svg b/media/img/icons/m24-small/quotation-marks-white.svg new file mode 100644 index 00000000000..35f5f21882a --- /dev/null +++ b/media/img/icons/m24-small/quotation-marks-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/quotation-marks.svg b/media/img/icons/m24-small/quotation-marks.svg new file mode 100644 index 00000000000..88c60a29fc9 --- /dev/null +++ b/media/img/icons/m24-small/quotation-marks.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/media/img/icons/m24-small/right-arrow-white.svg b/media/img/icons/m24-small/right-arrow-white.svg new file mode 100644 index 00000000000..49a12294430 --- /dev/null +++ b/media/img/icons/m24-small/right-arrow-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/right-arrow.svg b/media/img/icons/m24-small/right-arrow.svg new file mode 100644 index 00000000000..cece67b6bd4 --- /dev/null +++ b/media/img/icons/m24-small/right-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/shield-white.svg b/media/img/icons/m24-small/shield-white.svg new file mode 100644 index 00000000000..da5588731a6 --- /dev/null +++ b/media/img/icons/m24-small/shield-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/shield.svg b/media/img/icons/m24-small/shield.svg new file mode 100644 index 00000000000..e221e85c55d --- /dev/null +++ b/media/img/icons/m24-small/shield.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/speech-bubble-white.svg b/media/img/icons/m24-small/speech-bubble-white.svg new file mode 100644 index 00000000000..79b4cfa914d --- /dev/null +++ b/media/img/icons/m24-small/speech-bubble-white.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/media/img/icons/m24-small/speech-bubble.svg b/media/img/icons/m24-small/speech-bubble.svg new file mode 100644 index 00000000000..cecc1f55474 --- /dev/null +++ b/media/img/icons/m24-small/speech-bubble.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/media/img/icons/m24-small/up-arrow-white.svg b/media/img/icons/m24-small/up-arrow-white.svg new file mode 100644 index 00000000000..91d94d1b129 --- /dev/null +++ b/media/img/icons/m24-small/up-arrow-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/icons/m24-small/up-arrow.svg b/media/img/icons/m24-small/up-arrow.svg new file mode 100644 index 00000000000..5b137d0b04c --- /dev/null +++ b/media/img/icons/m24-small/up-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/mozorg/about/m24/chicago-mobile-high-res.jpg b/media/img/mozorg/about/m24/chicago-mobile-high-res.jpg new file mode 100644 index 00000000000..4872bf65cb9 Binary files /dev/null and b/media/img/mozorg/about/m24/chicago-mobile-high-res.jpg differ diff --git a/media/img/mozorg/about/m24/chicago-mobile.jpg b/media/img/mozorg/about/m24/chicago-mobile.jpg new file mode 100644 index 00000000000..18741b5edb0 Binary files /dev/null and b/media/img/mozorg/about/m24/chicago-mobile.jpg differ diff --git a/media/img/mozorg/about/m24/rise25-mobile-high-res.jpg b/media/img/mozorg/about/m24/rise25-mobile-high-res.jpg new file mode 100644 index 00000000000..74d3523b2e9 Binary files /dev/null and b/media/img/mozorg/about/m24/rise25-mobile-high-res.jpg differ diff --git a/media/img/mozorg/about/m24/rise25-mobile.jpg b/media/img/mozorg/about/m24/rise25-mobile.jpg new file mode 100644 index 00000000000..fdd6e9af95d Binary files /dev/null and b/media/img/mozorg/about/m24/rise25-mobile.jpg differ