Difference between revisions of "User:Becasita/test.css"
(Adding more stuff to the main page test.) |
(Small adjustments.) |
||
Line 12: | Line 12: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
− | + | margin: 0 0.2em; | |
} | } | ||
/* Right container. */ | /* Right container. */ | ||
Line 31: | Line 31: | ||
/* Content. */ | /* Content. */ | ||
.main_page-content { | .main_page-content { | ||
− | padding: 0 | + | padding: 0 0.6em; |
} | } | ||
Revision as of 01:51, 24 January 2018
/**********************
** Main page stuff! **
**********************/
/*****************
* Main container.
*/
#mp { display: flex; }
/* Left/Right containers. */
.mp-left, .mp-right
{
display: flex;
flex-direction: column;
margin: 0 0.2em;
}
/* Right container. */
.mp-right
{ /* Fixed max width. */
max-width: 25em;
}
/* Header. */
.main_page-header {
background-color: #337C97;
color: white;
margin: 0.75em 0 0.1em !important;
border-radius: 0.25em;
}
.main_page-header span {
margin: 0 0.35em;
}
/* Content. */
.main_page-content {
padding: 0 0.6em;
}
/*************
* Characters.
*/
#characters-info dd { display: inline-block; }
#characters-info ul {
display: inline;
margin: 0;
}
#characters-info li { display: inline-block; }
.characters {
margin: auto;
display: table;
}
.character { display: inline-block; }
/* Screens with max-width of 1000px (might need to be changed) */
@media screen and (max-width: 1000px)
{
/* Main container. */
#mp
{ /* Display block, to make stuff linear, instead of side-by-side. */
display: block;
}
/* Right container. */
.mp-right
{ /* Unset the max width limitation. */
max-width: unset;
}
.characters-top, .characters-bottom
{ /* Display vertical inline, basically. */
display: grid;
}
}