jekyll-theme-profile 1.12.5 → 1.13.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4d01be2e0ffa77162cec3390d07e694a86558e8aa3a32fb76bceabf61b72dbd2
-  data.tar.gz: 969ada5c1e521902c3c6fd8e2b09754a92847d743384842bd1c2818a018f4d0b
+  metadata.gz: afcd53f8abaadd8c6e526c6a7afad3da4ef6f5478538d8e89a6a964cd3631eb5
+  data.tar.gz: 2bef80c5073cca0a970cb784b76482bd19cfd1c9a513e3d1d314e059ecb27f20
 SHA512:
-  metadata.gz: 9b32f779f85828007a691eef91009d1ba85b58dfbe3a17778c3bf2734d7d0b81546072835fa9fb7707b8a615835ab3466986aa34b7455d25c415ab63184cc246
-  data.tar.gz: 3e597175049254b21b61724c6aabc51a41b35e509b906f87ed305ec56b8b85323bcb29176db06a30c515b8afb8b04a1444a119731b92d35ff0f7d9c936cf2f36
+  metadata.gz: b6705ac78bc0868eaf3684f3ae576f437f4ca2c30a53d06085ca8229e307a8255593480635e73b729db75e8ad9293dbe97e0b7a5a1737ab57b541bf55fec8a7a
+  data.tar.gz: 1e4e2a51a74ec50e803b625f5b78870da9d5520694b1d965f9615b9fb5a1c798296d6a0df10bee88c28a265ccf271e77751646b32f2642ad930f3ea0f19a6cf8

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Allison Thackston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/_config.yml

@@ -3,7 +3,7 @@ theme: jekyll-theme-profile
 title: Jekyll Theme Profile
 description: Theme built with jekyll-theme-profile
 # image: /assets/img/social-preview.png
-# repository: athackst/jekyll-theme-profile
+repository: PrimerPages/jekyll-theme-profile
 
 defaults:
   - scope:
@@ -96,10 +96,11 @@ related_by: "tags or categories"
 
 # ########### Plugin settings ###############
 plugins:
-  - jekyll-github-metadata
-  - jekyll-octicons
+  # - jekyll-github-metadata
+  # - jekyll-meta
+  # - jekyll-octicons
   - jekyll-seo-tag
-  - jekyll-toc
+  # - jekyll-toc
   - jemoji
 
 ####################
@@ -130,3 +131,4 @@ exclude:
   - Gemfile.lock
   - node_modules
   - vendor/
+  - integration/

data/_includes/breadcrumbs.html

@@ -11,6 +11,9 @@
             </li>
             {%- continue %}
             {%- endif %}
+            {%- if crumb == crumbs.last %}
+            {%- continue %}
+            {%- endif %}
             {%- assign index_url = url | append: crumb | append: "/index.html" %}
             {%- assign isa_index = site.pages | where: "url", index_url | first %}
             {%- assign folder_url = url | append: crumb | append: "/" %}
@@ -52,7 +55,7 @@
                 {{ nice_crumb }}
             </li>
             {%- endif %}
-            {%- unless crumb == crumbs.last %}{%- assign url = url | append: "/" %}{%- endunless %}
+            {%- assign url = url | append: "/" %}
             {%- endfor %}
         </ol>
     </nav>

data/_includes/category_index.html

