Deuxfleurs/aerogramme.deuxfleurs.fr
17
0
Fork 0
Code Pull requests Activity

Merge branch 'master' of git.deuxfleurs.fr:sptl/garage_website

Browse source
This commit is contained in:
Alex 2022-01-31 11:54:22 +01:00
commit 937245b202
No known key found for this signature in database
GPG key ID: EDABF9711E244EB1
45 changed files with 2896 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
README.md
View file

@ -1,6 +1,6 @@
# Garage Website
¡ Work in progress !
¡ Work in progress (almost done) !
---
@ -12,3 +12,35 @@
- Run `zola build` to get the public directory
- Run `npm start` to compile styles and scripts
- Run `zola serve`
## Build
CSS : `28.4 kB`
JS : `6.8 kB (app)` + `1.2 MB (search)`*
*<em>The search index in loaded only when the user opens the search modal</em>
Images + Icons : `1.1 MB`
## Fonctions & utilities
JavaScript can be disabled and the website will still run nicely.
It only brings QoL advantages for the user.
The function is [x] if it still runs <u>without</u> JavaScript enabled.
- [x] Responsive main navigation menu (toggle)
- [x] Documentation : user can deploy or reploy ToC submenus
- [ ] Documentation : deploy only the current ToC submenu after a page change
- [ ] Documentation : sidebar focus effect on current section anchor when user scrolls
- [ ] Documentation : ToC that follows the user's scroll
- [ ] Global search
## Screenshots
<a target="_blank" href="https://git.deuxfleurs.fr/sptl/garage_website/raw/branch/master/static/screenshots/screenshot-480.png">480px</a>
<a target="_blank" href="https://git.deuxfleurs.fr/sptl/garage_website/raw/branch/master/static/screenshots/screenshot-768.png">768px</a>
<a target="_blank" href="https://git.deuxfleurs.fr/sptl/garage_website/raw/branch/master/static/screenshots/screenshot-1280.png">1280px</a>

18
config.toml
View file

@ -9,10 +9,6 @@ ignored_content = []
generate_feed = true
feed_filename = "rss.xml"
hard_link_static = false
# taxonomies = [
# { name = "categories", feed = true, paginate_by = 10 },
# { name = "tags", feed = true, paginate_by = 10 }
# ]
build_search_index = true
[markdown]
@ -50,24 +46,25 @@ chart.enabled = false
mermaid.enabled = true
galleria.enabled = false
navbar_items = [
{ code = "en", nav_items = [
{code = "en", nav_items = [
{ url = "$BASE_URL/", name = "Overview" },
{ url = "$BASE_URL/documentation/", name = "Docs" },
{ url = "$BASE_URL/blog/", name = "Blog" }
] },
]},
]
[extra.favicon]
favicon_16x16 = "/icons/favicon-16x16.png"
favicon_32x32 = "/icons/favicon-32x32.png"
apple_touch_icon = "/icons/apple-touch-icon.png"
safari_pinned_tab = "/icons/safari-pinned-tab.svg"
webmanifest = "/icons/site.webmanifest"
[extra.organization]
name = "Garage"
description = "An open-source distributed storage service you can self-host to fullfill many needs"
logo = "/images/garage-logo.svg"
logo_simple = "/images/garage-logo-simple.svg"
logo_horizontal = "/images/garage-logo-horizontal.svg"
[extra.author]
name = "Garage"
@ -76,10 +73,3 @@ avatar = "/images/garage-logo.svg"
[extra.social]
git = "https://git.deuxfleurs.fr/Deuxfleurs/garage"
email = "contact@garagehq.com"
[extra.analytics]
google = "UA-176984489-2"
[extra.mapbox]
enabled = true
access_token = "pk.eyJ1IjoicmF0YW5zaHJlc2h0aGEiLCJhIjoiY2tla2s2NmM3MDd0ZzJzbXFtc3Y2YmU0NyJ9.0RhUnJPKbxHWw3xGPnnBlA"

6
content/documentation/quick-start/_index.md
View file

@ -1,6 +0,0 @@
+++
title = "Quick Start"
weight = 1
sort_by = "weight"
redirect_to = "documentation/quick-start/overview/"
+++

2
content/documentation/quick-start/overview.md → content/documentation/quick_start.md
View file

@ -1,5 +1,5 @@
+++
title = "Overview"
title = "Quick Start"
weight = 5
+++

152
src/input.css
View file

@ -2,10 +2,10 @@
@tailwind components;
@tailwind utilities;
/* ARTICLES BASIC ELEMENTS */
/* POST BASIC ELEMENTS */
article .page-content {
@apply text-lg;
@apply text-base md:text-lg;
}
/** Pre */
@ -99,12 +99,60 @@ p > code, p > strong > code, li > code, li > strong > code {
}
.is-active {
@apply text-orange-600;
@apply text-garage-orange;
}
@layer utilities {
/** Global ToC */
/** Main nav */
#navMenuToggleBtn {
position: absolute;
left: -100vw;
}
#navMenuToggleBtn:checked + label {
background: white;
padding: 0.375rem;
border-radius: 0.5rem;
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
#navMenuToggleBtn:checked ~ #navMenu {
display: block;
}
/** Home map */
#map-container {
background-image: url('/images/map.svg');
background-repeat: no-repeat;
background-position: left;
background-size: cover;
background-attachment: fixed;
height: 70vh;
}
@media screen and (max-width: 1280px) {
#map-container {
background-position: center;
background-attachment: scroll;
height: 50vh;
}
}
@media screen and (max-width: 768px) {
#map-container {
background-position: 25% 50%;
background-size: auto;
background-attachment: scroll;
height: 42vh;
}
}
/** Documentation */
#global_toc .deploySubMenu {
position: absolute;
left: -100vw;
@ -118,4 +166,100 @@ p > code, p > strong > code, li > code, li > strong > code {
transform: rotate(0deg);
}
#documentation-section .page-content {
line-height: 1.9rem;
}
#documentation-section .page-content p + p {
margin-top: 1.15rem;
}
#documentation-section .page-content h1,
#documentation-section .page-content h2,
#documentation-section .page-content h3 {
margin-top: 2.85rem;
}
#documentation-section .page-content h4,
#documentation-section .page-content h5,
#documentation-section .page-content h6 {
margin-top: 2rem;
font-weight: 600;
}
#documentation-section .page-content ul {
list-style-type: "➡";
padding-left: 1.25rem;
}
#documentation-section .page-content ol {
padding-left: 1.25rem;
}
#documentation-section .page-content ul li,
#documentation-section .page-content ol li {
padding-left: 0.95rem;
}
#documentation-section .page-content ul li ul,
#documentation-section .page-content ul li ol,
#documentation-section .page-content ol li ul,
#documentation-section .page-content ol li ol {
padding-left: 0rem;
}
#documentation-section .page-content ul li ul,
#documentation-section .page-content ol li ul {
list-style-type: "➜";
}
@media screen and (max-width: 768px) {
#documentation-section .page-content p {
font-size: 0.95rem;
}
#documentation-section .page-content p + p {
margin-top: 0.75rem;
}
#documentation-section .page-content code {
font-size: 0.9rem;
}
#documentation-section .page-content pre {
overflow-x: scroll;
font-size: 0.95rem;
}
#documentation-section .page-content ul {
padding-left: 0.25rem;
}
#documentation-section .page-content ul li {
font-size: 0.95rem;
padding-left: 0.75rem;
}
#documentation-section .page-content ul li a {
font-size: 0.95rem;
}
}
/** Blog */
#blogpost-section .page-content p + p,
#blogpost-section .page-content p + #continue-reading + p {
margin-top: 2rem;
}
#blogpost-section .page-content #continue-reading {
margin: 2rem 0;
}
#blogpost-section .page-content ul {
list-style-type: "➡";
padding-left: 1.25rem;
margin: 2rem 0;
}
#blogpost-section .page-content ul li {
padding-left: 0.95rem;
}
#blogpost-section img {
display: inline-block;
margin: 2.75rem 0;
}
}

