From a425a640b92edd908d4c2d4a6a1da5a5b4672fbd Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 14 Nov 2023 15:37:41 +0100 Subject: [PATCH] tighter menu spacing on mobile to aligne logo and menu button --- demo-components.php | 1208 +++++++++++----------- resources/css/layout/menu-renovateur.css | 15 +- 2 files changed, 616 insertions(+), 607 deletions(-) diff --git a/demo-components.php b/demo-components.php index 2e678ec..9f0ea15 100644 --- a/demo-components.php +++ b/demo-components.php @@ -1,681 +1,687 @@ -
-

Content system & Design system | Documentation

-

Bienvenue dans la documentation Homegrade

- -

Vous trouverez ici une Liste de composants du design system Homegrade

- - -
+
- -
-
-

Block components

-

Blocks de contenu

-

Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu

-
+ -
    -
  1. Mise en avant
  2. -
  3. Image Bannière
  4. -
  5. Content page header
  6. -
  7. À savoir / Astuces
  8. -
  9. Liste de membres
  10. -
  11. Timeline
  12. -
- -
-
-
- - - -
-

Mise en avant

-

highlight

-

Bloc pour mettre en avant des informations importantes

-
-

Options & Variantes

-
    -
  • -

    Variantes

    -

    - Choix entre classic & warning -

  • -
  • -

    Logo latéral

    -

    - Permet l'ajout d'un logo institutionnel sur la partie droite du bloc

    -
  • -
-
+
+

Content system & Design system | Documentation

+

Bienvenue dans la documentation Homegrade

+ +

Vous trouverez ici une Liste de composants du design system Homegrade

+ + -
-

Version simple

-
-
-
-

Informations complémentaires et inscriptions

+
+ + + +
+
+

Block components

+

Blocks de contenu

+

Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu

+
+ +
    +
  1. Mise en avant
  2. +
  3. Image Bannière
  4. +
  5. Content page header
  6. +
  7. À savoir / Astuces
  8. +
  9. Liste de membres
  10. +
  11. Timeline
  12. +
+ +
+
+
+ + +
-
-
-

Pour toute question ou pour s’inscrire à l’une de nos formations, contactez-nous via e-mail inscriptions@homegrade.brussels ou par téléphone.

- - - - +

Mise en avant

+

highlight

+

Bloc pour mettre en avant des informations importantes

+
+

Options & Variantes

+
    +
  • +

    Variantes

    +

    + Choix entre classic & warning +

  • +
  • +

    Logo latéral

    +

    + Permet l'ajout d'un logo institutionnel sur la partie droite du bloc

    +
  • +
+
+
+
+

Version simple

+
+
+
+

Informations complémentaires et inscriptions

-
-
-
-
-

Version avec logo

+
+
+

Pour toute question ou pour s’inscrire à l’une de nos formations, contactez-nous via e-mail inscriptions@homegrade.brussels ou par téléphone.

-
-
-
-

RENOLUTION

-
-
-
-

Point de contact privilégié pour tout rénovateur particulier bruxellois, Homegrade se place comme un acteur-clé de RENOLUTION, la Stratégie de rénovation du bâti de la Région de Bruxelles-Capitale.

+ - -
-
-
-
-

Version "warning"

-
-
-
-

Vérifiez les conditions d’accès

-
-
-
-

Pour en savoir plus sur les conditions d’accès aux formations, la procédure d’obtention de l’agrément et les obligations du certificateur, veuillez cliquer sur le bouton ci-dessous.

- -
-
-
-
+ -
- -
-
-
- - - - - -
-

Image Bannière

-

picture-banner

-

Pour insérer une image bannière fixe ou intégrale

-
-

Options & Variantes

-
    -
  • -

    Hauter

    -

    - Si fixe, la bannière est verticalement restreinte et il est alors possible de régler sa position verticale

    -
  • -
-
-
-
-
- "> -
-
-
-
- "> -
-
- -
- - -
-
-
- - - - - - -
-

- Content page header -

-

content-page-header

- -

Un header qui s'insère en haut de page

-
-

