diff --git a/site/index.html b/site/index.html
index abd26b8..2200782 100644
--- a/site/index.html
+++ b/site/index.html
@@ -7,14 +7,23 @@
+
+
+
+
+
+
diff --git a/site/scripts.js b/site/scripts.js
index b3be969..7cf41f5 100644
--- a/site/scripts.js
+++ b/site/scripts.js
@@ -1,3 +1,10 @@
+async function init() {
+ const release = await getLatestRelease()
+ replaceDom(release)
+}
+
+window.addEventListener('load', () => init())
+
async function getLatestRelease() {
const response = await fetch(
'https://api.github.com/repos/kremalicious/blowfish/releases/latest'
@@ -25,7 +32,7 @@ function getDownloads(release) {
const isWin = asset.name.includes('.exe')
return {
- name: `Download (${isMac ? 'macOS' : isWin ? 'Windows' : 'Linux'})`,
+ name: isMac ? 'macOS' : isWin ? 'Windows' : 'Linux, deb',
url: asset.browser_download_url
}
})
@@ -42,24 +49,44 @@ function replaceDom(release) {
const dateFormatted = new Date(release.published_at).toLocaleDateString()
releaseTagElement.innerHTML = release.tag_name
- releaseDateElement.innerHTML = dateFormatted
+ releaseDateElement.innerHTML = `on ${dateFormatted}`
const downloads = getDownloads(release)
downloadsElement.innerHTML = ''
- downloads.map(download => {
+ const isMac = navigator.userAgent.includes('Mac OS')
+ const isWin = navigator.userAgent.includes('Windows')
+ const isLinux = navigator.userAgent.includes('Linux')
+
+ const downloadAll = downloads.map(download => {
+ const isTargetOs =
+ isMac & download.name.includes('mac') ||
+ isWin & download.name.includes('Windows') ||
+ isLinux & download.name.includes('Linux')
+
const li = document.createElement('li')
const a = document.createElement('a')
a.href = download.url
- a.className = 'button'
- a.appendChild(document.createTextNode(download.name))
- downloadsElement.appendChild(li).appendChild(a)
+
+ if (isTargetOs) {
+ a.className = 'button'
+ a.innerHTML = `Download ${download.name}`
+ } else {
+ a.appendChild(document.createTextNode(download.name))
+ }
+
+ li.appendChild(a)
+
+ return li
})
-}
-async function init() {
- const release = await getLatestRelease()
- replaceDom(release)
-}
+ const downloadMain = downloadAll.filter(
+ link => link.querySelector('a').className === 'button'
+ )
+ const downloadSecondary = downloadAll.filter(
+ link => link.querySelector('a').className !== 'button'
+ )
-init()
+ downloadsElement.append(downloadMain[0])
+ downloadSecondary.forEach(download => downloadsElement.append(download))
+}
diff --git a/site/styles.css b/site/styles.css
index 0f38b7e..9e3818f 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -3,6 +3,8 @@
--color-secondary: #725418;
--color-signal: #049985;
--border-radius: 0.2rem;
+ --font-family-base: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
+ oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', sans-serif;
}
*,
@@ -25,12 +27,11 @@ body {
min-height: 100vh;
background: var(--color-primary);
color: var(--color-secondary);
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+ font-family: var(--font-family-base);
font-size: 1rem;
font-weight: 400;
font-style: normal;
- line-height: 1.5;
+ line-height: 1.6;
}
h1,
@@ -50,6 +51,13 @@ svg {
margin: 0;
}
+code {
+ background: rgba(255, 255, 255, 0.15);
+ padding: 0.1rem 0.3rem;
+ border-radius: var(--border-radius);
+ display: inline-block;
+}
+
a {
color: var(--color-signal);
text-decoration: none;
@@ -65,17 +73,38 @@ a {
margin-bottom: 2rem;
}
+.header h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ color: var(--color-signal);
+}
+
+.header strong {
+ font-size: 1.2rem;
+}
+
.screen {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
text-align: center;
}
+.screen img {
+ display: inline-block;
+}
+
+@media (min-width: 60rem) {
+ .screen img {
+ max-width: 60rem;
+ }
+}
+
.button {
+ font-size: 1.2rem;
display: inline-block;
background: var(--color-signal);
color: var(--color-primary);
- padding: 0.5rem 1rem;
+ padding: 1rem;
margin-bottom: 1rem;
border-radius: var(--border-radius);
transition: 0.2s ease-out;
@@ -86,13 +115,29 @@ a {
background: var(--color-secondary);
}
+.button span {
+ font-size: 1rem;
+ margin-left: 0.25rem;
+ font-family: var(--font-family-base);
+ font-weight: 400;
+}
+
.downloads {
margin-top: 2rem;
padding: 0;
text-align: center;
}
+.downloads a:not(.button) {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+
.downloads li {
+ display: inline;
+}
+
+.downloads li:first-child {
display: block;
}
@@ -106,13 +151,6 @@ a {
font-size: 0.8rem;
}
-code {
- background: rgba(255, 255, 255, 0.15);
- padding: 0.1rem 0.3rem;
- border-radius: var(--border-radius);
- display: inline-block;
-}
-
.credit {
margin-bottom: 1rem;
}