Перейти к содержанию

Заглавная страница/styles.css

Материал из LemonCraft Wiki
Версия от 21:48, 29 марта 2025; Spark108 (обсуждение | вклад)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)

/** Main page layout **/ /** Only used for the layout, main page styles are defined at MediaWiki:Common.css to allow usage on other pages as well **/

  1. main-page.main-page {

display: grid; grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j"; grid-template-columns: 1fr; grid-gap: 2px; } @media screen and (min-width:990px) { #main-page.main-page { grid-template-areas: "a a" "b c" "d e" "f g" "h i" "j k"; grid-template-columns: 60% 40%; } } @media screen and (min-width:1220px) { #main-page.main-page { grid-template-areas: "a a a" "b c d" "e f g" "h i j"; grid-template-columns: repeat(3, 1fr); } }

  1. fp-1 {

grid-area: a; }

  1. fp-2 {

grid-area: b; }

  1. fp-3 {

grid-area: c; }

  1. fp-4 {

grid-area: d; }

  1. fp-5 {

grid-area: e; }

  1. fp-6 {

grid-area: f; }

  1. fp-7 {

grid-area: g; }

  1. fp-8 {

grid-area: h; }

  1. fp-9 {

grid-area: i; }

  1. fp-10 {

grid-area: j; }

  1. fp-11 {

grid-area: k; }


  1. fp-header.fp-header {

display: grid; grid-template-areas: "aa" "ac" "ab"; grid-template-columns: 1fr; } @media screen and (min-width: 990px) { #fp-header.fp-header { grid-template-areas: "aa ab" "ac ac"; grid-template-columns: 335px 1fr; } } @media screen and (min-width: 1350px) { #fp-header.fp-header { grid-template-columns: 1fr 2fr; } }

  1. fp-header-file {

grid-area: aa; }

  1. fp-header-links {

grid-area: ab; }

  1. fp-header-text {

grid-area: ac; }

@media all and (min-width: 450px) { #fp-9-links { display: grid; grid-template-areas: 'a b' 'a c' 'a d'; gap: 20px; } }