xref: /plugin/combo/resources/theme/default/pages/templates/holy.css (revision 04fd306c7c155fa133ebb3669986875d65988276) 
1main > *, #page-core {
2    min-width: 0; /** not auto */
3}
4
5
6@media (min-width: 768px) {
7
8    #page-core {
9        display: grid;
10        gap: 1.5rem;
11        grid-template-areas: "page-side page-main";
12        grid-template-columns: minmax(min-content,1fr) 3fr;
13    }
14
15    #page-side {
16        grid-area: page-side;
17    }
18
19    #page-main {
20        grid-area: page-main;
21    }
22
23}
24
25
26@media (min-width: 992px) {
27
28    #page-core {
29        grid-template-columns: minmax(min-content,1fr) 5fr;
30    }
31
32    main {
33
34        grid-area: page-main;
35        display: grid;
36        grid-template-columns: [main] 7fr [side] minmax(auto,2fr);
37        grid-auto-flow: row;
38        gap: 1rem;
39        grid-template-areas: unset;
40        margin-left: 1rem;
41        margin-right: 1rem;
42
43    }
44
45    #main-toc {
46        grid-column: side;
47        grid-row: 1 / span 5;
48        position: sticky;
49        top: 5rem;
50        z-index: 2;
51        height: fit-content;
52    }
53
54    #main-header {
55        grid-column: main;
56    }
57
58    #main-content {
59        grid-column: main;
60    }
61
62    #main-footer {
63        grid-column: main;
64    }
65
66    #main-side {
67        grid-area: unset;
68    }
69
70}
71