tixie/garagehq.deuxfleurs.fr
1
0
Fork 0
forked from Deuxfleurs/garagehq.deuxfleurs.fr
Code Pull requests Activity

Fix typo on 404, Remove useless blocks on templates

Browse source
This commit is contained in:
Lucas Chaplain 2022-02-01 18:56:05 +01:00
parent 029e024b15
commit 4b4dee731f
2 changed files with 190 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
templates/404.html
View file

@ -3,20 +3,20 @@
{% block content %} {% block content %}
<section class="py-48"> <section class="py-48">
<div class="w-full mx-auto"> <div class="w-full mx-auto">
<div class="flex items-center justify-center" style="min-height:40vh;"> <div class="flex items-center justify-center" style="min-height:40vh;">
<div class="flex flex-col items-center justify-center w-96 mx-auto"> <div class="flex flex-col items-center justify-center w-96 mx-auto">
<h1 class="flex items-center justify-around space-x-2 text-2xl text-garage-gray"> <h1 class="flex items-center justify-around space-x-2 text-2xl text-garage-gray">
<span class="text-garage-orange font-semibold">HTTP 404</span> <span class="text-garage-orange font-semibold">HTTP 404</span>
</h1> </h1>
<p class="text-gray-900 font-light text-center"> <p class="text-gray-900 font-light text-center">
What a shame!<br>The page you are looking for does not exist. What a shame!<br>The page you are looking for does not exist.
</p> </p>
<a href="/" class="text-garage-gray hover:text-garage-orange underline"> <a href="/" class="text-garage-gray hover:text-garage-orange underline">
Go back to homepage Go back to homepage
</p> </a>
</div> </div>
</div>
</div> </div>
</div>
</section> </section>
{% endblock %} {% endblock %}

350
templates/page.html
View file

