From e6f8f43b6ca5ff00d33b3a539e67eb2255fa1dd0 Mon Sep 17 00:00:00 2001 From: sptaule Date: Sat, 29 Jan 2022 14:42:09 +0100 Subject: Improve responsive, icons, refactor search, update readme --- README.md | 45 ++++++++++- config.toml | 18 +---- src/input.css | 133 +++++++++++++++++++++++++++++++- static/icons/android-chrome-192x192.png | Bin 41271 -> 7476 bytes static/icons/android-chrome-384x384.png | Bin 157930 -> 15740 bytes static/icons/apple-touch-icon.png | Bin 36697 -> 7007 bytes static/icons/contact.svg | 96 +++++++++++++++++++++++ static/icons/favicon-16x16.png | Bin 1407 -> 645 bytes static/icons/favicon-32x32.png | Bin 2444 -> 1323 bytes static/icons/favicon.ico | Bin 15086 -> 2534 bytes static/icons/git.svg | 8 ++ static/icons/mstile-150x150.png | Bin 20818 -> 5858 bytes static/icons/rss.svg | 62 +++++++++++++++ static/icons/safari-pinned-tab.svg | 15 ---- static/screenshots/screenshot-1280.png | Bin 0 -> 476964 bytes static/screenshots/screenshot-480.png | Bin 0 -> 384067 bytes static/screenshots/screenshot-768.png | Bin 0 -> 395306 bytes templates/base.html | 32 +------- templates/documentation.html | 2 +- templates/index.html | 22 +++--- templates/macros.html | 12 +-- templates/page.html | 10 +-- templates/partials/doc/toc_script.html | 12 +-- templates/partials/shared/head.html | 13 +--- templates/partials/shared/nav.html | 12 ++- templates/partials/shared/search.html | 25 ++++++ templates/section.html | 10 ++- 27 files changed, 414 insertions(+), 113 deletions(-) mode change 100755 => 100644 static/icons/android-chrome-192x192.png mode change 100755 => 100644 static/icons/android-chrome-384x384.png mode change 100755 => 100644 static/icons/apple-touch-icon.png create mode 100644 static/icons/contact.svg mode change 100755 => 100644 static/icons/favicon-16x16.png mode change 100755 => 100644 static/icons/favicon-32x32.png mode change 100755 => 100644 static/icons/favicon.ico create mode 100644 static/icons/git.svg create mode 100644 static/icons/rss.svg delete mode 100755 static/icons/safari-pinned-tab.svg create mode 100644 static/screenshots/screenshot-1280.png create mode 100644 static/screenshots/screenshot-480.png create mode 100644 static/screenshots/screenshot-768.png create mode 100644 templates/partials/shared/search.html diff --git a/README.md b/README.md index 25416e5..c85fe6a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Garage Website -¡ Work in progress ! +¡ Work in progress (almost done) ! --- @@ -11,4 +11,45 @@ - Run `npm install` to get the dev dependencies - Run `zola build` to get the public directory - Run `npm start` to compile styles and scripts -- Run `zola serve` \ No newline at end of file +- Run `zola serve` + +## Build + +CSS : `28.4 kB` + +JS : `6.8 kB (app)` + `1.2 MB (search)`* + +*The search index in loaded only when the user opens the search modal + +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 without 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 + +
+

+ 480px + +

+

+ 768px + +

+

+ 1280px + +

