oppi.li
1/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any
2 unused rules here after refactoring, please remove them. */
3
4.ui.container {
5 display: block;
6 --container-width: 100%;
7 max-width: var(--container-width);
8}
9
10@media (max-width: 767.98px) {
11 .ui.ui.ui.container:not(.fluid) {
12 --container-width: auto;
13 width: var(--container-width);
14 margin-left: 1em;
15 margin-right: 1em;
16 }
17}
18
19@media (min-width: 768px) and (max-width: 991.98px) {
20 .ui.ui.ui.container:not(.fluid) {
21 --container-width: 723px;
22 width: var(--container-width);
23 margin-left: auto;
24 margin-right: auto;
25 }
26}
27
28@media (min-width: 992px) and (max-width: 1199.98px) {
29 .ui.ui.ui.container:not(.fluid) {
30 --container-width: 933px;
31 width: var(--container-width);
32 margin-left: auto;
33 margin-right: auto;
34 }
35}
36
37@media (min-width: 1200px) {
38 .ui.ui.ui.container:not(.fluid) {
39 --container-width: 1127px;
40 width: var(--container-width);
41 margin-left: auto;
42 margin-right: auto;
43 }
44}
45
46.ui.fluid.container {
47 --container-width: 100%;
48 width: var(--container-width);
49}
50
51.ui[class*="center aligned"].container {
52 text-align: center;
53}
54
55/* overwrite width of containers inside the main page content div (div with class "page-content") */
56.page-content .ui.ui.ui.container:not(.fluid) {
57 --container-width: 1280px;
58 width: var(--container-width);
59 max-width: calc(100% - calc(2 * var(--page-margin-x)));
60 margin-left: auto;
61 margin-right: auto;
62}
63
64.ui.container.fluid.padded {
65 padding: 0 var(--page-margin-x);
66}