Create the Fangs page.
This commit is contained in:
parent
0005caa8e4
commit
5c12983d36
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
After Width: | Height: | Size: 120 KiB |
|
@ -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">
|
||||
©
|
||||
<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 %}
|
|
@ -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;
|
||||
}
|
|
@ -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'),
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue