.nvmrc

+v16.15.1

README.md

@@ -33,7 +33,7 @@ For detailed explanation on how things work, check out [Nuxt.js docs](https://nu
 # Administration : le back office
 
 Vous pouvez accéder à l'administration ici : https://monnaie-libre.fr/admin/
-Le back office est conçu avec [netlify cms](https://www.netlifycms.org/) qui est lui même couplé à ce dépôt. Tout changement effectué en back office créera une demande de fusion dans ce dépôt.
+Le back office est conçu avec [netlify cms](https://www.netlifycms.org/) qui est lui même couplé à ce dépôt gitlab. Tout changement effectué en back office créera une demande de fusion dans ce dépôt.
 Vous devez avoir un compte sur ce gitlab (git.duniter.org) pour pouvoir accéder au back office.
 
 ## Lancer le back office (netlify)
@@ -51,9 +51,13 @@ Puis aller sur http://localhost:3000/admin/
 
 # Design
 
-## Storybook
+## Illustration
 
-Idée abandonnée. J'ai installé, configuré et testé. Mais c'est compliqué, et finalement pas super intégré pour vue.js...
+Toutes les images utilisées sur le site :
+https://www.figma.com/file/Gof5rulCCUMvwk3WDKlgVY/monnaie-libre.fr
+
+Ressources :
+https://www.pixeltrue.com/free-packs/minimalistic-illustrations#preview
 
 ## Afficher toutes les `class` de tailwindcss
 
@@ -120,6 +124,19 @@ Go to http://localhost/ !
 
 You can change the port. In the command above, replace `80:80` by `4000:80` and go to http://localhost:4000/
 
-# CI Gitlab
+# Gitlab
+
+## Graphql
+
+Graphql Endpoint : https://git.duniter.org/api/graphql
+Graphql Explorer : https://git.duniter.org/-/graphql-explorer
+
+## About CI
 
 https://blog.logrocket.com/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu/
+
+# Discourse
+
+## API Docs
+
+https://docs.discourse.org/

assets/css/tailwind.css

@@ -5,7 +5,7 @@
 @import 'tailwindcss/utilities';
 
 /* helper for development only */
-.nuxt-content-container {
+.nuxt-content-container:hover {
   background: linear-gradient(90deg, transparent 90%, #ffff0030);
 }
 
@@ -29,6 +29,14 @@ html {
   @apply text-white;
 }
 
+/* For emojis from discourse */
+img.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  display: inline;
+}
+
 /* Loader */
 @keyframes spinner {
   to {

components/app/AppBreadcrumb.vue

@@ -21,7 +21,7 @@
           :class="
             index !== items.length - 1
               ? 'text-gray-400'
-              : 'text-gray-600 font-extralight select-all'
+              : 'text-gray-500 font-light select-all'
           "
         >
           {{ item.title }}

components/app/AppDarkMode.vue → components/app/AppDarkModeToggle.vue

 <template>
-  <t-toggle v-model="mode" value="dark" unchecked-value="light" variant="dark">
+  <t-toggle
+    v-model="mode"
+    value="dark"
+    unchecked-value="light"
+    variant="dark"
+    :aria-checked="mode === 'light' ? 'false' : 'true'"
+    aria-label="Toggle dark mode"
+  >
     <fa
       slot="unchecked"
       icon="sun"

components/app/AppReadingTime.vue

 <template>
-  <div class="flex items-center mb-8">
-    <fa :icon="['far', 'clock']" class="text-gray-400 text-lg mr-2" />
+  <div class="flex items-center mb-8 text-gray-500">
+    <fa :icon="['far', 'clock']" class="text-xl mr-2" />
 
     <div>
       <span>{{ readingTimeToStr }}</span>
-      <span class="text-gray-400 text-sm pl-1">
+      <span
+        class="text-sm text-gray-400 dark:text-gray-600 pl-1 hidden xl:inline"
+      >
         {{ `(${readingTime.words} mots)` }}
       </span>
     </div>

components/app/AppShareModal.vue

+<template>
+  <div class="relative">
+    <t-dropdown
+      :show.sync="show"
+      toggle-on-focus
+      toggle-on-hover
+      :hide-on-leave-timeout="0"
+      :classes="{
+        dropdown:
+          'absolute rounded-md shadow-lg dark:border-gray-500 border -top-3 -left-3 z-10 overflow-hidden w-40 bg-white dark:bg-gray-600 transition duration-150 ease-in-out',
+      }"
+    >
+      <button
+        slot="button"
+        class="relative flex items-center text-gray-500"
+        :class="show && 'z-20 text-gray-800 dark:text-gray-200'"
+        aria-label="Partager"
+        aria-haspopup="true"
+      >
+        <fa icon="share-alt" class="text-xl mr-2.5" />
+        <div>Partager</div>
+      </button>
+
+      <div class="mt-11 pt-0.5 pb-1">
+        <div class="border-t dark:border-gray-500 pt-1 mx-2"></div>
+
+        <ShareNetwork
+          v-for="network in networks"
+          :key="network.name"
+          :network="network.network"
+          :url="$config.site_url + document.path.replace(/^\/pages\//, '/')"
+          :title="document.title"
+          :description="document.description"
+          :quote="document.description"
+          :hashtags="$config.social_networks_hashtags"
+          :twitter-user="$config.twitter_user"
+          :media="media"
+          class="
+            flex
+            items-center
+            pl-4
+            pr-2
+            py-1
+            text-gray-600
+            hover:text-gray-700 hover:bg-hover-light
+            dark:text-gray-200
+          "
+        >
+          <fa :icon="network.icon" :class="network.class" />
+          <span class="pl-2">
+            {{ network.name }}
+          </span>
+        </ShareNetwork>
+      </div>
+    </t-dropdown>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    document: {
+      type: Object,
+      required: true,
+    },
+    media: {
+      type: String,
+      default: null,
+    },
+  },
+  setup() {
+    const show = ref(false)
+
+    return {
+      show,
+      networks: [
+        { network: 'email', name: 'Email', icon: 'envelope', class: 'email' },
+        {
+          network: 'facebook',
+          name: 'Facebook',
+          icon: ['fab', 'facebook'],
+          class: 'facebook',
+        },
+        {
+          network: 'twitter',
+          name: 'Twitter',
+          icon: ['fab', 'twitter'],
+          class: 'twitter',
+        },
+        {
+          network: 'linkedin',
+          name: 'Linkedin',
+          icon: ['fab', 'linkedin'],
+          class: 'linkedin',
+        },
+        {
+          network: 'reddit',
+          name: 'Reddit',
+          icon: ['fab', 'reddit'],
+          class: 'reddit',
+        },
+        {
+          network: 'skype',
+          name: 'Skype',
+          icon: ['fab', 'skype'],
+          class: 'skype',
+        },
+        { network: 'sms', name: 'SMS', icon: 'comment', class: 'sms' },
+        {
+          network: 'telegram',
+          name: 'Telegram',
+          icon: ['fab', 'telegram'],
+          class: 'telegram',
+        },
+        {
+          network: 'whatsapp',
+          name: 'Whatsapp',
+          icon: ['fab', 'whatsapp'],
+          class: 'whatsapp',
+        },
+      ],
+    }
+  },
+})
+</script>
+
+<style scoped>
+.email,
+.sms {
+  color: #444;
+}
+.twitter {
+  color: #1da1f2;
+}
+.facebook {
+  color: #3b5998;
+}
+.linkedin {
+  color: #0077b5;
+}
+.skype {
+  color: #00aff0;
+}
+.reddit {
+  color: #ff4500;
+}
+.telegram {
+  color: #0088cc;
+}
+.whatsapp {
+  color: #43d854;
+}
+</style>

components/app/MiniMap.vue

@@ -4,7 +4,17 @@
     <span
       v-show="hovered"
       id="tooltip-mini-map"
-      class="absolute whitespace-nowrap pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 bg-white dark:bg-gray-700"
+      class="
+        absolute
+        whitespace-nowrap
+        pointer-events-none
+        p-1
+        shadow-lg
+        rounded
+        text-xs
+        bg-opacity-90 bg-white
+        dark:bg-gray-700
+      "
     >
       {{ hovered && hovered.name }}
     </span>
@@ -223,7 +233,7 @@ export default {
 
       region.addEventListener('click', (evt) => {
         window.open(
-          `https://forum.monnaie-libre.fr/c/${regions[evt.target.id].id}`,
+          `${this.$config.forum_url}/c/${regions[evt.target.id].id}`,
           '_blank'
         )
       })

components/app/TInputIcon.vue

@@ -8,7 +8,10 @@
       v-bind="$attrs"
       v-on="$listeners"
     />
-    <div class="absolute flex items-center ml-3 bottom-0 top-0">
+    <div
+      class="absolute flex items-center bottom-0 top-0 ml-4"
+      :class="iconWrapperClass"
+    >
       <fa slot="icon" :icon="icon" :class="iconClass" />
     </div>
   </div>
@@ -26,6 +29,10 @@ export default {
       type: String,
       default: null,
     },
+    iconWrapperClass: {
+      type: String,
+      default: null,
+    },
     iconClass: {
       type: String,
       default: null,
@@ -34,13 +41,18 @@ export default {
       type: String,
       default: null,
     },
-    focus: {
+    hasFocus: {
       type: Boolean,
       default: false,
     },
   },
   mounted() {
-    if (this.focus) this.$refs.inputIcon.$el.focus()
+    if (this.hasFocus) this.focus()
+  },
+  methods: {
+    focus() {
+      this.$refs.inputIcon.$el.focus()
+    },
   },
 }
 </script>

components/blog/BlogNextPrev.vue

@@ -12,7 +12,7 @@
       :to="next.path"
       class="group next-blog flex-1 py-8 text-right"
     >
-      <span class="group-hover:text-hover">
+      <span v-prevent-last-char-break class="group-hover:text-hover">
         {{ next.title }}
       </span>
       <fa icon="chevron-right" class="text-gray-300 ml-3 transition" />

components/global/Alert.vue

@@ -45,13 +45,12 @@ export default {
   @apply m-0 !important;
 }
 .alert a {
-  @apply text-gray-700 !important;
-}
-.dark-mode .alert a {
-  @apply text-gray-300 !important;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert strong {
-  @apply text-current;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert-content pre code {
   background-color: inherit !important;
@@ -69,13 +68,13 @@ export default {
 .alert-info .alert-content {
   @apply text-blue-700;
 }
-.dark-mode .alert-info {
+.dark .alert-info {
   @apply bg-blue-900 border-blue-700;
 }
-.dark-mode .alert-info code {
+.dark .alert-info code {
   @apply bg-blue-800;
 }
-.dark-mode .alert-info .alert-content {
+.dark .alert-info .alert-content {
   @apply text-blue-300;
 }
 /* Success */
@@ -91,13 +90,13 @@ export default {
 .alert-success .alert-content {
   @apply text-green-700;
 }
-.dark-mode .alert-success {
+.dark .alert-success {
   @apply bg-green-900 border-green-700;
 }
-.dark-mode .alert-success code {
+.dark .alert-success code {
   @apply bg-green-800;
 }
-.dark-mode .alert-success .alert-content {
+.dark .alert-success .alert-content {
   @apply text-green-300;
 }
 /* Warning */
@@ -113,13 +112,13 @@ export default {
 .alert-warning .alert-content {
   @apply text-yellow-700;
 }
-.dark-mode .alert-warning {
-  @apply bg-yellow-900 border-yellow-700;
+.dark .alert-warning {
+  @apply bg-yellow-800 border-yellow-600;
 }
-.dark-mode .alert-warning code {
+.dark .alert-warning code {
   @apply bg-yellow-800;
 }
-.dark-mode .alert-warning .alert-content {
+.dark .alert-warning .alert-content {
   @apply text-yellow-300;
 }
 /* Danger */
@@ -135,13 +134,13 @@ export default {
 .alert-danger .alert-content {
   @apply text-red-700;
 }
-.dark-mode .alert-danger {
+.dark .alert-danger {
   @apply bg-red-900 border-red-700;
 }
-.dark-mode .alert-danger code {
+.dark .alert-danger code {
   @apply bg-red-800;
 }
-.dark-mode .alert-danger .alert-content {
+.dark .alert-danger .alert-content {
   @apply text-red-300;
 }
 </style>

components/global/Box.vue

+<template>
+  <component
+    :is="to ? 'nuxt-link' : 'div'"
+    :to="to"
+    class="block rounded p-4"
+    :class="computedClass"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'Box',
+  props: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    color: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    computedClass() {
+      let classes = ''
+      if (this.color) {
+        classes += `bg-${this.color}-100 dark:bg-${this.color}-900`
+      } else {
+        classes = `border dark:border-gray-700`
+      }
+      if (this.to)
+        classes +=
+          ' transition transform hover:shadow-xl hover:-translate-y-0.5 is-box-with-link'
+      return classes
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+.is-box-with-link {
+  text-decoration: none !important;
+  color: currentColor !important;
+  font-weight: normal !important;
+}
+</style>

components/global/G1Crowdfunding.vue

@@ -40,7 +40,17 @@
     </slot>
 
     <div
-      class="flex items-center w-full lg:w-max justify-center px-2 lg:px-0 pt-2 lg:pt-0"
+      class="
+        flex
+        items-center
+        w-full
+        lg:w-max
+        justify-center
+        px-2
+        lg:px-0
+        pt-2
+        lg:pt-0
+      "
     >
       <slot
         v-if="!isKeyCopied"
@@ -140,9 +150,8 @@ export default {
   computed: {
     endpoint() {
       // Build url from props. Prevent missing protocol.
-      return (/^https:\/\//.test(this.node)
-        ? this.node
-        : `https://${this.node}`
+      return (
+        /^https:\/\//.test(this.node) ? this.node : `https://${this.node}`
       ).replace(/\/$/, '')
     },
     startDateTimestamp() {

components/global/Lexique.vue

 <template>
   <span
     class="tooltip-box relative"
-    :class="page && 'cursor-pointer'"
-    v-on="page ? { click: onClick } : {}"
+    :class="document && 'cursor-pointer'"
+    v-on="document ? { click: onClick } : {}"
   >
-    <abbr :aria-label="page ? page.title : title" :title="page ? '' : null">
+    <abbr
+      :aria-label="document ? document.title : title"
+      :title="document ? '' : null"
+    >
       <slot />
     </abbr>
 
     <client-only>
       <div
-        v-if="page"
-        class="tooltip absolute bg-gray-200 invisible opacity-0 left-1/2 px-4 py-2 rounded-xl shadow-lg text-gray-600 text-sm z-50"
+        v-if="document"
+        class="
+          tooltip
+          absolute
+          bg-blue-100
+          border-blue-200 border
+          invisible
+          opacity-0
+          left-1/2
+          px-4
+          py-3
+          rounded-xl
+          shadow-2xl
+          text-gray-600 text-sm
+          z-50
+          dark:bg-blue-900 dark:text-gray-100 dark:border-blue-800
+        "
       >
         <span class="triangle absolute"></span>
 
-        <span v-if="title" class="block mb-2 uppercase">
-          {{ title }}
+        <span class="block font-bold text-lg uppercase leading-6 pb-2">
+          {{ document.title }} :
         </span>
 
-        <span>{{ page.description }}</span>
+        <span>{{ document.description }}</span>
 
-        <span class="block font-extralight mt-2 text-xs">
+        <span
+          class="
+            block
+            font-light
+            mt-3
+            text-xs text-purple-800
+            dark:text-purple-500
+          "
+        >
           {{ $t('lexique.tooltipReadmore') }}
         </span>
       </div>
@@ -40,23 +66,24 @@ export default {
   },
   data() {
     return {
-      page: null,
+      document: null,
     }
   },
   async fetch() {
     if (this.computedTitle) {
-      try {
-        this.page = await this.$content(
-          'lexique',
-          this.computedTitle.toLowerCase()
-        )
-          .only(['title', 'description'])
-          .fetch()
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `lexique term '${this.computedTitle}' not found in /content/lexique/ from file ${this.$parent.fileUrl}`
-        )
+      const term = this.computedTitle.toLowerCase()
+      const results = await this.$content('lexique')
+        .where({
+          $or: [
+            { title: { $regex: [`^${term}$`, 'i'] } }, // case insensitive
+            { synonyms: { $contains: term } }, // search in synonyms
+          ],
+        })
+        .limit(1)
+        .fetch()
+
+      if (results.length) {
+        this.document = results[0]
       }
     }
   },
@@ -68,7 +95,7 @@ export default {
   },
   methods: {
     onClick() {
-      this.$router.push(`/lexique/${this.computedTitle.toLowerCase()}`)
+      this.$router.push(this.document.path)
     },
   },
 }
@@ -92,11 +119,26 @@ abbr {
   opacity: 1;
 }
 .triangle {
-  border-width: 0 6px 6px;
+  border-width: 0 10px 10px;
   border-color: transparent;
-  border-bottom-color: rgba(229, 231, 235, var(--tw-bg-opacity));
-  top: -6px;
+  border-bottom-color: #bfdbfe;
+  top: -10px;
   left: 50%;
   transform: translateX(-50%);
 }
+.triangle:before {
+  content: '';
+  position: absolute;
+  border-width: 0 10px 10px;
+  border-color: transparent;
+  border-bottom-color: #dbeafe;
+  top: 2px;
+  left: -10px;
+}
+.dark .triangle {
+  border-bottom-color: #1e40af;
+}
+.dark .triangle:before {
+  border-bottom-color: #1e3a8a;
+}
 </style>

components/global/List.vue

+<template>
+  <div class="prose dark:prose-dark">
+    <slot />
+
+    <slot v-if="Array.isArray(data)" name="items" :items="data">
+      <ul class="list">
+        <li v-for="(item, i) in data" :key="i">
+          <nuxt-link :to="item.path.replace(/^\/pages\//, '/')">
+            <div v-if="title">{{ item.title }}</div>
+          </nuxt-link>
+          <span v-if="description">{{ item.description }}</span>
+        </li>
+      </ul>
+    </slot>
+    <slot v-else-if="data" name="item">
+      <h2 v-if="title">{{ data.title }}</h2>
+      <p v-if="description">{{ data.description }}</p>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'List',
+  props: {
+    content: {
+      type: String,
+      default: null,
+    },
+    only: {
+      type: [String, Array],
+      default: null,
+    },
+    where: {
+      type: Object,
+      default: null,
+    },
+    sortBy: {
+      type: String,
+      default: null,
+    },
+    direction: {
+      type: String,
+      default: 'asc',
+      validator(value) {
+        return ['asc', 'desc'].includes(value)
+      },
+    },
+    skip: {
+      type: [Number, String],
+      default: null,
+    },
+    search: {
+      type: String,
+      default: null,
+    },
+    searchField: {
+      type: String,
+      default: null,
+    },
+    limit: {
+      type: [Number, String],
+      default: null,
+    },
+
+    title: {
+      type: Boolean,
+      default: true,
+    },
+    description: {
+      type: Boolean,
+      default: false,
+    },
+    readingTime: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      data: null,
+    }
+  },
+  async fetch() {
+    if (this.content) {
+      const content = this.$content(this.content)
+      if (this.only) content.only(this.only)
+      if (this.where) content.where(this.where)
+      if (this.sortBy) content.sortBy(this.sortBy, this.direction)
+      if (this.skip) content.skip(+this.skip)
+      if (this.search) {
+        this.searchField
+          ? content.search(this.searchField, this.search)
+          : content.search(this.search)
+      }
+      if (this.limit) content.limit(+this.limit)
+
+      this.data = await content.fetch()
+    }
+  },
+}
+</script>
+
+<style lang="postcss" scoped></style>

components/home/HomeCTA.vue

+<template>
+  <div class="pt-8">
+    <t-button
+      class="flex items-center rounded-2xl"
+      variant="success"
+      @click="$modal.show('videoIntro')"
+    >
+      <fa :icon="['fab', 'youtube']" class="text-4xl mr-4" />
+      <div class="text-left pr-1">
+        <div class="text-xl font-bold">Introduction</div>
+        <div class="-mt-1">3 min en vidéo</div>
+      </div>
+    </t-button>
+
+    <t-modal name="videoIntro" variant="video">
+      <div style="padding: 56.25% 0 0 0; position: relative">
+        <iframe
+          src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0&autoplay=1"
+          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+          frameborder="0"
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowfullscreen
+        ></iframe>
+      </div>
+    </t-modal>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="postcss"></style>

components/home/HomeHero.vue

 <template>
-  <div class="hero container flex">
-    <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
-      <nuxt-content :document="hero" />
+  <div class="hero container flex lg:items-center">
+    <div class="max-w-2xl 2xl:max-w-3xl w-full">
+      <nuxt-content :document="document" />
+
+      <HomeCTA />
     </div>
+
+    <SuperHero
+      class="
+        superhero
+        absolute
+        h-40
+        hidden
+        lg:h-full lg:relative lg:right-0 lg:w-full
+        md:block
+        right-6
+        w-1/3
+      "
+    />
   </div>
 </template>
 
 <script>
+import SuperHero from '~/static/img/superhero.svg?inline'
+
 export default {
+  components: {
+    SuperHero,
+  },
   props: {
-    hero: {
+    document: {
       type: Object,
       required: true,
     },
@@ -19,64 +39,127 @@ export default {
 
 <style lang="postcss" scoped>
 .hero {
-  min-height: 50vh;
-  padding-top: 15vh;
+  padding: max(8vh, 4rem) 1.5rem;
 }
 
-.hero >>> .svg-inline--fa {
-  animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
-  animation-delay: 5s;
+@keyframes floatHero {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(0px, -20px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
 }
-.hero >>> .link-contribute svg {
-  animation-delay: 5.5s;
+@keyframes floatDots {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(-30px, -20px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
 }
-@keyframes shake {
+@keyframes floatZigzag {
   0% {
-    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: rotate(0deg);
   }
-
-  1% {
-    -webkit-transform: translate(-1px, -2px) rotate(-3deg);
+  50% {
+    transform: rotate(15deg) translate(10px);
   }
-
-  2% {
-    -webkit-transform: translate(-3px, 0px) rotate(3deg);
+  100% {
+    transform: rotate(0deg);
   }
-
-  3% {
-    -webkit-transform: translate(0px, 2px) rotate(0deg);
+}
+@keyframes floatCape {
+  0% {
+    transform: skewY(0deg);
   }
-
-  4% {
-    -webkit-transform: translate(1px, -1px) rotate(3deg);
+  50% {
+    transform: skewY(2deg);
   }
-
-  5% {
-    -webkit-transform: translate(-1px, 2px) rotate(-3deg);
+  100% {
+    transform: skewY(0deg);
   }
-
-  6% {
-    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+}
+@keyframes floatBall {
+  0% {
+    transform: rotate(0deg);
   }
-
-  7% {
-    -webkit-transform: translate(2px, 1px) rotate(-3deg);
+  50% {
+    transform: rotate(5deg);
   }
-
-  8% {
-    -webkit-transform: translate(-1px, -1px) rotate(3deg);
+  100% {
+    transform: rotate(0deg);
   }
-
-  9% {
-    -webkit-transform: translate(2px, 2px) rotate(0deg);
+}
+@keyframes pulseBreak {
+  0% {
+    transform: scale(1);
   }
-
-  10% {
-    -webkit-transform: translate(1px, -2px) rotate(-3deg);
+  50% {
+    transform: scale(1.3);
   }
-
-  11% {
-    transform: translate(0, 0) rotate(0deg);
+  100% {
+    transform: scale(1);
   }
 }
+@keyframes wind {
+  0% {
+    transform: translateX(-2000px);
+  }
+  100% {
+    transform: translateX(2000px);
+  }
+}
+
+.superhero #man {
+  animation: floatHero 4s ease-in-out infinite;
+}
+.superhero #cape {
+  animation: floatCape 3s ease-in-out infinite;
+}
+.superhero #break_chain {
+  animation: pulseBreak 3s ease-in-out infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.superhero #chain_ball {
+  animation: floatBall 3s ease-in-out infinite;
+  transform-origin: top left;
+  transform-box: fill-box;
+}
+/* red particles */
+.superhero #dots path[fill='#DC2626']:nth-child(odd) {
+  animation: floatDots 4s ease-in-out infinite;
+}
+.superhero #dots path[fill='#DC2626']:nth-child(even) {
+  animation: floatDots 3s ease-in-out infinite;
+}
+/* blue particles */
+.superhero #dots path[fill='#5222D0']:nth-child(odd) {
+  animation: floatDots 5s ease-in-out infinite;
+}
+.superhero #dots path[fill='#5222D0']:nth-child(even) {
+  animation: floatDots 2s ease-in-out infinite;
+}
+/* zigzags */
+.superhero #zigzag path {
+  animation: floatZigzag 5s ease-in-out infinite;
+  transform-box: fill-box;
+}
+/* gray lines */
+.superhero #wind *:nth-child(3n + 1) {
+  animation: wind 6s linear infinite;
+}
+.superhero #wind *:nth-child(3n + 2) {
+  animation: wind 10s linear infinite;
+}
+.superhero #wind *:nth-child(3n + 3) {
+  animation: wind 12s linear infinite;
+}
 </style>