Mudanças entre as edições de "Widget:MainPageMenu"
Ir para navegação
Ir para pesquisar
| Linha 82: | Linha 82: | ||
<style> | <style> | ||
/* MENU – sempre 4 colunas até 1280px, depois 3, 2 e 1 coluna */ | |||
.home-button-container { | .home-button-container { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(4, | /* 4 colunas fixas de até 280px cada */ | ||
grid-template-columns: repeat(4, minmax(0, 280px)); | |||
justify-content: center; /* centraliza o conjunto de botões */ | |||
gap: 20px; | gap: 20px; | ||
padding: 10px; | padding: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
margin: 0 auto; /* garante que o grid não estique além dos 4 botões */ | |||
font-family: "Noto Sans", sans-serif; | font-family: "Noto Sans", sans-serif; | ||
} | } | ||
| Linha 97: | Linha 101: | ||
border-radius: 12px; | border-radius: 12px; | ||
background: #fff; | background: #fff; | ||
transition: transform 0.2s ease-out, | |||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; | box-shadow 0.2s ease-out, | ||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); | border-color 0.2s ease-out; | ||
box-shadow: 0 1px 3px rgba(0,0,0,0.08); | |||
box-sizing: border-box; | box-sizing: border-box; | ||
width: 100%; /* preenche a coluna até os 280px máximos */ | |||
max-width: 280px; /* não fica maior que isso */ | |||
margin: 0 auto; /* centraliza dentro de cada coluna */ | |||
font-family: "Noto Sans", sans-serif; | font-family: "Noto Sans", sans-serif; | ||
} | } | ||
| Linha 110: | Linha 115: | ||
transform: translateY(-3px); | transform: translateY(-3px); | ||
border-color: #007bff; | border-color: #007bff; | ||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); | box-shadow: 0 4px 10px rgba(0,0,0,0.12); | ||
} | } | ||
/* imagens e títulos permanecem iguais */ | |||
/* … (o resto do your CSS: links, imagens e titles) … */ | |||
/* 3 colunas até 1280px */ | |||
/* | |||
@media (max-width: 1280px) { | @media (max-width: 1280px) { | ||
.home-button-container { | .home-button-container { | ||
grid-template-columns: repeat(3, 1fr); | grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
max-width: none; | |||
} | } | ||
} | } | ||
/* | /* 2 colunas até 900px */ | ||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
.home-button-container { | .home-button-container { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
} | } | ||
} | } | ||
/* | /* 1 coluna até 600px */ | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.home-button-container { | .home-button-container { | ||
| Linha 194: | Linha 142: | ||
} | } | ||
} | } | ||
</style> | </style> | ||
Edição das 20h00min de 9 de junho de 2025
<style> /* MENU – sempre 4 colunas até 1280px, depois 3, 2 e 1 coluna */ .home-button-container {
display: grid; /* 4 colunas fixas de até 280px cada */ grid-template-columns: repeat(4, minmax(0, 280px)); justify-content: center; /* centraliza o conjunto de botões */ gap: 20px; padding: 10px; box-sizing: border-box; margin: 0 auto; /* garante que o grid não estique além dos 4 botões */ font-family: "Noto Sans", sans-serif;
}
.home-button-item {
position: relative;
overflow: hidden;
border: 1px solid #bbb;
border-radius: 12px;
background: #fff;
transition: transform 0.2s ease-out,
box-shadow 0.2s ease-out,
border-color 0.2s ease-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
box-sizing: border-box;
width: 100%; /* preenche a coluna até os 280px máximos */
max-width: 280px; /* não fica maior que isso */
margin: 0 auto; /* centraliza dentro de cada coluna */
font-family: "Noto Sans", sans-serif;
}
.home-button-item:hover {
transform: translateY(-3px); border-color: #007bff; box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
/* imagens e títulos permanecem iguais */ /* … (o resto do your CSS: links, imagens e titles) … */
/* 3 colunas até 1280px */ @media (max-width: 1280px) {
.home-button-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: none;
}
}
/* 2 colunas até 900px */ @media (max-width: 900px) {
.home-button-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 1 coluna até 600px */ @media (max-width: 600px) {
.home-button-container {
grid-template-columns: 1fr;
}
}
</style>