Use "*-section class" instead of adding new div

exampleSite/config.yaml

@@ -16,7 +16,6 @@ googleAnalytics: UA-xxxxxxxx
 disqusShortname: does-not-exist
 
 # Enable global emoji support
-enableEmoji: true
 
 # Custom parameters
 params:

layouts/_default/single.html

@@ -13,7 +13,7 @@
 {{ define "content" }}
 <div class="container p-0 read-area">
   <!--Hero Area-->
-  <div class="hero-area col-sm-12" style='background-image: url({{ partial "helpers/get-hero.html" . }});'>
+  <div class="hero-area col-sm-12" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
   </div>
 
   <!--Content Start-->

layouts/partials/about.html

@@ -1,46 +1,44 @@
-<div class="container anchor p-md-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="about-section">
-    <div class="row pt-sm-2 pt-md-4 align-self-center">
-      <!-- summary -->
-      <div class="col-md-6">
-      <h3 class="p-1">{{ site.Params.author.name }}</h3>
-        {{ if .designation }}
-        <h5 class="p-1">
-          {{ .designation }}
-          {{ if .company }}
-            at <a href="{{ .company.url }}">{{ .company.name }}</a>
-          {{ end }}
-        </h5>
+<div class="container anchor p-md-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
+  <div class="row pt-sm-2 pt-md-4 align-self-center">
+    <!-- summary -->
+    <div class="col-md-6">
+    <h3 class="p-1">{{ site.Params.author.name }}</h3>
+      {{ if .designation }}
+      <h5 class="p-1">
+        {{ .designation }}
+        {{ if .company }}
+          at <a href="{{ .company.url }}">{{ .company.name }}</a>
         {{ end }}
-        <p class="p-1 text-justify">
-          {{ .summary | markdownify }}
-        </p>
-        <div class="text-container ml-auto">
-          <ul class="social-link d-flex">
-            {{ range .socialLinks }}
-            <li>
-              {{ if eq .name "Email" }}
-                <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-              {{ else }}
-                <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-              {{ end }}
-            </li>
+      </h5>
+      {{ end }}
+      <p class="p-1 text-justify">
+        {{ .summary | markdownify }}
+      </p>
+      <div class="text-container ml-auto">
+        <ul class="social-link d-flex">
+          {{ range .socialLinks }}
+          <li>
+            {{ if eq .name "Email" }}
+              <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ else }}
+              <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
             {{ end }}
-          </ul>
-        </div>
-        {{ if .resume }}
-        <a href="{{ .resume }}" target="#"
-          ><button class="btn btn-dark">My Resume</button></a
-        >
-        {{ end }}
-      </div>
-      <!-- soft skills circular-progressbar -->
-      <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
-        <div class="row">
-          {{ range .softSkills }}
-            {{ partial "progress/soft-skills" . }}
+          </li>
           {{ end }}
-        </div>
+        </ul>
+      </div>
+      {{ if .resume }}
+      <a href="{{ .resume }}" target="#"
+        ><button class="btn btn-dark">My Resume</button></a
+      >
+      {{ end }}
+    </div>
+    <!-- soft skills circular-progressbar -->
+    <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
+      <div class="row">
+        {{ range .softSkills }}
+          {{ partial "progress/soft-skills" . }}
+        {{ end }}
       </div>
     </div>
   </div>

layouts/partials/achievements.html

@@ -1,15 +1,13 @@
-<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="achievements-section">
-    <h1 class="text-center">{{ .section.name }}</h1>
-    <div class="container">
-      <div class="row" id="gallery">
-      </div>
-    </div>
-    <!-- achievements-holder holds achievement-entry -->
-    <div class="d-none" id="achievements-holder">
-      {{ range .achievements }}
-        {{ partial "misc/achievement.html" . }}
-      {{ end }}
+<div class="container-fluid anchor pb-5 achievements-section" id="{{ replace (lower .section.name) " " "-" }}">
+  <h1 class="text-center">{{ .section.name }}</h1>
+  <div class="container">
+    <div class="row" id="gallery">
     </div>
   </div>
+  <!-- achievements-holder holds achievement-entry -->
+  <div class="d-none" id="achievements-holder">
+    {{ range .achievements }}
+      {{ partial "misc/achievement.html" . }}
+    {{ end }}
+  </div>
 </div>

layouts/partials/experiences.html

@@ -1,25 +1,23 @@
-<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="experiences-section">
-    <h1 class="text-center">{{ .section.name }}</h1>
+<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
+  <h1 class="text-center">{{ .section.name }}</h1>
 
-    <div class="container timeline text-justify">
-     {{ $totalExperiences:= len .experiences }}
-     {{ range $index,$experience:= .experiences }}
-       {{ if eq (mod $index 2) 0 }}
-         <div class="row align-items-center  d-flex">
-           {{ partial "experiences/vertical-line.html" $index }}
-           {{ partial "experiences/experience-info.html" $experience }}
-         </div>
-       {{else}}
-         <div class="row align-items-center justify-content-end d-flex">
-           {{ partial "experiences/experience-info.html" $experience }}
-           {{ partial "experiences/vertical-line.html" $index }}
-         </div>
-       {{ end }}
-       {{ if lt $index (sub $totalExperiences 1) }}
-         {{ partial "experiences/horizontal-line.html" $index }}
-       {{ end }}
+  <div class="container timeline text-justify">
+   {{ $totalExperiences:= len .experiences }}
+   {{ range $index,$experience:= .experiences }}
+     {{ if eq (mod $index 2) 0 }}
+       <div class="row align-items-center  d-flex">
+         {{ partial "experiences/vertical-line.html" $index }}
+         {{ partial "experiences/experience-info.html" $experience }}
+       </div>
+     {{else}}
+       <div class="row align-items-center justify-content-end d-flex">
+         {{ partial "experiences/experience-info.html" $experience }}
+         {{ partial "experiences/vertical-line.html" $index }}
+       </div>
      {{ end }}