@@ -0,0 +1,18 @@
+{% comment %}
+Required:
+- category (String)
+- pages (Array of documents)
+=====================================
+{% endcomment %}
+{%- assign entries = include.pages %}
+{%- assign category = include.category %}
+<div class="d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4">
+  <h3 class="h3">{{ category | capitalize }}</h3>
+  <div class="pt-2 mb-4 text-normal">
+    <ul class="list-style-none pl-0">
+      {% for entry in entries %}
+          <li><a class="pt-2" href="{{ entry.url | relative_url }}">{{ entry.title }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>

data/_includes/collection-menu.html

@@ -57,7 +57,7 @@
                 </div>
                 <div class="d-flex flex-justify-end">
                     <button class="SelectMenu-closeButton close-menu" type="button">
-                        {% octicon x height: 16 %}
+                        <span class="octicon octicon-x-16"></span>
                     </button>
                 </div>
             </div>

data/_includes/custom-colors.html

@@ -23,7 +23,7 @@ body {
     --overlay-color: {{ dark_overlay }};
 }
 @media(prefers-color-scheme: dark) {
-[data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
+[data-color-mode='auto'] {
     --overlay-color: {{ dark_overlay }};
 }
 }
@@ -35,7 +35,7 @@ body {
 }
 
 @media(prefers-color-scheme: light) {
-[data-color-mode='auto'][data-light-theme='light'] {
+[data-color-mode='auto'] {
     --overlay-color: {{ light_overlay }};
 }
 }

data/_includes/footer.html

@@ -6,7 +6,7 @@
             {%- endif %}
             <div class="flex-1"></div>
             <div class="flex-0 mx-auto px-4">
-                <div>Made with <a href="https://www.althack.dev/jekyll-theme-profile/">jekyll theme profile</a></div>
+                <div>Made with <a href="https://primerpages.github.io/jekyll-theme-profile/">jekyll theme profile</a></div>
             </div>
         </div>
    </div>

data/_includes/head.html

@@ -7,7 +7,9 @@
   {% seo %}
 
   <link href="{{ '/assets/css/theme.css' | relative_url }}" rel="stylesheet" type="text/css">
-  <link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet" type="text/css">
+  {% if site.css %}<link href="{{ site.css }}" rel="stylesheet" type="text/css">
+  {% else %}<link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet" type="text/css">
+  {% endif %}
   <link rel="icon" type="image/x-icon" href="{{ favicon | relative_url}}">
 
 
@@ -26,7 +28,7 @@
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script>
   <script src="{{ '/assets/js/anchor-links.js' | relative_url }}"></script>
-  <script src="{{ '/assets/js/timeline.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/topbar.js' | relative_url }}"></script>
 
   {%- include custom-colors.html %}
 

data/_includes/header-appbar.html

@@ -10,14 +10,14 @@
         </div>
         {%- endif %}
         <div tabindex="-1" class="d-flex flex-1 ml-3" id="github-logo">
-            <a href="{{ site.baseurl }}/" class="AppHeader-link d-flex flex-items-center no-underline mr-3">
-                {% octicon mark-github height:32 %}
+            <a href="{{ site.baseurl }}/" class="AppHeader-link d-flex flex-items-center no-underline mr-3 h1">
+                <span class="octicon octicon-mark-github-24"></span>
                 <span class="h4 text-semibold mx-3">{{ name }}</span>
             </a>
         </div>
         <div class="AppHeader-item d-flex flex-items-center">
             {% include toggle.html %}
-            {%- if site.repo_info %}
+            {%- if site.repo_info and site.github %}
             <div class="AppHeader-item hide-sm">
                 {% include mini-repo-info-card.html class="AppHeader-link no-underline" %}
             </div>

data/_includes/header-sidebar.html

@@ -17,9 +17,9 @@
 </script>
 <div class="Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0">
     <div class="flex-column flex-1 position-sticky top-0">
-        <div class="Toolbar topbar d-flex flex-row py-3 flex-lg-justify-end flex-justify-start">
+        <div class="Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start">
             <div class="Toolbar-expand d-flex flex-justify-center d-none">
-                <button id="sidebar-btn" class="btn-octicon mr-2">{% octicon chevron-right height:16 %}</button>
+                <button id="sidebar-btn" class="btn-octicon mr-2"><span class="octicon octicon-chevron-right-16"></span></button>
             </div>
             <div class="d-flex flex-justify-center d-lg-none">
                 {%- include nav-overlay.html %}
@@ -28,7 +28,7 @@
                 {% include toggle.html %}
             </div>
             <div class="Toolbar-collapse d-flex flex-justify-center d-none d-lg-block">
-                <button id="toolbar-btn" class="btn-octicon mr-2">{% octicon chevron-left height:16 %}</button>
+                <button id="toolbar-btn" class="btn-octicon mr-2"><span class="octicon octicon-chevron-left-16"></span></button>
             </div>
         </div>
         <div class="Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide">
@@ -36,7 +36,7 @@
                 <div class="px-5 py-2">
                     {%- include masthead.html size="128px" %}
                 </div>
-                {%- if site.repo_info %}
+                {%- if site.repo_info and site.github %}
                 <div class="py-2">
                     {% include mini-repo-info-card.html class="Header-link no-underline" %}
                 </div>

data/_includes/header-stacked.html

@@ -1,6 +1,6 @@
 <div class="Profile text-center mt-3">
     {%- include masthead.html %}
-    {%- if site.repo_info %}
+    {%- if site.repo_info and site.github %}
     <div class="py-2">
         {% include mini-repo-info-card.html class="AppHeader-link no-underline" %}
     </div>

data/_includes/header-topbar.html

@@ -12,16 +12,16 @@
     <div class="flex-1">
         <div class="d-flex">
             <div class="Header-item">
-                <button id="expansion-btn" class="btn-octicon mr-2 d-sm-none">{% octicon three-bars height:16 %}</button>
-                <a href="{{ site.baseurl }}/" class="Header-link f4 d-flex flex-items-center">
-                    {% octicon mark-github height:32 %}
+                <button id="expansion-btn" class="btn-octicon mr-2 d-sm-none"><span class="octicon octicon-three-bars-16"></span></button>
+                <a href="{{ site.baseurl }}/" class="Header-link h1 f4 d-flex flex-items-center">
+                    <span class="octicon octicon-mark-github-24"></span>
                 </a>
             </div>
             <a href="{{ site.baseurl }}/" class="Header-item Header-link Header-item--full">{{ name }}</a>
             <div class="Header-item">
             {% include toggle.html %}
             </div>
-            {%- if site.repo_info %}
+            {%- if site.repo_info and site.github %}
             <div class="Header-item hide-sm">
                 {% include mini-repo-info-card.html class="Header-link" %}
             </div>

data/_includes/link-card.html

@@ -12,13 +12,27 @@ This builds a link card
 {%- endcomment %}
 
 {%- assign link = include.link %}
+{%- assign thumbnail = nil %}
+
+{%- if link.thumbnail %}
+{%- capture thumbnail %}
+<img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
+class="rounded-2 box-shadow-none img-cover float-left" alt="{{ name }}">
+{%- endcapture %}
+{%- elsif link.octicon %}
+{%- capture thumbnail %}
+<div class="ml-2 h1">
+<span class="octicon octicon-{{link.octicon}}-16"></span>
+</div>
+{%- endcapture %}
+{%- endif %}
 
 {%- if link.url %}
 <a href="{{ link.url | relative_url }}"
   class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2"
   {% if link.url contains "http" %}target="_blank" rel="noopener noreferrer"{% endif %}>
     <div class="avatar-7">
-      {% include thumbnail.html thumbnail=link.thumbnail octicon = link.octicon %}
+      {{ thumbnail }}
     </div>
     <div class="p-2 flex-1">
       <p class="f3 text-center mb-0">{{ link.name }}</p>
@@ -28,7 +42,7 @@ This builds a link card
 <div class="Link-text github-component position-relative height-full d-flex flex-column text-center p-1">
   <div class="d-inline-flex flex-items-center">
     <div class="avatar-7">
-      {% include thumbnail.html thumbnail=link.thumbnail octicon = link.octicon %}
+      {{ thumbnail }}
     </div>
     <div class="p-2 flex-1">
     <p class="f3 lh-condensed text-center mt-1">{{ link.name }}</p>

data/_includes/mini-repo-info-card.html

@@ -3,7 +3,7 @@
     <a href="{{ site.github.repository_url }}" class="{{ include.class }} tooltipped tooltipped-s" aria-label="Go to repository">
         <div class="d-flex flex-row flex-justify-center Header-item">
 
-            <div class="mr-2">{% octicon git-branch height: 32 %}</div>
+            <div class="mr-2 h2"><span class="octicon octicon-git-branch-24"></span></div>
             <div>
                 <div>
                     {{ site.repository }}
@@ -11,11 +11,13 @@
                 <div class="d-flex flex-row">
                     {%- if site.github.latest_release %}
                     <div class="mr-3">
-                        <span>{% octicon tag height: 12 %} {{ site.github.latest_release.tag_name}}</span>
+                        <span><span class="octicon octicon-tag-16"></span> {{ site.github.latest_release.tag_name}}</span>
                     </div>
                     {%- endif %}
-                    <div class="mr-3"><span>{% octicon star height: 12 %} {{ repo.stargazers_count }}</span></div>
-                    <div class="mr-0"><span>{% octicon repo-forked height: 12 %} {{ repo.forks_count }}</span></div>
+                    {% if repo %}
+                    <div class="mr-3"><span><span class="octicon octicon-star-16"></span> {{ repo.stargazers_count }}</div>
+                    <div class="mr-0"><span><span class="octicon octicon-repo-forked-16"></span> {{ repo.forks_count }}</span></div>
+                    {% endif %}
                 </div>
             </div>
 

data/_includes/nav-overlay.html

@@ -30,14 +30,14 @@
                 </div>
                 <div class="d-flex flex-justify-end">
                     <button class="SelectMenu-closeButton close-menu" type="button">
-                        {% octicon x height: 16 %}
+                        <span class="octicon octicon-x-16"></span>
                     </button>
                 </div>
             </div>
 
             <div class="SelectMenu-list">
                 {%- for nav_item in site.nav %}
-                <a href="{{ nav_item.url }}" class="SelectMenu-item" role="menuitem"{% if page.url contains nav_item.url %} aria-current="page"{% endif %}>{{ nav_item.name }}</a>
+                <a href="{{ site.baseurl }}{{ nav_item.url }}" class="SelectMenu-item" role="menuitem"{% if page.url contains nav_item.url %} aria-current="page"{% endif %}>{{ nav_item.name }}</a>
                 {%- endfor %}
             </div>
             <div class="SelectMenu-footer">

data/_includes/navbar-underline.html

@@ -1,11 +1,14 @@
 <nav class="UnderlineNav">
     <ul class="UnderlineNav-body flex-row list-style-none">
-{%- for nav_item in site.nav %}
+        {%- for nav_item in site.nav %}
         <li class="d-inline-flex">
-            <a href="{{ nav_item.url | relative_url }}" class="UnderlineNav-item m-2" {% if page.url contains nav_item.url %}aria-current="page"{% endif %}>
-                {{ nav_item.name }}
-            </a>
+          <a href="{{ nav_item.url | relative_url }}" class="UnderlineNav-item m-2"
+             {% if page.url == nav_item.url or (nav_item.url != '/' and page.url contains nav_item.url) %}
+               aria-current="page"
+             {% endif %}>
+            {{ nav_item.name }}
+          </a>
         </li>
-{%- endfor %}
+      {%- endfor %}
     </ul>
 </nav>

data/_includes/post-card.html

@@ -1,6 +1,7 @@
 {%- assign image = post.image | default: site.image %}
 {%- assign excerpt = post.description | default: post.excerpt %}
 {%- assign border = include.border %}
+<!--Post card-->
 <div class="col-sm-6 col-lg-4 ">
   <div class="py-4 d-flex flex-column {{ border }}">
     <div class="image-container">

data/_includes/post-feature-card.html

@@ -1,15 +1,15 @@
 {%- assign image = post.image | default: site.image %}
 {%- assign excerpt = post.description | default: post.excerpt %}
-
-<div class="py-4 d-flex flex-column flex-md-row flex-md-row-reverse p-responsive col-12">
-  <div class="col-12 col-lg-8 p-responsive">
+<!-- Post feature card -->
+<div class="d-flex flex-column flex-md-row flex-md-row-reverse py-4 col-12">
+  <div class="col-12 col-lg-8">
     <div class="image-container">
       <a href="{{ post.url | relative_url }}">
         <img class="rounded-2" src="{{ image | relative_url }}" width="800" height="425" alt="{{ post.title }}">
       </a>
     </div>
   </div>
-  <div class="col-12 col-lg-4 pt-lg-4 p-responsive">
+  <div class="col-12 col-lg-4 pt-lg-4">
     <h3 class="h4-mktg mb-12px">
       <a class="Link--primary" href="{{ post.url | relative_url }}">{{ post.title }}</a>
     </h3>

data/_includes/post-gallery.html

@@ -1,17 +1,19 @@
 {%- assign collection = include.collection %}
-{%- assign collection_permalink = include.collection_permalink | default: ':name' %}
-{%- assign replace_value = include.replace_value | default: ':name' %}
-{%- assign per_section = include.per_section | default: 3 %}
+{%- assign collection_permalink = include.collection_permalink %}
+{%- assign replace_value = include.replace_value %}
 
 {%- for section in collection %}
 {%- assign section_name = section | first %}
 {%- assign section_slug = section_name | slugify %}
 {%- assign section_posts = section | last %}
+{%- assign per_section = include.per_section | default: section_posts.size %}
 <div class="section-heading d-flex flex-items-center flex-justify-between mb-4 mb-lg-7">
   <h2 class="h6-mktg border-bottom-0">{{ section_name | capitalize }}</h2>
-  {%- if section_posts.size > per_section %}
+  {%- if section_posts.size > per_section and collection_permalink and replace_value %}
   <div class="d-none d-lg-flex flex-items-center">
-    <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+    <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}"
+      class="Link--primary arrow-target-mktg text-semibold">View all 
+      <span class="octicon octicon-chevron-right-16"></span></a>
   </div>
   {%- endif %}
 </div>
@@ -22,24 +24,26 @@
 {%- assign image_class = "col-md-7 col-xl-9" %}
 {%- assign text_class = "col-md-5 col-xl-3" %}
 {%- endif %}
-<div class="d-flex flex-wrap gutter-spacious {% cycle '', 'flex-row-reverse' %}">
+<div class="d-flex flex-wrap gutter {% cycle '', 'flex-row-reverse' %}">
   {%- for post in section_posts limit: per_section %}
   {%- if forloop.first %}
   <div class="{{ image_class }}">
     {% include post-tease-image-card.html %}
   </div>
   <div class="{{ text_class }}">
-  {%- else %}
+    {%- else %}
     <div class="{% unless forloop.last %}border-bottom{% endunless %}">
-    {% include post-tease-text-card.html %}
+      {% include post-tease-text-card.html %}
     </div>
-  {%- endif %}
-  {%- endfor %}
+    {%- endif %}
+    {%- endfor %}
   </div>
 </div>
 {%- if section_posts.size > per_section %}
 <div class="mb-7 mb-md-8 pt-5 text-right d-lg-none border-top">
-  <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+  <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}"
+    class="Link--primary arrow-target-mktg text-semibold">View all 
+    <span class="octicon octicon-chevron-right-16"></span></a>
 </div>
 {%- endif %}
 {%- endfor %}

data/_includes/post-index.html

@@ -1,28 +1,33 @@
 {%- assign collection = include.collection %}
-{%- assign collection_permalink = include.collection_permalink | default: ':name' %}
-{%- assign replace_value = include.replace_value | default: ':name' %}
-{%- assign per_section = include.per_section | default: 6 %}
+{%- assign collection_permalink = include.collection_permalink %}
+{%- assign replace_value = include.replace_value %}
+{%- assign per_section = include.per_section %}
 
 {% for section in collection %}
 {%- assign section_name = section | first %}
 {%- assign section_slug = section_name | slugify %}
 {%- assign section_posts = section | last %}
+{%- assign per_section = include.per_section | default: section_posts.size %}
 <div class="section-heading d-flex flex-items-center flex-justify-between mb-4 mb-lg-7">
   <h2 class="h6-mktg border-bottom-0">{{ section_name | capitalize }}</h2>
-  {%- if section_posts.size > per_section %}
+  {%- if section_posts.size > per_section and collection_permalink and replace_value %}
   <div class="d-none d-lg-flex flex-items-center">
-    <a href="{{ collection_permalink  | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+    <a href="{{ collection_permalink  | replace: replace_value, section_slug | relative_url }}"
+      class="Link--primary arrow-target-mktg text-semibold">View all
+      <span class="octicon octicon-chevron-right-16"></span></a>
   </div>
   {%- endif %}
-  </div>
-<div class="d-flex flex-wrap gutter-spacious mb-4">
+</div>
+<div class="d-flex flex-wrap gutter mb-4">
   {% for post in section_posts limit: per_section %}
   {%- include post-card.html %}
   {% endfor %}
 </div>
 {%- if section_posts.size > per_section %}
 <div class="mb-7 mb-md-8 pt-5 text-right d-lg-none border-top">
-  <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+  <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}"
+    class="Link--primary arrow-target-mktg text-semibold">View all
+    <span class="octicon octicon-chevron-right-16"></span></a>
 </div>
 {%- endif %}
 {% endfor %}

