diff --git a/assets/css/mainpage.css b/assets/css/mainpage.css index 301a8a3..33bf402 100644 --- a/assets/css/mainpage.css +++ b/assets/css/mainpage.css @@ -171,6 +171,9 @@ body { grid-area: bottom; padding-top: var(--content-halfgap); padding-bottom: var(--content-halfgap); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--content-gap); } #bottom #bottom_warn { @@ -204,6 +207,43 @@ body { border-color: var(--color-tblsep); } +#bottom .bottom_commits ul { + list-style: none; + padding: 0; + margin: 0; +} + +#bottom .bottom_commits li { + border-top: 1px solid var(--color-tblsep); + padding: 8px 0; +} + +#bottom .bottom_commits li a { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--color-fontdef); +} + +#bottom .bottom_commits li a:hover { + color: var(--color-chred); +} + +#bottom .bottom_commits a { + display: flex; + justify-content: space-between; +} + +#bottom .bottom_commits .commit_date { + white-space: nowrap; + opacity: 0.7; +} + +#bottom .bottom_commits .more { + text-align: right; + margin-top: var(--content-halfgap); +} + /* responsive layout adjustments */ @media (max-width: 1023px) { @@ -270,6 +310,9 @@ body { margin-top: var(--side-padding); margin-bottom: 0; } + #bottom { + grid-template-columns: 1fr; + } } @media (max-width: 480px) { diff --git a/assets/js/commits.js b/assets/js/commits.js new file mode 100644 index 0000000..a3c0883 --- /dev/null +++ b/assets/js/commits.js @@ -0,0 +1,38 @@ +(function() { + "use strict"; + + var list = document.getElementById("cports_list"); + var more = document.getElementById("cports_more"); + if (!list) return; + + fetch("https://api.github.com/repos/chimera-linux/cports/commits?per_page=10") + .then(function(response) { return response.json(); }) + .then(function(data) { + var html = ""; + var i, commit, msg, url, date, ago, diff; + + for (i = 0; i < data.length; i++) { + commit = data[i]; + msg = commit.commit.message.split("\n")[0]; + url = commit.html_url; + + date = new Date(commit.commit.committer.date); + diff = Math.floor((new Date() - date) / 1000); + + if (diff < 60) ago = "just now"; + else if (diff < 3600) ago = Math.floor(diff / 60) + "m ago"; + else if (diff < 86400) ago = Math.floor(diff / 3600) + "h ago"; + else ago = Math.floor(diff / 86400) + "d ago"; + + if (msg.length > 50) msg = msg.slice(0, 49) + "…"; + + html += '
Read more for details. -
+