Common.css — различия между версиями
Admine2 (обсуждение | вклад) |
Admine2 (обсуждение | вклад) |
||
| Строка 36: | Строка 36: | ||
} | } | ||
| + | /* отбрасывает тень от контейнера div */ | ||
.shadow { | .shadow { | ||
-moz-box-shadow: 3px 3px 5px 3px #ccc; | -moz-box-shadow: 3px 3px 5px 3px #ccc; | ||
| Строка 41: | Строка 42: | ||
box-shadow: 3px 3px 5px 3px #ccc; | box-shadow: 3px 3px 5px 3px #ccc; | ||
} | } | ||
| − | + | /* Буквица первая буква абзаца большая */ | |
.firstcharacter { | .firstcharacter { | ||
color: #903; | color: #903; | ||
| Строка 51: | Строка 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; } | ||
| + | } | ||
| + | |||
| + | body { | ||
| + | padding: 2em; | ||
} | } | ||
Версия 11:41, 3 октября 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; }
}
body {
padding: 2em;
}