From f19db76cc3b21785619ffd24bfb34692a3aaa66a Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Thu, 24 Feb 2022 02:29:14 +0100
Subject: recursiveIterator

---
 public/css/menu.css | 339 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 339 insertions(+)
 create mode 100644 public/css/menu.css

(limited to 'public/css/menu.css')

diff --git a/public/css/menu.css b/public/css/menu.css
new file mode 100644
index 0000000..0e17e34
--- /dev/null
+++ b/public/css/menu.css
@@ -0,0 +1,339 @@
+/* public/menu.css */
+
+.police_titre
+{
+    color: #e8c5c0;
+}
+
+#contenu
+{
+    display: flex;
+    justify-content: space-between;
+}
+
+#colonne1
+{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+}
+
+#colonne2
+{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    flex-direction: column;
+}
+
+#pommes
+{
+    position: relative;
+    left: 3px;
+}
+
+#mon_blog
+{
+    margin: 0px 35px;
+}
+
+
+@media screen and (min-width: 700px)
+{
+    #titre
+    {
+        width: 630px;
+        height: 171px;
+        background-image: url("mouette.png");
+    }
+
+    #contenu
+    {
+        position: relative;
+        bottom: 15px;
+    }
+
+    #colonne1, #colonne2
+    {
+        height: 588px;
+    }
+
+    /* pour IE,
+    indique la bonne taille du bloc pour que la colonne 2 se place correctement */
+    #colonne1
+    {
+        min-width: 310px; 
+    }
+
+    #pochette
+    {
+        background-image: url("menu/pochette.png");
+        width: 308px;
+        height: 271px;
+    }
+
+    #fille_qui_tombe
+    {
+        background-image: url("menu/fille_qui_tombe.jpg");
+        width: 208px;
+        height: 163px;
+        margin: 5px 0px;
+    }
+
+    #canoe
+    {
+        background-image: url("menu/canoe.png");
+        width: 207px;
+        height: 144px;
+    }
+
+    #cavalier
+    {
+        background-image: url("menu/cavalier.jpg");
+        width: 159px;
+        height: 312px;
+        position: relative;
+        right: 97px;
+    }
+
+    #pommes
+    {
+        background-image: url("menu/pommes.jpg");
+        width: 59px;
+        height: 97px;
+        position: relative;
+        bottom: 3px;
+    }
+
+    #sirene
+    {
+        background-image: url("menu/sirene.jpg");
+        width: 320px;
+        height: 174px;
+    }
+
+    #mouette_ocean
+    {
+        background-image: url("menu/mouette_ocean.jpg");
+        width: 257px;
+        height: 171px;
+        margin: 5px 0px;
+    }
+
+    #blonde
+    {
+        background-image: url("menu/blonde.jpg");
+        width: 257px;
+        height: 233px;
+    }
+
+    #hey_ho
+    {
+        width: 69px;
+        height: 154px;
+        position: relative;
+        right: 401px;
+        top: 107px;
+    }
+}
+
+@media screen and (max-width: 699px)
+{
+    #titre
+    {
+        width: 480px;
+        height: 131px;
+        background-image: url("mouette_petit.png");
+        margin: auto;
+    }
+
+    #contenu
+    {
+        position: relative;
+        bottom: 12px;
+    }
+
+    #colonne1, #colonne2
+    {
+        height: 447px;
+    }
+
+    /* pour IE,
+    indique la bonne taille du bloc pour que la colonne 2 se place correctement */
+    #colonne1
+    {
+        min-width: 237px;
+    }
+
+    #pochette
+    {
+        background-image: url("menu/pochette_petit.png");
+        width: 234px;
+        height: 206px;
+    }
+
+    #fille_qui_tombe
+    {
+        background-image: url("menu/fille_qui_tombe_petit.jpg");
+        width: 158px;
+        height: 124px;
+        margin: 4px 0px;
+    }
+
+    #canoe
+    {
+        background-image: url("menu/canoe_petit.png");
+        width: 157px;
+        height: 109px;
+    }
+
+    #cavalier
+    {
+        background-image: url("menu/cavalier_petit.jpg");
+        width: 121px;
+        height: 237px;
+        position: relative;
+        right: 73px;
+    }
+
+    #pommes
+    {
+        background-image: url("menu/pommes_petit.jpg");
+        width: 45px;
+        height: 74px;
+        position: relative;
+        bottom: 2px;
+    }
+
+    #sirene
+    {
+        background-image: url("menu/sirene_petit.jpg");
+        width: 243px;
+        height: 132px;
+    }
+
+    #mouette_ocean
+    {
+        background-image: url("menu/mouette_ocean_petit.jpg");
+        width: 195px;
+        height: 130px;
+        margin: 4px 0px;
+    }
+
+    #blonde
+    {
+        background-image: url("menu/blonde_petit.jpg");
+        width: 195px;
+        height: 177px;
+    }
+
+    #hey_ho
+    {
+        width: 53px;
+        height: 117px;
+        position: relative;
+        right: 306px;
+        top: 82px;
+    }
+}
+
+@media screen and (max-width: 479px)
+{
+    #titre
+    {
+        width: 320px;
+        height: 88px;
+        background-image: url("mouette_mini.png");
+        margin: auto;
+    }
+
+    #contenu
+    {
+        position: relative;
+        bottom: 8px;
+    }
+
+    #colonne1, #colonne2
+    {
+        height: 298px;
+    }
+
+    /* pour IE,
+    indique la bonne taille du bloc pour que la colonne 2 se place correctement */
+    #colonne1
+    {
+        min-width: 158px;
+    }
+
+    #pochette
+    {
+        background-image: url("menu/pochette_mini.png");
+        width: 156px;
+        height: 137px;
+    }
+
+    #fille_qui_tombe
+    {
+        background-image: url("menu/fille_qui_tombe_mini.jpg");
+        width: 105px;
+        height: 82px;
+        margin: 3px 0px;
+    }
+
+    #canoe
+    {
+        background-image: url("menu/canoe_mini.png");
+        width: 105px;
+        height: 73px;
+    }
+
+    #cavalier
+    {
+        background-image: url("menu/cavalier_mini.jpg");
+        width: 80px;
+        height: 158px;
+        position: relative;
+        right: 48px;
+    }
+
+    #pommes
+    {
+        background-image: url("menu/pommes_mini.jpg");
+        width: 30px;
+        height: 49px;
+        position: relative;
+        bottom: 2px;
+        left: 2px;
+    }
+
+    #sirene
+    {
+        background-image: url("menu/sirene_mini.jpg");
+        width: 162px;
+        height: 88px;
+    }
+
+    #mouette_ocean
+    {
+        background-image: url("menu/mouette_ocean_mini.jpg");
+        width: 130px;
+        height: 86px;
+        margin: 3px 0px;
+    }
+
+    #blonde
+    {
+        background-image: url("menu/blonde_mini.jpg");
+        width: 130px;
+        height: 118px;
+    }
+
+    #hey_ho
+    {
+        width: 36px;
+        height: 77px;
+        position: relative;
+        right: 204px;
+        top: 56px;
+    }
+}
-- 
cgit v1.2.3