Feat/evaluate website improvements (#286)

* Adjust layout order and show teasers

* Hide post excerpt on detail pages

* style: lighten breadcrumb colors

* Display title in hero when overlay enabled

* style: define custom color palette

* docs: rewrite README

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: DiogoRibeiro7

README.md

@@ -1,91 +1,62 @@
-# [Minimal Mistakes Jekyll theme](https://mmistakes.github.io/minimal-mistakes/)
+# Personal Blog on Minimal Mistakes
 
-[![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/DiogoRibeiro7/DiogoRibeiro7.github.io/master/LICENSE)
+[![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Hosted with GH Pages](https://img.shields.io/badge/Hosted_with-GitHub_Pages-blue?logo=github&logoColor=white)](https://pages.github.com/)
 [![Made with GH Actions](https://img.shields.io/badge/CI-GitHub_Actions-blue?logo=github-actions&logoColor=white)](https://github.com/features/actions)
 
-[![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%204.3-blue.svg)](https://jekyllrb.com/)
+This repository contains the source code for my website built with the
+[Minimal Mistakes](https://mmistakes.github.io/minimal-mistakes/) Jekyll theme.
+It also includes a few helper scripts to clean up Markdown front matter and
+run tests.
 
-[![Ruby Version](https://img.shields.io/badge/ruby-3.1-blue)](https://www.ruby-lang.org)
-[![Ruby gem](https://img.shields.io/gem/v/minimal-mistakes-jekyll.svg)](https://rubygems.org/gems/minimal-mistakes-jekyll)
+## Requirements
 
-
-Minimal Mistakes is a flexible two-column Jekyll theme, perfect for building personal sites, blogs, and portfolios. As the name implies, styling is purposely minimalistic to be enhanced and customized by you :smile:.
-
-## Setup
-
-This repository contains a few helper scripts for processing Markdown posts.
-Install the Python dependencies listed in `requirements.txt` with:
+The site relies on Ruby, Node and Python tooling.  Install dependencies with:
 
 ```bash
+# Python packages for helper scripts and tests
 pip install -r requirements.txt
-```
 
-To work with the JavaScript that powers the theme you'll also need Node
-dependencies. Install them with:
-
-```bash
+# JavaScript dependencies
 npm install
-```
-
-This project uses **npm** for managing JavaScript dependencies and tracks
-exact versions in `package-lock.json`.
-
-Bundled JavaScript is compiled from the source files in `assets/js/`. Run the
-following to create `main.min.js` (minified with a banner) or watch for changes:
-
-```bash
-npm run build:js   # minify and add banner
-npm run watch:js   # optional: automatically rebuild on changes
-```
-
-## CSS linting
-
-Lint all SCSS files with [Stylelint](https://stylelint.io/):
 
-```bash
-npm run lint:css
+# Ruby gems for Jekyll
+bundle install
 ```
 
-## Local development
+## Development
 
-Install Ruby gems specified in the `Gemfile` with:
+Use the following commands while working on the site:
 
 ```bash
-bundle install
-```
+# start a local server at http://localhost:4000/
+bundle exec jekyll serve
 
-Serve the site locally with:
+# rebuild JavaScript when files change
+npm run watch:js
 
-```bash
-bundle exec jekyll serve
+# lint stylesheets
+npm run lint:css
 ```
 
+## Tests
 
-## Running tests
-
-Install the Python dependencies and execute:
+Front matter utilities are covered by a small `pytest` suite.  Run the tests with:
 
 ```bash
 pytest
 ```
-GitHub Actions already runs these commands automatically during deployments.
-
-# ToDo
-
-~~Have a consistency in the font and font sizes (ideally you want to use 2 fonts. One for the header/subtitle and one for the text. You can use this kind of website https://fontjoy.com/ which allow you to pair fonts).~~
-
-Choose a few main colours for your site (I would suggest black/white/grey but not in solid. You can also use this kind of site: https://coolors.co/palettes/popular/2a4849).
 
-~~Reduce then size of the homepage top image (ideally you want your first articles to be visible on load and not hidden below the fold).~~
+GitHub Actions executes the same tests on every push.
 
-~~Restyle your links (ideally the link should be back with no underline and you add a css style on hover)~~
+## Roadmap
 
-~~Center pagination~~
+Planned improvements are organised as sprints in [ROADMAP.md](ROADMAP.md).
+Highlights include:
 
-~~Restyle your article detail page breadcrumbs. You want them to be less visible (I would suggest a light grey colour here)~~
+- refining typography and the colour palette
+- restructuring the homepage with card‑style articles
+- adding search and dark mode
+- optimising performance and accessibility
 
-Right now at the top of the detail page, you have your site breadcrumbs, a title then another title and the font sizes are a bit off and it is hard to understand the role of the second title. I would reorganise this to provide a better understanding to the reader
-On the detail page, I would suggest you put the `You may also enjoy` straight at the end of the article. Right now it is after comments and you can lose engagement on your site.
-I would suggest you remove your description from the detail page. I think having it on the home page is enough. You can have a smaller introduction if needed with a read more button or link that will take the reader to a full page description of yourself and your skillset. That will allow you to tell more about yourself and why you do what you do
-I will create card article with a hover animation (add some shape and background colour and ideally a header image for the card. The graphs you show me last week for example.)
+Contributions are welcome!

_config.yml

@@ -86,7 +86,7 @@ facebook:
   username               :
   app_id                 :
   publisher              :
-og_image                 : # Open Graph/Twitter default site image
+og_image                 : /assets/images/data-science.png
 # For specifying social profiles
 # - https://developers.google.com/structured-data/customize/social-profiles
 social:

_includes/archive-single.html

@@ -11,12 +11,12 @@
 {% endif %}
 
 <div class="{{ include.type | default: 'list' }}__item">
-  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
-    {% if include.type == "grid" and teaser %}
-      <div class="archive__item-teaser">
-        <a href="{{ post.url | relative_url }}"><img src="{{ teaser | relative_url }}" alt="{{ post.title }}"></a>
-      </div>
-    {% endif %}
+  <article class="archive__item card" itemscope itemtype="https://schema.org/CreativeWork">
+{% if teaser %}
+  <div class="archive__item-teaser">
+    <a href="{{ post.url | relative_url }}"><img src="{{ teaser | relative_url }}" alt="{{ post.title }}"></a>
+  </div>
+{% endif %}
     <h2 class="archive__item-title no_toc" itemprop="headline">
       {% if post.link %}
         <a href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | relative_url }}" rel="permalink"><i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>

_includes/head.html

@@ -20,7 +20,7 @@
 <!-- Google Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">
 
 {% if site.head_scripts %}
   {% for script in site.head_scripts %}

_includes/page__hero.html

@@ -23,16 +23,16 @@
 >
   {% if page.header.overlay_color or page.header.overlay_image %}
     <div class="wrapper">
-      <!-- <h1 id="page-title" class="page__title" itemprop="headline">
+      <h1 id="page-title" class="page__title" itemprop="headline">
         {% if paginator and site.paginate_show_page_num %}
           {{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %}
         {% else %}
           {{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
         {% endif %}
-      </h1> -->
+      </h1>
       {% if page.tagline %}
         <p class="page__lead">{{ page.tagline | markdownify | remove: "<p>" | remove: "</p>" }}</p>
-      {% elsif page.header.show_overlay_excerpt != false and page.excerpt %}
+      {% elsif page.header.show_overlay_excerpt != false and page.excerpt and page.collection != 'posts' %}
         <p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
       {% endif %}
       {% include page__meta.html %}

_layouts/single.html

@@ -22,10 +22,12 @@
   {% include sidebar.html %}
 
   <article class="page h-entry" itemscope itemtype="https://schema.org/CreativeWork">
+    {% unless page.header.overlay_color or page.header.overlay_image %}
     {% if page.title %}<h1 id="page-title" class="page__title p-name" itemprop="headline">
       <a href="{{ page.url | absolute_url }}" class="u-url" itemprop="url">{{ page.title | markdownify | remove: "
         <p>" | remove: "</p>" }}</a>
     </h1>{% endif %}
+    {% endunless %}
     {% if page.subtitle %}<h2 class="page__subtitle">{{ page.subtitle }}</h2>{% endif %}
 
     {% if page.excerpt %}
@@ -108,4 +110,4 @@ <h2 class="page__related-title">{{ site.data.ui-text[site.locale].related_label
   {% if jekyll.environment == 'production' and site.comments.provider and page.comments %}
   {% include comments.html %}
   {% endif %}
-</div>
+</div>

_sass/minimal-mistakes/_navigation.scss

@@ -17,6 +17,16 @@
   animation: $intro-transition;
   -webkit-animation-delay: 0.3s;
   animation-delay: 0.3s;
+  color: $muted-text-color;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: $text-color;
+    }
+  }
 
   @include breakpoint($x-large) {
     max-width: $x-large;
@@ -43,6 +53,7 @@
 
   .current {
     font-weight: bold;
+    color: $text-color;
   }
 }
 

_sass/minimal-mistakes/_variables.scss

@@ -32,8 +32,8 @@ $calisto: "Calisto MT", serif !default;
 $garamond: Garamond, serif !default;
 
 // Setting the fonts
-$global-font-family: "Roboto", Helvetica, Arial, sans-serif;
-$header-font-family: "Lora", "Times New Roman", serif;
+$global-font-family: 'Inter', system-ui, sans-serif;
+$header-font-family: 'Nunito Sans', system-ui, sans-serif;
 $caption-font-family: "Cardo, serif";
 
 /* type scale */
@@ -73,7 +73,13 @@ $border-color: $lighter-gray !default;
 $form-background-color: $lighter-gray !default;
 $footer-background-color: $lighter-gray !default;
 
-$primary-color: #6f777d !default;
+$color-primary: #2a4849 !default;
+$color-secondary: #6c757d !default;
+$color-background: #f7f9fa !default;
+$color-surface: #ffffff !default;
+$color-accent: #ffca00 !default;
+
+$primary-color: $color-primary !default;
 $success-color: #3fa63f !default;
 $warning-color: #d67f05 !default;
 $danger-color: #ee5f5b !default;

_sass/minimal-mistakes/skins/_air.scss

@@ -3,13 +3,14 @@
    ========================================================================== */
 
 /* Colors */
-$background-color: #eeeeee !default;
-$text-color: #222831 !default;
-$muted-text-color: #393e46 !default;
-$primary-color: #0092ca !default;
-$border-color: mix(#fff, #393e46, 75%) !default;
+$background-color: $color-background !default;
+$text-color: #2a2a2a !default;
+$muted-text-color: $color-secondary !default;
+$primary-color: $color-primary !default;
+$accent-color: $color-accent !default;
+$border-color: mix(#fff, $text-color, 85%) !default;
 $footer-background-color: $primary-color !default;
-$link-color: #393e46 !default;
+$link-color: $primary-color !default;
 $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: $text-color !default;
 $navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;

assets/css/main.scss

@@ -134,3 +134,16 @@ a:hover {
   max-height: 40vh;
   object-fit: cover;
 }
+
+/* Card styles for archive items */
+.archive__item.card {
+  background: $background-color;
+  border-radius: $border-radius;
+  padding: 1em;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.archive__item.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}