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

64
assets/css/menu.css
View file

@ -1,7 +1,7 @@
.menu {
position: fixed;
left: 0;
bottom: -15%;
bottom: -12vh;
width: 100%;
height: 25vh;
z-index: 2;
@ -9,11 +9,6 @@
transition: transform 0.3s;
}
.menu-svg{
width: 30vw;
height: 40vh;
}
#menu ul {
flex-wrap: wrap;
@ -22,15 +17,14 @@
list-style: none;
display: flex;
justify-content: center;
background-color: transparent;
color: #fff;
height: 50px;
height: auto;
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 */
#menu ul {
height: auto;
@ -41,7 +35,8 @@
#menu li {
margin: 5px 0;
}
}
}
#menu li {
margin: 0 10px;
@ -54,52 +49,19 @@ margin: 0 10px;
padding: 10px; /* Add some padding for better readability and clickable area */
color: #c25151;
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-position: center;
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 {
display: block;
position: fixed;

17
assets/css/template.css
View file

@ -11,11 +11,11 @@
.zone_txt {
display: block;
background-color: rgba(88, 159, 218, 0.798);
width: 80vw;
width: 90vw;
margin-left: auto;
margin-right: auto;
padding: 50px;
font-size: 1.2rem;
padding: 5vw;
font-size: 2rem;
margin-top: 40px;
border-radius: 15px;
color: black;
@ -39,10 +39,19 @@ body {
min-height: 100vh;
background-attachment: fixed;
background-color: #bdc7f3;
background-color: #ffffff;
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 {
text-align: center;