Options & Variantes

-
    -
  • -

    Call to action

    -

    - Ajout d'un lien juste après le contenu. Dans cet exemple "Voir l’équipe de direction de Homegrade"

    - -
  • -
-
-
-
-
-
-

Qui sommes-nous ?

-

Plus de 40 conseillers en rénovation

-

Homegrade, ce sont plus de 40 conseillers en rénovation en majorité architectes, mais également ingénieurs, historiens de l’art… en formation continue ! Ces experts de terrain vous fournissent des conseils avisés et professionnels.

Découvrez notre équipe de direction, composée de professionnels chevronnés qui guident notre asbl vers l’excellence.

- Voir l’équipe de direction de Homegrade -
- - - -
-
- -
- - -
-
-
- - - - - -
-

À savoir / Astuces

-

tips-to-know

-

Pour insérer une série de points d'informations

- -
-
-
-
-

accessibilité À notre point info

-

Profitez des transports en commun pour venir dans nos locaux

-
- - - -
-
-
-
-

Métro

-

Arrêts aux stations métro Botanique et Madou.

-
-
- - - -
-
-
-

Trains

-

Gare de Bruxelles-Central, arrêt de bus Quetelet (65 ou 66).

-
-
- - - -
-
-
-

Bus

-
    -
  • Arrêt de bus Quetelet (61, 65 et 66) ;
  • - - - -
  • Arrêt de bus Gillon (N04 et T92) – environ 6 minutes de marche ;
  • - - - -
  • Arrêt de bus Bossuet (59 ou 61) – environ 5 minutes de marche ;
  • -
-
-
- - - -
-
-
-

Moyens de locomotions individuels

-

Parking privé disponible pour vélos et voitures* gratuitement.

- - - -

*Depuis le 1 er janvier 2018, la Région Bruxelles-Capitale est devenue une zone de basses émissions (LEZ). Vérifiez si votre véhicule peut circuler au sein de la zone via lez.brussels .

-
-
-
-
-
- - -
- - -
-
-
- - - - - - - - -
-

Liste de membres

-

staff-list

-

Pour créer une liste de membres d'équipe ou de comité

- -
-
-
-

comité de direction

-

Un comité de direction composé de 6 personnes

-
    -
  • -
    -
    -

    Didier Van Severen

    -

    Directeur général

    -
    -
  • - - - -
  • -
    -
    -

    Patrick Herregods

    -

    Manager opérationnel

    -
    -
  • - - - -
  • -
    -
    -

    Eglantine Daumerie

    -

    Adjointe au Manager opérationnel

    -
    -
  • - - - -
  • -
    -
    -

    Caroline Vanhauw

    -

    Manager Projets

    -
    -
  • - - - -
  • -
    -
    -

    Hélène Rombaux

    -

    Manager RH et Administratif

    -
    -
  • - - - -
  • -
    -
    -

    Marilène De Mol

    -

    Coordinatrice Réseau Habitat

    -
    -
  • -
-
-
- - -
- - - -
-
-
- - 130all - - - - - -
-

Timeline

-

timeline

-

Pour la création de timeline

-
-

Options & Variantes

-
    -
  • -

    Image par ligne / Image latérale

    -

    - Si image latérale, il n'y a pas une image par ligne de timline, mais seulement une image latérale à gauche servant d'illustrations globale

    - -
  • -
  • -

    Proportions d'images

    -

    - Si image par ligne, il est possible de choisir de choisir entre trois proportions carrés, moyennes, hautes

    - -
  • -
-
-
-
-

Version avec illustration latérale

- -
-
-
-
-
-
-

Labellisations

-

-

Homegrade est certifié par le Label Entreprise Écodynamique, une reconnaissance pour son engagement à réduire son impact environnemental. De plus, l’entreprise détient le Label Numérique Responsable, témoignant de sa démarche crédible dans l’amélioration continue de sa responsabilité numérique.

+
+
+
+
+

Version avec logo

+ +
+
+
+

RENOLUTION

+
+
+
+

