diff options
| author | Darshan Baral <darshanbaral@gmail.com> | 2019-07-18 07:40:05 +0300 |
|---|---|---|
| committer | Darshan Baral <darshanbaral@gmail.com> | 2019-07-18 07:40:05 +0300 |
| commit | ab781bf4ff9013b02b30108780db1e070878c128 (patch) | |
| tree | 51bcda12869d279019b9cf49c7a610e75459f787 /layouts | |
| parent | d885756d2ec104b6b63088208512e5e3f8a12092 (diff) | |
Theme toggle is obtained by using separate CSS files
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/_default/baseof.html | 8 | ||||
| -rw-r--r-- | layouts/index.html | 55 | ||||
| -rw-r--r-- | layouts/partials/aboutme.html | 2 | ||||
| -rw-r--r-- | layouts/partials/education.html | 8 | ||||
| -rw-r--r-- | layouts/partials/experience.html | 8 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 6 | ||||
| -rw-r--r-- | layouts/partials/head.html | 22 | ||||
| -rw-r--r-- | layouts/partials/hobby.html | 2 | ||||
| -rw-r--r-- | layouts/partials/profilePhoto.html | 16 | ||||
| -rw-r--r-- | layouts/partials/project.html | 10 | ||||
| -rw-r--r-- | layouts/partials/publication.html | 4 | ||||
| -rw-r--r-- | layouts/partials/skill.html | 17 | ||||
| -rw-r--r-- | layouts/partials/social.html | 8 | ||||
| -rw-r--r-- | layouts/partials/toggleTheme.html | 35 |
14 files changed, 114 insertions, 87 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 491cada..e95279e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,10 +1,8 @@ <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> {{- partial "head.html" . -}} - <body class="container bg-light" style="max-width: 1400px;"> - <div id="content"> - {{- block "main" . }} - {{- end }} - </div> + <body class="container" style="max-width: 1400px;"> + {{- block "main" . }} + {{- end }} </body> </html> diff --git a/layouts/index.html b/layouts/index.html index 7365e98..d04936c 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,39 +1,32 @@ {{ define "main" }}
-<div class="ml-auto mr-auto row row-eq-height mt-3 p-2 rounded">
- <div class="col-md-5 text-center p-2">
- <div class="shadowsDark rounded bg-white">
- <div class="toggleSwitchContainer" style="width: 45px; height: 45px;">
- <i
- class="middleCenter fas fa-toggle-off zoomlink text-dark"
- id="toggle"
- title="Toggle Theme"
- onclick="toggleTheme()"
- ></i>
- </div>
+<div class="ml-auto mr-auto row row-eq-height rounded">
+ <div class="col-md-5 text-center p-2 mt-3">
+ <div class="profile-area rounded text-center position-relative">
+ {{ partial "toggleTheme" . }}
{{ partial "profilePhoto" . }}
<div class="p-2">
- {{ partial "social" . }}
- {{ partial "footer" . }}
- </div>
+ {{ partial "social" . }}
+ {{ partial "footer" . }}
+ </div>
</div>
</div>
- <div class="col-md-7 bg-light pt-2">
- {{ range .Site.Params.showInAccordion }}
- <h2 class="accordion w-100 text-primary {{ if .expand }} active {{ end }}">
- {{ $current := index $.Site.Params .item }}
- <i class="{{ $current.icon }}"></i>
- {{ $current.title }}
- </h2>
- <div class="panel overflow-hidden">
- {{ partial .item $ }}
- </div>
+ <div class="col-md-7 pt-2 mt-3">
+ {{ range.Site.Params.showInAccordion }}
+ <h2 class="accordion w-100 {{ if .expand }} active {{ end }}">
+ {{ $current := index $.Site.Params .item }}
+ <i class="{{ $current.icon }}"></i>
+ {{ $current.title }}
+ </h2>
+ <div
+ class="panel overflow-hidden"
+ {{ if $current.panelid }}
+ id="{{ $current.panelid }}"
{{ end }}
- <script src="{{ `js/accordion.js` | relURL }}"></script>
- <script>
- if ({{ .Site.Params.useDarkTheme }}) {
- toggleTheme();
- }
- </script>
+ >
+ {{ partial .item $ }}
</div>
+ {{ end }}
+ <script src="{{ `js/accordion.js` | relURL }}"></script>
</div>
-{{ end }}
+</div>
+{{ end }}
diff --git a/layouts/partials/aboutme.html b/layouts/partials/aboutme.html index 691a7f6..c468851 100644 --- a/layouts/partials/aboutme.html +++ b/layouts/partials/aboutme.html @@ -1,3 +1,3 @@ -<p class="text-dark markdownify"> +<p class="markdownify"> {{ .Site.Params.aboutme.description | markdownify }} </p> diff --git a/layouts/partials/education.html b/layouts/partials/education.html index ed5a24e..f49340f 100644 --- a/layouts/partials/education.html +++ b/layouts/partials/education.html @@ -1,11 +1,11 @@ {{ range.Site.Params.education.list }}
<dl>
- <dt class="text-dark">{{ .degree }}</dt>
- <dd class="text-dark mb-0 ml-3">{{ .dates }} · {{ .college }}</dd>
+ <dt>{{ .degree }}</dt>
+ <dd class="mb-0 ml-3">{{ .dates }} · {{ .college }}</dd>
{{ if .thesis_link }}
- <dd class="text-dark mb-0 ml-4">
+ <dd class="mb-0 ml-4">
Thesis:
- <a class="text-primary" href="{{ .thesis_link }}"
+ <a href="{{ .thesis_link }}"
><i>{{ .thesis_title }}</i></a
>
</dd>
diff --git a/layouts/partials/experience.html b/layouts/partials/experience.html index 10c7019..055820c 100644 --- a/layouts/partials/experience.html +++ b/layouts/partials/experience.html @@ -1,12 +1,12 @@ {{ range.Site.Params.experience.list }}
<dl>
- <dt class="text-dark mb-0">
+ <dt class="mb-0">
{{ .position }}
</dt>
- <dd class="text-dark mb-0 ml-3">
- <span class="markdownify">{{ .dates | markdownify }}</span> · {{ if .link }}<a class="text-primary" href="{{ .link }}">{{ .company }}</a
+ <dd class="mb-0 ml-3">
+ <span class="markdownify">{{ .dates | markdownify }}</span> · {{ if .link }}<a href="{{ .link }}">{{ .company }}</a
>{{ else }} {{ .company }} {{ end }}
</dd>
- <dd class="text-dark mb-0 ml-4 markdownify">{{ .details | markdownify }}</dd>
+ <dd class="mb-0 ml-4 markdownify">{{ .details | markdownify }}</dd>
</dl>
{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index f65066f..7ee5e74 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,12 +1,12 @@ -<footer class="text-dark mb-4">
+<footer class="mb-4">
<span class="markdownify">{{ .Site.Params.copyright | markdownify }}</span> ·
<i>
- <a href="https://github.com/darshanbaral/aafu" class="text-primary">
+ <a href="https://github.com/darshanbaral/aafu">
aafu
</a>
</i>
by
- <a href="https://www.darshanbaral.com/" class="text-primary">
+ <a href="https://www.darshanbaral.com/">
darshan
</a>
</footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 4820654..3169ac0 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,7 +1,7 @@ <head>
<title>{{ .Site.Params.title }}</title>
- <meta name="theme-color" content="#fff" />
+ <meta name="theme-color" content="" />
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta name="description" content="{{ .Site.Params.description }}" />
@@ -33,28 +33,22 @@ rel="stylesheet"
href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css"
/>
-
<link
rel="stylesheet"
href="//fonts.googleapis.com/css?family=Didact+Gothic%7CRoboto:400%7CRoboto+Mono"
/>
+ <link
+ id="color-CSS"
+ rel="stylesheet"
+ href="{{ print `/css/aafu_` .Site.Params.theme.mainTheme `.css` | relURL }}"
+ />
<link rel="stylesheet" href="{{ `/css/aafu.css` | relURL }}" />
- <script src="{{ `/js/themes.js` | relURL }}"></script>
- <script src="{{ `/js/toggleTheme.js` | relURL }}"></script>
<script>
+ var themeColor = document.querySelector("meta[name=theme-color]");
window.onload = function() {
- Array.from(document.querySelectorAll(".markdownify")).map(function(
- elems
- ) {
- let elem = Array.from(elems.querySelectorAll("a"));
- elem.forEach(function(x) {
- x.classList.add(
- "{{cond .Site.Params.useDarkTheme `text-warning` `text-primary` }}"
- );
- });
- });
+ themeColor.content = getComputedStyle(document.body)["background-color"];
};
</script>
</head>
diff --git a/layouts/partials/hobby.html b/layouts/partials/hobby.html index 7061e26..b213a7c 100644 --- a/layouts/partials/hobby.html +++ b/layouts/partials/hobby.html @@ -1,5 +1,5 @@ <ul class="pl-0">
{{ range.Site.Params.hobby.list }}
- <li class="text-dark list-unstyled mb-2">{{ .hobby }}</li>
+ <li class="list-unstyled mb-2">{{ .hobby }}</li>
{{ end }}
</ul>
diff --git a/layouts/partials/profilePhoto.html b/layouts/partials/profilePhoto.html index ef8f38b..01ae1ce 100644 --- a/layouts/partials/profilePhoto.html +++ b/layouts/partials/profilePhoto.html @@ -1,10 +1,8 @@ -<div class="d-flex justify-content-center"> - <div class="w-100 h-100 mt-4"> - <img - class="rounded m-2 rounded-circle" - src="{{ `images` | relURL }}/{{ .Site.Params.profile.photo }}" - alt="{{ .Site.Params.author }}" - style="width: 95%; max-width: 300px;" - /> - </div> +<div class="d-flex justify-content-center pt-2"> + <img + class="rounded rounded-circle mt-4" + src="{{ `images` | relURL }}/{{ .Site.Params.profile.photo }}" + alt="{{ .Site.Params.author }}" + style="width: 95%; max-width: 300px;" + /> </div> diff --git a/layouts/partials/project.html b/layouts/partials/project.html index cd38f91..613eb22 100644 --- a/layouts/partials/project.html +++ b/layouts/partials/project.html @@ -1,10 +1,12 @@ <dl>
{{ range.Site.Params.project.list }}
<dt>
- <a class="text-primary" href="{{ .url }}"
- ><code>{{ .title }}</code></a
- >
+ <a href="{{ .url }}" style="font-variant: small-caps; ">
+ {{- .title -}}
+ </a>
</dt>
- <dd class="text-dark mb-0 ml-3 markdownify">{{ .description | markdownify }}</dd>
+ <dd class="mb-0 ml-3 markdownify">
+ {{- .description | markdownify -}}
+ </dd>
{{ end }}
</dl>
diff --git a/layouts/partials/publication.html b/layouts/partials/publication.html index 76301db..51557dc 100644 --- a/layouts/partials/publication.html +++ b/layouts/partials/publication.html @@ -1,7 +1,7 @@ {{ range.Site.Params.publication.list }}
-<p class="text-dark">
+<p>
{{ .date }} · {{ .authors }} ·
- <a class="text-primary" href="{{ .link }}"
+ <a href="{{ .link }}"
><i>"{{ .title }}"</i></a
>
{{ .journal }}
diff --git a/layouts/partials/skill.html b/layouts/partials/skill.html index 8185500..0864049 100644 --- a/layouts/partials/skill.html +++ b/layouts/partials/skill.html @@ -1,9 +1,16 @@ +<script>
+ let skillPanel = document.querySelector("#skill-panel")
+ .previousElementSibling;
+ skillPanel.addEventListener("click", function() {
+ let skillBars = document.querySelectorAll("#skill-percent");
+ skillBars.forEach(elem => {
+ elem.style.width = elem.classList[0];
+ });
+ });
+</script>
{{ range.Site.Params.skill.list }}
<code>{{ .skill }}</code>
-<div class="w-100 bg-secondary mt-1 mb-3">
- <div
- class="bg-primary"
- style="width: {{ .skillrating }}%; height:15px;"
- ></div>
+<div class="w-100 skillbar mt-1 mb-3">
+ <div id="skill-percent" class="{{ .skillrating }}%" style="width: 0;"></div>
</div>
{{ end }}
diff --git a/layouts/partials/social.html b/layouts/partials/social.html index fb0acbc..5234a74 100644 --- a/layouts/partials/social.html +++ b/layouts/partials/social.html @@ -1,11 +1,11 @@ -<h1 class="text-dark mb-0">{{ .Site.Params.profile.name }}</h1>
-<h2 class="text-dark mb-0">{{ .Site.Params.profile.tagline }}</h2>
-<h3 class="text-dark mb-0">{{ .Site.Params.profile.location }}</h3>
+<h1 class="mb-0">{{ .Site.Params.profile.name }}</h1>
+<h2 class="mb-0">{{ .Site.Params.profile.tagline }}</h2>
+<h3 class="mb-0">{{ .Site.Params.profile.location }}</h3>
<div class="mt-2 d-flex flex-wrap justify-content-center">
{{ range.Site.Params.social.list }}
<div style="height:45px; width:45px;">
<a href="{{ .url }}">
- <i class="text-primary zoomlink mt-1 {{ .class }} {{ .icon }}"></i>
+ <i class="zoomlink mt-1 {{ .class }} {{ .icon }}"></i>
</a>
</div>
{{ end }}
diff --git a/layouts/partials/toggleTheme.html b/layouts/partials/toggleTheme.html new file mode 100644 index 0000000..ea7e74f --- /dev/null +++ b/layouts/partials/toggleTheme.html @@ -0,0 +1,35 @@ +{{ if .Site.Params.theme.allowToggle }} +<div class="toggleSwitchContainer" style="width: 45px; height: 45px;"> + <i + class="fas fa-toggle-on zoomlink" + id="toggle" + title="Toggle Theme" + onclick="toggleTheme(this)" + ></i> +</div> + +<script> + let mainTheme = + "{{ print `/css/aafu_` .Site.Params.theme.mainTheme `.css` | relURL }}"; + let altTheme = + "{{ print `/css/aafu_` .Site.Params.theme.altTheme `.css` | relURL }}"; + let toggleTheme = function(elem) { + elem.classList.toggle("fa-toggle-off"); + elem.classList.toggle("fa-toggle-on"); + let currentCSS = document.querySelector("#color-CSS"); + if (currentCSS.href.includes(mainTheme)) { + currentCSS.href = altTheme; + } else { + currentCSS.href = mainTheme; + } + }; + + let changeThemeColor = function() { + console.log(getComputedStyle(document.body)["background-color"]); + themeColor.content = getComputedStyle(document.body)["background-color"]; + }; + let thisBody = document.body; + thisBody.addEventListener("webkitTransitionEnd", changeThemeColor); + thisBody.addEventListener("transitionend", changeThemeColor); +</script> +{{ end }} |