@import "bibli/fontello/css/fontello.css"; // Icones Fontelo @import "bibli/ubuntu/ubuntu.min.css"; // Polices Ubuntu @import "bibli/animate.min.css"; // Animations CSS @import "bibli/fork-awesome/css/fork-awesome.min.css"; // Animations CSS @fond: #2D2F34; @fond-footer: darken(@fond, 3%); @fond-option-hover: lighten(@fond, 10%); @texte-secondaire: #9DA3B0; @texte-principal: white; @couleur-lien: white; @couleur-principale: red; .texte-secondaire { color: @texte-secondaire; } ::selection { color: @fond; background-color: @texte-principal; } .boutton { border: 2px solid grey; padding: 10px; margin: 5px; display: inline-block; border-radius: 10px; color: @texte-principal; text-decoration: none; &:hover { color: @couleur-principale; border: 2px solid @couleur-principale; } } html { font-size: 20px; } @media all and (max-width: 640px) { html { font-size: 13px; } } a { text-decoration: underline; color: @couleur-lien; transition: all 0.1s linear; &:hover { text-decoration: none; color: @couleur-principale; } } .pub-carree-bloc { display: flex; text-align: center; justify-content: center; } .pub-carree { display: flex; border: white 3px solid; text-align: center; justify-content: center; max-width: 300px; line-height : 0pt; border-radius: 10px; margin: 20px; padding: 2px; } .pub-horizontale-bloc { display: flex; text-align: center; justify-content: center; } .pub-horizontale { border: #808080 2px solid; border-radius: 10px; margin: 30px; padding: 2px; width: 729px; min-height: 90px; /* Affiche "Vous avez bloqué cette publicité" quand on a un bloqueur de pub ou quand on clic sur la croix */ background-image: url("img/non-pub-horizontale.png"); } .optionhaute { border-top: none; } .logo { margin-bottom: 10px; } .img404 { text-align: center; padding-top: 10px; padding-bottom: 30px; } body, code { font-family: "Ubuntu"; padding: 0px; margin: 0px; background-color: @fond; color: @texte-principal; font-size: 25px; line-height: 35px; } address { font-style: normal; } .grille-services { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px; padding-top: 30px; @media (max-width: 1500px) { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 1000px) { grid-template-columns: 1fr 1fr; } @media (max-width: 600px) { grid-template-columns: 1fr; } } .service { padding: 20px; border: 2px #2D2F34 solid; border-radius: 16px; transition: border 0.2s linear; color: white; text-decoration: none; &:hover { border: 2px white solid; } &:link { color: white; } } .themeService { text-align: center; font-size: 0.8em; } .titreService { font-size: 1.3em; text-align: center; } .urlService { margin-top: -6px; font-size: 0.8em; color: grey; text-align: center; } .logoService { text-align: center; } .elLogoServ { max-width: 150px; max-height: 100px; color: white; } .descService { padding-top: 5px; padding-bottom: 10px; text-align: left; } main { margin: 0px; margin-top: 20px; margin-left: 30px; margin-bottom: 50px; margin-right: 50px; } .centre { text-align: center; justify-content: center; } // FOOTER .textefooter { margin: 10px; line-height: 1.5em; width: 60%; } .logofooter { padding-left: 6%; margin-top: 20px; } .ant { } .interlude { display: flex; justify-content: center; } .traitinterlude { border-top: 2px gray dashed; width: 800px; } .basfooter { display: flex; justify-content: space-around; margin-top: 30px; margin-bottom: 20px; } .corps { text-align: center; } footer { text-align: center; background-color: @fond-footer; display: flex; flex-direction: column; } .logogris { } .ant { background-color: @fond-footer; background-image: url(img/antpetitgris.png); width: 264px; height: 80px; display: inline-block; text-decoration: none; } .ant:hover { background-image: url(img/antpetit.png); } .liensfooter { display: flex; flex-direction: row; padding: 20px; } .lienfooter { margin: 10px; } @media (max-width: 500px) { .textefooter { padding-left: 10%; padding-right: 10%; } } /* ----------------------- HEADER ------------------------ */ #header { margin: 0px; width: 50%; border: 3px white solid; border-top: none; border-radius: 0px 0px 12px 12px; text-align: center; font-size: 2em; display: flex; justify-content: center; padding: 30px; } #pres { text-align: center; } header { display: flex; justify-content: center; } #header:active { box-shadow: 2px 2px 3px white inset; } #header:hover { background-color: @fond-option-hover; transition: all 0.2s ease-in-out; color: @couleur-lien !important; } // ----- TITRES ----- h1, h2, h3, h4, h5, h6 { font-weight: 500; } h1 { font-size: 250%; text-align: center; } h2 { font-size: 200%; } h3 { font-size: 160%; } h4 { font-size: 140%; } h5 { font-size: 125%; } h6 { font-size: 110%; } #LRI { color: pink !important; aime: "les pizza ananas-champignons"; width: 200px; position: absolute; top: 10px; left: 10px; @media (max-width: 1000px) { width: 8px; position: absolute; top: 2px; left: 2px; } } .in92pack { color: @fond !important; text-decoration: none !important; } .li192pack { color: @fond !important; text-decoration: none !important; } .li192pack:hover { color: #de00ff; text-decoration: none; transition: color 10s ease-in-out; } .gomeza { display: none; // Sera changé le moment voulu en JS position: fixed; bottom: 0px; right: 30px; z-index: 100; } .gomez-items-wrap { display: flex; flex: 70; width: 100%; justify-content: space-around; } .gomez-item-wrap { width: 142px; height: 192px; display: flex; align-items: center; justify-content: center; } .gomez { width: 10px; height: 10px; display: block; transform: translate(-500%, -500%); /* OMG, it's magic */ background: transparent; } .gomez.yeah { box-shadow: /* Conjuntos de sombras, da esquerda para direita, de cima para baixo (exceção do chapéu) */ /* linha 1 */ 10px 0 0 #a3a085, 19px 0 0 #e1ced2, 29px 0 0 #fff, 39px 0 0 #fff, 49px 0 0 #fff, 59px 0 0 #fff, 69px 0 0 #fff, 79px 0 0 #fff, 89px 0 0 #fff, 99px 0 0 #fff, 106px 0 0 #fff, /* linha 2 */ 0 10px 0 #a3a085, 10px 10px 0 #e1ced2, 19px 10px 0 #e1ced2, 29px 10px 0 #fff, 39px 10px 0 #fff, 49px 10px 0 #fff, 59px 10px 0 #fff, 69px 10px 0 #fff, 79px 10px 0 #fff, 89px 10px 0 #fff, 99px 10px 0 #fff, 109px 10px 0 #fff, 116px 10px 0 #fff, /* linha 3 */ 0 20px 0 #a3a085, 10px 20px 0 #e1ced2, 19px 20px 0 #fff, 29px 20px 0 #000, /* olho */ 39px 20px 0 #fff, 49px 20px 0 #fff, 59px 20px 0 #fff, 69px 20px 0 #fff, 79px 20px 0 #fff, 89px 20px 0 #fff, 96px 20px 0 #fff, 106px 20px 0 #000, /* olho */ 116px 20px 0 #fff, /* linha 4 */ 0 30px 0 #a3a085, 10px 30px 0 #e1ced2, 19px 30px 0 #fff, 29px 30px 0 #fff, 39px 30px 0 #fff, 49px 30px 0 #fff, 59px 30px 0 #000, 69px 30px 0 #000, 79px 30px 0 #000, 87px 30px 0 #000, 97px 30px 0 #fff, 107px 30px 0 #fff, 116px 30px 0 #fff, /* linha 5 */ 0 40px 0 #a3a085, 10px 40px 0 #e1ced2, 19px 40px 0 #fff, 29px 40px 0 #fff, 39px 40px 0 #fff, 49px 40px 0 #fff, 59px 40px 0 #c9326e, 68px 40px 0 #c9326e, 78px 40px 0 #000, 87px 40px 0 #000, 97px 40px 0 #fff, 107px 40px 0 #fff, 116px 40px 0 #fff, /* linha 6 */ 0 50px 0 #a3a085, 10px 50px 0 #e1ced2, 19px 50px 0 #fff, 29px 50px 0 #fff, 39px 50px 0 #fff, 49px 50px 0 #fff, 59px 50px 0 #fff, 68px 50px 0 #c9326e, 78px 50px 0 #000, 87px 50px 0 #fff, 97px 50px 0 #fff, 107px 50px 0 #fff, 116px 50px 0 #fff, /* linha 7 abaixo da boca */ 29px 60px 0 #e1ced2, 20px 60px 0 #a3a085, 29px 60px 0 #e1ced2, 39px 60px 0 #fff, 49px 60px 0 #fff, 59px 60px 0 #fff, 69px 60px 0 #fff, 79px 60px 0 #fff, 87px 60px 0 #fff, 97px 60px 0 #fff, 107px 60px 0 #fff, /* linha 8 pescoço */ 39px 70px 0 #a3a085, 49px 70px 0 #a3a085, 59px 70px 0 #e1ced2, 68px 70px 0 #fff, /* linha 9 braços */ 10px 80px 0 #a3a085, 19px 80px 0 #fff, 29px 80px 0 #fff, 39px 80px 0 #e1ced2, 49px 80px 0 #fff, 59px 80px 0 #fff, 68px 80px 0 #fff, 78px 80px 0 #fff, 88px 80px 0 #a3a085, 97px 80px 0 #a3a085, /* linha 10 */ 29px 90px 0 #fff, 20px 90px 0 #a3a085, 29px 90px 0 #fff, 39px 90px 0 #fff, 49px 90px 0 #fff, 59px 90px 0 #fff, 69px 90px 0 #fff, 78px 90px 0 #fff, 88px 90px 0 #a3a085, /* linha 11 */ 29px 100px 0 #a3a085, 39px 100px 0 #fff, 49px 100px 0 #fff, 59px 100px 0 #fff, 69px 100px 0 #fff, 78px 100px 0 #fff, /* linha 12 */ 29px 110px 0 #a3a085, 39px 110px 0 #e1ced2, 49px 110px 0 #fff, 59px 110px 0 #fff, 69px 110px 0 #fff, 78px 110px 0 #fff, /* linha 13 */ 29px 120px 0 #a3a085, 39px 120px 0 #e1ced2, 49px 120px 0 #fff, 59px 120px 0 #fff, 69px 120px 0 #fff, 78px 120px 0 #fff, /* linha 14 */ 29px 130px 0 #a3a085, 39px 130px 0 #e1ced2, 49px 130px 0 #a3a085, 59px 130px 0 #a3a085, 69px 130px 0 #e1ced2, 78px 130px 0 #a3a085, /* linha 15 pés */ 19px 140px 0 #a3a085, 29px 140px 0 #e1ced2, 69px 140px 0 #a3a085, /* chapéu linha 1 */ 30px -40px 0 #e89a2e, 40px -40px 0 #c0060b, 50px -40px 0 #c0060b, /* chapéu linha 2 */ 20px -30px 0 #e89a2e, 30px -30px 0 #91000f, 40px -30px 0 #c0060b, 50px -30px 0 #c0060b, /* chapéu linha 3 */ 30px -20px 0 #91000f, 40px -20px 0 #c0060b, 50px -20px 0 #c0060b; } .gomez.umm { box-shadow: /* Conjuntos de sombras, da esquerda para direita, de cima para baixo (exceção do chapéu) */ /* linha 1 */ 10px 0 0 #a3a085, 19px 0 0 #e1ced2, 29px 0 0 #fff, 39px 0 0 #fff, 49px 0 0 #fff, 59px 0 0 #fff, 69px 0 0 #fff, 79px 0 0 #fff, 89px 0 0 #fff, 99px 0 0 #fff, 106px 0 0 #fff, /* linha 2 */ 0 10px 0 #a3a085, 10px 10px 0 #e1ced2, 19px 10px 0 #fff, 29px 10px 0 #fff, 39px 10px 0 #fff, 49px 10px 0 #fff, 59px 10px 0 #fff, 69px 10px 0 #fff, 79px 10px 0 #fff, 89px 10px 0 #fff, 99px 10px 0 #fff, 109px 10px 0 #fff, 116px 10px 0 #fff, /* linha 3 */ 0 20px 0 #a3a085, 10px 20px 0 #e1ced2, 19px 20px 0 #fff, 29px 20px 0 #fff, 39px 20px 0 #fff, 49px 20px 0 #fff, 59px 20px 0 #fff, 69px 20px 0 #fff, 79px 20px 0 #fff, 89px 20px 0 #fff, 96px 20px 0 #fff, 106px 20px 0 #fff, /* olho */ 116px 20px 0 #fff, /* linha 4 */ 0 30px 0 #a3a085, 10px 30px 0 #e1ced2, 19px 30px 0 #fff, 29px 30px 0 #000, /* olho */ 39px 30px 0 #fff, 49px 30px 0 #fff, 59px 30px 0 #fff, 69px 30px 0 #fff, 79px 30px 0 #fff, 87px 30px 0 #fff, 97px 30px 0 #fff, 107px 30px 0 #000, /* olho */ 116px 30px 0 #fff, /* linha 5 */ 0 40px 0 #a3a085, 10px 40px 0 #e1ced2, 19px 40px 0 #fff, 29px 40px 0 #fff, 39px 40px 0 #fff, 49px 40px 0 #fff, 59px 40px 0 #fff, 68px 40px 0 #fff, 78px 40px 0 #fff, 87px 40px 0 #fff, 97px 40px 0 #fff, 107px 40px 0 #fff, 116px 40px 0 #fff, /* linha 6 */ 0 50px 0 #a3a085, 10px 50px 0 #e1ced2, 19px 50px 0 #fff, 29px 50px 0 #fff, 39px 50px 0 #fff, 49px 50px 0 #fff, 59px 50px 0 #fff, 68px 50px 0 #fff, 78px 50px 0 #000, /* boca */ 87px 50px 0 #fff, 97px 50px 0 #fff, 107px 50px 0 #fff, 116px 50px 0 #fff, /* linha 7 */ 29px 60px 0 #e1ced2, 20px 60px 0 #a3a085, 29px 60px 0 #e1ced2, 39px 60px 0 #fff, 49px 60px 0 #fff, 59px 60px 0 #fff, 69px 60px 0 #fff, 79px 60px 0 #fff, 87px 60px 0 #fff, 97px 60px 0 #fff, 107px 60px 0 #fff, /* linha 8 pescoço */ 39px 70px 0 #a3a085, 49px 70px 0 #a3a085, 59px 70px 0 #e1ced2, 68px 70px 0 #fff, /* linha 9 */ 29px 80px 0 #a3a085, 39px 80px 0 #e1ced2, 49px 80px 0 #fff, 59px 80px 0 #fff, 68px 80px 0 #fff, 78px 80px 0 #fff, /* linha 10 */ 19px 90px 0 #a3a085, 29px 90px 0 #fff, 39px 90px 0 #fff, 49px 90px 0 #fff, 59px 90px 0 #fff, 68px 90px 0 #fff, 78px 90px 0 #fff, /* linha 11 */ 10px 100px 0 #a3a085, 19px 100px 0 #fff, 29px 100px 0 #a3a085, 39px 100px 0 #fff, 49px 100px 0 #fff, 59px 100px 0 #fff, 68px 100px 0 #fff, 78px 100px 0 #fff, 88px 100px 0 #e1ced2, /* linha 12 */ 29px 110px 0 #a3a085, 39px 110px 0 #e1ced2, 49px 110px 0 #fff, 59px 110px 0 #fff, 69px 110px 0 #fff, 78px 110px 0 #fff, /* linha 13 */ 29px 120px 0 #a3a085, 39px 120px 0 #e1ced2, 49px 120px 0 #e1ced2, 59px 120px 0 #e1ced2, 69px 120px 0 #fff, 78px 120px 0 #fff, /* linha 14 */ 29px 130px 0 #a3a085, 39px 130px 0 #e1ced2, 69px 130px 0 #a3a085, 78px 130px 0 #e1ced2, /* linha 15 */ 29px 140px 0 #a3a085, 78px 140px 0 #a3a085, /* chapéu linha 1 */ 30px -30px 0 #e89a2e, 40px -30px 0 #c0060b, 50px -30px 0 #c0060b, /* chapéu linha 2 */ 20px -20px 0 #e89a2e, 30px -20px 0 #91000f, 40px -20px 0 #c0060b, 50px -20px 0 #c0060b, /* chapéu linha 3 */ 30px -10px 0 #91000f, 40px -10px 0 #c0060b, 50px -10px 0 #c0060b; }