Trez/congo-hindi-gujarati
4
0
Fork 0
mirror of https://github.com/TrezOne/congo-hindi-gujarati.git synced 2026-07-03 23:06:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

💄 Style updates to enhance design consistency

Browse Source
This commit is contained in:
James Panther
2021-08-18 12:54:18 +10:00
parent 7f59d04d39
commit 7030022620
20 changed files with 126 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
exampleSite/content/_index.md
+15
View File
@@ -7,6 +7,21 @@ description: "This is a demo of the Congo theme for Hugo."
A simple, lightweight theme for Hugo built with Tailwind CSS.
{{< /lead >}}
<div class="flex px-4 py-1 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center pr-3 text-primary-400">
{{< icon "exclamation-triangle" >}}
</span>
<span class="flex items-center justify-between flex-grow dark:text-gray-300">
<span class="prose">This is a demo of the <code id="layout">page</code> layout.</span>
<button
class="px-4 py-1 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
onclick="switchLayout()"
>
Switch layout &orarr;
</button>
</span>
</div>
This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation](/docs/). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
Explore the [sample pages](/samples/) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/Congo) or read the [Installation guide](/docs/installation/) to get started.
exampleSite/layouts/partials/home/custom.html
+22 -33
View File
@@ -1,38 +1,27 @@
<script type="text/javascript">
function switchLayout() {
var pageDiv = document.getElementById("page");
var profileDiv = document.getElementById("profile");
var layoutSpan = document.getElementById("layout");
if (pageDiv.style.display === "none") {
pageDiv.style.display = "block";
profileDiv.style.display = "none";
layoutSpan.innerHTML = "page";
} else {
pageDiv.style.display = "none";
profileDiv.style.display = "block";
layoutSpan.innerHTML = "profile";
}
}
</script>
<div class="flex px-4 py-3 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center pr-3 text-primary-400">
{{ partial "icon.html" "exclamation-triangle" }}
</span>
<span class="flex items-center justify-between flex-grow no-prose dark:text-gray-300">
<span>This is a demo of the `<code id="layout" class="">page</code>` layout.</span>
<button
class="font-bold px-4 py-2 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
onclick="switchLayout()"
>
Switch layout &orarr;
</button>
</span>
</div>
<div id="page">
{{ partial "partials/home/page.html" . }}
</div>
<div id="profile" style="display: none">
<div id="profile" class="hidden">
{{ partial "partials/home/profile.html" . }}
</div>
<script type="text/javascript">
function switchLayout() {
const pageDiv = document.getElementById("page");
const profileDiv = document.getElementById("profile");
const layoutCode = document.querySelectorAll("code[id=layout]");
if (pageDiv.style.display === "none") {
pageDiv.style.display = "block";
profileDiv.style.display = "none";
layoutCode.forEach(function (el) {
el.innerText = "page";
});
} else {
pageDiv.style.display = "none";
profileDiv.style.display = "block";
layoutCode.forEach(function (el) {
el.innerText = "profile";
});
}
}
</script>