Skip to content
Snippets Groups Projects
Commit f6cf1215 authored by Emmanuel Salomon's avatar Emmanuel Salomon :fist:
Browse files

feat: :art: responsive hamburger menu and home sections. Fix #10

parents eb254970 af666a2d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/layout/LayoutHeader.vue
+ 1
− 1
View file @ f6cf1215
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<AppDarkModeToggle class="hidden xl:inline-flex ml-3" /> <AppDarkModeToggle class="hidden xl:inline-flex ml-3" />
<LayoutHeaderMenuAvatar /> <LayoutHeaderMenuAvatar class="hidden sm:block" />
</div> </div>
</nav> </nav>
</div> </div>
......
components/layout/LayoutHeaderLogo.vue
+ 21
− 2
View file @ f6cf1215
...@@ -4,12 +4,31 @@ ...@@ -4,12 +4,31 @@
class="group inline-flex items-center focus:outline-none py-3" class="group inline-flex items-center focus:outline-none py-3"
> >
<div <div
class="w-9 mr-4 fill-current group-hover:text-purple-800 transition-colors" class="
w-6
sm:w-9
mr-4
fill-current
group-hover:text-purple-800
transition-colors
"
v-html="$options.rawLogo" v-html="$options.rawLogo"
/> />
<span <span
class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors whitespace-nowrap" class="
bg-clip-text bg-gradient-to-r
font-semibold
from-purple-800
group-hover:text-transparent
text-lg
sm:text-xl
lg:text-2xl
to-blue-700
tracking-tight
transition-colors
whitespace-nowrap
"
:class="!props.showTitle && 'hidden lg:block'" :class="!props.showTitle && 'hidden lg:block'"
> >
{{ $options.config.site_title }} {{ $options.config.site_title }}
......
components/layout/LayoutHeaderMenuHamburger.vue
+ 4
− 4
View file @ f6cf1215
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
<template> <template>
<div> <div>
<div <div
class="hamburger flex flex-col space-between space-y-1.5" class="hamburger flex flex-col space-between space-y-1.5 p-6 -mx-6"
:class="isOpen ? 'is-open' : ''" :class="isOpen ? 'is-open' : ''"
@click="isOpen = !isOpen" @click="isOpen = !isOpen"
> >
...@@ -34,11 +34,11 @@ export default { ...@@ -34,11 +34,11 @@ export default {
<style lang="postcss" scoped> <style lang="postcss" scoped>
.hamburger-item { .hamburger-item {
@apply block w-8 h-1 bg-gray-800 dark:bg-gray-300 transition; @apply block w-6 h-0.5 bg-gray-800 dark:bg-gray-300 transition;
} }
.is-open.hamburger > span:nth-child(1) { .is-open.hamburger > span:nth-child(1) {
transform: translate(0, 0.625rem) rotate(-45deg); transform: translate(0, 0.5rem) rotate(45deg);
} }
.is-open.hamburger > span:nth-child(2) { .is-open.hamburger > span:nth-child(2) {
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
} }
.is-open.hamburger > span:nth-child(3) { .is-open.hamburger > span:nth-child(3) {
transform: translate(0, -0.625rem) rotate(45deg); transform: translate(0, -0.5rem) rotate(-45deg);
} }
.hamburger-menu { .hamburger-menu {
......
content/ui/home-section-ML-and.md
+ 29
− 28
View file @ f6cf1215
--- ---
title: Section monnaie libre et... title: Section monnaie libre et...
dev-notes: It's look ugly for now, but it will be better and easier to build block in next version with vuejs component in markdown...
--- ---
<nuxt-link to="/la-monnaie-libre-et-lenvironnement" class="group block mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1"> <nuxt-link to="/la-monnaie-libre-et-lenvironnement" class="group block mt-6 lg:mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1">
<section class="flex items-center"> <section class="flex flex-col md:flex-row items-center gap-8">
<img src="/img/healthy-eating.svg" class="w-1/3" /> <img src="/img/healthy-eating.svg" class="w-4/5 md:w-2/5" />
<div class="pl-8"> <div>
<h2 class="text-3xl mb-4 group-hover:text-hover">L'environnement</h2> <h2 class="text-purple-800 dark:text-purple-600 text-2xl lg:text-3xl mb-4">L'environnement</h2>
<p class="text-lg">La Ğ1 n'utilise pas une puissance de calcul pour sécuriser la blockchain. La création monétaire par DU permet de ne plus passer par une dette perpétuelle pour créer la monnaie. Produire à tout prix n'est plus une fin en soi. De plus, le DU est une première marche vers un mode de vie sobre.</p> <p class="text-base lg:text-lg">La Ğ1 n'utilise pas une puissance de calcul pour sécuriser la blockchain. La création monétaire par DU permet de ne plus passer par une dette perpétuelle pour créer la monnaie. Produire à tout prix n'est plus une fin en soi. De plus, le DU est une première marche vers un mode de vie sobre.</p>
<div class="underline pt-4 group-hover:text-hover">En savoir plus...</div> <div class="opacity-100 md:opacity-0 transition group-hover:opacity-100 underline pt-4 group-hover:text-hover">En savoir plus...</div>
</div> </div>
</section> </section>
</nuxt-link> </nuxt-link>
<nuxt-link to="/la-monnaie-libre-et-la-democratie" class="group block mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1"> <nuxt-link to="/la-monnaie-libre-et-la-democratie" class="group block mt-6 lg:mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1">
<section class="flex items-center"> <section class="flex flex-col md:flex-row items-center gap-8 flex-col-reverse">
<div class="pr-8"> <div>
<h2 class="text-3xl mb-4 group-hover:text-hover">La démocratie</h2> <h2 class="text-purple-800 dark:text-purple-600 text-2xl lg:text-3xl mb-4">La démocratie</h2>
<p class="text-lg">Laissez-moi la planche à billet, je me fiche de savoir qui fait les lois. Le privilège de création monétaire est un pouvoir. Répartir la création sur l'ensemble de la population est bien plus démocratique.</p> <p class="text-base lg:text-lg">Laissez-moi la planche à billet, je me fiche de savoir qui fait les lois. Le privilège de création monétaire est un pouvoir. Répartir la création sur l'ensemble de la population est bien plus démocratique.</p>
<div class="underline pt-4 group-hover:text-hover">En savoir plus...</div> <div class="opacity-100 md:opacity-0 transition group-hover:opacity-100 underline pt-4 group-hover:text-hover">En savoir plus...</div>
</div> </div>
<img src="/img/work-life-balance.svg" class="w-1/4" /> <img src="/img/work-life-balance.svg" class="w-3/5 md:w-1/4" />
</section> </section>
</nuxt-link> </nuxt-link>
<nuxt-link to="/la-monnaie-libre-et-les-crypto-monnaies" class="group block mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1"> <nuxt-link to="/la-monnaie-libre-et-les-crypto-monnaies" class="group block mt-6 lg:mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1">
<section class="flex items-center"> <section class="flex flex-col md:flex-row items-center gap-8">
<img src="/img/High-quality-products.svg" class="w-1/3" /> <img src="/img/High-quality-products.svg" class="w-3/5 md:w-1/3" />
<div class="pl-8"> <div>
<h2 class="text-3xl mb-4 group-hover:text-hover">Les crypto-monnaies</h2> <h2 class="text-purple-800 dark:text-purple-600 text-2xl lg:text-3xl mb-4">Les crypto-monnaies</h2>
<p class="text-lg">La Ğ1 est une crypto-monnaie, mais son modèle de création monétaire en fait une monnaie bien plus équitable que les autres cryptos. Les premiers arrivés ne sont pas privilégiés par rapport aux nouveaux entrants.</p> <p class="text-base lg:text-lg">La Ğ1 est une crypto-monnaie, mais son modèle de création monétaire en fait une monnaie bien plus équitable que les autres cryptos. Les premiers arrivés ne sont pas privilégiés par rapport aux nouveaux entrants.</p>
<div class="underline pt-4 group-hover:text-hover">En savoir plus...</div> <div class="opacity-100 md:opacity-0 transition group-hover:opacity-100 underline pt-4 group-hover:text-hover">En savoir plus...</div>
</div> </div>
</section> </section>
</nuxt-link> </nuxt-link>
<nuxt-link to="/la-monnaie-libre-et-les-monnaies-locales" class="group block mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1"> <nuxt-link to="/la-monnaie-libre-et-les-monnaies-locales" class="group block mt-6 lg:mt-12 p-8 hover:shadow-xl rounded-lg transition transform hover:-translate-y-1">
<section class="flex items-center"> <section class="flex flex-col md:flex-row items-center gap-8 flex-col-reverse">
<div class="pr-8"> <div>
<h2 class="text-3xl mb-4 group-hover:text-hover">Les monnaies locales</h2> <h2 class="text-purple-800 dark:text-purple-600 text-2xl lg:text-3xl mb-4">Les monnaies locales</h2>
<p class="text-lg">Généralement, les monnaies locales sont indexés à l'Euro. Ce n'est pas un changement de référentiel. Je suis pauvre en Euro, je suis pauvre en monnaie locale.</p> <p class="text-base lg:text-lg">Généralement, les monnaies locales sont indexés à l'Euro. Ce n'est pas un changement de référentiel. Je suis pauvre en Euro, je suis pauvre en monnaie locale.</p>
<div class="underline pt-4 group-hover:text-hover">En savoir plus...</div> <div class="opacity-100 md:opacity-0 transition group-hover:opacity-100 underline pt-4 group-hover:text-hover">En savoir plus...</div>
</div> </div>
<img src="/img/MLC.svg" class="w-1/3" /> <img src="/img/MLC.svg" class="w-3/5 md:w-1/3" />
</section> </section>
</nuxt-link> </nuxt-link>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment