Common.css — различия между версиями
Admine2 (обсуждение | вклад) |
Admine2 (обсуждение | вклад) |
||
Строка 52: | Строка 52: | ||
padding-right: 8px; | padding-right: 8px; | ||
padding-left: 3px; | padding-left: 3px; | ||
+ | } | ||
+ | |||
+ | /* Размещение сайдбара с адаптацией на мобильные устройства */ | ||
+ | @import "compass/css3"; | ||
+ | |||
+ | .content { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | |||
+ | -webkit-flex-flow: row wrap; | ||
+ | flex-flow: row wrap; | ||
+ | } | ||
+ | |||
+ | .content > * { | ||
+ | padding: 10px; | ||
+ | flex: 1 100%; | ||
+ | } | ||
+ | |||
+ | .footer { | ||
+ | border-top: 2px solid grey; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | .main { | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .aside-1 { | ||
+ | margin-left:20px; | ||
+ | } | ||
+ | |||
+ | @media all and (min-width: 600px) { | ||
+ | .aside { flex: 1 0 0; } | ||
+ | } | ||
+ | |||
+ | @media all and (min-width: 800px) { | ||
+ | .main { flex: 3 0px; } | ||
+ | .main { order: 1; } | ||
+ | .aside-1 { order: 2; } | ||
+ | .footer { order: 3; } | ||
} | } |
Версия 08:20, 5 октября 2017
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
.float-right{
float:right;
margin-left:20px;
}
.chem-bg{
background-image: url(http://176.126.167.242/mediawiki/images/0/0d/Chem-fon.jpg);
background-size: 200px;
background-repeat: repeat;
}
.history-up{
background-image: url(http://176.126.167.242/mediawiki/images/4/4b/His_top.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.history-body{
background-image: url(http://176.126.167.242/mediawiki/images/9/9b/His_bod.png);
background-size: cover;
background-position: center;
background-clip: padding-box;
background-repeat: no-repeat;
}
.history-donw{
background-image: url(http://176.126.167.242/mediawiki/images/d/db/His_bot.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* отбрасывает тень от контейнера div */
.shadow {
-moz-box-shadow: 3px 3px 5px 3px #ccc;
-webkit-box-shadow: 3px 3px 5px 3px #ccc;
box-shadow: 3px 3px 5px 3px #ccc;
}
/* Буквица первая буква абзаца большая */
.firstcharacter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
/* Размещение сайдбара с адаптацией на мобильные устройства */
@import "compass/css3";
.content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.content > * {
padding: 10px;
flex: 1 100%;
}
.footer {
border-top: 2px solid grey;
margin-top: 10px;
}
.main {
text-align: justify;
}
.aside-1 {
margin-left:20px;
}
@media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.main { order: 1; }
.aside-1 { order: 2; }
.footer { order: 3; }
}