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