Merge pull request #44 from Balaiseee/master

refactor: Improve performance, seo, accessibility and security

_config.yml

@@ -4,8 +4,11 @@ title: 'Jekyll Serif'
 
 logo:
   mobile: "images/logo/logo-mobile.svg"
+  mobile_height: "32px"
+  mobile_width: "32px"
   desktop: "images/logo/logo.svg"
-  desktop_height: "36px"
+  desktop_height: "32px"
+  desktop_width: "120px"
 
 collections:
   services:
@@ -27,7 +30,7 @@ defaults:
 
 sass:
   indentWidth: 4
-  style: compact # possible values: nested expanded compact compressed
+  style: compressed # possible values: nested expanded compact compressed
   precision: 10
 
 plugins:

_data/features.json

@@ -2,16 +2,28 @@
   {
     "title": "Free Consultation",
     "description": "New clients receive an obligation free consultation.",
-    "image": "images/features/noun_branding_1885335.svg"
+    "image": {
+      "url": "images/features/noun_branding_1885335.svg",
+      "width": 80,
+      "height": 80
+    }
   },
   {
     "title": "Certified Accountants",
     "description": "All members of our team are certified accountants.",
-    "image": "images/features/noun_The Process_1885341.svg"
+    "image": {
+      "url": "images/features/noun_The Process_1885341.svg",
+      "width": 80,
+      "height": 80
+    }
   },
   {
     "title": "Tax Compliance",
     "description": "We stay up to date on the latest changes to the tax code.",
-    "image": "images/features/noun_3d modeling_1885342.svg"
+    "image": {
+      "url": "images/features/noun_3d modeling_1885342.svg",
+      "width": 80,
+      "height": 80
+    }
   }
 ]

_includes/footer.html

@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-12">
         <div class="footer-inner">
-          <h3 class="footer-title">{{site.title}}</h3>
+          <h2 class="footer-title">{{site.title}}</h2>
           <ul>
             {% assign footermenu = site.data.menus.footer | sort: 'weight'  %}
             {% for item in footermenu %}

_includes/header.html

@@ -1,10 +1,10 @@
 <div class='header'>
   <div class="container">
     <div class="logo">
-      <a href="{{ site.baseurl }}"><img height="{{ site.logo.desktop_height }}" alt="{{ site.title }}" src="{{ site.logo.desktop | relative_url }}" /></a>
+      <a href="{{ site.baseurl }}"><img width="{{ site.logo.desktop_width }}" height="{{ site.logo.desktop_height }}" alt="{{ site.title }}" src="{{ site.logo.desktop | relative_url }}" /></a>
     </div>
     <div class="logo-mobile">
-      <a href="{{ site.baseurl }}"><img alt="{{ site.title }}" src="{{ site.logo.mobile | relative_url }}" /></a>
+      <a href="{{ site.baseurl }}"><img width="{{ site.logo.mobile_width }}" height="{{ site.logo.mobile_height }}" alt="{{ site.title }}" src="{{ site.logo.mobile | relative_url }}" /></a>
     </div>
     {% include main-menu.html %}
     {% include hamburger.html %}

_layouts/default.html

@@ -6,7 +6,12 @@
   <title>{% if page.title %}{{page.title}}{% else %}{{ site.title | escape }}{% endif %}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/png" href="{{ '/images/favicon-32x32.svg' | relative_url }}">
+  <!-- Google Fonts CDN -->
+  <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=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
+  <!-- Self host font -->
+  <!-- <link rel="preload" href="{{ '/assets/fonts/playfair-display.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin> -->
   <link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet">
   
   {% if page.description %}<meta name="description" content="{{ page.description }}" />{% endif %}
@@ -29,7 +34,7 @@
   </div>
   {% include footer.html %}
   {% include sub-footer.html %}
-  <script type="text/javascript" src="{{ "/assets/js/scripts.js" | relative_url }}"></script>
+  <script type="text/javascript" src="{{ '/assets/js/scripts.js' | relative_url }}"></script>
   {% include google-analytics.html %}
 </body>
 </html>

_layouts/home.html

@@ -14,7 +14,7 @@ bodyClass: "page-home"
       </div>
       {% if page.intro_image %}
       <div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
