marges + new svg

This commit is contained in:
Guillaume Joffre 2022-04-11 19:11:25 +02:00
parent ab80d6adf7
commit 3bb438a1b7
4 changed files with 160 additions and 4 deletions

View file

@ -1,7 +1,9 @@
.menuimg {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
right: 0;
width: 100vw;
height: auto;
min-width: 100vmax;
z-index: 2;
}

View file

@ -6,4 +6,5 @@
margin-right: auto;
padding: 50px;
font-size: 23px;
margin-top: 40px;
}

View file

@ -5,7 +5,7 @@
font-size: 3vw;
}
section {
section, #msg_acc {
width: 95%;
}

View file

@ -4,5 +4,158 @@ if(!isset($relativepath)) {
}
?>
<svg class="menuimg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="512" height="96" x="0px" y="0px"
viewBox="0 416 512 96" xml:space="preserve">
<style type="text/css">
.st0{fill:#AA572E;}
.st1{fill:#C06538;}
.st2{fill:#2B0A00;}
.st3{fill:#914522;}
.st4{fill:#9B4D25;}
.st5{fill:#A04E26;}
.st6{fill:#491A05;}
.st7{fill:#3F1403;}
.st8{fill:#BA6135;}
.st9{fill:#00A15D;}
.st10{fill:#00A25D;}
.st11{fill:url(#grad1);}
.st12{fill:url(#grad2);}
.st13{fill:#FFFFFF;}
.st14{opacity:0.66;fill:#FFFFFF;}
.st15{opacity:0.3;}
.st16{fill:#392313;}
.st17{fill:#492715;}
use {
transition: transform 0.1s;
}
use:hover {
transform: translateY(-1.5px);
}
#Tuyau {
transition: opacity 0.2s;
}
#Tuyau:hover {
opacity: 0.2;
}
</style>
<symbol id="Brick" viewBox="0 0 47 20">
<rect x="1" y="1" class="st0" width="45" height="18"/>
<rect x="1.5" y="0" class="st1" width="44" height="1.5"/>
<rect x="1.5" y="18.5" class="st2" width="44" height="1.5"/>
<rect x="45.5" y="1.5" class="st3" width="1.5" height="17"/>
<rect y="1.5" class="st4" width="1.5" height="17"/>
<polygon class="st5" points="47,1.5 45.5,1.5 45.5,0"/>
<polygon class="st6" points="45.5,20 47,18.5 45.5,18.5"/>
<polygon class="st7" points="0,18.5 1.5,18.5 1.5,20"/>
<polygon class="st8" points="0,1.5 1.5,1.5 1.5,0"/>
</symbol>
<g id="Tuyau">
<!-- Ouverture : Fond -->
<rect x="431" y="429.5" class="st9" width="44" height="14"/>
<!-- Cylindre : Fond-->
<rect id="Fond_-_Tuyau" x="436" y="443.5" class="st10" width="34" height="50"/>
<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="431" y1="436.5" x2="469" y2="436.5">
<stop offset="0" style="stop-color:#03A663"/>
<stop offset="0.2204" style="stop-color:#03A160"/>
<stop offset="0.4959" style="stop-color:#029157"/>
<stop offset="0.7995" style="stop-color:#017848"/>
<stop offset="1" style="stop-color:#00633C"/>
</linearGradient>
<!-- Ouverture : Dégradé -->
<rect x="431" y="429.5" class="st11" width="38" height="14"/>
<linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="436" y1="468.5" x2="464" y2="468.5">
<stop offset="0" style="stop-color:#03A663"/>
<stop offset="0.2204" style="stop-color:#03A160"/>
<stop offset="0.4959" style="stop-color:#029157"/>
<stop offset="0.7995" style="stop-color:#017848"/>
<stop offset="1" style="stop-color:#00633C"/>
</linearGradient>
<!-- Tuyau : Dégradé -->
<rect x="436" y="443.5" class="st12" width="28" height="50"/>
<!-- Ouverture : Reflet Fort -->
<rect x="439.93" y="429.5" class="st13" width="5.5" height="14"/>
<!-- Ouverture : Reflet Faible -->
<rect x="438.43" y="429.5" class="st14" width="1.5" height="14"/>
<!-- Cylindre : Reflet Fort -->
<rect x="443.43" y="445.39" class="st13" width="5.5" height="48.11"/>
<!-- Cylindre : Reflet Faible -->
<rect x="441.93" y="445.39" class="st14" width="1.5" height="48.11"/>
<!-- Ouverture : Ombre projetée -->
<rect x="436" y="443.5" class="st15" width="34" height="1.35"/>
</g>
<!-- Tuyau : Ombre -->
<rect id="Ombre_-_Tuyau" x="436" y="472.27" class="st15" width="34" height="1.35"/>
<!-- Fond -->
<rect id="Fond_-_Briques" x="0" y="474" class="st16" width="512" height="38"/>
<!-- Fond : Surface -->
<rect id="Surface_-_Briques" x="0" y="473.62" class="st17" width="512" height="0.75"/>
<!-- Top layer (LtR) -->
<use xlink:href="#Brick" width="47" height="20" x="0" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="48.85" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="97.7" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="146.55" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="195.4" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="244.25" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="293.1" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="341.95" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="390.8" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="439.65" y="471.65"/>
<use xlink:href="#Brick" width="47" height="20" x="488.5" y="471.65"/>
<!-- Bottom Layer (LtR) -->
<use xlink:href="#Brick" width="47" height="20" x="-23.5" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="25.35" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="74.2" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="123.05" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="171.9" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="220.75" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="269.6" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="318.45" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="367.3" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="416.15" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="465" y="493.5"/>
</svg>
<img src="<?php echo $relativepath.'assets/img/menu/menu.svg'; ?>" class="menuimg">