+
\ No newline at end of file diff --git a/config.toml b/config.toml index 5db7b77..fff3bc2 100755 --- a/config.toml +++ b/config.toml @@ -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,18 +46,17 @@ 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] @@ -77,11 +72,4 @@ 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" +email = "contact@garagehq.com" \ No newline at end of file diff --git a/src/input.css b/src/input.css index b2fd6a9..8cd7f3e 100755 --- a/src/input.css +++ b/src/input.css @@ -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 */ @@ -104,18 +104,47 @@ p > code, p > strong > code, li > code, li > strong > code { @layer utilities { + /** 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: center; + background-position: left; background-size: cover; background-attachment: fixed; height: 70vh; } - /** Global ToC */ + @media screen and (max-width: 768px) { + #map-container { + background-position: 25%; + background-size: auto; + background-attachment: scroll; + height: 50vh; + } + } + + /** Documentation */ #global_toc .deploySubMenu { position: absolute; left: -100vw; @@ -129,4 +158,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; + } + } \ No newline at end of file diff --git a/static/icons/android-chrome-192x192.png b/static/icons/android-chrome-192x192.png old mode 100755 new mode 100644 index aea97b9..6191d54 Binary files a/static/icons/android-chrome-192x192.png and b/static/icons/android-chrome-192x192.png differ diff --git a/static/icons/android-chrome-384x384.png b/static/icons/android-chrome-384x384.png old mode 100755 new mode 100644 index 3d37c74..6591643 Binary files a/static/icons/android-chrome-384x384.png and b/static/icons/android-chrome-384x384.png differ diff --git a/static/icons/apple-touch-icon.png b/static/icons/apple-touch-icon.png old mode 100755 new mode 100644 index 87f4544..ea31671 Binary files a/static/icons/apple-touch-icon.png and b/static/icons/apple-touch-icon.png differ diff --git a/static/icons/contact.svg b/static/icons/contact.svg new file mode 100644 index 0000000..6462178 --- /dev/null +++ b/static/icons/contact.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/icons/favicon-16x16.png b/static/icons/favicon-16x16.png old mode 100755 new mode 100644 index 3480bc7..959a4c2 Binary files a/static/icons/favicon-16x16.png and b/static/icons/favicon-16x16.png differ diff --git a/static/icons/favicon-32x32.png b/static/icons/favicon-32x32.png old mode 100755 new mode 100644 index 605b4ab..cd92e5f Binary files a/static/icons/favicon-32x32.png and b/static/icons/favicon-32x32.png differ diff --git a/static/icons/favicon.ico b/static/icons/favicon.ico old mode 100755 new mode 100644 index 77b9683..c667975 Binary files a/static/icons/favicon.ico and b/static/icons/favicon.ico differ diff --git a/static/icons/git.svg b/static/icons/git.svg new file mode 100644 index 0000000..f5f36f9 --- /dev/null +++ b/static/icons/git.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/static/icons/mstile-150x150.png b/static/icons/mstile-150x150.png index ecacbb4..20b38df 100755 Binary files a/static/icons/mstile-150x150.png and b/static/icons/mstile-150x150.png differ diff --git a/static/icons/rss.svg b/static/icons/rss.svg new file mode 100644 index 0000000..99b3581 --- /dev/null +++ b/static/icons/rss.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/icons/safari-pinned-tab.svg b/static/icons/safari-pinned-tab.svg deleted file mode 100755 index 9e473c4..0000000 --- a/static/icons/safari-pinned-tab.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - -Created by potrace 1.11, written by Peter Selinger 2001-2013 - - - - - diff --git a/static/screenshots/screenshot-1280.png b/static/screenshots/screenshot-1280.png new file mode 100644 index 0000000..2a866f1 Binary files /dev/null and b/static/screenshots/screenshot-1280.png differ diff --git a/static/screenshots/screenshot-480.png b/static/screenshots/screenshot-480.png new file mode 100644 index 0000000..4eb1d38 Binary files /dev/null and b/static/screenshots/screenshot-480.png differ diff --git a/static/screenshots/screenshot-768.png b/static/screenshots/screenshot-768.png new file mode 100644 index 0000000..784d705 Binary files /dev/null and b/static/screenshots/screenshot-768.png differ diff --git a/templates/base.html b/templates/base.html index 41121c3..d947c50 100755 --- a/templates/base.html +++ b/templates/base.html @@ -13,40 +13,14 @@ {% include "partials/shared/nav.html" %} -
- {% block content %}{% endblock %} -
+ {% block content %}{% endblock %} {% block search %} - + {% include "partials/shared/search.html" %} {% endblock %} {% block pagination %} - {% include "partials/shared/paginator.html" %} + {% include "partials/shared/paginator.html" %} {% endblock %} {% block comment %}{% endblock %} diff --git a/templates/documentation.html b/templates/documentation.html index 09dcad9..55a5c61 100644 --- a/templates/documentation.html +++ b/templates/documentation.html @@ -6,7 +6,7 @@ {% block content %} {% set section = get_section(path="documentation/_index.md") %} -
+
{% include "partials/doc/global_toc.html" %}
diff --git a/templates/index.html b/templates/index.html index f3a9379..1f09edd 100755 --- a/templates/index.html +++ b/templates/index.html @@ -11,26 +11,26 @@
- Host a Website + Host a Website
- Store Media + Store Media
- Backup Target + Backup Target
- +
-
+

