Merge pull request #279 from DiogoRibeiro7/codex/melhorar-css-e-corrigir-erros

Enhance site style

Author: DiogoRibeiro7

README.md

@@ -73,22 +73,9 @@ 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
-
 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.)

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

_sass/minimal-mistakes/_variables.scss

@@ -32,9 +32,9 @@ $calisto: "Calisto MT", serif !default;
 $garamond: Garamond, serif !default;
 
 // Setting the fonts
-$global-font-family: "Georgia, serif";
-$header-font-family: "Times, Times New Roman, serif";
-$caption-font-family: "Cardo, serif";
+$global-font-family: "Open Sans", sans-serif;
+$header-font-family: "Montserrat", sans-serif;
+$caption-font-family: "Open Sans", sans-serif;
 
 /* type scale */
 $type-size-1: 2.441em !default; // ~39.056px

assets/css/main.scss

@@ -29,6 +29,20 @@ a:hover {
   color: $link-color-hover;
 }
 
+/* Lighten breadcrumb text */
+.breadcrumbs {
+  color: #999;
+}
+
+/* Center pagination links */
+.pagination {
+  text-align: center;
+}
+.pagination li {
+  float: none;
+  display: inline-block;
+}
+
 
 /* Custom styles for the 404 page */
 .page__hero {
@@ -48,10 +62,11 @@ a:hover {
   //   background-color: rgba(0, 0, 0, 0.5);
   // }
 
-  .page__hero-image img {
-    max-width: 100%;
-    height: auto;
-  }
+.page__hero-image img {
+  max-width: 100%;
+  height: auto;
+  max-height: 50vh; /* smaller hero image */
+}
 
   .page__hero-title {
     position: absolute;