Відмінності між версіями «Шаблон:Головна сторінка/styles.css»

Матеріал з Енциклопедія Носівщини
uk>Perohanych
 
м (Імпортовано 1 версія)
 
(Немає відмінностей)

Поточна версія на 00:24, 9 листопада 2020

/* Стилі проекту Головної сторінки

  • /

/* Сховати автонумерацію заголовків */ .mw-headline-number { 

   display: none;

} /* Для інших оформлень */ h1, h2, h3 { 

   padding: 0;

} h1:after, h2:after { 

   border-bottom: 0 !important;

} /* Шапка */

  1. main-top {
   box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.5), 2px 0 2px -2px rgba(0, 0, 0, 0.5), 0 2px 2px -2px rgba(0, 0, 0, 0.5);
   border-radius: 0 0 3px 3px;
   width: 100%;

}

  1. main-head {
   border-radius: 3px 3px 0 0;
   background: linear-gradient(#fff, #fafafa);
   box-sizing: border-box;
   padding: 1em 1.25em;

}

  1. main-head p {
   margin: 0;

}

  1. main-head-left > h1 {
   border-bottom: 0;
   margin: 0;
   font-family: inherit;
   font-size: 1.75em;
   line-height: 1.25;

} /* Меню */

  1. main-top > ul {
   display: flex;
   justify-content: space-between;
   text-align: center;
   margin: 0;
   list-style: none;

}

  1. main-top > ul > li {
   flex: 1;

}

  1. main-top > ul > li:nth-child(4) {
   flex: 2;

}

  1. main-top > ul > li a {
   display: block;
   padding: .5em 0;
   background: #fafafa;

}

  1. main-top > ul > li:first-child a {
   border-bottom-left-radius: 3px;

}

  1. main-top > ul > li:last-child a {
   border-bottom-right-radius: 3px;

} /* Основа */ .main-block { 

   width: 100%;
   margin-top: 1em;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   padding: 1em 1.25em 1.25em;
   box-sizing: border-box;
   background: #fafafa;
   border-top: 3px #3366cc solid;

} /* Заголовок */ .main-block-header { 

   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding-bottom: .25em;
   margin-bottom: .5em;

} .main-block-header > h2 { 

   display: block;
   margin: 0;
   border-bottom: 0;
   font-family: inherit;

} /* Меню блоку */ .main-block-menu { position: relative; } .main-block-menuToggle:hover { opacity: 0.5; } .main-block-menuDropdown { 

   display: none;

background: #fff; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); position: absolute; right: 0; top: 100%; z-index: 100; } .main-block-menuDropdown ul { 

   list-style: none;
   margin: 0;

} .main-block-menuDropdown ul a { 

   display: block;
   width: 100%;
   padding: .25em .75em;
   font-weight: bold;

} /* Вміст блоку */ .main-block-content { 

   margin: .5em 0;

} /* Посилання внизу блоку */ .main-block-links { 

   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: .75em;
   font-weight: bold;
   clear: both;

} .main-block-links > a:only-child { 

   margin-left: auto;

} .main-block-links .mw-ui-button { 

   background: #fcfcfc;
   border-color: #bbb;
   border-radius: 3px;
   color: #000;

} .main-block-links a:hover .mw-ui-button { 

   color: #777;
   background: #fff;

} /* Вибране зображення */

  1. feat-pic .main-block-content img {
   margin: .5em 0;
   height: auto;

width: 75%; max-width: 500px; } /* Тематичні розділи */

  1. topics-list ul {
   columns: 3;
   column-width: 140px;
   margin: 0;

}

  1. topics-list ul > li {
   align-items: center;
   display: flex;
   margin-bottom: 0.5rem;

}

  1. topics-list ul > li > a:first-child {
   flex: 0 auto;
   width: 2em;
   justify-content: center;
   display: flex;

}

  1. topics-list ul > li > a:last-child {

font-weight: bold; 

   flex: 1;
   line-height: 30px;
   padding-left: .5em;
   display: flex;
   align-items: center;

}

  1. topics-list ul > li:hover > a:first-child {
   opacity: 0.67;

}

  1. topics-list ul > li:hover > a:last-child {
   text-decoration: underline;

} /* Підвал */

  1. main-bottom {
   width: 100%;
   box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.5), 2px 0 2px -2px rgba(0, 0, 0, 0.5), 0 -2px 2px -2px rgba(0, 0, 0, 0.5);
   border-radius: 0 0 3px 3px;
   background: linear-gradient(#fafafa, #fff);
   box-sizing: border-box;
   padding: 1em 1.2em;
   margin-top: 1em;

} /* Посилання з логотипом */ .logo-link { 

   display: inline-flex;

} .logo-link a:first-child { 

   flex: 0 auto;

} .logo-link a:last-child { 

   padding-left: .25em;

} .logo-link:hover a:last-child { 

   text-decoration: underline;

} /* Верхній заголовок */

  1. main-bottom h2 {
   border-bottom: 0;
   font-size: 1.5em;
   font-family: inherit;
   text-align: center;
   margin: 0 0 1em;

} /* Список */

  1. main-bottom ul {
   columns: 6;
   column-width: 150px;
   margin: 0;

}

  1. main-bottom ul > li {
   justify-content: center;
   align-items: center;
   display: flex;
   margin-bottom: 0.5rem;

}

  1. main-bottom ul > li > img {
   flex: 0 auto;

}

  1. main-bottom ul > li > a:first-child {
   flex: 0 auto;
   width: 2em;
   justify-content: center;
   display: flex;

}

  1. main-bottom ul > li > a:last-child {
   flex: 1;
   line-height: 30px;
   padding-left: .5em;
   display: flex;
   align-items: center;

}

  1. main-bottom li:hover a:last-child {
   text-decoration: underline;

} /* Нижній заголовок */

  1. main-bottom h3 {
   border-bottom: 0;
   padding: 0;
   margin: .5em 0 0;
   font-size: 1.25em;
   font-family: inherit;
   font-weight: normal;
   text-align: center;
   width: 100%;

}

/* Для мобільних */ @media (max-width: 767px) { 

   #main-head-left,
   #main-head-right {
       width: 100%;
   }
   #main-top > ul,
   .main-block-menu {
       display: none;
   }

} /* Для планшетів */ @media (min-width: 768px) { 

   .main-block {
       border-radius: 3px;
   }

} /* Для стаціонарних комп'ютерів */ @media (min-width: 1024px) { 

   #main-head {
       display: flex;
       align-items: stretch;
       padding: 1.5em 2em;
   }
   #main-head-left {
       flex: 3;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }
   #main-head-left > h1 {
       font-size: 2em;
   }

#main-head-left > p:first-of-type { font-size: 1.2em; } 

   #main-head-right {
       text-align: right;
       flex: 2;
   }
   #main-wrapper {
       display: flex;
       justify-content: space-between;
       align-items: stretch;
       margin: 0 -.75em;
   }
   .main-column {
       flex: 1;
       margin: 0 .75em;
   }
   .main-block {
   	margin-top: 1.5em;
       padding: 1.25em 2em;
   }
   #main-bottom {
       margin-top: 1.5em;
       padding: 1.5em 2em;
   }

}

Отримано з https://wikinosivka.info/index.php?title=Шаблон:Головна_сторінка/styles.css&oldid=7633