diff options
| author | Darshan Baral <darshanbaral@gmail.com> | 2020-05-02 07:44:49 +0300 |
|---|---|---|
| committer | Darshan Baral <darshanbaral@gmail.com> | 2020-05-02 07:44:49 +0300 |
| commit | 332b35e8f7020e7b7d2f97bc5b81a548cf4fcdab (patch) | |
| tree | 8abd60d8a932e1c6f3c36adc71cc0c3a59ce4ff2 | |
| parent | 23df198d88e1133a578f33248c6ac1835d70bdd7 (diff) | |
Style updates
| -rw-r--r-- | exampleSite/config.toml | 2 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | layouts/_default/list.html | 38 | ||||
| -rw-r--r-- | layouts/_default/single.html | 3 | ||||
| -rw-r--r-- | layouts/index.html | 2 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 22 | ||||
| -rw-r--r-- | layouts/partials/hamburgerCross.html | 27 | ||||
| -rw-r--r-- | layouts/partials/intro.html | 22 | ||||
| -rw-r--r-- | layouts/partials/menu.html | 2 | ||||
| -rw-r--r-- | layouts/partials/metadata.html | 19 | ||||
| -rw-r--r-- | layouts/partials/share.html | 15 | ||||
| -rw-r--r-- | layouts/partials/social.html | 26 | ||||
| -rw-r--r-- | static/css/main.css | 54 |
13 files changed, 153 insertions, 81 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 11b3b38..d9dd309 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -2,8 +2,6 @@ baseURL = "http://www.example.com/" languageCode = "en"
theme = "ghazal"
-disableKinds = ["taxonomy", "taxonomyTerm"]
-
[outputs]
home = ["HTML"]
page = ["HTML"]
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b4c32be..0d90cb1 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,7 +4,7 @@ <body> {{- partial "header.html" . -}} {{- partial "menu.html" . -}} - <main id="content" style="padding: 10px; {{if not .IsHome }}margin-top: 80px; {{ end }}"> + <main id="content" {{if not .IsHome }} style="padding: 0 5px; margin-top: 80px;" {{ end }}> {{- block "main" . }}{{- end }} </main> {{ if not .IsHome }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f76389a..d71d14e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -4,30 +4,24 @@ {{- .Title -}}
</h1>
-<div>
- {{ range (.Paginator .Site.Params.theme.paginateNum).Pages }}
- <div
- style="
- border: solid 1px;
- margin: 30px 0;
- padding: 10px;
- border-radius: 5px;
- background-color: var(--bgAltColor);
- "
+{{ range (.Paginator .Site.Params.theme.paginateNum).Pages }}
+<div
+ class="list-sections"
+ style="border-bottom: dashed 1px; margin: 0; padding: 12px 0;"
+>
+ <span style="font-size: 0.65em; font-style: italic;"
+ ><time>{{- dateFormat .Site.Params.theme.dateFormat .Date }}</time> ·
+ {{.Site.Params.author }}</span
>
- <a href="{{ .Permalink | relURL }}">
- <h2 style="margin: 0; font-size: 1.2em;">{{ .Title -}}</h2>
- </a>
- <span style="font-size: 0.65em; font-style: italic;"
- ><time>{{- dateFormat .Site.Params.theme.dateFormat .Date }}</time>
- · {{.Site.Params.author }}</span
- >
- <p style="margin: 0; font-size: 0.8em;">
- {{ .Summary | plainify | truncate 180 }}
- </p>
- </div>
- {{ end }}
+ <a href="{{ .Permalink | relURL }}">
+ <h2 style="margin: 0; font-size: 1.2em;">{{ .Title -}}</h2>
+ </a>
+ <p style="margin: 0; font-size: 0.8em;">
+ {{ .Summary | plainify | truncate 100 }}
+ </p>
</div>
+{{ end }}
+
<script>
document.onkeydown = function (e) {
const thisPage = document.querySelector(".page-item.active");
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 28dd5ba..d192a74 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -8,6 +8,9 @@ <div class="sharing-icons">
{{ partial "share.html" .}}
</div>
+ <div class="metadata">
+ {{ partial "metadata" . }}
+ </div>
</div>
<div style="margin-bottom: 3.5em; font-style: italic; font-size: 0.9em;">by {{ .Site.Params.author }} ·
<time>{{ dateFormat .Site.Params.theme.dateFormat .Date }}</time></div>
diff --git a/layouts/index.html b/layouts/index.html index ce5598a..b9a24e3 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,6 +2,7 @@ <div
style="
height: 100%;
+ min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
@@ -51,6 +52,7 @@ visibility: visible;
transition: opacity 0.8s, width 0.8s, transform 0.8s;
width: 100%;
+ max-width: 325px;
transform: none;
"
>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 657306f..0d1cb48 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,12 +1,24 @@ <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-top: 10px; border-top: solid 1px; margin: 5px 0; font-size: 0.8em;">
- {{ .Site.Params.footer }} <a href="https://github.com/darshanbaral/ghazal">ghazal</a> by
- <a href="https://www.darshanbaral.com/">darshan</a>.
+ <div
+ style="
+ padding: 30px 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>
</footer>
diff --git a/layouts/partials/hamburgerCross.html b/layouts/partials/hamburgerCross.html index 13fb731..62b62b5 100644 --- a/layouts/partials/hamburgerCross.html +++ b/layouts/partials/hamburgerCross.html @@ -1,22 +1,29 @@ <div
class="hamburger-cross"
- style="position: fixed; top: 15px; z-index: 50; width: 50px; height: 50px;"
+ style="
+ position: fixed;
+ top: 15px;
+ z-index: 50;
+ width: 50px;
+ height: 50px;
+ font-size: 1.2em;
+ "
onclick="myFunction()"
>
- <div class="hamburger" style="opacity: 1; position: absolute;">
+ <i class="hamburger" style="visibility: visible;">
{{ partial "icons/hamburger.html" . }}
- </div>
+ </i>
- <div class="cross" style="opacity: 0; position: absolute; top: 0;">
+ <i class="cross" style="visibility: hidden;">
{{ partial "icons/cross.html" . }}
- </div>
+ </i>
</div>
<script>
let currentX, currentY;
const showMenu = (menu, hamBurger, cross, main, footer) => {
- hamBurger.style.opacity = "0";
- cross.style.opacity = "1";
+ hamBurger.style.visibility = "hidden";
+ cross.style.visibility = "visible";
currentX = window.scrollX;
currentY = window.scrollY;
menu.classList.remove("collapsed");
@@ -34,12 +41,12 @@ currentX,
currentY
) => {
- hamBurger.style.opacity = "1";
- cross.style.opacity = "0";
+ hamBurger.style.visibility = "visible";
+ cross.style.visibility = "hidden";
menu.classList.add("collapsed");
menu.style.width = "0px";
main.style.display = "block";
- footer ? (footer.style.display = "block") : undefined
+ footer ? (footer.style.display = "block") : undefined;
window.scrollTo(currentX, currentY);
};
diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html index dc4f563..3bdb64f 100644 --- a/layouts/partials/intro.html +++ b/layouts/partials/intro.html @@ -1,7 +1,5 @@ <div
style="
- font-size: 2.2em;
- margin: 0 0 0.5em 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -9,23 +7,25 @@ justify-content: center;
color: var(--primaryColor);
text-align: center;
- line-height: 1.25em;
+ margin-bottom: 0.5em;
"
>
- {{.Site.Params.title}}
- <div
+ <h1 style="margin: 0; font-size: 1.7em;">
+ {{.Site.Params.title}}
+ </h1>
+ <i
style="
- width: 20px;
- line-height: 0;
- padding: 1px 7px;
- margin-left: 0.35em;
- border-radius: 7px;
+ font-size: 0.75em;
+ border-radius: 50%;
+ display: inline-flex;
+ padding: 5px;
+ margin: 0 5px;
"
class="show-more-info chevron-hz"
onclick="showInfo()"
>
{{ partial "icons/chevron.html" . }}
- </div>
+ </i>
</div>
<script>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 5fc5fd7..09807cd 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -1,4 +1,4 @@ -<div class="slide-menu collapsed" style="width: 0; overflow: hidden;">
+<div class="slide-menu collapsed" style="width: 0; overflow: hidden;">
<h1>
<a href="/" style="white-space: nowrap;">Home</a>
</h1>
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html new file mode 100644 index 0000000..3e81e9c --- /dev/null +++ b/layouts/partials/metadata.html @@ -0,0 +1,19 @@ +<div style="display: flex; flex-direction: column;"> + + {{ $params := .Params }} + {{ range $name, $value := .Site.Taxonomies }} + {{ if index $params $name }} + <p style="margin: 2px 0;"> + {{ range index $params $name }} + <a + class="metadata-items" + href="{{ $name | relURL }}/{{ . | urlize }}" + title="{{ $name }}" + style="margin-right: 0.5em; text-decoration: underline; font-size: 0.8em;" + > + {{- . -}} + </a> + {{ end }} + </p> + {{ end }} {{ end }} + </div>
\ No newline at end of file diff --git a/layouts/partials/share.html b/layouts/partials/share.html index 6a9892a..b6bda5a 100644 --- a/layouts/partials/share.html +++ b/layouts/partials/share.html @@ -1,7 +1,6 @@ {{ $url := printf "%s" .URL | absLangURL }}
-<div style="display: flex; flex-direction: row; justify-content: space-between; width: 165px;">
-
+<div style="display: flex; flex-direction: row;">
<!-- Sharingbutton Facebook -->
<a
class="sharing-icon"
@@ -11,9 +10,9 @@ aria-label="share on facebook"
title="share on facebook"
>
- <div style="width: 40px; height: 40px;">
+ <i>
{{ partial "icons/facebook.html" . }}
- </div>
+ </i>
</a>
<!-- Sharingbutton Twitter -->
@@ -25,9 +24,9 @@ aria-label="share on twitter"
title="share on twitter"
>
- <div style="width: 40px; height: 40px;">
+ <i>
{{ partial "icons/twitter.html" . }}
- </div>
+ </i>
</a>
<!-- Sharingbutton E-Mail -->
@@ -39,8 +38,8 @@ aria-label="share by email"
title="share by email"
>
- <div style="width: 40px; height: 40px;">
+ <i>
{{ partial "icons/email.html" . }}
- </div>
+ </i>
</a>
</div>
diff --git a/layouts/partials/social.html b/layouts/partials/social.html index 3eeda67..717dead 100644 --- a/layouts/partials/social.html +++ b/layouts/partials/social.html @@ -1,7 +1,25 @@ -<div style="display: flex; justify-content: center; align-items: center; margin-top: 1em;">
+<div
+ style="
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 1em;
+ "
+>
{{ range $key, $val := .Site.Params.social }}
- <div style="width: 40px; height: 40px; margin: 0 0.5em;">
- <a href="{{ $val }}">{{ partial (print "icons/" $key ".html") . }}</a>
- </div>
+
+ <a href="{{ $val }}">
+ <i
+ class="social-icons"
+ style="
+ margin: 0 5px;
+ display: inline-flex;
+ padding: 10px;
+ border-radius: 50%;
+ "
+ >{{ partial (print "icons/" $key ".html") . }}</i
+ ></a
+ >
+
{{ end }}
</div>
diff --git a/static/css/main.css b/static/css/main.css index ba43b2f..d65f3ab 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -9,12 +9,6 @@ --codeColor: #51ef5b;
}
-html,
-body {
- height: 100%;
- min-height: 100%;
-}
-
body {
position: relative;
z-index: 10;
@@ -22,12 +16,14 @@ body { flex-direction: column;
padding: 0;
max-width: 960px;
+ min-height: 100vh;
margin: auto;
color: var(--textColor);
background-color: var(--bgColor);
font-family: "Mukta", sans-serif;
font-weight: 300;
font-size: 1.2em;
+ overflow-y: scroll;
}
code {
@@ -92,7 +88,15 @@ a { a:hover {
color: var(--textColor);
- text-decoration: underline;
+}
+
+.metadata-items::before {
+ content: "#";
+}
+
+svg {
+ width: 1em;
+ height: 1em;
}
blockquote {
@@ -121,17 +125,34 @@ tbody { justify-content: center;
align-items: center;
color: var(--primaryColor);
-}
-
-.hamburger-cross:hover {
- color: var(--textColor);
cursor: pointer;
}
.hamburger,
.cross {
- width: 40px;
- height: 40px;
+ display: inline-flex;
+ border-radius: 50%;
+ position: absolute;
+ padding: 12px;
+}
+
+.hamburger:hover,
+.cross:hover,
+.social-icons:hover {
+ background-color: var(--bgLighter);
+}
+
+.sharing-icon > i {
+ display: inline-flex;
+ border-radius: 50%;
+ padding: 12px;
+ font-size: 1.2em;
+ margin: 0 5px;
+}
+
+.sharing-icon > i:hover {
+ background-color: var(--bgLighter);
+ color: var(--primaryColor);
}
.slide-menu {
@@ -150,6 +171,9 @@ tbody { justify-content: center;
align-items: center;
}
+.slide-menu > h1 {
+ font-size: 1.5em;
+}
ul.pagination {
display: flex;
@@ -202,10 +226,6 @@ li.page-item:nth-child(6) { text-decoration: underline;
}
-.sharing-icon:hover {
- color: white;
-}
-
.next-link,
.previous-link {
padding: 3px;
|