BIN
static/icons/android-chrome-192x192.png Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
static/icons/android-chrome-384x384.png Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 154 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/icons/apple-touch-icon.png Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

96
static/icons/contact.svg Normal file
View file

@ -0,0 +1,96 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="32mm"
height="32mm"
viewBox="0 0 32 32"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<style
type="text/css"
id="style2346">
.st0{fill:#4E4E4E;}
.st1{fill:#FFD952;}
.st2{fill:#49C8FA;}
.st3{fill:#45C8FF;}
.st4{fill:#FF9329;}
.st5{fill:#3B2100;}
.st6{fill:#C3C3C3;}
</style>
<g
id="g1314"
transform="matrix(0.45983054,0,0,0.45983054,2.5100707,3.2593744)">
<g
id="g1245">
<path
d="m 60.764965,27.712142 c 0,0.153336 -0.0037,0.305868 -0.0059,0.458712 -0.102126,4.309716 -1.703065,9.213027 -8.456869,9.213027 -6.994656,0 -8.462771,-5.259423 -8.462771,-9.671739 V 15.622468 a 2.417935,2.417935 0 0 0 -4.83587,0 v 1.287852 a 14.506149,14.506149 0 1 0 2.03423,19.358237 11.960844,11.960844 0 0 0 1.020952,1.501985 c 1.622189,2.029802 4.716328,4.449212 10.243459,4.449212 a 14.885985,14.885985 0 0 0 5.374237,-0.925948 31.428228,31.428228 0 1 1 3.088535,-13.581664 z m -41.104892,0 a 9.6717392,9.6717392 0 1 0 9.67174,-9.671739 9.6828226,9.6828226 0 0 0 -9.67174,9.671739 z"
id="path1901"
style="stroke-width:0.302242;fill:#ff6600" />
</g>
<g
id="g1247">
</g>
<g
id="g1249">
</g>
<g
id="g1251">
</g>
<g
id="g1253">
</g>
<g
id="g1255">
</g>
<g
id="g1257">
</g>
<g
id="g1259">
</g>
<g
id="g1261">
</g>
<g
id="g1263">
</g>
<g
id="g1265">
</g>
<g
id="g1267">
</g>
<g
id="g1269">
</g>
<g
id="g1271">
</g>
<g
id="g1273">
</g>
<g
id="g1275">
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

516
static/icons/datachunks.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
static/icons/favicon-16x16.png Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 645 B

BIN
static/icons/favicon-32x32.png Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/icons/favicon.ico Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

8
static/icons/git.svg Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="97px" height="97px" viewBox="0 0 97 97" enable-background="new 0 0 97 97" xml:space="preserve">
<g>
<path fill="#F05133" d="M92.71,44.408L52.591,4.291c-2.31-2.311-6.057-2.311-8.369,0l-8.33,8.332L46.459,23.19 c2.456-0.83,5.272-0.273,7.229,1.685c1.969,1.97,2.521,4.81,1.67,7.275l10.186,10.185c2.465-0.85,5.307-0.3,7.275,1.671 c2.75,2.75,2.75,7.206,0,9.958c-2.752,2.751-7.208,2.751-9.961,0c-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997 c0.67,0.332,1.303,0.774,1.861,1.332c2.75,2.75,2.75,7.206,0,9.959c-2.75,2.749-7.209,2.749-9.957,0c-2.75-2.754-2.75-7.21,0-9.959 c0.68-0.679,1.467-1.193,2.307-1.537V36.369c-0.84-0.344-1.625-0.853-2.307-1.537c-2.083-2.082-2.584-5.14-1.516-7.698 L31.798,16.715L4.288,44.222c-2.311,2.313-2.311,6.06,0,8.371l40.121,40.118c2.31,2.311,6.056,2.311,8.369,0L92.71,52.779 C95.021,50.468,95.021,46.719,92.71,44.408z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/icons/mstile-150x150.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

62
static/icons/rss.svg Normal file
View file

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
<circle style="fill:#FA9826;" cx="73.728" cy="418.296" r="69.704"/>
<g>
<path style="fill:#EF8114;" d="M0,162.664v92.976C136,255.632,236.384,356,236.384,492h92.952C329.336,308,184,162.664,0,162.664z"
/>
<path style="fill:#EF8114;" d="M8,0v92.944C224,92.944,399.064,268,399.064,492H492C492,220,272,0,8,0z"/>
</g>
<g>
<circle style="fill:#FA9826;" cx="73.728" cy="418.296" r="69.704"/>
<path style="fill:#FA9826;" d="M0,162.664v92.976c120,0,221.8,90.008,234.672,206.008c31.864-9.2,61.2-21.456,88.248-35.672
C294.168,275.776,160,162.664,0,162.664z"/>
<path style="fill:#FA9826;" d="M456.168,306.848C383.624,126.624,208,0,8,0v92.944c176,0,331.84,122.304,376.88,290.928
C414.8,359.664,439.888,337.16,456.168,306.848z"/>
<path style="fill:#FA9826;" d="M73.728,348.584c-38.496,0-69.72,31.2-69.72,69.696c0,22.352,10.576,42.216,26.928,54.968
c37.744-13.584,75.72-33.032,112.352-58.008C141.672,378.16,111.184,348.584,73.728,348.584z"/>
<path style="fill:#FA9826;" d="M0,162.664v92.976c88,0,161.696,45.192,202.408,112.624c7.92-7.088,15.408-14.4,23.072-22.04
c15.176-15.192,28.808-32.128,41.784-48.224C208.176,215.432,112,162.664,0,162.664z"/>
<path style="fill:#FA9826;" d="M8,0v92.944c120,0,232.248,57.184,304.752,146.472c18.184-29.872,33.056-57.24,43.816-87.6
C267.8,60.24,144,0,8,0z"/>
</g>
<g>
<path style="fill:#F9BD28;" d="M106.512,356.776c-9.792-5.224-20.936-8.184-32.792-8.184c-38.496,0-69.72,31.2-69.72,69.696
c0,13.384,3.84,25.84,10.376,36.472C49.632,431.704,80.976,398.184,106.512,356.776z"/>
<path style="fill:#F9BD28;" d="M163.344,204.976C115.8,177.736,64,162.664,0,162.664v92.976c54.872,0.496,96,16.864,134.24,41.456
C146.184,268.6,156.496,237.576,163.344,204.976z"/>
<path style="fill:#F9BD28;" d="M8,92.944c56,0,117.504,14.64,169.4,39.752c1.128-14.736,0.84-30.216,0.84-45.392
c0-19.192,0.528-38.04-1.256-56.504C123.888,10.928,64,0,8,0V92.944z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

15
static/icons/safari-pinned-tab.svg
View file

@ -1,15 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="450.000000pt" height="450.000000pt" viewBox="0 0 450.000000 450.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,450.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M750 2250 l0 -2250 1500 0 1500 0 0 2250 0 2250 -1500 0 -1500 0 0
-2250z"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 605 B

1613
static/icons/servers.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 268 KiB

1
static/images/avatar.png
View file

@ -1 +0,0 @@

BIN
static/images/backup.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 16 KiB

132
static/images/garage-logo-horizontal.svg Normal file
View file

@ -0,0 +1,132 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="53.778011mm"
height="17.799999mm"
viewBox="0 0 53.778011 17.799999"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(-50.429757,-152.34309)">
<g
id="g2446"
transform="matrix(0.26458333,0,0,0.26458333,27.649536,132.01223)">
<g
id="g6567"
transform="matrix(0.92473907,0,0,0.92473907,11.032718,11.165159)">
<g
id="g7383"
transform="matrix(1.0300991,0,0,1.0300991,3.770254,-1.2763086)">
<g
id="g7563"
transform="translate(-4.4654119e-6,0.53693799)">
<g
id="g7533"
transform="translate(-2.0995769,-2.3051055)">
<path
id="path8"
class="st0"
d="m 202.56631,104.04459 c 1.91913,0.0226 3.84227,-0.048 5.75858,0.0407 1.10992,0.0647 2.08169,0.96893 2.12552,2.09821 0.0576,2.83895 0.01,5.68171 0.0254,8.52216 0.0387,0.72125 -1.16554,0.55433 -1.65693,0.86227 -2.84639,0.78316 -5.8672,1.08468 -8.79355,0.62567 -2.48401,-0.4206 -4.607,-2.18507 -5.6512,-4.45399 -1.3326,-2.83308 -1.54654,-6.07759 -1.21852,-9.15366 0.29318,-2.57048 1.44845,-5.087404 3.4732,-6.747324 2.18417,-1.91934 5.23662,-2.62252 8.07889,-2.19703 2.06196,0.25939 4.06302,1.01333 5.76811,2.20419 -0.19449,1.20116 -0.88747,2.342733 -1.92914,2.990153 -1.86554,-1.368913 -4.2536,-2.121983 -6.56807,-1.871843 -2.02236,0.3166 -3.7626,1.874043 -4.28355,3.858414 -0.66626,2.35645 -0.66846,4.88015 -0.25232,7.28143 0.33705,1.92315 1.48217,3.89047 3.44592,4.49149 1.86015,0.60901 3.8467,0.22762 5.72889,-0.0627 0.0232,-1.64043 -0.0571,-3.28547 0.0646,-4.92211 0.0448,-0.38456 -0.69475,-0.10524 -1.00403,-0.19009 -1.00936,-0.0553 -2.11594,0.1939 -3.01531,-0.38583 -0.86022,-0.80391 -0.32729,-2.03804 -0.0965,-2.99015 z"
style="stroke-width:0.964566" />
<path
id="path10"
class="st0"
d="m 227.35569,114.07607 c -0.0965,0.38583 -0.28937,0.77165 -0.57875,1.15748 -0.19291,0.38583 -0.48228,0.6752 -0.77164,0.86811 -1.25394,-0.0965 -2.31497,-0.77165 -2.99017,-1.92913 -1.15748,1.25393 -2.89369,2.02559 -4.62991,2.02559 -1.63978,0 -2.89371,-0.48229 -3.76182,-1.44685 -0.77166,-0.96457 -1.25394,-2.12205 -1.25394,-3.37598 0,-1.83268 0.57874,-3.18307 1.73622,-4.05118 1.35039,-0.96456 2.89371,-1.44685 4.53346,-1.35039 0.96458,0 1.92914,0 2.79726,0.0965 v -0.96457 c 0,-1.73622 -0.77166,-2.50787 -2.41143,-2.50787 -1.15747,0 -2.79724,0.38583 -4.91929,1.15748 -0.6752,-0.77165 -1.06102,-1.83268 -1.06102,-2.8937 2.2185,-0.964561 4.53347,-1.446851 6.94488,-1.446851 1.44686,-0.0965 2.79725,0.38583 3.95473,1.350401 0.96457,0.86811 1.5433,2.2185 1.5433,4.05117 v 6.55905 c -0.0965,1.44685 0.19291,2.2185 0.86812,2.70078 z m -8.10237,-0.77165 c 1.25394,-0.0965 2.41142,-0.57874 3.18308,-1.54331 v -2.79724 c -0.77166,-0.0965 -1.63977,-0.0965 -2.41143,-0.0965 -0.77165,-0.0965 -1.44684,0.19291 -2.02558,0.67519 -0.48229,0.48229 -0.67521,1.06103 -0.67521,1.73622 0,0.57874 0.19292,1.15748 0.57875,1.63976 0.38583,0.19292 0.86811,0.38583 1.35039,0.38583 z"
style="stroke-width:0.964566" />
<path
id="path12"
class="st0"
d="m 229.96001,101.82609 c 0.0965,-0.38583 0.28937,-0.77165 0.57874,-1.15748 0.19292,-0.38583 0.48229,-0.675201 0.77165,-0.868111 1.63976,0.19291 2.8937,1.350391 3.37599,2.893701 0.86811,-1.92913 2.2185,-2.893701 4.14764,-2.893701 0.57874,0 1.25392,0.0965 1.83267,0.19291 0,1.350401 -0.28937,2.604331 -0.96456,3.761811 -0.48229,-0.0965 -0.96457,-0.19291 -1.44685,-0.19291 -1.3504,0 -2.31496,0.67519 -3.18308,2.12204 v 10.2244 c -0.67519,0.0965 -1.35039,0.19291 -1.92914,0.19291 -0.67518,0 -1.35038,-0.0965 -2.02558,-0.19291 v -10.80314 c 0,-1.5433 -0.38582,-2.60433 -1.15748,-3.27952 z"
style="stroke-width:0.964566" />
<path
id="path14"
class="st0"
d="m 255.61749,114.07607 c -0.0965,0.38583 -0.28937,0.77165 -0.57874,1.15748 -0.19291,0.38583 -0.48228,0.6752 -0.77165,0.86811 -1.25394,-0.0965 -2.31496,-0.77165 -2.99017,-1.92913 -1.15747,1.25393 -2.89369,2.02559 -4.62992,2.02559 -1.63975,0 -2.8937,-0.48229 -3.7618,-1.44685 -0.77166,-0.96457 -1.25394,-2.12205 -1.25394,-3.37598 0,-1.83268 0.57874,-3.18307 1.73622,-4.05118 1.25393,-0.96456 2.8937,-1.44685 4.43701,-1.35039 0.96456,0 1.92914,0 2.79724,0.0965 v -0.96457 c 0,-1.73622 -0.77164,-2.50787 -2.41142,-2.50787 -1.15748,0 -2.79724,0.38583 -4.91929,1.15748 -0.6752,-0.77165 -1.06102,-1.83268 -1.06102,-2.8937 2.2185,-0.964561 4.53346,-1.446851 6.94488,-1.446851 1.44685,-0.0965 2.79725,0.38583 3.95473,1.350401 0.96456,0.86811 1.5433,2.2185 1.5433,4.05117 v 6.55905 c 0,1.44685 0.38583,2.2185 0.96457,2.70078 z m -8.10236,-0.77165 c 1.25393,-0.0965 2.41142,-0.57874 3.18307,-1.54331 v -2.79724 c -0.77165,-0.0965 -1.63977,-0.0965 -2.41142,-0.0965 -0.77165,-0.0965 -1.44686,0.19291 -2.02559,0.67519 -0.48228,0.48229 -0.67519,1.06103 -0.67519,1.73622 0,0.57874 0.19291,1.15748 0.57874,1.63976 0.38582,0.19292 0.8681,0.38583 1.35039,0.38583 z"
style="stroke-width:0.964566" />
<path
id="path16"
class="st0"
d="m 259.57222,113.97962 c -0.96457,-1.44685 -1.44686,-3.47244 -1.44686,-6.07677 0,-2.60433 0.57875,-4.62991 1.83268,-6.07676 1.06103,-1.35039 2.70079,-2.218501 4.43701,-2.218501 1.63977,0 3.18307,0.578741 4.34055,1.639761 0.57874,-0.77165 1.54332,-1.253941 2.50787,-1.350391 0.38583,0.192911 0.6752,0.578741 0.86812,0.868111 0.19291,0.38582 0.38583,0.67519 0.57874,1.15747 -0.57874,0.48229 -0.86812,1.44685 -0.86812,2.79725 v 9.06691 c 0,3.37598 -0.57874,5.7874 -1.63975,7.23424 -1.06103,1.44685 -2.99017,2.12205 -5.49804,2.12205 -1.92914,0 -3.95472,-0.38583 -5.7874,-1.06102 0,-1.06103 0.28937,-2.12205 0.96457,-2.8937 1.35039,0.6752 2.79724,0.96457 4.34054,0.96457 1.44686,0 2.41143,-0.38583 2.89371,-1.06103 0.57874,-0.86811 0.86811,-1.92913 0.77165,-2.99015 v -1.25394 c -1.15748,0.96457 -2.50787,1.54331 -4.05118,1.54331 -1.73622,-0.0965 -3.37599,-0.96457 -4.24409,-2.41141 z m 8.19882,-2.60433 v -7.42716 c -0.6752,-0.77165 -1.73622,-1.25393 -2.79725,-1.35039 -0.86811,0 -1.73621,0.57874 -2.12205,1.35039 -0.57874,1.25394 -0.86811,2.60433 -0.77165,3.95472 0,1.73622 0.19291,2.99016 0.67519,3.76181 0.28938,0.67519 1.06103,1.15748 1.83268,1.25393 1.3504,0 2.50788,-0.57874 3.18308,-1.5433 z"
style="stroke-width:0.964566" />
<path
id="path18-7"
class="st0"
d="m 288.21985,109.25324 h -8.97047 c 0,1.06103 0.28937,2.02559 0.86811,2.8937 0.48228,0.6752 1.35039,1.06102 2.60432,1.06102 1.44686,-0.0965 2.89371,-0.48228 4.2441,-1.15748 0.6752,0.6752 1.06102,1.54331 1.15748,2.41142 -1.83267,1.25393 -3.95472,1.92913 -6.17323,1.83267 -2.41141,0 -4.14764,-0.77165 -5.20865,-2.31495 -1.06104,-1.54331 -1.54331,-3.5689 -1.54331,-6.07677 0,-2.50787 0.57873,-4.53346 1.73622,-6.07676 1.15747,-1.54331 2.99015,-2.411421 4.91928,-2.314961 2.12206,0 3.76182,0.675201 4.9193,1.929131 1.15748,1.35039 1.83267,3.08661 1.73622,4.91929 0,0.96456 -0.0965,1.92913 -0.28937,2.89369 z m -6.17323,-6.84841 c -1.73622,0 -2.70079,1.35039 -2.79724,3.95472 h 5.59448 v -0.38583 c 0,-0.86811 -0.19292,-1.83267 -0.67519,-2.60433 -0.48228,-0.67519 -1.3504,-0.96456 -2.12205,-0.96456 z"
style="stroke-width:0.964566" />
</g>
<g
id="g7544"
transform="translate(2.0995769,2.0995769)">
<path
id="path6"
d="m 136.06214,99.13643 c -0.8681,0.09646 -1.83266,0 -2.70078,-0.289369 L 99.794436,89.780144 c -0.868109,-0.28937 -1.736218,-0.675196 -2.507872,-1.157479 z"
style="stroke-width:0.964566" />
<path
id="path26"
class="st3"
d="m 136.73735,113.02618 18.42323,-7.42716 c 0.38583,-0.19291 0.57874,-0.57874 0.48228,-1.06102 -0.0965,-0.19292 -0.19291,-0.38583 -0.48228,-0.48229 -2.12204,-0.8681 -4.82284,-1.92913 -7.42716,-2.99015 -0.4823,-0.19291 -5.01576,3.08661 -5.40158,3.37598 l -7.90945,6.36613 c -1.83268,1.73622 -0.19291,3.27953 2.31496,2.21851 z"
style="stroke-width:0.964566" />
<ellipse
id="circle28"
class="st3"
cx="123.42634"
cy="120.26041"
rx="9.645668"
ry="9.6456566"
style="stroke-width:0.964566" />
<path
id="path6-0"
d="m 136.06214,99.13643 c -0.8681,0.09646 -1.83266,0 -2.70078,-0.289369 L 99.794436,89.780144 c -0.868109,-0.28937 -1.736218,-0.675196 -2.507872,-1.157479 z"
style="stroke-width:0.964566" />
<path
id="path24-3-6-9"
class="st4"
d="m 123.0405,70.199461 c -1.44685,0 -2.89371,0.28937 -4.14765,0.868109 L 76.259006,89.973057 c -0.771652,0.289369 -1.157479,1.253935 -0.868109,2.025588 0,0 0,0 0,0 0,0.09646 0,0.09646 0.09646,0.192913 l 6.848424,13.503922 h 5.980314 l -0.86811,-4.72638 c -0.09646,-0.38582 -0.675197,-3.086605 -1.253937,-5.015736 l 19.966532,6.269676 c 0.28937,1.25394 0.57874,2.41141 1.06103,3.47244 h 32.31298 c 0.38582,-1.06103 0.67519,-2.2185 0.86811,-3.47244 l 19.87007,-6.17322 c -0.57873,1.929131 -1.15747,4.62992 -1.25393,5.01574 l -0.86812,4.72637 h 5.98032 l 6.75197,-13.407459 0.0965,-0.09646 0.0965,-0.192913 c 0,0 0,0 0,0 0.0965,-0.192913 0.0965,-0.28937 0.0965,-0.482283 0,-0.675196 -0.38583,-1.253935 -0.96457,-1.543305 l -42.6339,-18.905486 c -1.54332,-0.675196 -2.99017,-1.061022 -4.53347,-0.964566 z"
style="stroke-width:0.964566" />
<path
id="path24-3-2"
class="st0"
d="m 123.0405,79.073465 c -1.44685,0 -2.89371,0.28937 -4.14765,0.868109 L 76.259006,98.847061 c -0.771652,0.289369 -1.157479,1.253939 -0.868109,2.025589 0,0 0,0 0,0 0,0.0965 0,0.0965 0.09646,0.19291 l 3.665353,7.3307 h 7.909449 c -0.289371,-1.06102 -0.578742,-2.31496 -0.964568,-3.56889 l 11.285433,3.56889 h 51.507866 l 11.28542,-3.56889 c -0.38581,1.15748 -0.67518,2.50787 -0.96455,3.56889 h 7.90943 l 3.66536,-7.23424 0.0965,-0.0965 0.0965,-0.19291 c 0,0 0,0 0,0 0.0965,-0.19291 0.0965,-0.28937 0.0965,-0.48228 0,-0.6752 -0.38582,-1.25394 -0.96457,-1.543309 L 127.47751,79.941574 c -1.44686,-0.578739 -2.89371,-0.868109 -4.43701,-0.868109 z"
style="stroke-width:0.964566" />
<path
id="path24-0"
class="st4"
d="m 171.07592,109.45728 c 0,0.19292 0,0.28937 -0.0965,0.48229 0,0 0,0 0,0 l -0.0965,0.19291 v 0 l -0.0965,0.0965 -10.32087,20.44879 c -1.44684,2.79724 -4.05116,2.70078 -3.66533,-0.0965 l 2.12203,-11.57479 c 0.0965,-0.38582 0.6752,-3.08661 1.25394,-5.01574 l -19.87014,6.17322 c -3.08661,20.35234 -29.90156,20.64171 -34.24212,0 L 86.0974,113.89428 c 0.578741,1.92914 1.157481,4.62992 1.253938,5.01575 l 2.122046,11.57478 c 0.482284,2.8937 -2.218503,2.99016 -3.665353,0.0965 L 75.390897,110.03602 c 0,-0.0964 -0.09646,-0.0964 -0.09646,-0.19291 -0.385827,-0.77165 0,-1.73622 0.771653,-2.02559 0,0 0,0 0,0 l 42.63386,-18.905486 c 2.70078,-1.157478 5.88385,-1.157478 8.58464,0 l 42.63385,18.905486 c 0.77166,0.38583 1.15748,0.96457 1.15748,1.63976 z"
style="stroke-width:0.964566" />
<path
id="path26-2"
class="st0"
d="m 136.73735,113.02618 18.42323,-7.42716 c 0.38583,-0.19291 0.57874,-0.57874 0.48228,-1.06102 -0.0965,-0.19292 -0.19291,-0.38583 -0.48228,-0.48229 -2.12204,-0.8681 -4.82284,-1.92913 -7.42716,-2.99015 -0.4823,-0.19291 -5.01576,3.08661 -5.40158,3.37598 l -7.90945,6.36613 c -1.83268,1.73622 -0.19291,3.27953 2.31496,2.21851 z"
style="stroke-width:0.964566" />
<ellipse
id="circle28-3"
class="st0"
cx="123.42634"
cy="120.26041"
rx="9.645668"
ry="9.6456566"
style="stroke-width:0.964566" />
</g>
</g>
</g>
</g>
</g>
</g>
<style
type="text/css"
id="style2346">
.st0{fill:#4E4E4E;}
.st1{fill:#FFD952;}
.st2{fill:#49C8FA;}
.st3{fill:#45C8FF;}
.st4{fill:#FF9329;}
.st5{fill:#3B2100;}
.st6{fill:#C3C3C3;}
</style>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

98
static/images/garage-logo-simple.svg Normal file
View file

@ -0,0 +1,98 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="26mm"
height="17.799999mm"
viewBox="0 0 26 17.799999"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(-50.429757,-152.34309)">
<g
id="g2446"
transform="matrix(0.26458333,0,0,0.26458333,27.649536,132.01223)">
<g
id="g6567"
transform="matrix(0.92473907,0,0,0.92473907,11.032718,11.165159)">
<g
id="g7383"
transform="matrix(1.0300991,0,0,1.0300991,3.770254,-1.2763086)">
<g
id="g7563"
transform="translate(-4.4654119e-6,0.53693799)">
<g
id="g7544"
transform="translate(3.5654432,2.0995769)">
<path
id="path6"
d="m 136.06214,99.13643 c -0.8681,0.09646 -1.83266,0 -2.70078,-0.289369 L 99.794436,89.780144 c -0.868109,-0.28937 -1.736218,-0.675196 -2.507872,-1.157479 z"
style="stroke-width:0.964566" />
<path
id="path26"
class="st3"
d="m 136.73735,113.02618 18.42323,-7.42716 c 0.38583,-0.19291 0.57874,-0.57874 0.48228,-1.06102 -0.0965,-0.19292 -0.19291,-0.38583 -0.48228,-0.48229 -2.12204,-0.8681 -4.82284,-1.92913 -7.42716,-2.99015 -0.4823,-0.19291 -5.01576,3.08661 -5.40158,3.37598 l -7.90945,6.36613 c -1.83268,1.73622 -0.19291,3.27953 2.31496,2.21851 z"
style="stroke-width:0.964566" />
<ellipse
id="circle28"
class="st3"
cx="123.42634"
cy="120.26041"
rx="9.645668"
ry="9.6456566"
style="stroke-width:0.964566" />
<path
id="path6-0"
d="m 136.06214,99.13643 c -0.8681,0.09646 -1.83266,0 -2.70078,-0.289369 L 99.794436,89.780144 c -0.868109,-0.28937 -1.736218,-0.675196 -2.507872,-1.157479 z"
style="stroke-width:0.964566" />
<path
id="path24-3-6-9"
class="st4"
d="m 123.0405,70.199461 c -1.44685,0 -2.89371,0.28937 -4.14765,0.868109 L 76.259006,89.973057 c -0.771652,0.289369 -1.157479,1.253935 -0.868109,2.025588 0,0 0,0 0,0 0,0.09646 0,0.09646 0.09646,0.192913 l 6.848424,13.503922 h 5.980314 l -0.86811,-4.72638 c -0.09646,-0.38582 -0.675197,-3.086605 -1.253937,-5.015736 l 19.966532,6.269676 c 0.28937,1.25394 0.57874,2.41141 1.06103,3.47244 h 32.31298 c 0.38582,-1.06103 0.67519,-2.2185 0.86811,-3.47244 l 19.87007,-6.17322 c -0.57873,1.929131 -1.15747,4.62992 -1.25393,5.01574 l -0.86812,4.72637 h 5.98032 l 6.75197,-13.407459 0.0965,-0.09646 0.0965,-0.192913 c 0,0 0,0 0,0 0.0965,-0.192913 0.0965,-0.28937 0.0965,-0.482283 0,-0.675196 -0.38583,-1.253935 -0.96457,-1.543305 l -42.6339,-18.905486 c -1.54332,-0.675196 -2.99017,-1.061022 -4.53347,-0.964566 z"
style="stroke-width:0.964566" />
<path
id="path24-3-2"
class="st0"
d="m 123.0405,79.073465 c -1.44685,0 -2.89371,0.28937 -4.14765,0.868109 L 76.259006,98.847061 c -0.771652,0.289369 -1.157479,1.253939 -0.868109,2.025589 0,0 0,0 0,0 0,0.0965 0,0.0965 0.09646,0.19291 l 3.665353,7.3307 h 7.909449 c -0.289371,-1.06102 -0.578742,-2.31496 -0.964568,-3.56889 l 11.285433,3.56889 h 51.507866 l 11.28542,-3.56889 c -0.38581,1.15748 -0.67518,2.50787 -0.96455,3.56889 h 7.90943 l 3.66536,-7.23424 0.0965,-0.0965 0.0965,-0.19291 c 0,0 0,0 0,0 0.0965,-0.19291 0.0965,-0.28937 0.0965,-0.48228 0,-0.6752 -0.38582,-1.25394 -0.96457,-1.543309 L 127.47751,79.941574 c -1.44686,-0.578739 -2.89371,-0.868109 -4.43701,-0.868109 z"
style="stroke-width:0.964566" />
<path
id="path24-0"
class="st4"
d="m 171.07592,109.45728 c 0,0.19292 0,0.28937 -0.0965,0.48229 0,0 0,0 0,0 l -0.0965,0.19291 v 0 l -0.0965,0.0965 -10.32087,20.44879 c -1.44684,2.79724 -4.05116,2.70078 -3.66533,-0.0965 l 2.12203,-11.57479 c 0.0965,-0.38582 0.6752,-3.08661 1.25394,-5.01574 l -19.87014,6.17322 c -3.08661,20.35234 -29.90156,20.64171 -34.24212,0 L 86.0974,113.89428 c 0.578741,1.92914 1.157481,4.62992 1.253938,5.01575 l 2.122046,11.57478 c 0.482284,2.8937 -2.218503,2.99016 -3.665353,0.0965 L 75.390897,110.03602 c 0,-0.0964 -0.09646,-0.0964 -0.09646,-0.19291 -0.385827,-0.77165 0,-1.73622 0.771653,-2.02559 0,0 0,0 0,0 l 42.63386,-18.905486 c 2.70078,-1.157478 5.88385,-1.157478 8.58464,0 l 42.63385,18.905486 c 0.77166,0.38583 1.15748,0.96457 1.15748,1.63976 z"
style="stroke-width:0.964566" />
<path
id="path26-2"
class="st0"
d="m 136.73735,113.02618 18.42323,-7.42716 c 0.38583,-0.19291 0.57874,-0.57874 0.48228,-1.06102 -0.0965,-0.19292 -0.19291,-0.38583 -0.48228,-0.48229 -2.12204,-0.8681 -4.82284,-1.92913 -7.42716,-2.99015 -0.4823,-0.19291 -5.01576,3.08661 -5.40158,3.37598 l -7.90945,6.36613 c -1.83268,1.73622 -0.19291,3.27953 2.31496,2.21851 z"
style="stroke-width:0.964566" />
<ellipse
id="circle28-3"
class="st0"
cx="123.42634"
cy="120.26041"
rx="9.645668"
ry="9.6456566"
style="stroke-width:0.964566" />
</g>
</g>
</g>
</g>
</g>
</g>
<style
type="text/css"
id="style2346">
.st0{fill:#4E4E4E;}
.st1{fill:#FFD952;}
.st2{fill:#49C8FA;}
.st3{fill:#45C8FF;}
.st4{fill:#FF9329;}
.st5{fill:#3B2100;}
.st6{fill:#C3C3C3;}
</style>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
static/images/host.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/images/host2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

1
static/images/map.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
static/images/ngi-pointer-eu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

6
static/js/site.js
View file

@ -112,7 +112,7 @@ function makeTeaser(body, terms) {
function formatSearchResultItem(item, terms) {
return (
`<a href='${item.ref}' class='group flex flex-col space-y-2 hover:bg-gray-100 p-2 rounded'>` +
`<a href='${item.ref}' class='group flex flex-col space-y-2 hover:bg-gray-100 p-2 rounded focus:outline outline-garage-orange'>` +
`<h1 class='text-garage-orange font-semibold'>` + `${item.doc.title}` + `</h1>` +
`<div class='content mt-2'>` +
`${makeTeaser(item.doc.body, terms)}` +
@ -168,9 +168,11 @@ function search() {
}
function openSearchModal() {
var baseUrl = window.location.protocol + "//" + window.location.host;
var indexScriptPath = baseUrl + '/search_index.en.js';
if (indexScriptLoaded === false) {
var indexScript = document.createElement('script');
indexScript.setAttribute('src', './search_index.en.js');
indexScript.setAttribute('src', indexScriptPath);
document.head.appendChild(indexScript);
indexScriptLoaded = true;
}

BIN
static/screenshots/screenshot-1280.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 466 KiB

BIN
static/screenshots/screenshot-480.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 375 KiB

BIN
static/screenshots/screenshot-768.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 386 KiB

7
tailwind.config.js
View file

@ -9,6 +9,13 @@ module.exports = {
'garage-orange': "#FF9329",
'garage-gray': "#4E4E4E",
},
backgroundSize: {
'size-200': '200% 200%',
},
backgroundPosition: {
'pos-0': '0% 0%',
'pos-100': '100% 100%',
},
},
},
variants: {

28
templates/base.html
View file

@ -13,36 +13,14 @@
{% include "partials/shared/nav.html" %}
<div>
{% block content %}{% endblock %}
</div>
{% block content %}{% endblock %}
{% block search %}
<section id="search-modal" class="modal hidden bg-gray-50 w-5/6 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 absolute top-20 left-1/2 transform -translate-x-1/2 shadow-xl rounded-lg">
<div class="p-2 md:p-4 xl:p-8">
<section class="relative flex flex-col items-center justify-center">
<div class="field mt-8 md:mt-0 mb-2">
<div class="control">
<input
id="search"
class="p-2 md:p-4 shadow rounded-lg outline-2 focus:outline outline-garage-orange"
placeholder="Search on Garage..." type="search" />
</div>
</div>
<div class="search-results hidden mt-8 p-2 md:p-4 w-full bg-white rounded shadow">
<div class="search-results__items max-h-96 overflow-y-scroll p-2 md:p-4"></div>
</div>
</section>
<button aria-label="close" id="close-modal-btn" class="absolute top-2 right-2 flex items-center group rounded-full shadow-inner bg-gray-300 border border-transparent hover:border-gray-500 bg-opacity-50 p-2">
<svg id="close-modal-btn-icon" class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
<small class="text-xs text-gray-400">(Esc)</small>
</button>
</div>
</section>
{% include "partials/shared/search.html" %}
{% endblock %}
{% block pagination %}
{% include "partials/shared/paginator.html" %}
{% include "partials/shared/paginator.html" %}
{% endblock %}
{% block comment %}{% endblock %}

4
templates/documentation.html
View file

@ -6,10 +6,10 @@
{% block content %}
{% set section = get_section(path="documentation/_index.md") %}
<section class="section overflow-x-hidden">
<section id="documentation-section" class="section overflow-x-hidden">
<div class="grid grid-cols-1 xl:grid-cols-5">
{% include "partials/doc/global_toc.html" %}
<div class="col-span-full xl:col-span-3">
<div class="col-span-full xl:col-span-3" style="min-height:85vh;">
<article class="box my-12 px-6 lg:px-8 xl:px-12">
<div class="flex flex-col bg-gray-100 rounded-r shadow-sm w-full xl:w-max">
<div class="flex flex-col border-l-4 border-garage-orange py-2 px-4 relative">

90
templates/index.html
View file

@ -5,28 +5,49 @@
<div>
<div class="flex flex-col items-center justify-center py-12 px-12 xl:px-0">
<img src="{{ config.extra.organization.logo }}" width="220px" class="" />
<h1 class="hidden">{{config.extra.organization.name}}</h1>
<img src="{{ config.extra.organization.logo }}" width="220px" alt="{{config.extra.organization.name}}"/>
<p class="text-gray-500 leading-10 pt-4 text-xl text-center">{{ config.extra.organization.description }}</p>
<div class="max-w-7xl mx-auto grid-cols-1 md:grid grid-cols-3 gap-x-32 py-12">
<div class="group flex flex-col items-start justify-center p-2">
<img src="{{ get_url(path='images/host2.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Host a Website</span>
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-x-32 py-12">
<div class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/host.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Host a Website</span>
</div>
<div class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/store.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Store Media</span>
<img src="{{ get_url(path='images/store.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Store Media</span>
</div>
<div class="group flex flex-col items-end justify-center p-2">
<img src="{{ get_url(path='images/backup.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Backup Target</span>
<div class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/backup.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Backup Target</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-x-0 xl:gap-x-12 gap-y-24 text-garage-gray font-light bg-gray-100 py-12 w-full shadow-inner">
<div class="w-full flex flex-col items-center justify-center border-b">
<div id="map-container" class="relative w-full shadow-inner border-t border-b">
<span class="hidden md:inline-block absolute top-1/2 left-1/2 transform -translate-y-1/2 text-xl md:text-2xl lg:text-3xl text-white font-light select-none px-2 py-1.5 rounded shadow-lg border border-gray-400" style="background:#999999;">
Made for redundancy
</span>
</div>
<div id="map-legend-container" class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-around lg:space-x-12 py-2 text-sm text-gray-700">
<div>
<p class="text-base text-gray-600">Each chunk of data is replicated in 3 zones</p>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/servers.svg') }}" width="48px">
<span>Zone (multiple servers)</span>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/datachunks.svg') }}" width="48px">
<span>Chunks of data</span>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center space-y-2">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Our Goals</h2>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-x-0 xl:gap-x-12 gap-y-24 text-garage-gray font-light bg-gray-100 py-12 px-4 md:px-0 w-full shadow-inner">
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Our Goals</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">We made it lightweight and kept the efficiency in mind.</p>
<ul class="list-style-none font-semibold flex flex-col items-center justify-center py-4">
@ -58,8 +79,8 @@
</ul>
</div>
<div class="flex flex-col items-center justify-center space-y-2">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Keeping requirements low</h2>
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Keeping requirements low</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">
We worked hard to keep requirements as low as possible<br>as we target the largest possible public.
@ -68,43 +89,43 @@
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/cpu.svg') }}" width="24px">
<span class="font-semibold">CPU</span>
<span class="font-normal">CPU</span>
</div>
<span class="px-2">Any x86_64 CPU from the last 10 years, ARMv7 or ARMv8</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/ram.svg') }}" width="24px">
<span class="font-semibold">RAM</span>
<span class="font-normal">RAM</span>
</div>
<span class="px-2">1 GB</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/disk.svg') }}" width="24px">
<span class="font-semibold">Disk space</span>
<span class="font-normal">Disk space</span>
</div>
<span class="px-2">At least 16 GB</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/network.svg') }}" width="24px">
<span class="font-semibold">Network</span>
<span class="font-normal">Network</span>
</div>
<span class="px-2">200 ms or less, 50 Mbps or more</span>
</li>
<li class="flex flex-col items-center md:items-start justify-center">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/hardware.svg') }}" width="24px">
<span class="font-semibold">Heterogeneous hardware</span>
<span class="font-normal">Heterogeneous hardware</span>
</div>
<span class="px-2">Build a cluster with whatever second-hand machines are available</span>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-center space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Data resiliency for everyone</h2>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Data resiliency for everyone</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic pb-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
@ -125,7 +146,7 @@
</li>
<li class="flex items-center justify-start">
<a href="https://cyberduck.io/" target="_blank" title="Cyberduck">
<img class="h-20 w-20" src="{{ get_url(path='images/cyberduck-logo.png') }}" alt="Cyberduck">
<img class="w-20" src="{{ get_url(path='images/cyberduck-logo.png') }}" alt="Cyberduck">
</a>
</li>
<li class="flex items-center justify-start">
@ -146,8 +167,8 @@
</ul>
</div>
<div class="flex flex-col items-center justify-center space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Built on the shoulder of giants</h2>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Standing on the shoulders of giants</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
@ -167,14 +188,23 @@
</li>
</ul>
</div>
</div>
{% if section.content %}
<div class="content max-w-7xl mx-auto py-12">
{{ section.content | safe }}
<div class="w-full flex flex-col items-center justify-center shadow-inner"></div>
<div class="px-8 py-24 space-y-8 text-garage-gray max-w-4xl mx-auto">
<h2 class="text-2xl text-garage-orange font-semibold">Sponsors and funding</h2>
<p>
The Deuxfleurs association has received a grant from <a class="text-garage-orange underline" href="https://pointer.ngi.eu/" target="_blank">NGI POINTER</a>,
to fund 3 people working on Garage full-time for a year : from October 2021 to September 2022.
</p>
<img src="{{ get_url(path='images/ngi-pointer-eu.png') }}" class="w-2/3" alt="NGI Pointers">
<p class="italic">
This project has received funding from the European Union's Horizon 2021 research and innovation programme
within the framework of the NGI-POINTER Project funded under grant agreement N° 871528.
</p>
</div>
{% endif %}
</div>
</div>
</section>
{% endblock %}

12
templates/macros.html
View file

@ -2,24 +2,24 @@
<p class="flex items-center justify-center space-x-2">
{% if social_config.git %}
<a href="{{ social_config.git }}" target="_blank">
<span class="icon is-large" title="Git">
<i class="fab fa-git fa-lg text-garage-gray h-8 w-8 bg-white hover:bg-garage-orange hover:text-white rounded-full shadow flex items-center justify-center"></i>
<span class="h-10 w-10 bg-white hover:shadow-xl rounded-full shadow flex items-center justify-center" title="Git">
<img src="{{get_url(path='icons/git.svg')}}" width="24px" alt="">
</span>
</a>
{% endif %}
{% if social_config.email %}
<a href="mailto:{{ social_config.email }}" target="_blank">
<span class="icon is-large" title="Email">
<i class="far fa-envelope fa-lg text-garage-gray h-8 w-8 bg-white hover:bg-garage-orange hover:text-white rounded-full shadow flex items-center justify-center"></i>
<span class="h-10 w-10 bg-white hover:shadow-xl rounded-full shadow flex items-center justify-center" title="Contact">
<img src="{{get_url(path='icons/contact.svg')}}" width="24px" alt="">
</span>
</a>
{% endif %}
{% if config.generate_feed %}
<a href="{{ config.base_url }}/{{ config.feed_filename }}" target="_blank">
<span class="icon is-large" title="RSS Feed">
<i class="fas fa-rss fa-lg text-garage-gray h-8 w-8 bg-white hover:bg-garage-orange hover:text-white rounded-full shadow flex items-center justify-center"></i>
<span class="h-10 w-10 bg-white hover:shadow-xl rounded-full shadow flex items-center justify-center" title="RSS Feed">
<img src="{{get_url(path='icons/rss.svg')}}" width="24px" alt="">
</span>
</a>
{% endif %}

12
templates/page.html
View file

@ -5,7 +5,7 @@
{% endblock %}
{% block content %}
<section class="section">
<section id="blogpost-section" class="section">
<div class="mx-auto max-w-7xl">
<div class="grid grid-cols-5 gap-x-12">
<div class="{% if page.extra.toc %}col-span-4{% else %}col-span-full{% endif %}">
@ -18,17 +18,17 @@
{% if page.description %}
<p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p>
{% endif %}
<a id="back-to-blog-posts" class="absolute top-0 -left-12" href="/blog" title="Back to blog posts">
<a id="back-to-blog-posts" class="absolute top-0 -left-12" href="/blog/" title="Back to blog posts">
<div class="w-10 overflow-hidden inline-block group">
<div class="h-16 bg-garage-gray group-hover:bg-garage-orange transform -rotate-45 origin-top-right"></div>
</div>
</a>
</div>
<div class="w-full text-garage-gray text-sm grid grid-cols-2 bg-gradient-to-r from-gray-100 to-transparent p-3 border-l-4 border-gray-300">
<div class="flex items-center justify-start">
<div class="w-full text-garage-gray text-sm grid grid-cols-1 md:grid-cols-2 bg-gradient-to-r from-gray-100 to-transparent p-3 border-l-4 border-gray-300">
<div class="flex items-center justify-start md:justify-start">
{{ macros::page_publish_metadata(page=page) }}
</div>
<div class="flex items-center justify-end">
<div class="flex items-center justify-start md:justify-end">
{{ macros::page_content_metadata(page=page) }}
</div>
<div>
@ -43,7 +43,7 @@
</div>
</div>
</div>
<div class="page-content max-w-4xl text-justify mt-12">
<div class="page-content max-w-4xl text-justify mt-12 px-5 md:px-12">
{{ page.content | safe }}
</div>
</article>

18
templates/partials/doc/global_toc.html
View file

@ -1,8 +1,20 @@
<aside id="global_toc" class="col-span-1 h-max bg-gray-100 shadow-inner border-r border-t border-gray-200">
<aside id="global_toc" class="relative col-span-1 h-full bg-gray-100 shadow-inner border-r border-t border-gray-200">
{% if section.subsections %}
<ul class="space-y-2 py-0.5 px-6 py-3 list-none">
<ul id="main-toc-menu" class="space-y-2 px-6 py-3 list-none">
{% if section.pages %}
{% for page in section.pages %}
<a
href="{{ page.permalink | safe }}"
class="docPage block pl-2 py-1 border-l rounded-r border-garage-orange hover:bg-garage-orange hover:bg-opacity-20
{% if current_path == page.path %} activePage border-l-4 text-garage-orange font-semibold border-opacity-100 border-garage-orange {% endif %}">
{{ page.title }}
</a>
{% endfor %}
{% endif %}
{% for subsec in section.subsections %}
{% set h1 = get_section(path=subsec) %}
{% set h1 = get_section(path=subsec) %}
<li class="relative">
<a
href="{{ h1.permalink | safe }}"

6
templates/partials/doc/page_toc.html
View file

@ -1,12 +1,12 @@
<aside class="hidden 2xl:block fixed right-0 bottom-1/2 transform translate-y-1/2 col-span-1 h-auto bg-gray-100 rounded-l-lg shadow-inner">
<aside class="hidden 2xl:block fixed right-0 bottom-1/2 transform translate-y-1/2 w-80 col-span-1 h-auto bg-gray-100 rounded-l-lg shadow-inner">
{% if page.toc %}
<div class="w-full flex items-center justify-center py-1.5 bg-gray-200 rounded-tl-lg">
<span class="uppercase tracking-wide text-xs text-garage-gray">Page content</span>
</div>
<ol class="text-sm space-y-0.5 py-0.5 px-8 py-3 list-decimal">
<ol class="text-sm space-y-0.5 px-8 py-3 list-decimal">
{% for h1 in page.toc %}
<li>
<a href="{{ h1.permalink | safe }}" class="font-semibold bg-gradient-to-r from-garage-gray to-garage-orange text-transparent bg-clip-text transition-all hover:text-garage-orange">{{ h1.title }}</a>
<a href="{{ h1.permalink | safe }}" class="font-semibold text-gray-800 transition-all hover:text-garage-orange">{{ h1.title }}</a>
{% if h1.children %}
<ul class="space-y-0.5 py-0.5">
{% for h2 in h1.children %}

25
templates/partials/doc/toc_script.html
View file

@ -1,9 +1,31 @@
<script type="text/javascript">
<script>
const menuBarHeight = document.querySelector("nav.navbar").clientHeight;
const mainTocMenuWidth = document.getElementById('main-toc-menu').clientWidth;
const tocItems = document.querySelectorAll(".toc");
const navSections = new Array(tocItems.length);
// Global ToC
/*
Fixed ToC when user scrolls.
*/
window.addEventListener('scroll', function() {
if (window.screen.width >= 1280) {
if (window.scrollY >= menuBarHeight) {
document.getElementById('main-toc-menu').classList.add('fixed', 'top-0', 'left-0');
document.getElementById('main-toc-menu').style.width = mainTocMenuWidth + 'px';
} else {
document.getElementById('main-toc-menu').classList.remove('fixed', 'top-0', 'left-0');
}
}
});
// Page content
/*
Focus effect on current section anchor when user scrolls.
*/
tocItems.forEach((el, i) => {
let id = el.getAttribute("id").substring(5);
navSections[i] = document.getElementById(id);
@ -42,7 +64,6 @@ window.addEventListener('scroll', () => {
}
}, false);
// If JS enabled, deploy only the current doc menu
document.addEventListener("DOMContentLoaded", function() {
var menusTriggers = document.getElementsByClassName("deploySubMenu");
var activeDocPage = document.getElementsByClassName("activePage")[0];

5
templates/partials/shared/footer.html
View file

@ -4,8 +4,9 @@
{{ macros:: social_links( social_config=config.extra.social) }}
</p>
<p class="text-gray-600 py-2">
Powered by <a href="https://www.getzola.org" target="_blank"
class="font-semibold hover:text-garage-orange">Zola</a>
Built with <a href="https://www.getzola.org" target="_blank" class="font-semibold hover:text-garage-orange">Zola</a>,
powered by <a href="{{config.base_url}}" class="font-semibold hover:text-garage-orange">Garage</a>,
hosted by <a href="https://deuxfleurs.fr" target="_blank" class="font-semibold hover:text-garage-orange">Deuxfleurs</a>
</p>
</div>
</footer>

13
templates/partials/shared/head.html
View file

@ -1,9 +1,6 @@
{% if config.extra.favicon.webmanifest %}
<link href='{{ config.extra.favicon.webmanifest }}' rel="manifest" />
{% endif %}
{% if config.extra.favicon.safari_pinned_tab %}
<link color="#5bbad5" href='{{ config.extra.favicon.safari_pinned_tab }}' rel="mask-icon" />
{% endif %}
{% if config.extra.favicon.favicon_16x16 %}
<link href='{{ config.extra.favicon.favicon_16x16 }}' rel="icon" sizes="16x16" type="image/png" />
{% endif %}
@ -14,21 +11,13 @@
<link href='{{ config.extra.favicon.apple_touch_icon }}' rel="apple-touch-icon" sizes="180x180" />
{% endif %}
{% if config.extra.galleria.enabled %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/galleria@1.6.1/dist/themes/folio/galleria.folio.min.css"
integrity="sha384-+rY0QD+LRnTOquDMzGa9lXU6jIwdiQuwCJQ2cdcW0qeP/0UbjQCZlXnRsUMA+9pH" crossorigin="anonymous">
{% endif %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link href="{{ get_url(path='style.css') }}" rel="stylesheet" />
{% block user_custom_stylesheet %}{% endblock %}
<title>
{% block title %}
{{ config.title }}
{{ config.title }} - An open-source distributed storage service
{% endblock title %}
</title>

24
templates/partials/shared/nav.html
View file

@ -1,17 +1,21 @@
<nav aria-label="section navigation" class="navbar w-full" role="navigation">
<div class="w-full flex flex-col space-y-2 md:space-y-0 md:flex-row items-center justify-between py-1 px-8 text-garage-gray bg-garage-orange bg-opacity-20">
<nav aria-label="navigation-section" class="navbar w-full relative" role="navigation">
<div class="w-full flex flex-row items-center justify-between py-1.5 px-8 text-garage-gray bg-garage-orange bg-opacity-20">
<div class="navbar-brand">
<a class="hover:rounded-full hover:bg-white" href="{{config.base_url}}">
<img class="transform duration-150 focus:bg-white hover:bg-white hover:shadow rounded-lg hover:scale-90"
src="{{ config.extra.organization.logo }}" width="65px">
<img class="px-2 transform duration-150 focus:bg-white hover:bg-white hover:shadow rounded-lg"
src="{{ config.extra.organization.logo_horizontal }}" width="120px">
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="flex items-center justify-center">
<input type="checkbox" id="navMenuToggleBtn" value="0"/>
<label for="navMenuToggleBtn" class="md:hidden p-1.5 hover:bg-white rounded-lg hover:shadow cursor-pointer" style="margin-top:0.08rem;">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path></svg>
</label>
<div class="hidden py-4 md:py-0 z-40 md:block absolute md:static top-12 left-0 right-0 navbar-menu bg-gray-100 shadow-md md:shadow-none md:bg-transparent" id="navMenu">
<div class="flex items-center justify-center space-x-2">
{% for item in config.extra.navbar_items %}
{% if lang == item.code %}
{% for nav in item.nav_items %}
<a class="font-semibold focus:bg-white hover:bg-white hover:shadow px-4 py-2 rounded-lg"
<a class="font-semibold focus:bg-white hover:bg-white hover:shadow px-3 py-1 rounded-lg"
href="{{ nav.url | replace(from='$BASE_URL', to=config.base_url) }}">
{{ nav.name }}
</a>
@ -25,6 +29,12 @@
class="focus:bg-white hover:bg-white hover:shadow px-4 py-2 rounded-lg">
<svg id="nav-search-btn-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
<a
href="https://garagehq.deuxfleurs.fr/_releases.html"
class="group flex items-center justify-center space-x-1 font-semibold shadow hover:shadow px-2 py-1.5 rounded text-white transition-all duration-500 bg-gradient-to-tl from-garage-orange via-orange-500 to-orange-300 bg-size-200 bg-pos-0 hover:bg-pos-100">
<svg class="w-6 h-6 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
<span class="hidden md:inline">Download</span>
</a>
</div>
</div>
</div>

25
templates/partials/shared/search.html Normal file
View file

@ -0,0 +1,25 @@
<section id="search-modal" class="modal hidden z-50 bg-gradient-to-b from-gray-50 to-gray-100 w-5/6 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 absolute top-20 left-1/2 transform -translate-x-1/2 shadow-2xl rounded-lg">
<div class="p-2 md:p-4 xl:p-8 border-8 border-gray-300 rounded-lg shadow-inner" style="min-height:30vh;">
<section class="relative flex flex-col items-center justify-center">
<div class="flexs items-center justify-center">
<span class="text-xl inline-block font-thin">Search</span>
<span class="font-normal inline-block text-xs text-gray-500">(alt + S)</span>
</div>
<div class="field mt-8 md:mt-0 mb-2">
<div class="control">
<input
id="search"
class="p-2 md:p-4 shadow rounded-lg outline-2 focus:outline outline-garage-orange"
placeholder="Search on Garage..." type="search" />
</div>
</div>
<div class="search-results hidden mt-8 p-2 md:p-4 w-full bg-white rounded shadow">
<div class="search-results__items max-h-96 overflow-y-scroll p-2 md:p-4 focus:outline outline-garage-orange"></div>
</div>
</section>
<button aria-label="close" id="close-modal-btn" class="absolute top-4 right-4 flex items-center group rounded-full shadow-inner bg-gray-300 border border-transparent hover:border-gray-500 bg-opacity-50 p-2">
<svg id="close-modal-btn-icon" class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
<small class="text-xs text-gray-400">(Esc)</small>
</button>
</div>
</section>

10
templates/section.html
View file

@ -14,7 +14,7 @@
<div class="content">
{{ section.content | safe }}
</div>
<div class="columns is-centered">
<div class="px-0 md:px-8 xl:px-4 2xl:px-0">
<div class="space-y-20">
{% if paginator %}
{% set pages = paginator.pages %}
@ -23,7 +23,7 @@
{% endif %}
{% for page in pages %}
<article class="border-l-4 border-garage-gray pl-4">
<article class="border-l-4 border-garage-gray pl-4 max-w-5xl">
<h2 class="text-garage-gray hover:text-garage-orange text-2xl pb-3">
<a class="w-full block" href='{{ page.permalink }}'>
{{ page.title }}
@ -41,8 +41,10 @@
</div>
</div>
<div class="content mt-2">
{{ page.summary | safe }}
<a class="group py-4 font-semibold px-4 py-2 flex items-center space-x-1 text-garage-orange" href='{{ page.permalink }}'>
<div class="text-gray-700">
{{ page.summary | safe }}
</div>
<a class="group font-semibold p-4 flex items-center space-x-1 text-garage-orange" href='{{ page.permalink }}'>
<div class="h-0.5 mt-0.5 w-4 group-hover:w-8 group-hover:bg-garage-gray transition-all bg-garage-orange"></div>
<span>Read</span>
<span class="text-garage-orange group-hover:text-garage-gray transition-all">