update

Statics param, and optional GPA by @sonic182

README.md

@@ -1,4 +1,4 @@
-# Hugo Profile
+# Hugo Profile | [Wiki Page](https://github.com/gurusabarish/hugo-profile/wiki)
 
 [![Twitter](https://img.shields.io/twitter/url?label=Tweet&style=social&url=https%3A%2F%2Fgithub.com%2Fgurusabarish%2Fhugo-profile)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fgurusabarish%2Fhugo-profile) [![GitHub forks](https://img.shields.io/github/forks/gurusabarish/hugo-profile?style=plastic)](https://github.com/gurusabarish/hugo-profile/network) [![GitHub stars](https://img.shields.io/github/stars/gurusabarish/hugo-profile?style=plastic)](https://github.com/gurusabarish/hugo-profile/stargazers)
 

exampleSite/config.yaml

@@ -41,6 +41,7 @@ Menus:
 params:
   title: "Hugo Profile"
   description: Text about my cool site
+  # staticPath: ""  # The path to serve the static files from
   favicon: "/fav.png"
 
   theme:
@@ -106,12 +107,11 @@ params:
         - icon: /fav.png
           url: "https://example.com"
 
-
   # About
   about:
     enable: true
     title: "About Me"
-    image: '/images/me.png'
+    image: "/images/me.png"
     content: |-
       I am a software developer with a passion for web development. I have a background in computer science and mathematics, and I have a strong interest in the intersection of technology and art. I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. 
 
@@ -315,5 +315,3 @@ params:
       twitter: https://twitter.com
       instagram: https://instagram.com
       facebook: https://facebook.com
-
-

exampleSite/content/about.md

@@ -0,0 +1,29 @@
+---
+title: "About Me"
+date: 2021-04-03T22:53:58+05:30
+draft: false
+description: ""
+
+name: "Isabella"
+image: /images/me.png
+socialLinks:
+  fontAwesomeIcons:
+    - icon: fab fa-github
+      url: https://example.com
+    - icon: fab fa-twitter
+      url: https://example.com
+  customIcons:
+    - icon: /fav.png
+      url: "https://example.com"
+layout: about
+---
+
+I am a software developer with a passion for web development. I have a background in computer science and mathematics, and I have a strong interest in the intersection of technology and art. I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA.
+
+I am currently working on a project that will be used to help people find the best way to get around the city.
+
+Here are a few technologies I've been working with recently:
+
+- React
+- Node
+- Express

exampleSite/content/experience.md

@@ -0,0 +1,29 @@
+---
+title: "About Me"
+date: 2021-04-03T22:53:58+05:30
+draft: false
+description: ""
+
+name: "Isabella"
+image: /images/me.png
+socialLinks:
+  fontAwesomeIcons:
+    - icon: fab fa-github
+      url: https://example.com
+    - icon: fab fa-twitter
+      url: https://example.com
+  customIcons:
+    - icon: /fav.png
+      url: "https://example.com"
+layout: experience
+---
+
+I am a software developer with a passion for web development. I have a background in computer science and mathematics, and I have a strong interest in the intersection of technology and art. I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA.
+
+I am currently working on a project that will be used to help people find the best way to get around the city.
+
+Here are a few technologies I've been working with recently:
+
+- React
+- Node
+- Express

layouts/404.html

@@ -8,7 +8,7 @@
 
 {{ define "main" }}
 <div class="container py-5 text-center">
-    <img src="/404.png" alt="404 page not found" class="img-fluid" width="40%">
+    <img src="{{ .Site.Params.staticPath }}/404.png" alt="404 page not found" class="img-fluid" width="40%">
     <h1>404 Page Not Found</h1>
 </div>
 {{ end }}

layouts/_default/about.html

@@ -0,0 +1,86 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Params.description }}">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/multipage/about.css">
+
+<!-- fontawesome -->
+<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>
+{{ end }}
+
+{{ define "title" }}
+{{.Title }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+<section id="single">
+    <div class="container">
+        <div class="title mb-3">
+            <h1 class="text-center mb-4">{{ .Title }}</h1>
+        </div>
+        <div class="row justify-content-center">
+            {{ if .Params.image }}
+            <div class="col-sm-12 col-md-12 col-lg-3 px-3">
+                <div class="sticky-sidebar">
+                    <aside class="aboutImg">
+                        <div class="text-center">
+                            <img src="{{ .Params.image }}" class="mx-auto rounded" alt="">
+                        </div>
+                        <h2 class="text-center pt-3">
+                            {{ .Params.name }}
+                        </h2>
+                        <div class="aboutImg-content">
+                            <ul class="list-inline pt-3 text-center">
+                                {{ range .Params.socialLinks.fontAwesomeIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank">
+                                        <i class="{{ .icon }}"></i>
+                                    </a>
+                                </li>
+                                {{ end }}
+
+                                {{ range .Params.socialLinks.customIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank" class="img-icon">
+                                        <img src="{{ .icon }}">
+                                    </a>
+                                </li>
+                                {{ end }}
+                            </ul>
+                        </div>
+                    </aside>
+                </div>
+            </div>
+            {{ end }}
+
+            <div class="col-sm-12 col-md-12 col-lg-6 pt-4 p-2">
+                <div class="pr-lg-4">
+                    <article class="page-content p-2">
+                        {{ .Content | emojify }}
+                    </article>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button class="p-2 px-3" onclick="topFunction()" id="topScroll">
+        <i class="fas fa-angle-up"></i>
+    </button>
+</section>
+
+<script>
+    var topScroll = document.getElementById("topScroll");
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topScroll.style.display = "block";
+        } else {
+            topScroll.style.display = "none";
+        }
+    }
+
+    function topFunction() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    }
+</script>
+
+{{ end }}

layouts/_default/baseof.html

@@ -12,7 +12,7 @@
 <body class="light" onload="loading()">
   <!-- javascripts -->
   <!-- <script src="/js/jquery-3.6.0.min.js"></script> -->
-  <script src="/bootstrap-5/js/bootstrap.bundle.js"></script>
+  <script src="{{ .Site.Params.staticPath }}/bootstrap-5/js/bootstrap.bundle.js"></script>
 
   {{- partial "sections/header.html" . -}}
   <div id="content">

layouts/_default/experience.html

@@ -0,0 +1,86 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Params.description }}">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/multipage/about.css">
+
+<!-- fontawesome -->
+<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>
+{{ end }}
+
+{{ define "title" }}
+{{.Title }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+<section id="single">
+    <div class="container">
+        <div class="title mb-3">
+            <h1 class="text-center mb-4">{{ .Title }}</h1>
+        </div>
+        <div class="row justify-content-center">
+            {{ if .Params.image }}
+            <div class="col-sm-12 col-md-12 col-lg-3 px-3">
+                <div class="sticky-sidebar">
+                    <aside class="aboutImg">
+                        <div class="text-center">
+                            <img src="{{ .Params.image }}" class="mx-auto rounded" alt="">
+                        </div>
+                        <h2 class="text-center pt-3">
+                            {{ .Params.name }}
+                        </h2>
+                        <div class="aboutImg-content">
+                            <ul class="list-inline pt-3 text-center">
+                                {{ range .Params.socialLinks.fontAwesomeIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank">
+                                        <i class="{{ .icon }}"></i>
+                                    </a>
+                                </li>
+                                {{ end }}
+
+                                {{ range .Params.socialLinks.customIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank" class="img-icon">
+                                        <img src="{{ .icon }}">
+                                    </a>
+                                </li>
+                                {{ end }}
+                            </ul>
+                        </div>
+                    </aside>
+                </div>
+            </div>
+            {{ end }}
+
+            <div class="col-sm-12 col-md-12 col-lg-6 pt-4 p-2">
+                <div class="pr-lg-4">
+                    <article class="page-content p-2">
+                        {{ .Content | emojify }}
+                    </article>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button class="p-2 px-3" onclick="topFunction()" id="topScroll">
+        <i class="fas fa-angle-up"></i>
+    </button>
+</section>
+
+<script>
+    var topScroll = document.getElementById("topScroll");
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topScroll.style.display = "block";
+        } else {
+            topScroll.style.display = "none";
+        }
+    }
+
+    function topFunction() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    }
+</script>
+
+{{ end }}

layouts/_default/list.html

@@ -1,6 +1,6 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
-<link rel="stylesheet" href="/css/list.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/list.css" media="all">
 {{ end }}
 
 {{ define "title" }}

layouts/_default/single.html

@@ -1,9 +1,9 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Params.description }}">
-<link rel="stylesheet" href="/css/single.css">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/single.css">
 
 <!-- fontawesome -->
