Difference between revisions of "User:Becasita/test.css"
m (Remove set gallery and list mobile stuff (added to mobile.css).) |
(Adding more stuff to the main page test.) |
||
Line 1: | Line 1: | ||
− | /* Main container. */ | + | /********************** |
− | #mp | + | ** Main page stuff! ** |
− | { | + | **********************/ |
− | + | ||
− | } | + | /***************** |
− | + | * Main container. | |
+ | */ | ||
+ | #mp { display: flex; } | ||
/* Left/Right containers. */ | /* Left/Right containers. */ | ||
.mp-left, .mp-right | .mp-left, .mp-right | ||
Line 10: | Line 12: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
− | margin: 0 0.4em; | + | /*margin: 0 0.4em;*/ |
} | } | ||
/* Right container. */ | /* Right container. */ | ||
Line 16: | Line 18: | ||
{ /* Fixed max width. */ | { /* Fixed max width. */ | ||
max-width: 25em; | 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 1em; | ||
} | } | ||
+ | |||
+ | /************* | ||
+ | * 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) */ | /* Screens with max-width of 1000px (might need to be changed) */ | ||
Line 30: | Line 61: | ||
{ /* Unset the max width limitation. */ | { /* Unset the max width limitation. */ | ||
max-width: unset; | max-width: unset; | ||
+ | } | ||
+ | |||
+ | .characters-top, .characters-bottom | ||
+ | { /* Display vertical inline, basically. */ | ||
+ | display: grid; | ||
} | } | ||
} | } |
Revision as of 01:45, 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.4em;*/
}
/* 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 1em;
}
/*************
* 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;
}
}