Each chunk of data is replicated in 3 zones

@@ -45,9 +45,9 @@
-
+
-

Our Goals

+

Our Goals

We made it lightweight and kept the efficiency in mind.

    @@ -80,7 +80,7 @@
-

Keeping requirements low

+

Keeping requirements low

We worked hard to keep requirements as low as possible
as we target the largest possible public. @@ -125,7 +125,7 @@

-

Data resiliency for everyone

+

Data resiliency for everyone

Lorem ipsum dolor sit amet consectetur adipisicing elit. @@ -168,7 +168,7 @@

-

Standing on the shoulders of giants

+

Standing on the shoulders of giants

Lorem ipsum dolor sit amet consectetur adipisicing elit. @@ -191,7 +191,7 @@

-
+

Sponsors and funding

The Deuxfleurs association has received a grant from NGI POINTER, diff --git a/templates/macros.html b/templates/macros.html index 9fab136..dc65140 100755 --- a/templates/macros.html +++ b/templates/macros.html @@ -2,24 +2,24 @@

{% if social_config.git %} - - + + {% endif %} {% if social_config.email %} - - + + {% endif %} {% if config.generate_feed %} - - + + {% endif %} diff --git a/templates/page.html b/templates/page.html index eeba7f1..53767ae 100755 --- a/templates/page.html +++ b/templates/page.html @@ -5,7 +5,7 @@ {% endblock %} {% block content %} -

+
@@ -24,11 +24,11 @@
-
-
+
+
{{ macros::page_publish_metadata(page=page) }}
-
+
{{ macros::page_content_metadata(page=page) }}
@@ -43,7 +43,7 @@
-
+
{{ page.content | safe }}
diff --git a/templates/partials/doc/toc_script.html b/templates/partials/doc/toc_script.html index df115b0..1453a69 100644 --- a/templates/partials/doc/toc_script.html +++ b/templates/partials/doc/toc_script.html @@ -11,11 +11,13 @@ const navSections = new Array(tocItems.length); */ window.addEventListener('scroll', function() { - 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'); + 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'); + } } }); diff --git a/templates/partials/shared/head.html b/templates/partials/shared/head.html index 185a97b..ca2033e 100644 --- a/templates/partials/shared/head.html +++ b/templates/partials/shared/head.html @@ -1,9 +1,6 @@ {% if config.extra.favicon.webmanifest %} {% endif %} -{% if config.extra.favicon.safari_pinned_tab %} - -{% endif %} {% if config.extra.favicon.favicon_16x16 %} {% endif %} @@ -13,14 +10,6 @@ {% if config.extra.favicon.apple_touch_icon %} {% endif %} - -{% if config.extra.galleria.enabled %} - -{% endif %} - - @@ -28,7 +17,7 @@ {% block title %} - {{ config.title }} + {{ config.title }} - An open-source distributed storage service {% endblock title %} diff --git a/templates/partials/shared/nav.html b/templates/partials/shared/nav.html index 57e81fe..a4a4b99 100644 --- a/templates/partials/shared/nav.html +++ b/templates/partials/shared/nav.html @@ -1,12 +1,16 @@ -