-<script defer src="/fontawesome-5/all-5.15.4.js"></script>
+<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>
 {{ end }}
 
 {{ define "title" }}
@@ -29,7 +29,7 @@
             <img class="img-fluid" src="{{ .Params.image }}" alt="{{ .Title }}">
           </div>
           {{ end }}
-          <article class="page-content">
+          <article class="page-content  p-2">
           {{ .Content | emojify }}
           </article>
         </div>
@@ -86,7 +86,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-12 col-md-12 col-lg-9 p-2">
+      <div class="col-sm-12 col-md-12 col-lg-9 p-4">
         {{ template "_internal/disqus.html" . }}
       </div>
     </div>
@@ -100,7 +100,6 @@
   var topScroll = document.getElementById("topScroll");
   window.onscroll = function() {scrollFunction()};
 
-  console.log(topScroll);
   function scrollFunction() {
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
       topScroll.style.display = "block";

layouts/index.html

@@ -1,10 +1,10 @@
 {{ define "head" }}
 <meta name="description" content={{ .Site.Params.description }}>
-<link rel="stylesheet" href="/css/index.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/index.css" media="all">
-<link rel="stylesheet" href="/css/projects.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/projects.css" media="all">
 
 <!-- fontawesome -->
-<script defer src="/fontawesome-5/all-5.15.4.js"></script>
+<script defer src="{{ .Site.Params.staticPath }}/fontawesome-5/all-5.15.4.js"></script>
 {{ end }}
 
 {{ define "title" }}

layouts/partials/head.html

@@ -11,7 +11,7 @@
     rel="stylesheet">
 
 <!-- font configuration -->
-<link rel="stylesheet" href="/css/font.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/font.css" media="all">
 
 <!-- Internal templates -->
 {{ template "_internal/google_analytics_async.html" . }}
@@ -19,16 +19,16 @@
 {{ template "_internal/twitter_cards.html" . }}
 
 <!-- stylesheets -->
-<link rel="stylesheet" href="/bootstrap-5/css/bootstrap.min.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/bootstrap-5/css/bootstrap.min.css" media="all">
-<link rel="stylesheet" href="/css/header.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/header.css" media="all">
-<link rel="stylesheet" href="/css/footer.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/footer.css" media="all">
 
 <!-- theme -->
-<link rel="stylesheet" href="/css/theme.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/theme.css" media="all">
 
 <!-- Custom Styles -->
 {{ if .Site.Params.customCSS }}
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/style.css">
 {{ end }}
 
 <style>

layouts/partials/sections/education.html

@@ -35,12 +35,14 @@
                                 {{ .school.name }}
                                 {{ end }}
 
+                                {{ if .GPA }}
                                 <div class="py-1">
                                     GPA:
                                     <i>
                                         <small>{{ .GPA }}</small>
                                     </i> 
                                 </div>
+                                {{ end }}
                                 <div class="py-1 education-content">
                                     {{ .content | markdownify}}
                                 </div>

layouts/partials/sections/header.html

@@ -48,65 +48,41 @@
             <!-- navbar content -->
             <div class="collapse navbar-collapse text-wrap primary-font" id="navbarContent">
                 <ul class="navbar-nav {{ .Site.Params.navbar.align | default "ms-auto"}} text-center">
-                    {{
+                    {{ if and (.Site.Params.about.enable | default false) (not (.Site.Params.navbar.menus.disableAbout | default false)) }}
-                    if and
-                    (.Site.Params.about.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableAbout | default false))
-                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">About</a>
                     </li>
                     {{ end }}
 
-                    {{ 
+                    {{ if and (.Site.Params.experience.enable | default false) (not (.Site.Params.navbar.menus.disableExperience | default false)) }}
-                    if and
-                    (.Site.Params.experience.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableExperience | default false))
-                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#experience"
                             aria-label="experience">Experience</a>
                     </li>
                     {{ end }}
 
-                    {{
+                    {{ if and (.Site.Params.education.enable | default false) (not (.Site.Params.navbar.menus.disableEducation | default false)) }}
-                    if and
-                    (.Site.Params.education.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableEducation | default false))
-                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#education"
                             aria-label="education">Education</a>
                     </li>
                     {{ end }}
 
-                    {{
+                    {{ if and (.Site.Params.projects.enable | default false) (not (.Site.Params.navbar.menus.disableEducation | default false)) }}
-                    if and
-                    (.Site.Params.projects.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableEducation | default false))
-                    }}
-                    {{/* {{ if .Site.Params.projects.enable | default false }} */}}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#projects"
                             aria-label="projects">Projects</a>
                     </li>
                     {{ end }}
 
-                    {{
+                    {{ if and (.Site.Params.achievements.enable | default false) (not (.Site.Params.navbar.menus.disableAchievements | default false)) }}
-                    if and
-                    (.Site.Params.achievements.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableAchievements | default false))
-                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#achievements"
                             aria-label="achievements">Achievements</a>
                     </li>
                     {{ end }}
 
-                    {{ if and
+                    {{ if and (.Site.Params.contact.enable | default false) (not (.Site.Params.navbar.menus.disableContact | default false)) }}
-                    (.Site.Params.contact.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableContact | default false))
-                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#contact"
                             aria-label="contact">Contact</a>

layouts/partials/sections/hero/index.html

@@ -1,5 +1,5 @@
 {{ if .Site.Params.hero.enable | default false }}
-<section id="hero" class="py-5">
+<section id="hero" class="py-5 align-middle">
     <div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
         <div class="row">
             <div class="col-sm-12 col-md-12 col-lg-8 content" id="primary-font">

layouts/projects/list.html

@@ -1,9 +1,9 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
-<link rel="stylesheet" href="/css/projects.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/projects.css" media="all">
 
 <!-- fontawesome -->
-<script defer src="/fontawesome-5/all-5.15.4.js"></script>
+<script defer src="{{ .Site.Params.staticPath }}/fontawesome-5/all-5.15.4.js"></script>
 {{ end }}
 
 {{ define "title" }}

static/css/header.css

@@ -1,3 +1,8 @@
+header {
+    z-index: 10;
+    position: relative;
+}
+
 header .navbar .navbar-nav a {
     color: var(--text-color) !important;
 }
@@ -39,6 +44,8 @@ li > .dropdown-toggle:focus{
 }
 
 .dropdown-menu {
+    overflow: auto;
+    /* z-index: 100; */
     background-color: var(--background-color) !important;
     border-color: var(--text-secondary-color) !important;
 }

static/css/index.css

@@ -75,7 +75,6 @@ header .navbar {
     line-height: 2rem;
     max-width: 100%;
 }
-
 #hero .content {
     animation: fade-left 1s ease-out;
 }
@@ -188,6 +187,8 @@ header .navbar {
     width: 100%;
 }
 
+
+
 /* about me */
 #about h3 {
     color: var(--text-secondary-color) !important;

static/css/multipage/about.css

@@ -0,0 +1,252 @@
+#single {
+    padding: 60px 0;
+    line-height: 1.7em;
+    font-size: 17px;
+}
+
+#single .title>h1 {
+    opacity: 0.8;
+    color: var(--text-color) !important;
+}
+
+#single .title small {
+    opacity: 0.7;
+}
+
+#single .featured-image {
+    padding: 1rem;
+    padding-top: 0;
+}
+
+#single .featured-image img {
+    border-radius: 1rem;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    margin-bottom: 1rem;
+}
+
+#single .page-content a {
+    display: inline-block;
+    text-decoration: none;
+    color: var(--primary-color) !important;
+}
+
+#single .page-content a::after {
+    content: "";
+    display: block;
+    width: 0px;
+    height: 2px;
+    bottom: 0.37em;
+    background-color: var(--primary-color);
+    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
+    opacity: 0.5;
+}
+
+#single .page-content a:hover::after,
+#single .page-content a:focus::after,
+#single .page-content a:active::after {
+    width: 100%;
+}
+
+#single .page-content h1,
+#single .page-content h2,
+#single .page-content h3,
+#single .page-content h4,
+#single .page-content h5,
+#single .page-content h6 {
+    color: var(--primary-color) !important;
+    margin-bottom: 0.7em;
+    opacity: 0.9;
+}
+
+#single .page-content blockquote {
+    padding: 20px 30px;
+    border-left: 6px solid var(--primary-color) !important;
+    color: var(--text-secondary-color) !important;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 30px 0;
+    border-radius: 5px;
+}
+
+#single .page-content blockquote,
+#single .page-content blockquote * {
+    background-color: var(--secondary-color) !important;
+}
+
+/* table */
+#single .page-content table {
+    width: auto;
+    border-radius: 5px;
+    padding: 0.1rem;
+    margin-bottom: 1.2em;
+    max-width: 100%;
+    display: block;
+    overflow-x: auto;
+    opacity: 0.8;
+}
+
+#single .page-content table>tr {
+    height: 40px !important;
+}
+
+#single .page-content table>thead>tr>th {
+    padding: 0.5rem !important;
+    background-color: var(--primary-color) !important;
+    color: var(--secondary-color) !important;
+    border: 1px solid var(--secondary-color);
+    opacity: 0.9;
+}
+
+#single .page-content table>tbody>tr>td {
+    padding: 0.5rem !important;
+    border: 1px solid var(--secondary-color);
+    background-color: var(--secondary-color) !important;
+    opacity: 0.9;
+}
+
+#single .page-content table>thead>tr {
+    background-color: var(--secondary-color) !important;
+    color: var(--secondary-color) !important;
+}
+
+/* code */
+
+#single .page-content pre {
+    border-radius: 0.7em !important;
+    margin: 5px;
+    margin-bottom: 2em;
+    padding: 2em;
+    background-color: var(--secondary-color) !important;
+    color: var(--text-secondary-color) !important;
+    max-height: 450px;
+}
+
+#single .page-content pre>code {
+    color: var(--text-secondary-color) !important;
+}
+
+#single .page-content code {
+    color: var(--primary-color) !important;
+}
+
+/* kbd and mark */
+
+#single .page-content kbd {
+    color: var(--primary-color) !important;
+    background-color: var(--secondary-color) !important;
+}
+
+#single .page-content mark {
+    color: var(--primary-color) !important;
+    background-color: var(--secondary-color) !important;
+}
+
+/* list */
+
+#single .page-content ol,
+#single .page-content ul {
+    margin-bottom: 1.2em;
+    padding-left: 1.5em;
+    list-style-position: inside;
+    opacity: 0.9;
+}
+
+#single .page-content ol li li,
+#single .page-content ul li li {
+    margin-bottom: 0.5em;
+    padding-left: 1.5em;
+}
+
+/* sidebar */
+
+#single aside {
+    /* background-color: var(--secondary-color); */
+    border-radius: .7rem;
+    padding: .7rem 1rem;
+    margin-bottom: 1em;
+}
+
+#single .sticky-sidebar {
+    position: sticky;
+    top: 150px;
+}
+
+/* aboutImg */
+
+#single aside.aboutImg {
+    padding: .7rem 1rem;
+}
+
+#single aside.aboutImg img {
+    border-radius: 1.5rem !important;
+    position: relative;
+    /* box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2); */
+    max-width: 100%;
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+    #single aside.aboutImg img {
+        width: 60%;
+    }
+ }
+
+
+#single aside.aboutImg h5 {
+    margin: .7em 0;
+    margin-bottom: 1em;
+    color: var(--text-color);
+}
+
+#single aside.aboutImg .img-icon img {
+    width: 1em;
+}
+
+#single aside.aboutImg .aboutImg-content {
+    margin-bottom: 1em;
+    opacity: 0.9;
+}
+
+#single aside.aboutImg .aboutImg-content ul {
+    margin-bottom: 1em;
+    opacity: 0.9;
+}
+
+#single aside.aboutImg .aboutImg-content ul li a {
+    border: 1px solid var(--primary-color);
+    padding: .7rem;
+    color: var(--text-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#single aside.aboutImg .aboutImg-content ul li {
+    margin: .7rem .5rem;
+    margin-left: 0;
+}
+
+#single aside.aboutImg .aboutImg-content ul li:hover a {
+    opacity: .8;
+    color: var(--primary-color);
+}
+
+/* Top scroll */
+
+#single #topScroll {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+#single #topScroll:hover {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+    transition: .5s;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}

static/css/single.css

@@ -264,8 +264,8 @@
 #single #topScroll {
     display: none;
     position: fixed;
-    bottom: 10px;
+    bottom: 20px;
-    right: 10px;
+    right: 20px;
     z-index: 99;
     border: none;
     outline: none;