-        <img alt={{ page.title }} class="intro-image{% if page.intro_image_absolute %} intro-image-absolute{% endif %}{% if page.intro_image_hide_on_mobile %} intro-image-hide-mobile{% endif %}" src="{{ page.intro_image | relURL }}" />
+        <img alt="{{ page.title }}" class="intro-image{% if page.intro_image_absolute %} intro-image-absolute{% endif %}{% if page.intro_image_hide_on_mobile %} intro-image-hide-mobile{% endif %}" src="{{ page.intro_image | relURL }}" />
       </div>
       {% endif %}
     </div>
@@ -54,7 +54,7 @@ bodyClass: "page-home"
       <div class="col-12 col-md-6 col-lg-4 mb-2">
         <div class="feature">
           {% if feature.image %}
-          <div class="feature-image"><img alt="{{ feature.title }} logo" src="{{ feature.image | relative_url }}" /></div>
+          <div class="feature-image"><img alt="{{ feature.title }} logo" src="{{ feature.image.url | relative_url }}" width="{{ feature.image.width }}" height="{{ feature.image.height }}" /></div>
           {% endif %}
           <h2 class="feature-title">{{ feature.title }}</h2>
           <div class="feature-content">{{ feature.description }}</div>

_layouts/teams.html

@@ -26,14 +26,14 @@ bodyClass: "page-teams"
             <div class="team team-summary team-summary-large">
                 {% if team.image %}
                 <div class="team-image">
-                    <img alt="{{ team.title }}" class="img-fluid mb-2" src="{{ team.image | relative_url }}" />
+                    <img width="90" height="90" alt="{{ team.title }}" class="img-fluid mb-2" src="{{ team.image | relative_url }}" />
                 </div>
                 {% endif %}
                 <div class="team-meta">
                     <h2 class="team-name"><a href="{{ team.url | relative_url }}">{{ team.title }}</a></h2>
                     <p class="team-description">{{ team.jobtitle }}</p>
                     {% if team.linkedinurl %}
-                    <a target="_blank" href="{{ team.linkedinurl }}">LinkedIn</a>
+                    <a target="_blank" href="{{ team.linkedinurl }}" rel="noreferrer">LinkedIn</a>
                     {% endif %}
                 </div>
                 <div class="team-content">{{ team.content | truncate: 120 }}</div>
@@ -48,7 +48,7 @@ bodyClass: "page-teams"
             <div class="team team-summary">
                 {% if team.image %}
                 <div class="team-image">
-                    <img alt="{{ team.title }}" class="img-fluid mb-2" src="{{ team.image | relative_url }}" />
+                    <img width="60" height="60" alt="{{ team.title }}" class="img-fluid mb-2" src="{{ team.image | relative_url }}" />
                 </div>
                 {% endif %}
                 <div class="team-meta">

_sass/components/_fonts.scss

@@ -0,0 +1,7 @@
+@font-face {
+	font-family: 'Playfair Display';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: local(''), url('../fonts/playfair-display.woff2') format('woff2');
+}

_sass/components/_type.scss

