mougnibas/site-accueil-insa
2
0
Fork 0
forked from rebillar/site-accueil-insa
Code Issues Pull requests Releases Wiki Activity

better text zone, menu tests

Browse source
This commit is contained in:
thaaoblues 2023-04-28 18:14:12 +02:00
parent c955435db0
commit 531211038c
2 changed files with 26 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
assets/css/menu.css
View file

@ -1,7 +1,7 @@
.menu { .menu {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: -15%; bottom: -12vh;
width: 100%; width: 100%;
height: 25vh; height: 25vh;
z-index: 2; z-index: 2;
@ -9,11 +9,6 @@
transition: transform 0.3s; transition: transform 0.3s;
} }
.menu-svg{
width: 30vw;
height: 40vh;
}
#menu ul { #menu ul {
flex-wrap: wrap; flex-wrap: wrap;
@ -22,15 +17,14 @@
list-style: none; list-style: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: transparent;
color: #fff; color: #fff;
height: 50px; height: auto;
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.7); /* Add a semi-transparent background color for readability */ background-color: rgba(64, 98, 63, 0.7); /* Add a semi-transparent background color for readability */
bottom: 5vh;
} }
@media only screen and (max-width: 600px) { @media all and (max-width: 800px) {
/* Add styles for smartphones screens */ /* Add styles for smartphones screens */
#menu ul { #menu ul {
height: auto; height: auto;
@ -41,6 +35,7 @@
#menu li { #menu li {
margin: 5px 0; margin: 5px 0;
} }
} }
#menu li { #menu li {
@ -54,50 +49,17 @@ margin: 0 10px;
padding: 10px; /* Add some padding for better readability and clickable area */ padding: 10px; /* Add some padding for better readability and clickable area */
color: #c25151; color: #c25151;
text-decoration: none; text-decoration: none;
background-image: url('/assets/img/colonne.svg'); /* Add this line to set the link background image */ background-image: url('/assets/img/buisson.svg'); /* Add this line to set the link background image */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
#menu a:hover{
color: #c22828;
transform: translateY(-2px);
.menu-link{
margin-left: 10px;
width: 100%;
position: absolute;
} }
.menu-link use {
transition: transform 50ms;
transform-origin: center;
}
.menu-link.menu-bottom-line use {
transform-origin: bottom;
}
.menu-link text {
transition: transform 50ms;
}
.menu .menu-link:hover text {
fill: #FFDC00;
transform: translateY(-1px);
}
.menu-link:hover use {
transform: scaleY(1.1);
}
.menu svg {
overflow: visible;
}
.mobile-menu { .mobile-menu {

17
assets/css/template.css
View file

@ -11,11 +11,11 @@
.zone_txt { .zone_txt {
display: block; display: block;
background-color: rgba(88, 159, 218, 0.798); background-color: rgba(88, 159, 218, 0.798);
width: 80vw; width: 90vw;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 50px; padding: 5vw;
font-size: 1.2rem; font-size: 2rem;
margin-top: 40px; margin-top: 40px;
border-radius: 15px; border-radius: 15px;
color: black; color: black;
@ -39,10 +39,19 @@ body {
min-height: 100vh; min-height: 100vh;
background-attachment: fixed; background-attachment: fixed;
background-color: #bdc7f3; background-color: #ffffff;
background-image: url("/assets/img/background.svg"); background-image: url("/assets/img/background.svg");
} }
/* papier peint pour petits écrans (smartphones) */
@media all and (max-width: 800px) {
body {
background-image: url("/assets/img/asterix.svg");
background-repeat: space;
}
}
main { main {
text-align: center; text-align: center;