MediaWiki:Common.css: различия между версиями
Внешний вид
Admin (обсуждение | вклад) Нет описания правки |
Адаптивный дизайн RAMBA Wiki |
||
| Строка 14: | Строка 14: | ||
.portal-grid { | .portal-grid { | ||
display: | display: grid; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 20px; | gap: 20px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
| Строка 21: | Строка 21: | ||
.portal-card { | .portal-card { | ||
min-width: 0; | |||
min-width: | |||
background: #f8f9fa; | background: #f8f9fa; | ||
border: 1px solid #c8ccd1; | border: 1px solid #c8ccd1; | ||
| Строка 28: | Строка 27: | ||
padding: 18px; | padding: 18px; | ||
box-shadow: 0 2px 6px rgba(0,0,0,.08); | box-shadow: 0 2px 6px rgba(0,0,0,.08); | ||
transition: | transition: transform .2s ease, box-shadow .2s ease; | ||
overflow-wrap: anywhere; | |||
} | } | ||
| Строка 38: | Строка 38: | ||
.portal-card h3 { | .portal-card h3 { | ||
margin-top: 0; | margin-top: 0; | ||
} | |||
@media (max-width: 900px) { | |||
.portal-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
} | |||
@media (max-width: 720px) { | |||
.portal-header { | |||
margin: 10px 0 22px; | |||
} | |||
.portal-header h1 { | |||
font-size: 1.8em; | |||
} | |||
.portal-grid { | |||
grid-template-columns: 1fr; | |||
gap: 14px; | |||
} | |||
.portal-card { | |||
width: auto; | |||
padding: 16px; | |||
border-radius: 10px; | |||
} | |||
.portal-card:hover { | |||
transform: none; | |||
} | |||
} | |||
.mw-highlight, | |||
pre, | |||
.syntaxhighlight { | |||
max-width: 100%; | |||
overflow-x: auto; | |||
box-sizing: border-box; | |||
} | |||
.mw-parser-output table { | |||
max-width: 100%; | |||
} | |||
@media (max-width: 720px) { | |||
.mw-parser-output { | |||
overflow-wrap: anywhere; | |||
} | |||
} | } | ||
Версия от 23:18, 31 августа 2026
.portal-header {
text-align: center;
margin: 20px 0 30px;
}
.portal-header h1 {
font-size: 2.2em;
margin-bottom: 5px;
}
.portal-header p {
color: #666;
}
.portal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.portal-card {
min-width: 0;
background: #f8f9fa;
border: 1px solid #c8ccd1;
border-radius: 12px;
padding: 18px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
transition: transform .2s ease, box-shadow .2s ease;
overflow-wrap: anywhere;
}
.portal-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.portal-card h3 {
margin-top: 0;
}
@media (max-width: 900px) {
.portal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.portal-header {
margin: 10px 0 22px;
}
.portal-header h1 {
font-size: 1.8em;
}
.portal-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.portal-card {
width: auto;
padding: 16px;
border-radius: 10px;
}
.portal-card:hover {
transform: none;
}
}
.mw-highlight,
pre,
.syntaxhighlight {
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
}
.mw-parser-output table {
max-width: 100%;
}
@media (max-width: 720px) {
.mw-parser-output {
overflow-wrap: anywhere;
}
}