1
Fork 0

Create the Fangs page.

This commit is contained in:
Bauke 2022-09-30 12:17:15 +02:00
parent 0005caa8e4
commit 5c12983d36
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
5 changed files with 124 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

45
source/fangs/index.html Normal file
View File

@ -0,0 +1,45 @@
{% extends "source/includes/base.html" %}
{% import "source/includes/macros.html" as macros %}
{% set title = "Fangs 🧛" %}
{% block head %}
<link rel="stylesheet" href="/scss/fangs/fangs.scss">
{% endblock %}
{% block body %}
<header class="page-header">
<h1>
<img src="../assets/fangs-128-opaque.png" alt="Fangs Logo">
Fangs
</h1>
<p class="byline">Inject custom DuckDuckGo Bangs.</p>
</header>
<main class="page-main">
<p class="store-links">
<a title="Get Fangs for Firefox"
href="https://addons.mozilla.org/firefox/addon/fangs">
<img src="../assets/mozilla-addons.png" alt="Get Fangs for Firefox">
</a>
<a title="Get Fangs for Chrome"
href="https://chrome.google.com/webstore/detail/fangs/dlllfannplfkhbiidhihagjkbmcolclf">
<img src="../assets/chrome-web-store.png" alt="Get Fangs for Chrome">
</a>
<a title="Get Fangs for Edge"
href="https://microsoftedge.microsoft.com/addons/detail/fangs/fgfkpbflhnljpfniippaagjjlncobhjd">
<img src="../assets/microsoft.png" alt="Get Fangs for Edge">
</a>
</p>
<img class="screenshot" alt="Fangs Screenshot" title="Fangs Screenshot"
src="../assets/fangs-screenshot.png">
</main>
<footer class="page-footer">
&copy;
<a href="https://git.bauke.xyz/Holllo/fangs">AGPL-3.0-or-later</a>
💖
<a href="mailto:helllo@holllo.org">helllo@holllo.org</a>
</footer>
{% endblock %}

View File

@ -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;
}

View File

@ -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'),
},