xref: /template/sprintdoc/css/base_structure.less (revision 6c61749bf2a1268695f9fe689d24c6c675880110) 
1/**
2 * This file provides styles for the general layout structure.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
9/* Col Grid */
10/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
11
12.make-grid(xs);
13
14@media screen {
15    .container {
16        margin: 0 @margin-big;
17    }
18}
19
20@media @screen_min-xxs {
21    html {
22        font-size: 114%; //16px
23    }
24}
25
26@media @screen_min-xs {
27    html {
28        font-size: 114%; //16px
29    }
30}
31
32@media @screen_min-sm {
33    .make-grid(sm);
34    html {
35        font-size: 100%; //16px
36    }
37}
38
39@media @screen_min-md {
40    .make-grid(md);
41    html {
42        font-size: 81.25%; //13px
43    }
44}
45
46@media @screen_min-lg {
47    .make-grid(lg);
48    html {
49        font-size: 87.5%; //14px
50    }
51}
52
53@media @screen_min-xlg {
54    html {
55        font-size: 93.75%; //15px
56    }
57}
58
59@media @screen_min-xxlg {
60    html {
61        font-size: 100%; //16px
62    }
63}
64
65/* + + + + +  z-indeces  + + + + + */
66@media @screen_min-md {
67    .nav-direct p {
68        z-index: 1000;
69    }
70
71    .top-header {
72        z-index: 900;
73    }
74
75    .tools .row > .col-xs-12 {
76        z-index: 1;
77    }
78
79    .header .row > .col-xs-12 {
80        z-index: 2;
81    }
82
83    .content .row > .col-xs-12 {
84        z-index: 3;
85    }
86
87    .top-header {
88        position: absolute;
89        top: 0;
90        left: 0;
91        width: 100%;
92    }
93
94    .header,
95    .tools {
96        .row {
97            position: relative;
98
99            > .col-xs-12 {
100                width: 23%;
101                box-sizing: border-box;
102            }
103        }
104    }
105
106    .header {
107        .row > .col-xs-12 {
108            position: relative;
109            height: 150px;
110            min-height: 6rem;
111            display: table;
112        }
113    }
114
115    .tools {
116        .row > .col-xs-12 {
117            position: absolute;
118        }
119    }
120
121    .content {
122        .row > .col-xs-12 {
123            position: relative;
124            width: 100%;
125            background-color: #fff;
126        }
127    }
128
129    .claim {
130        display: table-cell;
131        height: 100%;
132        vertical-align: middle;
133        .logo {
134            /*position: absolute;
135            bottom: 1em;
136            overflow: visible;*/
137            padding: 1rem 0 .3rem;
138
139
140            img {
141                height: 4.6rem;
142                width: auto;
143                border-style: solid;
144                border-color: transparent;
145                border-width: 2px 0;
146            }
147
148            a:hover,
149            a:focus,
150            a:active {
151                img {
152                    border-width: 0;
153                }
154            }
155        }
156    }
157
158    .showSidebar {
159        .content {
160            .row > .col-xs-12 {
161                width: 73%;
162                float: right;
163            }
164        }
165    }
166
167    .wide-content{
168        .logo{ }
169        .content {
170            .row > .col-xs-12 {
171                width: auto;
172                float: none;
173            }
174        }
175        &.showSidebar{
176            .content {
177                .row > .col-xs-12 {
178                    margin-left: @toggle-showsidebar_width;
179                }
180            }
181        }
182
183    }
184
185    .main-sidebar {
186        &.search {
187            > img {
188                width: 100%;
189                height: auto;
190            }
191        }
192    }
193}
194
195@media @screen_max-md {
196    .container {
197        margin: 0 1.25rem;
198    }
199
200    #dokuwiki__usertools {
201        margin-top: 0;
202        max-width: 75%;
203        position: absolute;
204        top: 0;
205        margin-right: 0;
206        right: 1.25rem;
207    }
208
209    .content {
210        position: relative;
211
212        #dokuwiki__pagetools {
213            top: 0;
214        }
215
216        .row > .col-xs-12 #dokuwiki__content::before {
217            display: none;
218        }
219    }
220
221    #dokuwiki__header {
222        .logo {
223            /*width: 200px;
224            max-width: 33%;
225            margin: .8rem 0;*/
226        }
227    }
228
229    .tools {
230        .main-sidebar {
231            display: none;
232        }
233    }
234}
235
236@media @screen_max-md{
237    .claim{
238        min-height: 3rem;
239        .logo{
240            .mobile-only{
241                margin: .8rem 1rem .6rem 0;
242            }
243        }
244    }
245}
246