diff options
author | Darshan Baral <darshanbaral@gmail.com> | 2020-05-15 01:41:30 +0300 |
---|---|---|
committer | Darshan Baral <darshanbaral@gmail.com> | 2020-05-15 01:41:30 +0300 |
commit | d96cc83b5c2b10455d415aa4cd98de9aae0603c2 (patch) | |
tree | 7c5fea4f1ce608ff26772efbfc2f4452c12de01d | |
parent | 954799961db0d38d3222a2bc3288dc30e0f7a8de (diff) |
Added about page
-rw-r--r-- | exampleSite/config.toml | 6 | ||||
-rw-r--r-- | exampleSite/content/about/_index.md | 65 | ||||
-rw-r--r-- | layouts/_default/about.html | 18 | ||||
-rw-r--r-- | layouts/index.html | 62 | ||||
-rw-r--r-- | layouts/partials/about/education.html | 16 | ||||
-rw-r--r-- | layouts/partials/about/publications.html | 27 | ||||
-rw-r--r-- | layouts/partials/footer.html | 80 | ||||
-rw-r--r-- | layouts/partials/header.html | 7 | ||||
-rw-r--r-- | layouts/partials/icons/book.html | 15 | ||||
-rw-r--r-- | layouts/partials/icons/folder.html | 15 | ||||
-rw-r--r-- | layouts/partials/icons/graduationCap.html | 15 | ||||
-rw-r--r-- | layouts/partials/icons/portrait.html | 15 | ||||
-rw-r--r-- | layouts/partials/intro.html | 55 | ||||
-rw-r--r-- | layouts/partials/menu.html | 29 | ||||
-rw-r--r-- | layouts/partials/social.html | 1 | ||||
-rw-r--r-- | static/css/main.css | 96 |
16 files changed, 360 insertions, 162 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index d9dd309..818a7e6 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -11,11 +11,11 @@ theme = "ghazal" author = "Darshan Baral"
description = "A hugo theme for personal blogs"
footer = "2020 Darshan Baral."
- about = "This is a short intro about me to describe some of the cool things I do."
- image = "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1"
+ shortAbout = "This is a short intro about me to describe some of the cool things I do."
+ mainimage = "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1"
+ profileImage = "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1"
[params.theme]
- profileImage = "/images/profile.jpg"
fontSize = "20px"
dateFormat = "2006/01/02"
paginateNum = 5
diff --git a/exampleSite/content/about/_index.md b/exampleSite/content/about/_index.md new file mode 100644 index 0000000..30545ae --- /dev/null +++ b/exampleSite/content/about/_index.md @@ -0,0 +1,65 @@ +--- +title: "About Me" +icon: "portrait" +weight: 10 +name: "ASasd LADSK" +prefix: "" +suffix: "PhD" +profileImage: "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1" +## Education +education: + [ + { + title: "PhD", + institution: "University of Awesome", + major: "Awesome Engineering", + date: 2020, + project: "The awesome thing that I did", + projectTitle: "Dissertation", + projectURL: "#", + }, + { + title: "MS", + institution: "University of Awesome", + major: "Awesome Engineering and Cool minor", + date: 2018, + project: "The awesome thing that I did", + projectTitle: "Thesis", + projectURL: "", + }, + ] +## Publications +publications: + [ + Journals: + [ + { + title: "sdfksahfjsadh fkjsadhf lkjdsahf kjsadhf lkjads hfkjdsal fksdaf sadfkdsfjhksadgf dfas", + author: "asda B, asd asV, asd sad O", + date: 2019, + journal: "Journal dsalf adsf dsaf", + url: "", + abstract: "shahfkasjdhf ahflkjdsa hfkjdsa hflkjdsahflkdsa hfljdsahf lkjashfdkjad hflkjdsa hflkjdsafh kjsadhf kjsadhf lkjdsahf kjdsahf lkjdsahf lkjdsahf lkjsadhfljdsaf halkjdshf ldsajfh askjdhflkjdsaf ldsakflkjdsahf kjsadhflkjdsaf lkjdsahf kjsadgfkdsabfanmdsbfdsanf.,dsanfmsnafdhfdlkjsaj;lkdsa jf;lkdsajf ;lksajfd;lkdsa jf;kdsajf ds", + }, + { + title: "sdfksahfjsadh fkjsadhf lkjdsahf kjsadhf lkjads hfkjdsal fksdaf sadfkdsfjhksadgf dfas", + author: "asda B, asd asV, asd sad O", + date: 2020, + journal: "Journal asjhdkas hdkjasdh", + url: "#", + }, + ], + Proceedings: + [ + { + title: "sdfksahfjsadh fkjsadhf lkjdsahf kjsadhf lkjads hfkjdsal fksdaf sadfkdsfjhksadgf dfas", + author: "asda B, asd asV, asd sad O", + date: 2019, + journal: "Journal asjhdkas hdkjasdh", + url: "#", + }, + ], + ] +--- + +I am dsjf dsjf;asdjf j. ldsfjsak jdsfj;asd fdsf ;lasdfl jasd. aldskfj salkdjfalksd jflsajfas dfa.sdf aldsfj asldfj ldsjfldsf *jlkdsajflsajf*. afdsj lsadjf **asdjf sad fjldskfjsaldf**. ds flsadkjf lkasdjflkdsajf akdsjf. ldsajflas djflkdsajfkjlkdsajflkdsa jfla. lasdkjf ladsjflkajfa;jf;adskjfo9awefjldsa jljf lasjdflkjdsf lj. diff --git a/layouts/_default/about.html b/layouts/_default/about.html new file mode 100644 index 0000000..493f455 --- /dev/null +++ b/layouts/_default/about.html @@ -0,0 +1,18 @@ +{{ define "main" }} +<img + src="{{ .Params.profileImage }}" + style=" + display: block; + margin: 1em auto 0 auto; + max-width: 300px; + border-radius: 50%; + " +/> +{{ partial "social" . }} +<h1 style="border-bottom: solid 3px;"> + {{ .Params.prefix }} {{ .Params.name }}, {{ .Params.suffix }} +</h1> +{{ .Content }} +{{ partial "about/education" . }} +{{ partial "about/publications" . }} +{{ end }} diff --git a/layouts/index.html b/layouts/index.html index b9a24e3..9e68506 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,6 @@ {{ define "main" }}
<div
style="
- height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
@@ -10,57 +9,22 @@ "
>
{{ partial "intro.html" . }}
- <div
+ <img
+ src="{{ .Site.Params.mainImage | relURL }}"
style="
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 80vw;
- height: 80vw;
+ border-radius: 50%;
+ background-color: inherit;
+ opacity: 1;
+ visibility: visible;
+ transition: opacity 0.8s, width 0.8s, transform 0.8s;
+ width: 100%;
min-width: 250px;
min-height: 250px;
- max-width: 400px;
- max-height: 400px;
+ max-width: 300px;
+ max-height: 300px;
+ transform: none;
"
- >
- <div
- style="
- position: absolute;
- opacity: 0;
- padding: 25px;
- min-width: 250px;
- min-height: 250px;
- max-width: 400px;
- max-height: 400px;
- box-sizing: border-box;
- transition: opacity 0.8s;
- z-index: 10;
- "
- class="more-info"
- >
- <p style="margin: 0 0 0.25em 0; font-size: 0.9em; text-align: center;">
- {{ .Site.Params.about }}
- </p>
- {{ partial "social.html" . }}
- </div>
- <div
- class="profile-image"
- style="
- background-color: inherit;
- opacity: 1;
- visibility: visible;
- transition: opacity 0.8s, width 0.8s, transform 0.8s;
- width: 100%;
- max-width: 325px;
- transform: none;
- "
- >
- <img
- src="{{ .Site.Params.image | relURL }}"
- style="width: 100%; height: 100%; border-radius: 100%;"
- />
- </div>
- </div>
+ />
+ {{ partial "social.html" . }}
</div>
{{ end }}
diff --git a/layouts/partials/about/education.html b/layouts/partials/about/education.html new file mode 100644 index 0000000..f642061 --- /dev/null +++ b/layouts/partials/about/education.html @@ -0,0 +1,16 @@ +{{ if .Params.education }} +<h2 style="border-bottom: solid 3px; text-transform: uppercase;"> + <i>{{ partial "icons/graduationCap" . }}</i>Education +</h2> + +{{ range sort .Params.education "date" "desc" }} +<p>{{ .date }}. {{ .title }}. {{ .major}}. {{ .institution }}</p> +{{ if .project }} +<p style="margin-top: -1em; margin-left: 1em;"> + {{ .projectTitle}} - {{if .projectURL }} + <a href="{{ .projectURL }}">{{ .project }}</a> + {{ else }} + <u>{{ .project }}</u> + {{ end }} +</p> +{{ end }} {{ end }} {{ end }} diff --git a/layouts/partials/about/publications.html b/layouts/partials/about/publications.html new file mode 100644 index 0000000..af41121 --- /dev/null +++ b/layouts/partials/about/publications.html @@ -0,0 +1,27 @@ +{{ if .Params.publications }} +<h2 style="border-bottom: solid 3px; text-transform: uppercase;"> + <i>{{ partial "icons/book" . }}</i>Publications +</h2> + +{{ range .Params.publications }} {{ range $key, $val := . }} +<h3 style="font-variant: small-caps;">{{ $key }}</h3> +<ol> + {{ range sort $val "date" "desc" }} + <li> + <p style="margin: 1em; text-indent: -0.5em;"> + {{ .date }}. {{ .author | markdownify }}. {{ if .url }}<a + href="{{ .url }}" + >{{ .title }}</a + >{{ else }} <u>{{- .title -}}</u> {{end -}}. {{ .journal }}. + </p> + {{ if .abstract }} + <blockquote style="margin: 0 0 0 1em;"> + <strong style="font-variant: small-caps; text-decoration: underline;" + >Abstract</strong + ><p style="margin: 0;">{{ .abstract }}</p> + </blockquote> + {{ end }} + </li> + {{ end }} +</ol> +{{ end }} {{ end }} {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 544ca02..2e572d8 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,24 +1,84 @@ <footer style="display: flex; flex-direction: column; margin-top: 0.5em;">
- {{ if eq .Kind "page" }}
- {{ partial "prevnext.html" . }}
- {{ end }} {{ if eq .Kind "section" }}
+ {{ if eq .Kind "page" }} {{ partial "prevnext.html" . }} {{ end }}
+ {{ if eq .Kind "section" }}
<div>
{{ template "_internal/pagination.html" . }}
</div>
{{ end }}
<div
style="
- padding: 10px 5px;
font-size: 0.8em;
background-color: var(--bgDarker);
box-shadow: 0px 0px 2px 2px black;
- text-align: center;
"
>
- <p style="margin: 0 0 5px 0;">{{ .Site.Params.footer }}</p>
- <p style="margin: 0;">
- <a href="https://github.com/darshanbaral/ghazal">ghazal</a> by
- <a href="https://www.darshanbaral.com/">darshan</a>.
- </p>
+ <div style="display: flex; flex-wrap: wrap;">
+ <div
+ class="footer-about"
+ style="
+ padding: 0 15px;
+ max-width: 400px;
+ flex-basis: 33%;
+ box-sizing: border-box;
+ "
+ >
+ <h3>About Me</h3>
+ <img
+ style="max-width: 150px; border-radius: 50%; display: block; margin: auto;"
+ src="{{ .Site.Params.profileImage | relURL }}"
+ />
+ <p>
+ {{ .Site.Params.shortAbout }}
+ <a href="{{ `about` | relURL }}">More</a>
+ </p>
+ </div>
+ <div
+ class="footer-social"
+ style="
+ padding: 0 15px;
+ max-width: 400px;
+ flex-basis: 33%;
+ box-sizing: border-box;
+ "
+ >
+ <h3>Contact Me</h3>
+ <ul style="padding: 0;">
+ {{ range $key, $val := .Site.Params.social }}
+ <li style="list-style: none;">
+ <a href="{{ $val }}" style="font-variant: small-caps;"
+ >{{ partial (print "icons/" $key) . }}{{ $key }}</a
+ >
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+ <div
+ class="footer-recent"
+ style="
+ padding: 0 15px;
+ max-width: 400px;
+ flex-basis: 33%;
+ flex-grow: 1;
+ box-sizing: border-box;
+ "
+ >
+ <h3>Recent Posts</h3>
+ <ul style="padding: 0;">
+ {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 5}}
+ <li style="list-style: none;">
+ <a href="{{ .Permalink }}">{{ .Title | truncate 25 }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+ </div>
+ <hr style="width: 50%; border-color: var(--textColor);">
+ <div style="text-align: center;">
+ <p style="margin: 0 0 5px 0;">{{ .Site.Params.footer }}</p>
+ <p style="margin: 0;">
+ <a href="https://github.com/darshanbaral/ghazal">ghazal</a> by
+ <a href="https://www.darshanbaral.com/">darshan</a>.
+ </p>
+ </div>
</div>
</footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index af3d452..81f86ec 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,5 +1,12 @@ <header
style="
+ width: 95%;
+ max-width: 960px;
+ position: fixed;
+ top: 0;
+ z-index: 10;
+ transition: all 0.3s;
+ height: {{ if not .IsHome}}60px{{ else }}0{{ end }};
box-shadow: {{ if not .IsHome}} 0px 0px 2px 2px black {{ else }} none {{ end }};
background-color: {{ if not .IsHome}} var(--bgDarker) {{ else }} inherit {{ end }};
"
diff --git a/layouts/partials/icons/book.html b/layouts/partials/icons/book.html new file mode 100644 index 0000000..82d36bc --- /dev/null +++ b/layouts/partials/icons/book.html @@ -0,0 +1,15 @@ +<svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="book" + class="svg-inline--fa fa-book fa-w-14" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 448 512" +> + <path + fill="currentColor" + d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z" + ></path> +</svg> diff --git a/layouts/partials/icons/folder.html b/layouts/partials/icons/folder.html new file mode 100644 index 0000000..3b90d5c --- /dev/null +++ b/layouts/partials/icons/folder.html @@ -0,0 +1,15 @@ +<svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="folder" + class="svg-inline--fa fa-folder fa-w-16" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" +> + <path + fill="currentColor" + d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" + ></path> +</svg> diff --git a/layouts/partials/icons/graduationCap.html b/layouts/partials/icons/graduationCap.html new file mode 100644 index 0000000..6480361 --- /dev/null +++ b/layouts/partials/icons/graduationCap.html @@ -0,0 +1,15 @@ +<svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="graduation-cap" + class="svg-inline--fa fa-graduation-cap fa-w-20" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 640 512" +> + <path + fill="currentColor" + d="M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z" + ></path> +</svg> diff --git a/layouts/partials/icons/portrait.html b/layouts/partials/icons/portrait.html new file mode 100644 index 0000000..60de60e --- /dev/null +++ b/layouts/partials/icons/portrait.html @@ -0,0 +1,15 @@ +<svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="portrait" + class="svg-inline--fa fa-portrait fa-w-12" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 384 512" +> + <path + fill="currentColor" + d="M336 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM192 128c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H102.4C90 384 80 375.4 80 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z" + ></path> +</svg> diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html index 3bdb64f..2c32f80 100644 --- a/layouts/partials/intro.html +++ b/layouts/partials/intro.html @@ -7,51 +7,24 @@ justify-content: center;
color: var(--primaryColor);
text-align: center;
- margin-bottom: 0.5em;
+ margin-bottom: 1em;
"
>
<h1 style="margin: 0; font-size: 1.7em;">
{{.Site.Params.title}}
</h1>
- <i
- style="
- font-size: 0.75em;
- border-radius: 50%;
- display: inline-flex;
- padding: 5px;
- margin: 0 5px;
- "
- class="show-more-info chevron-hz"
- onclick="showInfo()"
+ <a href="{{ `about` | relURL }}" style="display: inline-flex;"
+ ><i
+ style="
+ font-size: 0.75em;
+ border-radius: 50%;
+ display: inline-flex;
+ padding: 5px;
+ margin: 0 5px;
+ "
+ class="show-more-info chevron-hz"
+ >
+ {{ partial "icons/chevron.html" . }}
+ </i></a
>
- {{ partial "icons/chevron.html" . }}
- </i>
</div>
-
-<script>
- const showInfo = () => {
- const showMoreInfo = document.querySelector(".show-more-info");
- const profileImage = document.querySelector(".profile-image");
- const chevron = document.querySelector(".fa-chevron-right");
- const moreInfo = document.querySelector(".more-info");
-
- if (showMoreInfo.classList.contains("chevron-hz")) {
- showMoreInfo.classList.remove("chevron-hz");
- chevron.style.transform = "rotate(90deg)";
- profileImage.style.opacity = "0";
- profileImage.style.width = "0";
- profileImage.style.transform = "rotate(180deg)";
- moreInfo.style.visibility = "visible";
- moreInfo.style.opacity = "1";
- } else {
- showMoreInfo.classList.add("chevron-hz");
- chevron.style.transform = "none";
- profileImage.style.visibility = "visible";
- profileImage.style.width = "100%";
- profileImage.style.transform = "none";
- profileImage.style.opacity = "1";
- moreInfo.style.visibility = "hidden";
- moreInfo.style.opacity = "0";
- }
- };
-</script>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index f47080e..9868f4d 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -4,8 +4,7 @@ width: 100vw;
height: 100vh;
overflow: hidden;
- background-color: #19092be3;
- transition: all 0.5s;
+ background-color: var(--bgTransparent);
position: fixed;
left: 0;
top: -100vh;
@@ -15,6 +14,7 @@ "
>
<div
+ class="menu-container"
style="
background-color: var(--bgColor);
display: flex;
@@ -27,10 +27,29 @@ box-shadow: 3px 3px 5px 2px black;
"
>
- <a class="menu-item" href="/">Home</a>
+ <a class="menu-item" href="/"><i>{{ partial "icons/home" . }}</i>Home</a>
- {{ range .Site.Sections }}
- <a class="menu-item" href="{{ .Permalink }}">{{ .Title }}</a>
+ {{ range .Site.Sections.ByWeight }}
+ <a class="menu-item" href="{{ .Permalink }}"
+ ><i>{{ if .Params.icon }} {{ partial (print "icons/" .Params.icon) . }}
+ {{ else }} {{ partial "icons/folder" . }} {{ end }}</i>{{ .Title }}</a
+ >
{{ end }}
</div>
</div>
+<script>
+ const slideMenu = document.querySelector(".slide-menu");
+ const menuContainer = document.querySelector(".menu-container");
+ slideMenu.addEventListener("click", (event) => {
+ if (event.target !== menuContainer){
+ const hamBurger = document.querySelector(".hamburger");
+ const cross = document.querySelector(".cross");
+ htmlDoc.style.overflowY = "scroll";
+ htmlDoc.style.marginRight = "0";
+ hamBurger.style.visibility = "visible";
+ cross.style.visibility = "hidden";
+ slideMenu.classList.add("collapsed");
+ slideMenu.style.top = "-100vh";
+ }
+ });
+</script>
diff --git a/layouts/partials/social.html b/layouts/partials/social.html index 72f2a6e..cf5ca2a 100644 --- a/layouts/partials/social.html +++ b/layouts/partials/social.html @@ -14,6 +14,7 @@ class="social-icon"
style="
display: inline-flex;
+ font-size: 1.4em;
padding: 10px;
border-radius: 50%;
align-self: center;
diff --git a/static/css/main.css b/static/css/main.css index af288f1..80428dc 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -2,24 +2,22 @@ --bgColor: #381460;
--bgDarker: #2b0f49;
--bgLighter: #4a2d69;
+ --bgTransparent: #19092be3;
--textColor: #ffbd69;
--primaryColor: #fe346e;
--primaryHoverColor: #fe346e;
--inactiveColor: gray;
--codeColor: #51ef5b;
}
-
html {
margin: 0;
overflow-y: scroll;
margin-right: 0;
}
-
body {
width: 95%;
margin: auto;
position: relative;
- z-index: 10;
display: flex;
flex-direction: column;
max-width: 960px;
@@ -30,20 +28,10 @@ body { font-weight: 300;
font-size: 1.2em;
}
-header {
- width: 95%;
- height: 60px;
- max-width: 960px;
- position: fixed;
- top: 0;
- z-index: 30;
- transition: all 0.3s;
-}
header,
footer {
flex: none;
}
-
main {
flex: 1 1 0%;
}
@@ -51,7 +39,6 @@ code { font-size: 1em;
color: var(--codeColor);
}
-
pre {
padding: 0.5em;
border: solid 1px;
@@ -60,7 +47,6 @@ pre { background-color: var(--bgDarker) !important;
overflow: auto;
}
-
h1,
h2,
h3,
@@ -70,71 +56,95 @@ h6 { font-weight: 300;
line-height: 1.2em;
}
-
h1 {
- font-size: 1.8em;
+ font-size: 1.9em;
}
-
h2 {
font-size: 1.6em;
}
-
h3 {
- font-size: 1.4em;
+ font-size: 1.3em;
}
-
h4 {
- font-size: 1.2em;
+ font-size: 1.1em;
}
-
a {
color: var(--primaryColor);
text-decoration: none;
}
-
a:hover {
color: var(--textColor);
+ text-decoration: underline;
}
-
.metadata-items::before {
content: "#";
}
-
svg {
width: 1em;
height: 1em;
}
-
blockquote {
padding-left: 10px;
+ padding-top: 5px;
+ padding-bottom: 5px;
border-left: solid 5px var(--textColor);
background-color: var(--bgLighter);
+ border-radius: 5px;
+}
+blockquote > p {
+ margin: 0;
+}
+strong {
+ font-weight: 700;
}
-
.footnotes {
font-size: 0.8em;
}
.menu-item {
- display: block;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
font-size: 1.2em !important;
width: 100%;
padding: 0 0.5em;
box-sizing: border-box;
}
+.menu-item > i {
+ display: inline-flex;
+ margin-right: 5px;
+}
.menu-item:hover {
background-color: var(--bgLighter);
+ text-decoration: none;
}
table {
border-collapse: collapse;
}
thead {
border-top: solid 3px var(--textColor);
- border-bottom: solid 1px var(--textColor);
+ background-color: var(--bgLighter);
}
tbody {
border-bottom: solid 2px var(--textColor);
}
-
+th,
+td {
+ border: solid 1px var(--textColor);
+ padding: 0 0.5em;
+}
+mark {
+ background-color: var(--textColor);
+ color: var(--bgColor);
+ border-radius: 5px;
+ padding: 0 3px;
+}
+kbd {
+ background-color: var(--bgLighter);
+ padding: 0 4px;
+ margin: 0 2px;
+ border-radius: 5px;
+ box-shadow: 2px 2px 2px 2px var(--bgDarker);
+}
.hamburger-cross {
display: flex;
justify-content: center;
@@ -162,24 +172,20 @@ tbody { .social-icon:hover {
background-color: var(--bgLighter);
}
-
.sharing-icon {
border-radius: 50%;
margin: 0 5px 0 0;
}
-
.sharing-icon > i {
display: inline-flex;
border-radius: 50%;
padding: 12px;
font-size: 1.2em;
}
-
.sharing-icon > i:hover {
background-color: var(--bgLighter);
color: var(--textColor);
}
-
ul.pagination {
display: flex;
flex-direction: row;
@@ -187,45 +193,36 @@ ul.pagination { align-items: center;
list-style-type: none;
}
-
li.page-item {
font-size: 0.9em;
padding: 1px 12px;
}
-
li.page-item {
border-top: 1px solid var(--primaryColor);
border-bottom: 1px solid var(--primaryColor);
border-left: 1px solid var(--primaryColor);
background-color: var(--bgColor);
}
-
li.page-item.disabled a {
color: var(--inactiveColor);
}
-
li.page-item.active {
background-color: var(--primaryColor);
}
-
li.page-item.active a {
color: var(--bgColor);
font-weight: 700;
}
-
li.page-item:nth-child(1) {
border-radius: 10px 0 0 10px;
}
-
li.page-item:nth-child(6) {
border-radius: 0 10px 10px 0;
border-right: 1px solid var(--primaryColor);
}
-
.breadcrumb-link:hover {
text-decoration: underline;
}
-
.next-link,
.previous-link {
padding: 3px;
@@ -235,47 +232,39 @@ li.page-item:nth-child(6) { min-width: 100px;
margin-bottom: 1em;
}
-
.previous-link.active,
.next-link.active {
color: var(--primaryColor);
background-color: var(--bgColor);
border: solid 1px var(--primaryColor);
}
-
.next-link.active:hover,
.previous-link.active:hover {
color: var(--bgColor);
text-decoration: none;
background-color: var(--primaryHoverColor);
}
-
.previous-link.disabled,
.next-link.disabled {
color: var(--inactiveColor);
border: solid 1px;
border-color: var(--inactiveColor);
}
-
.fa-chevron-right {
animation: blinkingText 1s infinite;
transition: all 0.5s;
color: var(--bgColor);
}
-
.fa-chevron-right:hover {
animation: none;
transition: all 0.8s;
}
-
.show-more-info {
background-color: var(--primaryColor);
}
-
.show-more-info:hover {
cursor: pointer;
}
-
@keyframes blinkingText {
0% {
color: var(--bgColor);
@@ -293,9 +282,8 @@ li.page-item:nth-child(6) { color: var(--bgColor);
}
}
-
.content img {
max-width: 95%;
display: block;
margin: 1em auto;
-}
\ No newline at end of file +}
|