data/_includes/post-timeline-card.html

@@ -20,8 +20,8 @@
 {%- assign icon = post.type | default: "comment" %}
 <div class="TimelineItem flex-wrap">
   <div class="col-12 col-md-5 position-relative">
-    <div class="TimelineItem-title mt-5 position-sticky d-flex">
-      <div class="TimelineItem-badge">{% octicon {{icon}} height:16 %}</div>
+    <div class="TimelineItem-title mt-5 position-sticky d-flex topbar-aware-top">
+      <div class="TimelineItem-badge"><span class="octicon octicon-{{ icon }}-16"></span></div>
       <div class="title mb-5">
         <div class="h2">
           <a href="{{ post.url | relative_url }}">
@@ -63,7 +63,7 @@
         <div class="more mb-5">
           <a href="{{ post.url | relative_url }}" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
             Continue
-            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
+            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg mt-1" width="16" height="16"
               viewBox="0 0 16 16" fill="none">
               <path fill="currentColor"
                 d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
@@ -76,4 +76,27 @@
     </div>
 
   </div>
+  <script>
+    (function () {
+      const card = document.currentScript.closest('.TimelineItem');
+      if (!card) return;
+
+      const videocontainer = card.querySelector('.timeline-video-container');
+      const iframe = card.querySelector('.Timeline-video');
+      const title = card.querySelector('.TimelineItem-title');
+
+      function setIframeDimensions() {
+        if (!videocontainer || !iframe) return;
+        iframe.style.width = container.offsetWidth + 'px';
+        iframe.style.height = container.offsetHeight + 'px';
+      }
+
+      // Initial iframe sizing
+      setIframeDimensions();
+
+      // Watch for container resize
+      new ResizeObserver(setIframeDimensions).observe(card);
+
+    })();
+  </script>
 </div>