@ -5,206 +5,202 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<section id="blogpost-section" class="section"> <section id="blogpost-section" class="section">
<div class="mx-auto max-w-7xl"> <div class="mx-auto max-w-7xl">
<div class="grid grid-cols-5 gap-x-12"> <div class="grid grid-cols-5 gap-x-12">
<div class="{% if page.extra.toc %}col-span-4{% else %}col-span-full{% endif %}"> <div class="{% if page.extra.toc %}col-span-4{% else %}col-span-full{% endif %}">
<article class="box my-12"> <article class="box my-12">
<div class="flex flex-col bg-gray-50"> <div class="flex flex-col bg-gray-50">
<div class="flex flex-col border-l-4 border-garage-orange py-2 pl-4 relative"> <div class="flex flex-col border-l-4 border-garage-orange py-2 pl-4 relative">
<h1 class="title leading-10 text-3xl text-garage-orange font-semibold"> <h1 class="title leading-10 text-3xl text-garage-orange font-semibold">
{{ page.title }} {{ page.title }}
</h1> </h1>
{% if page.description %} {% if page.description %}
<p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p> <p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p>
{% endif %} {% 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/"
<div class="w-10 overflow-hidden inline-block group"> title="Back to blog posts">
<div class="h-16 bg-garage-gray group-hover:bg-garage-orange transform -rotate-45 origin-top-right"></div> <div class="w-10 overflow-hidden inline-block group">
</div> <div
</a> class="h-16 bg-garage-gray group-hover:bg-garage-orange transform -rotate-45 origin-top-right">
</div> </div>
<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>
<div class="flex items-center justify-start md:justify-start"> </a>
{{ macros::page_publish_metadata(page=page) }} </div>
</div> <div
<div class="flex items-center justify-start md:justify-end"> 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">
{{ macros::page_content_metadata(page=page) }} <div class="flex items-center justify-start md:justify-start">
</div> {{ macros::page_publish_metadata(page=page) }}
<div> </div>
{% if page.taxonomies.categories %} <div class="flex items-center justify-start md:justify-end">
{{ macros::render_categories(categories=page.taxonomies.categories) }} {{ macros::page_content_metadata(page=page) }}
{% endif %} </div>
</div> <div>
<div> {% if page.taxonomies.categories %}
{% if page.taxonomies.tags %} {{ macros::render_categories(categories=page.taxonomies.categories) }}
{{ macros::render_tags(tags=page.taxonomies.tags) }} {% endif %}
{% endif %} </div>
</div> <div>
</div> {% if page.taxonomies.tags %}
{{ macros::render_tags(tags=page.taxonomies.tags) }}
{% endif %}
</div>
</div>
</div>
<div class="page-content max-w-4xl text-justify mt-12 px-5 md:px-12">
{{ page.content | safe }}
</div>
</article>
</div> </div>
<div class="page-content max-w-4xl text-justify mt-12 px-5 md:px-12"> {% if page.extra.toc %}
{{ page.content | safe }} <div
class="col-span-1 my-12 is-hidden-mobile bg-gradient-to-b from-yellow-100 to-transparent rounded shadow-inner">
<aside class="menu" style="position:sticky;top:0">
<p class="bg-yellow-200 uppercase text-xs font-light p-1 text-center text-gray-600">Contents</p>
<ul class="menu-list p-2 text-gray-800">
{% for h1 in page.toc %}
<li class="flex flex-col h-full">
<a id="link-{{h1.id}}"
class="toc text-sm text-gray-600 bg-transparent hover:text-orange-600 font-semibold {% if loop.first %}is-active{% endif %}"
href="{{ h1.permalink | safe }}">
{{ h1.title }}
</a>
{% if h1.children %}
<ul>
{% for h2 in h1.children %}
<li class="hover:text-orange-600 border-l border-orange-400">
<a id="link-{{h2.id}}" class="toc pl-2 text-xs" href="{{ h2.permalink | safe }}">
{{ h2.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</aside>
</div> </div>
</article> {% endif %}
</div> </div>
{% if page.extra.toc %}
<div class="col-span-1 my-12 is-hidden-mobile bg-gradient-to-b from-yellow-100 to-transparent rounded shadow-inner">
<aside class="menu" style="position:sticky;top:0">
<p class="bg-yellow-200 uppercase text-xs font-light p-1 text-center text-gray-600">Contents</p>
<ul class="menu-list p-2 text-gray-800">
{% for h1 in page.toc %}
<li class="flex flex-col h-full">
<a id="link-{{h1.id}}" class="toc text-sm text-gray-600 bg-transparent hover:text-orange-600 font-semibold {% if loop.first %}is-active{% endif %}"
href="{{ h1.permalink | safe }}">
{{ h1.title }}
</a>
{% if h1.children %}
<ul>
{% for h2 in h1.children %}
<li class="hover:text-orange-600 border-l border-orange-400">
<a id="link-{{h2.id}}" class="toc pl-2 text-xs" href="{{ h2.permalink | safe }}">
{{ h2.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</aside>
</div>
{% endif %}
</div>
</div> </div>
</section> </section>
{% endblock %} {% endblock %}
{% block pagination %} {% block pagination %}
{% if page.earlier or page.later or page.lighter or page.heavier %} {% if page.earlier or page.later or page.lighter or page.heavier %}
<section class="w-full"> <section class="w-full">
<div class="container py-20"> <div class="container py-20">
<div class="mx-auto max-w-4xl"> <div class="mx-auto max-w-4xl">
<div class="column is-8"> <div class="column is-8">
<nav class="flex space-x-8 items-center justify-center"> <nav class="flex space-x-8 items-center justify-center">
{% if page.later %} {% if page.later %}
<div> <div>
<a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" href="{{ page.later.permalink }}"> <a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800"
<span class="icon mr-2"> href="{{ page.later.permalink }}">
<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="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg> <span class="icon mr-2">
</span> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<span>{{ page.later.title }}</span> xmlns="http://www.w3.org/2000/svg">
</a> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
</div> d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
{% endif %} {% if page.earlier %} </svg>
<div> </span>
<a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" href="{{ page.earlier.permalink }}"> <span>{{ page.later.title }}</span>
{{ page.earlier.title }}<span class="icon ml-2"> </a>
<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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> </div>
</span> {% endif %} {% if page.earlier %}
</a> <div>
</div> <a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800"
{% endif %} {% if page.heavier %} href="{{ page.earlier.permalink }}">
<div> {{ page.earlier.title }}<span class="icon ml-2">
<a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" href="{{ page.heavier.permalink }}"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<span class="icon mr-2"> xmlns="http://www.w3.org/2000/svg">
<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="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
</span> d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
<span>{{ page.heavier.title }}</span> </svg>
</a> </span>
</div> </a>
{% endif %} {% if page.lighter %} </div>
<div> {% endif %} {% if page.heavier %}
<a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" href="{{ page.lighter.permalink }}"> <div>
{{ page.lighter.title }}<span class="icon ml-2"> <a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800"
<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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> href="{{ page.heavier.permalink }}">
</span> <span class="icon mr-2">
</a> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
</div> xmlns="http://www.w3.org/2000/svg">
{% endif %} <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
</nav> d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
</div> </svg>
</span>
<span>{{ page.heavier.title }}</span>
</a>
</div>
{% endif %} {% if page.lighter %}
<div>
<a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800"
href="{{ page.lighter.permalink }}">
{{ page.lighter.title }}<span class="icon ml-2">
<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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</span>
</a>
</div>
{% endif %}
</nav>
</div>
</div> </div>
</div> </div>
</section> </section>
{% endif %} {% endif %}
{% endblock %}
{% block comment %}
{% if page.extra.comments and config.extra.commenting.disqus %}
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-6">
<div id="disqus_thread"></div>
</div>
</div>
</div>
</section>
{% endif %}
{% endblock %} {% endblock %}
{% block custom_js %} {% block custom_js %}
{% if page.extra.toc %} {% if page.extra.toc %}
<script type="text/javascript"> <script type="text/javascript">
const menuBarHeight = document.querySelector("nav.navbar").clientHeight; const menuBarHeight = document.querySelector("nav.navbar").clientHeight;
const tocItems = document.querySelectorAll(".toc"); const tocItems = document.querySelectorAll(".toc");
const navSections = new Array(tocItems.length); const navSections = new Array(tocItems.length);
tocItems.forEach((el, i) => { tocItems.forEach((el, i) => {
let id = el.getAttribute("id").substring(5); let id = el.getAttribute("id").substring(5);
navSections[i] = document.getElementById(id); navSections[i] = document.getElementById(id);
}) })
function isVisible(tocIndex) { function isVisible(tocIndex) {
const current = navSections[tocIndex]; const current = navSections[tocIndex];
const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1] const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1]
: document.querySelectorAll("section.section").item(1); : document.querySelectorAll("section.section").item(1);
const c = current.getBoundingClientRect(); const c = current.getBoundingClientRect();
const n = next.getBoundingClientRect(); const n = next.getBoundingClientRect();
const h = (window.innerHeight || document.documentElement.clientHeight); const h = (window.innerHeight || document.documentElement.clientHeight);
return (c.top <= h) && (n.top - menuBarHeight >= 0); return (c.top <= h) && (n.top - menuBarHeight >= 0);
}
function activateIfVisible() {
for (b = true, i = 0; i < tocItems.length; i++) {
if (b && isVisible(i)) {
tocItems[i].classList.add('is-active');
b = false;
} else
tocItems[i].classList.remove('is-active');
} }
}
var isTicking = null; function activateIfVisible() {
window.addEventListener('scroll', () => { for (b = true, i = 0; i < tocItems.length; i++) {
if (!isTicking) { if (b && isVisible(i)) {
window.requestAnimationFrame(() => { tocItems[i].classList.add('is-active');
activateIfVisible(); b = false;
isTicking = false; } else
}); tocItems[i].classList.remove('is-active');
isTicking = true; }
} }
}, false);
</script>
{% endif %}
{% if page.extra.comments and config.extra.commenting.disqus %} var isTicking = null;
<script> window.addEventListener('scroll', () => {
var disqus_config = function () { if (!isTicking) {
this.page.url = "{{config.base_url | safe}}"; window.requestAnimationFrame(() => {
this.page.identifier = "{{ current_path | safe}}"; activateIfVisible();
}; isTicking = false;
});
(function () { isTicking = true;
var d = document, s = d.createElement('script'); }
s.src = 'https://{{ config.extra.commenting.disqus | safe}}.disqus.com/embed.js'; }, false);
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script> </script>
{% endif %} {% endif %}
{% endblock %} {% endblock %}