blog layout update

This commit is contained in:
gurusabarish
2021-01-23 09:54:42 +05:30
parent 40aa344d36
commit 49ed7008b8
14 changed files with 327 additions and 388 deletions
+4 -4
View File
@@ -17,8 +17,8 @@ params:
# Navbar Menus # Navbar Menus
customMenus: customMenus:
- name: "Blog" - name: "Blog"
Url: "/blog" Url: "/blog"
# social # social
name: "Hugo-profile" name: "Hugo-profile"
@@ -43,7 +43,7 @@ params:
description: I build something beautiful using Python. description: I build something beautiful using Python.
- logo: fas fa-robot - logo: fas fa-robot
title: Machine learning title: Machine learning
description: I train robust models for various tasks. description: I train robust models for various tasks.
- logo: fab fa-html5 - logo: fab fa-html5
@@ -51,7 +51,7 @@ params:
description: I love to build things for web description: I love to build things for web
#blog ( Description for seo. If you want to show description in your blog post, let's make it true) #blog ( Description for seo. If you want to show description in your blog post, let's make it true)
showdescription: true showdescription: false
Author: Author:
name: "Gurusabarish" name: "Gurusabarish"
+3
View File
@@ -54,3 +54,6 @@ params:
#blog ( Description for seo. If you want to show description in your listing or single page, let's make it true) #blog ( Description for seo. If you want to show description in your listing or single page, let's make it true)
showdescription: false showdescription: false
Author:
name: "Gurusabarish"
website: "https://github.com/gurusabarish"
+10 -24
View File
@@ -1,32 +1,18 @@
<!DOCTYPE html> {{ define "main" }}
<html lang="en"> <div class="container">
<div class="row justify-centent-center py-5">
<head>
{{- partial "head.html" . -}}
<!-- stylesheets -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
{{- partial "header.html" . -}}
<div class="bg-white row justify-centent-center py-5">
<div class="display-4 font-weight-bold text-center col p-5"> <div class="display-4 font-weight-bold text-center col p-5">
404 page not found 404 page not found
<div class="text-center p-5"> <div class="text-center p-5">
<a href="{{ .Site.BaseURL }}" class="font-weight-bold btn btn-primary rounded-pill p-3 mb-2">Back to our <a href="{{ .Site.BaseURL }}" class="font-weight-bold btn btn-primary rounded-pill p-3 mb-2">Back to
our
site</a> site</a>
</div> </div>
</div> </div>
</div>
<div class="fixed-bottom"> <div class="fixed-bottom">
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</div>
</div> </div>
</div> </div>
{{- partial "scripts.html" . -}} {{ end }}
</body>
</html>
+1 -16
View File
@@ -4,28 +4,13 @@
<head> <head>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
{{- block "head" . -}}{{- end }} {{- block "head" . -}}{{- end }}
<!-- stylesheets -->
<link rel="stylesheet" href="/css/bootstrap.min.css" media="all">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Peddana&display=swap" rel="stylesheet" media="all">
<style>
footer {
background-color: #1c2d41;
color: #8392a5;
border-top-width: 1px !important;
border-color: #8392a5;
}
</style>
</head> </head>
<body> <body class="bg-white">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
{{- block "main" . -}}{{- end }} {{- block "main" . -}}{{- end }}
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
{{- partial "scripts.html" . -}} {{- partial "scripts.html" . -}}
</body> </body>
</html> </html>
+2 -12
View File
@@ -5,9 +5,8 @@
{{ define "main" }} {{ define "main" }}
<section class="bg-white"> <section>
<div class="container-fluid"> <div class="container-fluid">
<div class="row pt-3 justify-content-center"> <div class="row pt-3 justify-content-center">
<div class="col-lg-6 col-md-6"> <div class="col-lg-6 col-md-6">
{{ range .Paginator.Pages }} {{ range .Paginator.Pages }}
@@ -17,22 +16,19 @@
<h5 class="card-header m-0"> <h5 class="card-header m-0">
{{ if .Params.tags }} {{ if .Params.tags }}
{{ range .Params.tags }} {{ range .Params.tags }}
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="btn btn-info btn-rounded mb-2">{{ . }}</a> <a href="{{ " /tags/" | relLangURL }}{{ . | urlize }}" class="btn btn-info btn-rounded mb-2">{{ . }}</a>
{{ end }} {{ end }}
{{ end }} {{ end }}
</h5> </h5>
{{ end }} {{ end }}
<a class="text-decoration-none" href="{{ .Permalink }}"> <a class="text-decoration-none" href="{{ .Permalink }}">
<div class="card-body"> <div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">{{ .Title }}</div> <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">{{ .Title }}</div>
{{ if .Site.Params.showdescription }} {{ if .Site.Params.showdescription }}
<div class="text-muted py-2"> <div class="text-muted py-2">
{{ .Params.description }} {{ .Params.description }}
</div> </div>
{{ end }} {{ end }}
<div class="text-dark"> <div class="text-dark">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@@ -42,7 +38,6 @@
d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z" /> d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z" />
</svg> </svg>
{{ dateFormat "Jan 2, 2006" .Date }} {{ dateFormat "Jan 2, 2006" .Date }}
{{ if .Params.author }} {{ if .Params.author }}
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor" <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@@ -58,7 +53,6 @@
</div> </div>
{{ end }} {{ end }}
{{ template "_internal/pagination.html" . }} {{ template "_internal/pagination.html" . }}
<div class="row justify-content-center pt-3"> <div class="row justify-content-center pt-3">
<div class="col-lg-7 col-md-7"> <div class="col-lg-7 col-md-7">
<div class=" mb-4"> <div class=" mb-4">
@@ -75,12 +69,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{{ end }} {{ end }}
+30 -178
View File
@@ -1,143 +1,41 @@
{{ define "head"}} {{ define "head"}}
<meta name="description" content="{{ .Params.description }}" /> <meta name="description" content="{{ .Params.description }}" />
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<style>
article {
font-family: 'Peddana', serif;
line-height: 1.3;
font-size: 30px;
}
article blockquote {
margin: 0 !;
border-left: 4px solid #248aaa !important;
background-color: #248baa15 !important;
padding: 0.3rem !important;
padding-left: 1rem !important;
}
article blockquote>p {
color: #3c4858 !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
article h1 {
font-size: 55px !important;
}
article h2 {
font-size: 42px !important;
}
article h3 {
font-size: 35px !important;
}
article h4,
h5,
h6 {
font-size: 30px !important;
}
article table {
border-radius: 0.1rem;
background: #e5e9f2;
border: 1px solid #c0ccda;
padding: 0.1rem;
}
article table tr {
height: 40px !important;
}
article table th,
td {
padding: 0.5rem;
border-left: 1px solid #8392a5;
border-bottom: 1px solid #8392a5;
}
article table thead tr {
background: #248aaa;
color: #e5e9f2;
}
article tbody tr:nth-child(odd) {
background-color: #e5e9f2;
}
article tbody tr:hover {
background: #c0ccda;
}
article img {
width: 100%;
}
article caption,
figcaption {
caption-side: bottom;
text-align: center;
color: #8392a5;
}
article pre {
margin: 5px;
padding: 5%;
font-size: 18px;
max-height: 400px;
border-radius: 2%;
background-color: #1f618d !important;
color: white;
}
article pre>code {
padding: 10px !important;
}
article a.header-anchor {
text-decoration: none;
color: #1c2d41;
}
article a.header-anchor i {
font-size: 10pt;
color: #3c4858;
display: none;
margin-left: 0.5rem;
}
article a.header-anchor:hover i {
display: inline-block;
}
article a.header-anchor code {
color: #e83e8c;
}
article kbd {
background-color: #248aaa !important;
color: #f9fafc;
}
article mark {
background-color: #ffc21280;
}
</style>
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
<section class="bg-white"> <section>
<div class="container"> <div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-md-8"> <div class="row row-eq-height">
<!-- title and date --> <div class="col-md-3 leftside-blog position-fixed d-none d-none d-sm-none d-md-block py-5">
<div class="p-2"> <!-- Tags -->
<h1>{{.Title}}</h1> <div class="mb-4">
<div class="card">
<h5 class="card-header m-0">Tags</h5>
<div class=" card-body">
{{ if .Params.tags }}
{{ range .Params.tags }}
<a href="{{ " /tags/" | relLangURL }}{{ . | urlize }}" class="btn btn-info btn-rounded mb-2">{{ . }}</a>
{{ end }}
{{ end }}
</div>
</a>
</div>
<div class="py-3">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
data-show-count="false">Tweet my work</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<div class="col-md-8 border-left offset-md-3 px-3">
<div class="py-4 text-center">
<!-- title and date -->
<h1 class="blog-title">{{.Title}}</h1>
<div class="text-muted"> <div class="text-muted">
<!-- Date --> <!-- Date -->
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor"
@@ -158,19 +56,6 @@
</svg> </svg>
{{ .Params.author }} {{ .Params.author }}
{{ end }} {{ end }}
<!-- Edit in Github -->
{{ if .Params.github_link }}
<a href="{{ .Params.github_link }}" target="_blank" title="Edit on github">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil float-right" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
<path fill-rule="evenodd"
d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
</svg>
</a>
{{ end}}
</div> </div>
{{ if .Site.Params.showdescription }} {{ if .Site.Params.showdescription }}
@@ -179,26 +64,6 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<!-- Initialise a scratch variable "path" to an empty string -->
{{ $.Scratch.Set "path" "" }}
<li><a href="/">Home</a></li>
<!-- For each non-empty item in the URL path -->
{{ range $element := split .RelPermalink "/" }}
{{ if ne $element "" }}
<!-- Add the element to the scratch variable -->
{{ $.Scratch.Add "path" "/" }}{{ $.Scratch.Add "path" $element }}
<!-- Populate the href from the scratch variable -->
<span class="text-muted px-2">/</span>
<li><a href="{{ $.Scratch.Get "path" }}">{{ humanize . }}</a></li>
{{ end }}
{{ end }}
</ol>
</nav>
</div>
<!-- image --> <!-- image -->
<div class="py-2"> <div class="py-2">
{{ with .Params.bg_image }} {{ with .Params.bg_image }}
@@ -211,20 +76,7 @@
{{.Content}} {{.Content}}
</article> </article>
<!-- Tags -->
<div class="mb-4 p-5">
<div class="card">
<h5 class="card-header m-0">Tags</h5>
<div class=" card-body">
{{ if .Params.tags }}
{{ range .Params.tags }}
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="btn btn-info btn-rounded mb-2">{{ . }}</a>
{{ end }}
{{ end }}
</div>
</a>
</div>
</div>
{{ template "_internal/disqus.html" . }} {{ template "_internal/disqus.html" . }}
+9 -97
View File
@@ -1,99 +1,11 @@
<!DOCTYPE html> {{ define "head" }}
<html lang="en"> <title>{{- .Site.Title -}}</title>
<meta name="description" content="{{ .Site.Params.description }}">
{{ template "_internal/google_analytics.html" . }}
{{ end }}
<head>
<title>{{- .Site.Title -}}</title>
<!-- stylesheets -->
<link rel="stylesheet" href="/css/bootstrap.min.css" media="all">
<link rel="stylesheet" href="/css/fontawesome.min.css" media="all">
<link rel="stylesheet" href="/css/all.min.css" media="all">
<meta name="description" content="{{ .Site.Params.description }}">
{{ template "_internal/google_analytics.html" . }}
{{- partial "head.html" . -}}
<style> {{ define "main" }}
a:hover { {{- partial "sections/about.html" . -}}
text-decoration: none; {{- partial "sections/do_things.html" . -}}
} {{ end }}
/* do things */
.do-things {
background-color: #e5e9f2;
height: auto;
padding: 0;
padding-bottom: 0;
margin: 0;
}
.things-i-do {
font-family: 'Alata', sans-serif;
font-size: 25px;
}
.things {
height: auto;
}
.things-text {
height: 100px;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
.things-i-do {
padding-top: 7% !important;
}
.do-things-card {
padding-left: 15%;
padding-right: 15%;
padding-bottom: 0%;
padding-top: 0%;
}
}
/* about */
.about {
height: auto;
background-color: #e5e9f2;
}
.jop {
font-size: 30px;
}
.about-me {
font-family: 'Alata', sans-serif;
font-size: 25px;
}
.about-content {
font-size: 20px;
}
.about-content a:hover {
text-decoration-line: none;
color: black;
}
@media only screen and (max-width: 768px) {
.about {
height: auto;
}
}
</style>
</head>
<body>
{{- partial "header.html" . -}}
{{- partial "sections/about.html" . -}}
{{- partial "sections/do_things.html" . -}}
{{- partial "footer.html" . -}}
{{- partial "scripts.html" . -}}
</body>
</html>
+4 -16
View File
@@ -1,31 +1,19 @@
<footer> <footer>
<div class="container bg-transparent py-4"> <div class="container bg-transparent py-4">
<div class="row row-eq-height align-items-center"> <div class="row justify-content-center">
<div class="col-md-4 nav-link text-center font-weight-bold">
<a class="text-uppercase" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
</div>
<div class="col-md-4 text-center order-2 order-lg-1 order-md-1"> <div class="col-md-4 text-center order-2 order-lg-1 order-md-1">
<div class="d-none d-sm-none d-md-block"> <div>
<a href="{{ .Site.BaseURL }}"> <a href="{{ .Site.BaseURL }}">
<img alt="Footer logo" src="{{ .Site.Params.favicon | default "/images/favicon.png"}}" <img alt="Footer logo" src="{{ .Site.Params.favicon | default " /images/favicon.png"}}"
height="40px" width="40px"> height="40px" width="40px">
</a> </a>
</div> </div>
&copy; {{ .Site.Params.copyright }} All Rights Reserved &copy; {{ .Site.Params.copyright }} All Rights Reserved
<div class="text-secondary"> <div class="text-secondary">
Powered by Powered by
<a class="text-secondary" href="https://themes.gohugo.io/hugo-profile">Hugo-profile</a> <a class="text-secondary" href="https://github.com/gurusabarish/hugo-profile">Hugo-profile</a>
</div> </div>
</div> </div>
<div class="col-md-4 font-weight-bold order-1">
<ul class="nav justify-content-center">
{{ range site.Params.customMenus }}
<li class="nav-link">
<a href="{{.Url}}" aria-label="{{ .name }}">{{ .name }}</a>
</li>
{{ end }}
</ul>
</div>
</div> </div>
</div> </div>
</footer> </footer>
+10 -31
View File
@@ -1,36 +1,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="{{ .Site.Params.favicon | default "/images/favicon.png"}}" type="image/gif"> <link rel="icon" href="{{ .Site.Params.favicon | default " /images/favicon.png"}}" type="image/gif">
<!-- Header and Footer -->
<style>
/* footer */
footer {
background-color: #1c2d41;
color: #8392a5;
border-top-width: 1px !important;
border-color: #8392a5;
}
footer a { <!-- stylesheets -->
color: #8392a5; <link rel="stylesheet" href="/css/bootstrap.min.css" media="all">
} <link rel="stylesheet" href="/css/all.min.css" media="all">
<link rel="stylesheet" href="/css/fontawesome.min.css" media="all">
<link rel="stylesheet" href="/css/index.css" media="all">
/*navbar*/ <!-- Fonts -->
.navbar-color { <link rel="preconnect" href="https://fonts.gstatic.com">
color: #101820ff; <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"
} media="all">
.navbar-text {
font-size: 17px;
}
.navbar-brand {
font-size: 22px;
}
.nav-link {
color: #101820ff !important;
font-size: 18px;
}
</style>
+1 -1
View File
@@ -1,4 +1,4 @@
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top"> <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm sticky-top">
<div class="container"> <div class="container">
<a class="navbar-brand font-weight-bold" href="{{ .Site.BaseURL | relURL }}"> <a class="navbar-brand font-weight-bold" href="{{ .Site.BaseURL | relURL }}">
{{ if .Site.Params.favicon }} {{ if .Site.Params.favicon }}
+2 -2
View File
@@ -1,5 +1,5 @@
<section> <section>
<div class="about pt-2 bg-white"> <div class="about pt-2">
<div class="container"> <div class="container">
<div class="row justify-content-center "> <div class="row justify-content-center ">
@@ -28,7 +28,7 @@
</div> </div>
<div class="social px-3"> <div class="social px-3">
{{ if .Site.Params.useresume }} {{ if .Site.Params.useresume }}
<a href="{{ .Site.Params.resume | default "#" }}" class="btn btn-info" role="button" <a href="{{ .Site.Params.resume | default " #" }}" class="btn btn-info" role="button"
aria-pressed="true"> aria-pressed="true">
Resume Resume
</a> </a>
+1 -1
View File
@@ -1,6 +1,6 @@
{{ if .Site.Params.usedothings }} {{ if .Site.Params.usedothings }}
<section> <section>
<div class="do-things text-center bg-white" id="do-things"> <div class="do-things text-center" id="do-things">
<div class="container"> <div class="container">
<div class="things-i-do text-primary py-3 font-weight-bold"> <div class="things-i-do text-primary py-3 font-weight-bold">
Things I do Things I do
+244
View File
@@ -0,0 +1,244 @@
body {
font-family: "Roboto", sans-serif;
}
a:hover {
text-decoration: none;
}
/* do things */
.do-things {
height: auto;
padding: 0;
padding-bottom: 0;
margin: 0;
}
.things-i-do {
font-family: "Alata", sans-serif;
font-size: 25px;
}
.things {
height: auto;
}
.things-text {
height: 100px;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
.things-i-do {
padding-top: 7% !important;
}
.do-things-card {
padding-left: 15%;
padding-right: 15%;
padding-bottom: 0%;
padding-top: 0%;
}
}
/* about */
.about {
height: auto;
}
.jop {
font-size: 30px;
}
.about-me {
font-family: "Alata", sans-serif;
font-size: 25px;
}
.about-content {
font-size: 20px;
}
.about-content a:hover {
text-decoration-line: none;
color: black;
}
@media only screen and (max-width: 768px) {
.about {
height: auto;
}
}
/* footer */
footer {
background-color: #1c2d41;
color: #8392a5;
border-top-width: 1px !important;
border-color: #8392a5;
}
footer a {
color: #8392a5;
}
/*navbar*/
.navbar-color {
color: #101820ff;
}
.navbar-text {
font-size: 17px;
}
.navbar-brand {
font-size: 22px;
}
.nav-link {
color: #101820ff !important;
font-size: 18px;
}
footer {
background-color: #1c2d41;
color: #8392a5;
border-top-width: 1px !important;
border-color: #8392a5;
}
.blog-title {
font-size: 48px;
}
.leftside-blog {
padding-top: 10% !important;
}
article {
line-height: 1.756;
font-size: 18px;
}
article blockquote {
margin: 0 !;
border-left: 4px solid #248aaa !important;
background-color: #248baa15 !important;
padding: 0.3rem !important;
padding-left: 1rem !important;
}
article blockquote > p {
color: #3c4858 !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
article h1 {
font-size: 52px !important;
line-height: 1.15;
}
article h2 {
font-size: 32px;
line-height: 1.333;
}
article h3 {
font-size: 24px;
line-height: 1.45;
}
article h4,
h5,
h6 {
font-size: 18px;
line-height: 1.45;
}
article table {
border-radius: 0.1rem;
background: #e5e9f2;
border: 1px solid #c0ccda;
padding: 0.1rem;
}
article table tr {
height: 40px !important;
}
article table th,
td {
padding: 0.5rem;
border-left: 1px solid #8392a5;
border-bottom: 1px solid #8392a5;
}
article table thead tr {
background: #248aaa;
color: #e5e9f2;
}
article tbody tr:nth-child(odd) {
background-color: #e5e9f2;
}
article tbody tr:hover {
background: #c0ccda;
}
article img {
width: 100%;
}
article caption,
figcaption {
caption-side: bottom;
text-align: center;
color: #8392a5;
}
article pre {
margin: 5px;
padding-top: 0% !important;
padding-bottom: 1% !important;
padding: 5%;
font-size: 18px;
background-color: #1f618d !important;
color: white;
}
article pre > code {
color: white;
}
article a.header-anchor {
text-decoration: none;
color: #1c2d41;
}
article a.header-anchor i {
font-size: 10pt;
color: #3c4858;
display: none;
margin-left: 0.5rem;
}
article a.header-anchor:hover i {
display: inline-block;
}
article a.header-anchor code {
color: #e83e8c;
}
article kbd {
background-color: #248aaa !important;
color: #f9fafc;
}
article mark {
background-color: #ffc21280;
}