data/_includes/post-timeline.html

@@ -1,33 +1,26 @@
 {%- comment -%}
-  post-timeline.html
-  Usage example:
-    {% include post-timeline.html collection=site.posts limit=5 index='/blog/index.html' %}
+post-timeline.html
+Usage example:
+{% include post-timeline.html collection=site.posts limit=5 index='/blog/index.html' %}
 
-  Expects:
-    collection (array, required) - A list of posts or other objects to display.
-    limit (integer, optional) - Number of posts to display (default: all).
-    index (string, optional) - Index page for the collection.
+Expects:
+collection (array, required) - A list of posts or other objects to display.
+limit (integer, optional) - Number of posts to display (default: all).
+index (string, optional) - Index page for the collection.
 {%- endcomment -%}
 
 {%- assign timeline_collection = include.collection | sort: "date" | reverse %}
 {%- assign timeline_post_limit = include.limit | default: -1 %}
-{%- if timeline_post_limit < 0 %}
-{%- assign timeline_post_limit = collection.size %}
-{%- endif %}
-{% assign timeline_index = include.index %}
-
-<div class="container-xl mx-auto p-responsive-blog mb-8">
+{%- if timeline_post_limit < 0 %}{%- assign timeline_post_limit=collection.size %}{%- endif %}
+{% assign timeline_index=include.index %}
+<div class="mx-auto mb-8">
   {%- for post in timeline_collection | limit: timeline_post_limit %}
   {%- include post-timeline-card.html post=post %}
   {%- endfor %}
-  {%- if timeline_collection.size > timeline_post_limit and timeline_index %}
-  <div class="mx-auto p-responsive-blog">
-    <div class="d-flex gutter-spacious">
-      <div class="col-12 col-md-7 offset-md-5">
-        <a href="{{ timeline_index | relative_url }}"
-          class="Link--primary arrow-target-mktg text-semibold btn ml-5">View all {% octicon chevron-right height:16 %}</a>
-      </div>
-    </div>
+  {%- if timeline_collection.size > timeline_post_limit and timeline_index != blank %}
+  <div class="mx-auto py-3">
+    <a href="{{ timeline_index | relative_url }}"
+      class="Link--primary arrow-target-mktg text-semibold btn width-full text-center">More</a>
   </div>
   {%- endif %}
-</div>
+  </div>

data/_includes/related.html

@@ -104,7 +104,7 @@
 
 {%- if related_limit > 0 and related_posts.size > 0 %}
 <h2 class="h5-mktg pb-3 mb-lg-3">Related posts</h2>
-<div class="d-flex flex-wrap gutter-spacious">
+<div class="d-flex flex-wrap gutter">
 {% for post in related_posts limit:related_limit %}
   {% if post.id == page.id %}
     {% continue %}