Point de contact privilégié pour tout rénovateur particulier bruxellois, Homegrade se place comme un acteur-clé de RENOLUTION, la Stratégie de rénovation du bâti de la Région de Bruxelles-Capitale.

-
-
-
-
-

Inclusivité

-

-

Participation à différents programmes initiés par Equal brussels, notamment aux actions en matière de Gendermainstreaming et de handistreaming.

-
+ +
+ +
+
+
+
+

Version "warning"

+ +
+
+
+

Vérifiez les conditions d’accès

+
+
+
+

Pour en savoir plus sur les conditions d’accès aux formations, la procédure d’obtention de l’agrément et les obligations du certificateur, veuillez cliquer sur le bouton ci-dessous.

+
+
+
-
-
-
-
-

Service d’impression

-

-

Homegrade privilégie, dans la mesure du possible, l’impression de ses différents supports sur un papier FSC, écologique et recyclé et avec une encre végétale.

-
-
-
- - - -
-
-
-
-

Service de livraison

-

-

Homegrade passe par une entreprise bruxelloise pour livrer ses publications… à vélo cargo !

-
-
-
- - - -
-
-
-
-

Accessibilité numérique

-

-

Homegrade offre un service d’accompagnement aux Bruxellois en situation de précarité numérique grâce à un service d’attelle numérique.

- - - -

Déclaration d’accessibilité

-
-
-
+
+ +
+
+
+ + + + +
-
-
-
-

Version avec images par ligne

+

Image Bannière

+

picture-banner

+

Pour insérer une image bannière fixe ou intégrale

+
+

Options & Variantes

+
    +
  • +

    Hauter

    +

    + Si fixe, la bannière est verticalement restreinte et il est alors possible de régler sa position verticale

    -
    -
    -
    -
    Halles de Saint-Géry à Bruxelles -
    -

    Halles de Saint-Géry - © EmDee

    -
    -
    -
    -
    -
    -

    1988 – 2017

    -

    Le Centre Urbain

    -

    Le Centre Urbain a été créé en 1988, à l’initiative d’Inter-Environnement Bruxelles (IEB) et du Brusselse Raad voor het Leefmilieu (BRAL), dans le but de promouvoir l’information des habitants de la Région de Bruxelles-Capitale en matière d’environnement et de défense d’un cadre de vie de qualité, de logement et de sa réhabilitation, de rénovation urbaine, d’urbanisme et d’aménagement du territoire, d’utilisation rationnelle de l’énergie, etc. : ce que l’on appelle communément aujourd’hui le développement durable. À l’origine, les principaux services assurés étaient les suivants :

    +
  • +
+
+
+
+
+ "> +
+
+
+
+ "> +
+
+ + + + +
+
+
+ + + + + + +
+

+ Content page header +

+

content-page-header

+ +

Un header qui s'insère en haut de page

+
+

Options & Variantes

+
    +
  • +

    Call to action

    +

    + Ajout d'un lien juste après le contenu. Dans cet exemple "Voir l’équipe de direction de Homegrade"

    + +
  • +
+
+
+
+
+
+

Qui sommes-nous ?

+

Plus de 40 conseillers en rénovation

+

Homegrade, ce sont plus de 40 conseillers en rénovation en majorité architectes, mais également ingénieurs, historiens de l’art… en formation continue ! Ces experts de terrain vous fournissent des conseils avisés et professionnels.

Découvrez notre équipe de direction, composée de professionnels chevronnés qui guident notre asbl vers l’excellence.

+ Voir l’équipe de direction de Homegrade +
+ + + +
+
+ +
+ + +
+
+
+ + + + + +
+

À savoir / Astuces

+

tips-to-know

+

Pour insérer une série de points d'informations

+ +
+
+
+
+

accessibilité À notre point info

+

Profitez des transports en commun pour venir dans nos locaux

+
+
+
+
+
+

Métro

+

Arrêts aux stations métro Botanique et Madou.

+
+
+ + + +
+
+
+

Trains

+

Gare de Bruxelles-Central, arrêt de bus Quetelet (65 ou 66).

+
+
+ + + +
+
+
+

