Merge pull request #280 from DiogoRibeiro7/codex/update-styles-and-verify-appearance

Apply design tweaks

Author: DiogoRibeiro7

README.md

@@ -73,8 +73,18 @@ 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).~~
+
+~~Restyle your links (ideally the link should be back with no underline and you add a css style on hover)~~
+
+~~Center pagination~~
+
+~~Restyle your article detail page breadcrumbs. You want them to be less visible (I would suggest a light grey colour here)~~
+
 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

_includes/head.html

@@ -20,7 +20,8 @@
 <!-- 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=Open+Sans:wght@400;700&family=Montserrat:wght@700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Cardo&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
 
 {% if site.head_scripts %}
   {% for script in site.head_scripts %}

_sass/minimal-mistakes/_variables.scss

@@ -6,7 +6,7 @@
    Typography
    ========================================================================== */
 
-// Cardo font is loaded via a <link> tag in the site head
+// Cardo and custom web fonts are loaded via <link> tags in the site head
 
 $doc-font-size: 16 !default;
 
@@ -32,9 +32,9 @@ $calisto: "Calisto MT", serif !default;
 $garamond: Garamond, serif !default;
 
 // Setting the fonts
-$global-font-family: "Open Sans", sans-serif;
-$header-font-family: "Montserrat", sans-serif;
-$caption-font-family: "Open Sans", sans-serif;
+$global-font-family: "Open Sans", Helvetica, Arial, sans-serif;
+$header-font-family: "Merriweather", "Times New Roman", serif;
+$caption-font-family: "Cardo, serif";
 
 /* type scale */
 $type-size-1: 2.441em !default; // ~39.056px

assets/css/main.scss

@@ -103,3 +103,34 @@ a:hover {
   .page__hero-button {
     margin-top: 1px; /* Add some space between the content and the button */
   }
+
+/* Breadcrumbs in light grey */
+.breadcrumbs,
+.breadcrumbs a {
+  color: $light-gray;
+}
+
+/* Center pagination controls */
+.pagination {
+  text-align: center;
+}
+
+.pagination ul {
+  display: inline-block;
+  padding-left: 0;
+}
+
+.pagination li {
+  float: none;
+  display: inline-block;
+}
+
+/* Smaller hero section on homepage */
+.layout--home .page__hero--overlay {
+  padding: 2em 0;
+}
+
+.layout--home .page__hero-image img {
+  max-height: 40vh;
+  object-fit: cover;
+}