diff --git a/.drone.yml b/.drone.yml index 1e85f67..385c34e 100644 --- a/.drone.yml +++ b/.drone.yml @@ -34,6 +34,7 @@ steps: - yarn build environment: SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}-${DRONE_COMMIT_SHA:0:8} + REVISION: ${DRONE_COMMIT_SHA} when: event: - push @@ -47,6 +48,7 @@ steps: environment: SUBPATH: /tghandbook/pr-${DRONE_PULL_REQUEST} OUTDIR: ./dist-pr + REVISION: ${DRONE_COMMIT_SHA} when: event: - pull_request @@ -60,6 +62,7 @@ steps: environment: SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_} OUTDIR: ./dist-branch + REVISION: ${DRONE_COMMIT_SHA} when: event: - push diff --git a/index.html b/index.html index d813ef7..1109d1d 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@
-
+
@@ -72,13 +72,11 @@ are not as polished as they should be. -

- Click any guide in the top menu to open it or - click here to learn about - some of the extra features packed in. -

+
+ +
-
+
+
diff --git a/src/index.ts b/src/index.ts index a67ae19..a278c4f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -75,6 +75,13 @@ if ("serviceWorker" in navigator) { }); } +// Start loading pages load(); +// Add search box document.body.appendChild(searchBox()); + +// Add revision info +document + .getElementById("tgh-version") + .appendChild(document.createTextNode(process.env.REVISION || "unknown")); diff --git a/src/scripts/pages/welcome.ts b/src/scripts/pages/welcome.ts index 03bab27..112a895 100644 --- a/src/scripts/pages/welcome.ts +++ b/src/scripts/pages/welcome.ts @@ -1,13 +1,25 @@ import { nextAnimationFrame } from "../../utils"; +function expandPage(root: HTMLElement) { + // Show all sections + root.querySelectorAll("div.hidden").forEach((div) => { + div.style.display = "block"; + div.style.opacity = "1"; + }); + + // Hide buttons + root.querySelector(".action_buttons").style.display = "none"; + + // Remove vertical centering + root.classList.remove("center"); +} + export function welcomeScript(root: HTMLElement): void { const expandLink = document.getElementById("welcome_expand"); expandLink.addEventListener("click", async () => { + expandPage(root); const featureDiv = root.querySelector(".features"); - featureDiv.style.display = "block"; - root.classList.remove("center"); await nextAnimationFrame(); - featureDiv.style.opacity = "1"; featureDiv.scrollIntoView({ block: "start", inline: "nearest", diff --git a/style/pages/global.scss b/style/pages/global.scss index 9b00bf1..a6e322f 100644 --- a/style/pages/global.scss +++ b/style/pages/global.scss @@ -76,6 +76,12 @@ $max-width: 960px; } } +.page:not(.special) img { + image-rendering: -moz-crisp-edges; + image-rendering: pixelated; + -ms-interpolation-mode: nearest-neighbor; +} + .wrapper { margin: 0 auto; max-width: $max-width; diff --git a/style/pages/welcome.scss b/style/pages/welcome.scss index ed3e391..cbbb818 100644 --- a/style/pages/welcome.scss +++ b/style/pages/welcome.scss @@ -1,68 +1,73 @@ #Welcome { - display: flex; - flex-direction: column; - &.center { - align-items: center; - justify-content: center; - } - &:not(.center) { - header { - margin-top: 20px; - } - } - font-size: 12pt; - line-height: 1.4em; + display: flex; + flex-direction: column; + &.center { + align-items: center; + justify-content: center; + } + &:not(.center) { header { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 20pt; - .icon { - max-width: 25vw; - width: 200px; - margin-right: 20px; - } - .type { - max-width: 50vw; - width: 400px; - } + margin-top: 20px; } + } + font-size: 12pt; + line-height: 1.4em; + header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 20pt; + .icon { + max-width: 25vw; + width: 200px; + margin-right: 20px; + } + .type { + max-width: 50vw; + width: 400px; + } + } - .features { - width: 100%; - opacity: 0; - display: none; - transition: all 200ms; - } + .hidden { + width: 100%; + opacity: 0; + display: none; + transition: all 200ms; + } - h3 { - font-size: 15pt; - } + h1, + h2 { + margin-top: 2em; + } - h3.nobg { - background: transparent; - margin-bottom: 0; - padding-bottom: 0; - position: relative; - z-index: 2; - &:before { - display: none; - } - } + h3 { + font-size: 15pt; + } - code { - display: inline-block; - background-color: #222; - border-radius: 3px; - padding: 2px 5px; + h3.nobg { + background: transparent; + margin-bottom: 0; + padding-bottom: 0; + position: relative; + z-index: 2; + &:before { + display: none; } + } - .images { - display: flex; - flex-wrap: wrap; - img { - margin: 10px; - } + code { + display: inline-block; + background-color: #222; + border-radius: 3px; + padding: 2px 5px; + } + + .images { + display: flex; + flex-wrap: wrap; + img { + margin: 10px; } + } }