Bus

    -
  • un conseil en rénovation ;
  • +
  • Arrêt de bus Quetelet (61, 65 et 66) ;
  • -
  • un conseil relatif au bail et à la location des logements ;
  • +
  • Arrêt de bus Gillon (N04 et T92) – environ 6 minutes de marche ;
  • -
  • un conseil en environnement ;
  • - - - -
  • l’inventaire des locaux industriels vacants (repris par la SDRB).
  • -
- - - -

L’association a progressivement développé une expertise en matière d’habitat et a développé divers outils au service de la population. C’est ainsi que le Centre Urbain a créé, corollaires au conseil en rénovation :

- - - -
    -
  • le conseil en patrimoine (créé en 1992 et développé à partir de 1997) ;
  • - - - -
  • l’Agence Bruxelloise de l’Énergie (en 1996). L’ABEA est un service du Centre Urbain, développé dans le cadre juridique de l’asbl ;
  • - - - -
  • le service d’expertise en isolation acoustique (en 2004) ;
  • - - - -
  • le centre d’information en éco-construction (en 2008) ;
  • - - - -
  • le facilitateur urbanisme (en 2011).
  • -
- - - -

Il a également :

- - - -
    -
  • assuré la coordination du Réseau Habitat et le conseil en rénovation local auprès des associations du Réseau ;
  • - - - -
  • mené des missions d’incitation à la rénovation et de préservation du patrimoine dans le cadre des contrats de quartiers de la Ville de Bruxelles.
  • +
  • Arrêt de bus Bossuet (59 ou 61) – environ 5 minutes de marche ;
-
-
-
MAISONENERGIEHUIS
-
-
-
-

2013 – 2017

-

La Maison de l’Énergie

-

Les Maisons de l’Énergie ont été créées à partir de 2013. Elles offraient un service intégré, concret, de proximité et gratuit. Six structures locales accueillaient le grand public, locataires comme propriétaires. Des permanences étaient organisées pour guider les Bruxellois, en proposant des conseils personnalisés, des visites à domicile et un accompagnement durant les chantiers. De petits travaux (pose de vannes thermostatiques, isolation de tuyaux, etc.) pouvaient également être réalisés, et ce gratuitement. Les Maisons de l’Énergie informaient également le public des solutions possibles de financement.

+
+
+
+

Moyens de locomotions individuels

+

Parking privé disponible pour vélos et voitures* gratuitement.

-

En septembre 2015, la fusion des six Maisons de l’Énergie locales a été mise en œuvre, pour arriver à la création d’une nouvelle association, la Maison Bruxelloise de l’Énergie et de l’Environnement (MBEE). Elle s’adressait à tout public et pouvait accomplir tous les actes se rapportant directement ou indirectement à l’amélioration du cadre de vie dans les logements bruxellois et à la réduction de leur impact écologique au sens large. Un des premiers principes d’intervention de la Maison de l’Energie était de favoriser le contact direct avec les citoyens afin de stimuler le passage à l’acte en matière d’économie d’énergie dans les logements.

+

*Depuis le 1 er janvier 2018, la Région Bruxelles-Capitale est devenue une zone de basses émissions (LEZ). Vérifiez si votre véhicule peut circuler au sein de la zone via lez.brussels .

+
+
+ + +
+ + +
+
+
+ + + + + + + +
- -
+

Liste de membres

+

staff-list

+

Pour créer une liste de membres d'équipe ou de comité

- -
+ +
+
+

comité de direction

+

Un comité de direction composé de 6 personnes

+
    +
  • +
    +
    +

    Didier Van Severen

    +

    Directeur général

    +
    +
  • -
