diff --git a/_includes/category-links.html b/_includes/category-links.html new file mode 100644 index 000000000000..198ccb1450db --- /dev/null +++ b/_includes/category-links.html @@ -0,0 +1,29 @@ +{% assign show_count = include.show_count | default: true %} +{% assign categories = site.data.navigation.sidebar-category %} + +
+
+

Categories

+ View all +
+ + {% if categories %} +
+ {% for category in categories %} + {% assign category_slug = category.url | replace: "/", "" %} + {% assign category_posts = site.categories[category_slug] %} + {% assign category_count = category_posts | size %} + + + {{ category.title }} + + {% if show_count %} + {{ category_count }} {% if category_count == 1 %}post{% else %}posts{% endif %} + {% endif %} + + {% endfor %} +
+ {% else %} +

No categories configured.

+ {% endif %} +
diff --git a/_includes/recent-posts.html b/_includes/recent-posts.html new file mode 100644 index 000000000000..b3e1971ce798 --- /dev/null +++ b/_includes/recent-posts.html @@ -0,0 +1,52 @@ +{% assign posts_limit = include.limit | default: 5 %} +{% assign visible_posts = site.posts | where_exp: "post", "post.hidden != true" %} + +
+
+

Recent Posts

+
+ + {% if visible_posts.size > 0 %} +
+ {% for post in visible_posts limit: posts_limit %} + {% assign title = post.title | markdownify | remove: "

" | remove: "

" | strip %} + {% assign excerpt = post.excerpt | markdownify | strip_html | strip | truncate: 140 %} + {% assign post_category = post.categories | first %} + {% assign category_title = post_category %} + {% assign category_url = post_category | prepend: "/" | append: "/" %} + + {% if post_category %} + {% for nav_item in site.data.navigation.sidebar-category %} + {% assign nav_slug = nav_item.url | replace: "/", "" %} + {% if nav_slug == post_category %} + {% assign category_title = nav_item.title %} + {% assign category_url = nav_item.url %} + {% endif %} + {% endfor %} + {% endif %} + +
+
+

+ {{ title }} +

+ + {% if excerpt != "" %} +

{{ excerpt }}

+ {% endif %} +
+ +
+ + + {% if post_category %} + {{ category_title }} + {% endif %} +
+
+ {% endfor %} +
+ {% else %} +

No posts yet.

+ {% endif %} +
diff --git a/assets/css/homepage.scss b/assets/css/homepage.scss index a94498678c1d..37d01ef56dd1 100644 --- a/assets/css/homepage.scss +++ b/assets/css/homepage.scss @@ -134,6 +134,126 @@ body.layout--homepage { margin: 0 0 20px; } +.homepage-section { + margin-top: 40px; +} + +.homepage-section-heading { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 16px; + margin-bottom: 16px; +} + +.homepage-section-heading h2 { + margin: 0; +} + +.homepage-section-link { + flex: 0 0 auto; + font-size: 15px; + line-height: 1.4; +} + +.homepage-post-list { + border-top: 1px solid #dde5ea; +} + +.homepage-post-row { + display: grid; + grid-template-columns: minmax(0, 1fr) 132px; + gap: 24px; + padding: 20px 0; + border-bottom: 1px solid #dde5ea; +} + +.homepage-post-title { + margin: 0 0 8px; + font-size: 18px; + line-height: 1.35; +} + +.homepage-post-title a { + color: #043361; + text-decoration: none; +} + +.homepage-post-title a:hover { + color: #2476a8; + text-decoration: underline; +} + +.homepage-post-excerpt { + margin: 0; + color: #4f5d67; + font-size: 15px; + line-height: 1.55; +} + +.homepage-post-meta { + display: flex; + flex-direction: column; + gap: 8px; + align-items: flex-end; + color: #667985; + font-size: 14px; + line-height: 1.35; + text-align: right; +} + +.homepage-post-meta a { + color: #2476a8; +} + +.homepage-category-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + border-top: 1px solid #dde5ea; +} + +.homepage-category-link { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 48px; + padding: 12px 0; + border-bottom: 1px solid #dde5ea; + color: #043361; + text-decoration: none; +} + +.homepage-category-link:nth-child(odd) { + padding-right: 18px; +} + +.homepage-category-link:nth-child(even) { + padding-left: 18px; +} + +.homepage-category-link:hover { + color: #2476a8; + text-decoration: none; +} + +.homepage-category-title { + font-size: 16px; + line-height: 1.35; +} + +.homepage-category-count { + flex: 0 0 auto; + color: #667985; + font-size: 13px; + line-height: 1.35; +} + +.homepage-empty { + color: #667985; + font-size: 15px; +} + @media (prefers-color-scheme: dark) { body.layout--homepage { background: #20212b; @@ -173,6 +293,30 @@ body.layout--homepage { border-color: #93d8f7; color: #93d8f7; } + + .homepage-post-list, + .homepage-post-row, + .homepage-category-grid, + .homepage-category-link { + border-color: #3b4650; + } + + .homepage-post-title a, + .homepage-category-link { + color: #dce9ef; + } + + .homepage-post-title a:hover, + .homepage-category-link:hover { + color: #93d8f7; + } + + .homepage-post-excerpt, + .homepage-post-meta, + .homepage-category-count, + .homepage-empty { + color: #aebac3; + } } @media print, screen and (max-width: 960px) { @@ -192,6 +336,18 @@ body.layout--homepage { max-width: none; padding: 28px 0 40px; } + + .homepage-post-row { + grid-template-columns: minmax(0, 1fr); + gap: 10px; + } + + .homepage-post-meta { + flex-direction: row; + align-items: center; + justify-content: flex-start; + text-align: left; + } } @media print, screen and (max-width: 480px) { @@ -211,4 +367,23 @@ body.layout--homepage { .homepage-content { font-size: 16px; } + + .homepage-section-heading { + display: block; + } + + .homepage-section-link { + display: inline-block; + margin-top: 6px; + } + + .homepage-category-grid { + grid-template-columns: 1fr; + } + + .homepage-category-link:nth-child(odd), + .homepage-category-link:nth-child(even) { + padding-right: 0; + padding-left: 0; + } } diff --git a/index.html b/index.html index 5977bf8931ea..33c987f11dbb 100644 --- a/index.html +++ b/index.html @@ -34,3 +34,7 @@

Learning Topics

Research Interests

I am interested in the intersection of learning sciences, educational technology, and human-centered AI. More specifically, I want to study how learners interact with intelligent tools, how those tools shape learning processes, and how design decisions can make AI systems more explainable, useful, and accountable in educational contexts.

+ +{% include recent-posts.html limit=5 %} + +{% include category-links.html show_count=true %}