-    </div>
+     {{ if lt $index (sub $totalExperiences 1) }}
+       {{ partial "experiences/horizontal-line.html" $index }}
+     {{ end }}
+   {{ end }}
   </div>
 </div>

layouts/partials/projects.html

@@ -1,21 +1,19 @@
-<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="projects-section">
-    <h1 class="text-center">{{ .section.name }}</h1>
-    <div class="container ml-auto text-center">
-      <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
-        {{ range .buttons }}
-        <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
-          {{ .name }}
-        </button>
-        {{ end }}
-      </div>
+<div class="container-fluid anchor pb-5 projects-section" id="{{ replace (lower .section.name) " " "-" }}">
+  <h1 class="text-center">{{ .section.name }}</h1>
+  <div class="container ml-auto text-center">
+    <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
     </div>
-    <div class="container filtr-projects">
-      <div class="row" id="project-card-holder">
-        {{ range .projects }}
-          {{ partial "cards/project" . }}
-        {{ end }}
-      </div>
+  </div>
+  <div class="container filtr-projects">
+    <div class="row" id="project-card-holder">
+      {{ range .projects }}
+        {{ partial "cards/project" . }}
+      {{ end }}
     </div>
   </div>
 </div>

layouts/partials/recent-posts.html

@@ -1,12 +1,10 @@
-<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="recent-posts-section">
-    <h1 class="text-center">{{ .section.name }}</h1>
-    <div class="container">
-      <div class="row" id="recent-post-cards">
-        {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
-          {{ partial "cards/recent-post.html" . }}
-        {{ end }}
-      </div>
+<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ replace (lower .section.name) " " "-" }}">
+  <h1 class="text-center">{{ .section.name }}</h1>
+  <div class="container">
+    <div class="row" id="recent-post-cards">
+      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+        {{ partial "cards/recent-post.html" . }}
+      {{ end }}
     </div>
   </div>
 </div>

layouts/partials/skills.html

@@ -1,12 +1,10 @@
-<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="skills-section">
-    <h1 class="text-center">{{ .section.name }}</h1>
-    <div class="container d-flex-block">
-      <div class="row" id="primary-skills">
-        {{ range .skills }}
-          {{ partial "cards/skill.html" . }}
-        {{ end }}
-      </div>
+<div class="container-fluid anchor pb-5 skills-section" id="{{ replace (lower .section.name) " " "-" }}">
+  <h1 class="text-center">{{ .section.name }}</h1>
+  <div class="container d-flex-block">
+    <div class="row" id="primary-skills">
+      {{ range .skills }}
+        {{ partial "cards/skill.html" . }}
+      {{ end }}
     </div>
   </div>
 </div>

static/assets/css/achievements.css

@@ -1,4 +1,4 @@
-#achievements-section .container {
+.achievements-section .container {
   padding-top: 0.5rem;
 }
 

static/assets/css/projects.css

@@ -1,10 +1,10 @@
-#projects-section .card .card-header {
+.projects-section .card .card-header {
   background-color: #f9fafc;
   padding: 0.7rem;
   padding-bottom: 0rem;
 }
 
-#projects-section .card .card-img-xs {
+.projects-section .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
@@ -15,11 +15,11 @@
   float: right;
 }
 
-#projects-section .card .card-body {
+.projects-section .card .card-body {
   padding: 0.7rem;
 }
 
-#projects-section .card .card-header .sub-title {
+.projects-section .card .card-header .sub-title {
   color: #8392a5;
   margin-top: 0.4rem;
 }
@@ -55,7 +55,7 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  #projects-section .btn {
+  .projects-section .btn {
     margin-top: 0.3125rem;
   }
 }

static/assets/css/recent-posts.css

@@ -1,19 +1,19 @@
-#recent-posts-section .container{
+.recent-posts-section .container{
   padding-top: 1rem;
 }
 
-#recent-posts-section .card .card-footer span {
+.recent-posts-section .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;
   padding-top: 5px;
 }
 
-#recent-posts-section .card .card-footer {
+.recent-posts-section .card .card-footer {
   background: #fff;
   margin-top: auto;
 }
 
-#recent-posts-section .post-card-link{
+.recent-posts-section .post-card-link{
   text-decoration: none;
 }
 

static/assets/css/skills.css

@@ -1,4 +1,4 @@
-#skills-section .card .card-head {
+.skills-section .card .card-head {
   background-color: #f9fafc;
   height: fit-content;
   padding: 0.7rem;
@@ -6,16 +6,16 @@
   border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
 }
 
-#skills-section .card .card-img-xs {
+.skills-section .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
-#skills-section .card {
+.skills-section .card {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-#skills-section .card .card-body {
+.skills-section .card .card-body {
   padding-top: 0.2rem;
   padding-left: 0.7rem;
 }

static/assets/css/style.css

@@ -250,10 +250,10 @@ img.right{
     padding-right: 5px;
   }
 
-  #skills-section,
-  #projects-section,
-  #recent-posts-section,
-  #achievements-section{
+  .skills-section,
+  .projects-section,
+  .recent-posts-section,
+  .achievements-section{
     padding-left: 0;
     padding-right: 0;
   }