diff --git a/source/assets/fangs-128-opaque.png b/source/assets/fangs-128-opaque.png new file mode 100644 index 0000000..df9da33 Binary files /dev/null and b/source/assets/fangs-128-opaque.png differ diff --git a/source/assets/fangs-screenshot.png b/source/assets/fangs-screenshot.png new file mode 100644 index 0000000..cc23226 Binary files /dev/null and b/source/assets/fangs-screenshot.png differ diff --git a/source/fangs/index.html b/source/fangs/index.html new file mode 100644 index 0000000..6d4f196 --- /dev/null +++ b/source/fangs/index.html @@ -0,0 +1,45 @@ +{% extends "source/includes/base.html" %} +{% import "source/includes/macros.html" as macros %} + +{% set title = "Fangs 🧛" %} + +{% block head %} + +{% endblock %} + +{% block body %} + + +
+ + + Fangs Screenshot +
+ + +{% endblock %} diff --git a/source/scss/fangs/fangs.scss b/source/scss/fangs/fangs.scss new file mode 100644 index 0000000..007f0a0 --- /dev/null +++ b/source/scss/fangs/fangs.scss @@ -0,0 +1,78 @@ +@use '../mixins'; + +body { + padding: var(--spacing-16); +} + +.page-header { + @include mixins.responsive-container($width-breakpoint: 600px); + + margin-bottom: var(--spacing-16); + + h1 { + align-items: center; + border: 1px solid var(--foreground-2); + display: flex; + font-size: 2.5rem; + margin-bottom: var(--spacing-08); + } + + img { + align-items: center; + background-color: var(--df-2); + color: var(--db-1); + display: inline-flex; + height: 4.5rem; + justify-content: center; + margin-right: var(--spacing-08); + padding: var(--spacing-08); + width: 4.5rem; + } + + .byline { + background-color: var(--background-2); + font-weight: bold; + padding: var(--spacing-08); + text-align: center; + } +} + +.page-main { + @include mixins.responsive-container($width-breakpoint: 900px); + + margin-bottom: var(--spacing-16); + display: flex; + flex-direction: column; + + .store-links { + align-items: center; + display: flex; + gap: var(--spacing-08); + justify-content: center; + margin-bottom: var(--spacing-16); + + @media (max-width: 600px) { + flex-direction: column; + } + + a { + padding: var(--spacing-04); + text-decoration: none; + } + + img { + display: block; + height: fit-content; + } + } + + .screenshot { + border: 1px solid var(--foreground-2); + } +} + +.page-footer { + @include mixins.responsive-container($width-breakpoint: 600px); + + text-align: center; +} diff --git a/vite.config.ts b/vite.config.ts index b9ced45..b82f171 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,6 +15,7 @@ export default defineConfig({ outDir: buildDir, rollupOptions: { input: { + fangs: path.join(sourceDir, 'fangs/index.html'), home: path.join(sourceDir, 'index.html'), queue: path.join(sourceDir, 'queue/index.html'), },