diff --git a/README.md b/README.md index 0f38521..537d1c5 100644 --- a/README.md +++ b/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.) diff --git a/_includes/head.html b/_includes/head.html index 43617e9..d903fb9 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -20,7 +20,7 @@ - + {% if site.head_scripts %} {% for script in site.head_scripts %} diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index f5f7433..cb76015 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_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 diff --git a/assets/css/main.scss b/assets/css/main.scss index 97181f8..8a01b04 100644 --- a/assets/css/main.scss +++ b/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;