FIX avatar image CHANGE class names

assets/scss/index.scss

@@ -321,7 +321,7 @@ a {
   padding-block-end: 3rem;
 }
 
-.content {
+main > .content {
   padding-top: 9rem;
   padding-bottom: 2rem;
   padding-right: 1.5rem;
@@ -344,56 +344,60 @@ a {
   flex: 1 0 auto;
 }
 
-.section-even {
+.section.even {
   // background-color: #eee;
 }
 
-.section-highlight {
+.section.highlight {
   background-color: {{ .Site.Params.color.primary }};
 }
 
-.section-content {
+.section > .content {
   width: 100%;
   max-width: $width;
   margin: auto;
   justify-content: center;
 }
 
-.hero .hero-content {
+.hero > .content {
   display: flex;
   justify-content: center;
 }
 
-.hero .description {
+.hero > .content > .image {
+  max-width: 150px;
+}
+
+.hero > .description {
   padding: 10px;
   position: relative;
   margin-block-start: 50px;
   border: none;
 }
 
-.hero .description::before,
-.hero .description::after {
+.hero > .description::before,
+.hero > .description::after {
   position: absolute;
   width: 33px;
   height: 25px;
   content: "";
 }
 
-.hero .description::before {
+.hero > .description::before {
   left: 0;
   top: 0;
   border-left: 3px solid {{ .Site.Params.color.primary }};
   border-top: 3px solid {{ .Site.Params.color.primary }};
 }
 
-.hero .description::after {
+.hero > .description::after {
   right: 0;
   bottom: 0;
   border-right: 3px solid {{ .Site.Params.color.primary }};
   border-bottom: 3px solid {{ .Site.Params.color.primary }};
 }
 
-.hero-content > div {
+.hero > .content > div {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -401,17 +405,17 @@ a {
   padding-inline-start: 25px;
 }
 
-.hero-content .social {
+.hero > .content .social {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
 
-.hero-content .social i {
+.hero > .content .social i {
   font-size: x-large;
 }
 
-.hero-content .social a {
+.hero > .content .social a {
   padding-inline: 6px;
   color: {{ .Site.Params.color.primary }};
 }
@@ -473,5 +477,4 @@ img {
   border-radius: 50%;
   border: 3px solid {{ .Site.Params.color.primary }};
   object-fit: cover;
-  width: 150px;
 }

layouts/partials/components/image.html

@@ -5,7 +5,6 @@ alt: string
 width: int
 height: int
 -->
-{{ $avatar := "avatar"}}
 {{ $sizes := slice "320" "640" "960" "1280" }}
 {{ $ext := path.Ext .url }}
 {{ $name := path.Base (replace .url $ext "") }}
@@ -31,7 +30,7 @@ height: int
     "
   />
   <img 
-    class="{{if eq .type $avatar}}avatar{{end}}" 
+    class="{{ .type }}" 
     width="{{ .width }}" 
     height="{{ .height }}"
     srcset="

layouts/partials/hero.html

@@ -10,11 +10,13 @@ hero:
 content: string
 -->
 <div id="{{ .id }}" class="section {{if eq .odd 0}} section-even {{end}} row">
-  <div class="section-content hero">
+  <div class="content hero">
     {{ with .hero }}
-      <div class="hero-content">
+      <div class="content">
         {{ if .avatar }}
+          <div class="image">
             {{ partial "components/image.html" .avatar }}
+          </div>
         {{ end }}
         <div>
           <h1>{{ .greeting }}</h1>