@@ -1,5 +1,5 @@
 a {
-  color: $primary;
+  color: $primary-dark;
 }
 p {
   line-height: 26px;

_team/mike-vance.md

@@ -1,9 +1,9 @@
 ---
-title: 'Mike Vance'
+title: "Mike Vance"
 date: 2018-12-20T13:44:30+10:00
 draft: false
-image: 'images/team/joseph-gonzalez-399972-unsplash.jpg'
+image: "images/team/joseph-gonzalez-399972-unsplash.jpg"
-jobtitle: 'Art Director'
+jobtitle: "Art Director"
 linkedinurl: ""
 weight: 3
 ---

_team/robert-johnson.md

@@ -1,9 +1,9 @@
 ---
-title: 'Robert Johnson'
+title: "Robert Johnson"
 date: 2018-12-20T13:44:23+10:00
 draft: false
-image: 'images/team/vince-fleming-613817-unsplash.jpg'
+image: "images/team/vince-fleming-613817-unsplash.jpg"
-jobtitle: 'Developer'
+jobtitle: "Developer"
 linkedinurl: "https://www.linkedin.com/"
 weight: 3
 ---

_team/susan-shelton.md

@@ -1,9 +1,9 @@
 ---
-title: 'Susan Shelton'
+title: "Susan Shelton"
 date: 2018-12-20T13:45:06+10:00
 draft: false
-image: 'images/team/cristian-newman-94319-unsplash.jpg'
+image: "images/team/cristian-newman-94319-unsplash.jpg"
-jobtitle: 'Developer'
+jobtitle: "Developer"
 weight: 5
 ---
 

_team/tamara-ells.md

@@ -1,9 +1,9 @@
 ---
-title: 'Tamara Ells'
+title: "Tamara Ells"
 date: 2018-12-20T13:44:55+10:00
 draft: false
-image: 'images/team/michael-dam-258165-unsplash.jpg'
+image: "images/team/michael-dam-258165-unsplash.jpg"
-jobtitle: 'UI Designer'
+jobtitle: "UI Designer"
 weight: 4
 ---
 

about.md

@@ -1,7 +1,7 @@
 ---
-title: "About"
+title: About
-date: 2018-02-22T17:01:34+07:00
 layout: page
+description: About
 bodyClass: page-about
 ---
 

assets/css/style.scss

@@ -3,12 +3,13 @@
 ---
 
 // Colors
-$primary: #E5261F;
+$primary: #e5261f;
+$primary-dark: #a01b16;
 $secondary: #f88379;
 $black: #2f2f41;
 $white: #ffffff;
 $white-offset: #fff6f8;
-$steel: #5C5A5A;
+$steel: #5c5a5a;
 
 // Links
 $link-color: $primary;
@@ -18,7 +19,7 @@ $link-hover-decoration: underline;
 
 // Fonts
 $font-family-base: Helvetica, Arial, sans-serif, -apple-system;
-$font-family-heading: 'Playfair Display', serif, -apple-system;
+$font-family-heading: "Playfair Display", serif, -apple-system;
 
 // Footer
 $footer-background-color: $primary;
@@ -27,39 +28,39 @@ $sub-footer-background-color: darken($primary, 10%);
 $sub-footer-text-color: $white;
 
 // Bootstrap
-@import 'bootstrap-variables';
+@import "bootstrap-variables";
-@import 'bootstrap/bootstrap-reboot';
+@import "bootstrap/bootstrap-reboot";
-@import 'bootstrap/bootstrap-grid';
+@import "bootstrap/bootstrap-grid";
 // @import 'bootstrap/bootstrap'; // Uncomment this line to import the entire Bootstrap library
 
-
 // Libraries
-@import 'libraries/hamburgers/hamburgers';
+@import "libraries/hamburgers/hamburgers";
 
 // Components
-@import 'components/type';
+@import "components/type";
-@import 'components/page';
+@import "components/page";
-@import 'components/header';
+@import "components/header";
-@import 'components/footer';
+@import "components/footer";
-@import 'components/sub-footer';
+@import "components/sub-footer";
-@import 'components/logo';
+@import "components/logo";
-@import 'components/main-menu';
+@import "components/main-menu";
-@import 'components/main-menu-mobile';
+@import "components/main-menu-mobile";
-@import 'components/hamburger';
+@import "components/hamburger";
-@import 'components/buttons';
+@import "components/buttons";
-@import 'components/call';
+@import "components/call";
-@import 'components/title';
+@import "components/title";
-@import 'components/content';
+@import "components/content";
-@import 'components/intro';
+@import "components/intro";
-@import 'components/intro-image';
+@import "components/intro-image";
-@import 'components/strip';
+@import "components/strip";
-@import 'components/feature';
+@import "components/feature";
-@import 'components/social';
+@import "components/social";
+// @import "components/fonts"; // Uncomment this line to self host font
 
 // Pages
-@import 'pages/page-home';
+@import "pages/page-home";
-@import 'pages/page-teams';
+@import "pages/page-teams";
-@import 'pages/page-service';
+@import "pages/page-service";
 
 body {
   font-size: 16px;

contact.md

@@ -1,6 +1,7 @@
 ---
 title: Contact
 layout: contact
+description: Contact
 ---
 
 Lorem markdownum aequalis strigis. Saetigeri iubeas, vultu huic alvum nondum de obside ut laniavit arbor palmis, cum quin. Rupes vetat videndo, armigerae crimen habet Priamum nec.

services.md

@@ -1,9 +1,10 @@
 ---
 title: Services
 layout: services
+description: Services
 intro_image: "images/illustrations/reading.svg"
 intro_image_absolute: true
-intro_image_hide_on_mobile: false
+intro_image_hide_on_mobile: true
 ---
 
 # Services that grow with your business

team.md

@@ -1,6 +1,7 @@
 ---
 title: Team
 layout: teams
+description: Team
 permalink: "/team/"
 intro_image_absolute: true
 intro_image_hide_on_mobile: false