+
  • +
    +
    +

    Patrick Herregods

    +

    Manager opérationnel

    +
    +
  • - -
    -
    -

    CSS components

    -

    Composants CSS

    -

    Ces blocs existent dans le design système, mais sont utilisés de manière automatique dans les pages

    -
    +
  • +
    +
    +

    Eglantine Daumerie

    +

    Adjointe au Manager opérationnel

    +
    +
  • - -
    +
    + + + + + + +
    +
    +
    + + 130all + + + + + +
    +

    Timeline

    +

    timeline

    +

    Pour la création de timeline

    +
    +

    Options & Variantes

    +
      +
    • +

      Image par ligne / Image latérale

      +

      + Si image latérale, il n'y a pas une image par ligne de timline, mais seulement une image latérale à gauche servant d'illustrations globale

      + +
    • +
    • +

      Proportions d'images

      +

      + Si image par ligne, il est possible de choisir de choisir entre trois proportions carrés, moyennes, hautes

      + +
    • +
    +
    +
    +
    +

    Version avec illustration latérale

    + +
    +
    +
    +
    +
    +
    +

    Labellisations

    +

    +

    Homegrade est certifié par le Label Entreprise Écodynamique, une reconnaissance pour son engagement à réduire son impact environnemental. De plus, l’entreprise détient le Label Numérique Responsable, témoignant de sa démarche crédible dans l’amélioration continue de sa responsabilité numérique.

    +
    +
    +
    + + + +
    +
    +
    +
    +

    Inclusivité

    +

    +

    Participation à différents programmes initiés par Equal brussels, notamment aux actions en matière de Gendermainstreaming et de handistreaming.

    +
    +
    +
    + + + +
    +
    +
    +
    +

    Service d’impression

    +

    +

    Homegrade privilégie, dans la mesure du possible, l’impression de ses différents supports sur un papier FSC, écologique et recyclé et avec une encre végétale.

    +
    +
    +
    + + + +
    +
    +
    +
    +

    Service de livraison

    +

    +

    Homegrade passe par une entreprise bruxelloise pour livrer ses publications… à vélo cargo !

    +
    +
    +
    + + + +
    +
    +
    +
    +

    Accessibilité numérique

    +

    +

    Homegrade offre un service d’accompagnement aux Bruxellois en situation de précarité numérique grâce à un service d’attelle numérique.

    + + + +

    Déclaration d’accessibilité

    +
    +
    +
    +
    +
    +
    +
    +

    Version avec images par ligne

    + +
    +
    +
    +
    Halles de Saint-Géry à Bruxelles +
    +

    Halles de Saint-Géry + © EmDee

    +
    +
    +
    +
    +
    +

    1988 – 2017

    +

    Le Centre Urbain

    +

    Le Centre Urbain a été créé en 1988, à l’initiative d’Inter-Environnement Bruxelles (IEB) et du Brusselse Raad voor het Leefmilieu (BRAL), dans le but de promouvoir l’information des habitants de la Région de Bruxelles-Capitale en matière d’environnement et de défense d’un cadre de vie de qualité, de logement et de sa réhabilitation, de rénovation urbaine, d’urbanisme et d’aménagement du territoire, d’utilisation rationnelle de l’énergie, etc. : ce que l’on appelle communément aujourd’hui le développement durable. À l’origine, les principaux services assurés étaient les suivants :

    + + + +
      +
    • un conseil en rénovation ;
    • + + + +
    • un conseil relatif au bail et à la location des logements ;
    • + + + +
    • un conseil en environnement ;
    • + + + +
    • l’inventaire des locaux industriels vacants (repris par la SDRB).
    • +
    + + + +

    L’association a progressivement développé une expertise en matière d’habitat et a développé divers outils au service de la population. C’est ainsi que le Centre Urbain a créé, corollaires au conseil en rénovation :

    + + + +
      +
    • le conseil en patrimoine (créé en 1992 et développé à partir de 1997) ;
    • + + + +
    • l’Agence Bruxelloise de l’Énergie (en 1996). L’ABEA est un service du Centre Urbain, développé dans le cadre juridique de l’asbl ;
    • + + + +
    • le service d’expertise en isolation acoustique (en 2004) ;
    • + + + +
    • le centre d’information en éco-construction (en 2008) ;
    • + + + +
    • le facilitateur urbanisme (en 2011).
    • +
    + + + +

    Il a également :

    + + + +
      +
    • assuré la coordination du Réseau Habitat et le conseil en rénovation local auprès des associations du Réseau ;
    • + + + +
    • mené des missions d’incitation à la rénovation et de préservation du patrimoine dans le cadre des contrats de quartiers de la Ville de Bruxelles.
    • +
    +
    +
    +
    + + + +
    +
    MAISONENERGIEHUIS
    +
    +
    +
    +

    2013 – 2017

    +

    La Maison de l’Énergie

    +

    Les Maisons de l’Énergie ont été créées à partir de 2013. Elles offraient un service intégré, concret, de proximité et gratuit. Six structures locales accueillaient le grand public, locataires comme propriétaires. Des permanences étaient organisées pour guider les Bruxellois, en proposant des conseils personnalisés, des visites à domicile et un accompagnement durant les chantiers. De petits travaux (pose de vannes thermostatiques, isolation de tuyaux, etc.) pouvaient également être réalisés, et ce gratuitement. Les Maisons de l’Énergie informaient également le public des solutions possibles de financement.

    + + + +

    En septembre 2015, la fusion des six Maisons de l’Énergie locales a été mise en œuvre, pour arriver à la création d’une nouvelle association, la Maison Bruxelloise de l’Énergie et de l’Environnement (MBEE). Elle s’adressait à tout public et pouvait accomplir tous les actes se rapportant directement ou indirectement à l’amélioration du cadre de vie dans les logements bruxellois et à la réduction de leur impact écologique au sens large. Un des premiers principes d’intervention de la Maison de l’Energie était de favoriser le contact direct avec les citoyens afin de stimuler le passage à l’acte en matière d’économie d’énergie dans les logements.

    +
    +
    +
    +
    +
    +
    + + +
    + + + + + + + +
    +
    +

    CSS components

    +

    Composants CSS

    +

    Ces blocs existent dans le design système, mais sont utilisés de manière automatique dans les pages

    - - -
    -
    -

    - Heading Box -

    -

    Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page

    -
    - "Heading Box", - "description" => "Bonjour ! je suis une belle boite de titrage", - "pageIcon" => array( - "url" => get_template_directory_uri() . "/resources/img/pictogrammes/pictogramme-formulaire.svg" - ) - )); - ?> + +
    +
    +

    Boutons

    +

    différent boutons

    +
    -
    +
    + Bouton Primaire + Bouton Secondaire + Bouton Outline + Bouton White Shadowed - -
    -
    -

    News Heading Box

    -

    Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page

    -
    - array(get_term(88, "news_type")), - "title" => "Boite de titrage News", - "thumbnail" => get_the_post_thumbnail(2271, "full", array('class' => 'news-heading-box__thumbnail')), - "published" => get_the_date() - )); - ?> +
    +
    - -
    -
    -

    Chapter Header

    -

    Bloc Supérieur de titrage pour les fiches conseils. Les couleurs et les illustrations sont attribués automatiquement en fonction de la thématique courante. Le bouton de téléchargement de brochure est affiché automatiquement lorsque la brochure est disponible

    -
    + +
    +
    +

    + Heading Box +

    +

    Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page

    +
    + "Heading Box", + "description" => "Bonjour ! je suis une belle boite de titrage", + "pageIcon" => array( + "url" => get_template_directory_uri() . "/resources/img/pictogrammes/pictogramme-formulaire.svg" + ) + )); + ?> + +
    + + +
    +
    +

    News Heading Box

    +

    Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page

    +
    + array(get_term(88, "news_type")), + "title" => "Boite de titrage News", + "thumbnail" => get_the_post_thumbnail(2271, "full", array('class' => 'news-heading-box__thumbnail')), + "published" => get_the_date() + )); + ?> + +
    +
    +
    +

    Chapter Header

    +

    Bloc Supérieur de titrage pour les fiches conseils. Les couleurs et les illustrations sont attribués automatiquement en fonction de la thématique courante. Le bouton de téléchargement de brochure est affiché automatiquement lorsque la brochure est disponible

    +
    - "test", - 'ID' => 1243, - )); ?> -
    + "test", + 'ID' => 1243, + )); ?> +
    -
    + +