WIP:bulma:neu
[website] / less / phone / layout.less
1 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
2
3 body
4 {
5   font-size: 87.5%; /** 14px */
6   padding: 0;
7 }
8 #page
9 {
10   position: relative;
11   overflow: hidden;
12 }
13
14
15 /** Seitenaufteilung mit/ohne Menü */
16
17 .content > .main
18 {
19   margin: 0 1em 0 2.5em;
20 }
21 .menu .content > .main
22 {
23   border-top-style: none;
24 }
25
26
27
28 /** Seitenkopf positionieren */
29
30 #header
31 {
32   margin: .125em 1em 1em 1.25em;
33 }
34 #header > hr.h
35 {
36   display: none;
37 }
38 #logo
39 {
40   font-size: 50%;
41 }
42
43 /** Bereichsauswahl positionieren und stylen */
44
45 #nav > hr.n
46 {
47   display: none;
48 }
49 #menu
50 {
51   border-style: none;
52   font-size: 125%;
53   line-height: 1.5em;
54 }
55 #menu
56 {
57   font-size: 150%;
58   border-bottom: .125em solid @hintergrund;
59   margin-top: 0;
60   padding: .25em .25em 1em 1.5em;
61 }
62 #menu > li.m
63 {
64   float: left;
65   @media (max-width: 359px)
66   {
67     float: none;
68   }
69   list-style-type: none;
70   padding: .25em 1em 0 0;
71 }
72 #menu > li.m > a.m
73 {
74   color: @dunkel;
75 }
76 #menu > li.m > strong.m
77 {
78   color: @hintergrund;
79   border-bottom: .0625em solid @hintergrund;
80 }
81 #menu > li.m > a.m:hover,
82 #menu > li.m > a.m:focus,
83 #menu > li.m > a.m:active
84 {
85   color: @dunkler;
86   border-bottom: .0625em solid @dunkler;
87 }
88 #menu > li.m > a.m.selected
89 {
90   color: @hintergrund;
91   border-bottom: .0625em dashed @hintergrund;
92 }
93 #menu > li.m > a.m.selected:hover,
94 #menu > li.m > a.m.selected:focus,
95 #menu > li.m > a.m.selected:active
96 {
97   border-style: solid;
98 }
99
100
101 /** Navigations-Sprunglink reaktivieren und stylen */
102
103 #breadcrumb
104 {
105   position: absolute;
106   top: .8em;
107   right: 1.5em;
108 }
109 #breadcrumb > strong.b,
110 #breadcrumb > ol.b,
111 #breadcrumb > hr.b
112 {
113   display: none;
114 }
115 #breadcrumb > a.hide
116 {
117   display: block;
118   overflow: hidden;
119   width: 3.5em;
120   height: 3em;
121   line-height: 2.1em;
122   color: @normal;
123   border-style: none;
124 }
125 #breadcrumb > a.hide:before
126 {
127   content: "";
128   font-family: 'symbols';
129   font-size: 378%; /** Vielfaches von 14px */
130   padding: 0 0 1em 0;
131   font-weight: normal;
132 }
133 #breadcrumb > a.hide:hover,
134 #breadcrumb > a.hide:focus,
135 #breadcrumb > a.hide:active
136 {
137   color: @dunkler;
138 }
139
140
141 /** Inhalts-Sprunglink reaktivieren und stylen */
142
143 #nav:target
144 {
145   position: absolute;
146   top: 0;
147   right: 0;
148   left: 0;
149   padding: .25em 1em 999em 2.5em;
150   margin-bottom: -993em;
151   z-index: 5;
152   background-color: @heller;
153   #menu
154   {
155     padding-top: 0;
156     padding-bottom: .75em;
157   }
158   > a.hide
159   {
160     position: absolute;
161     left: auto;
162     top: .8em;
163     right: 1.5em;
164     display: block;
165     overflow: hidden;
166     width: 3.5em;
167     height: 3em;
168     line-height: 2.1em;
169     color: @hintergrund;
170     border-style: none;
171   }
172   > a.hide:before
173   {
174     content: "";
175     font-family: 'symbols';
176     font-size: 378%; /** Vielfaches von 14px */
177     padding: 0 0 1em 0;
178     margin: 0 1em 0 0;
179   }
180   > a.hide:hover,
181   > a.hide:focus,
182   > a.hide:active
183   {
184     color: @dunkler;
185   }
186 }
187
188
189 /** Footer positionieren */
190
191 #footer
192 {
193   padding: 0 1em .5em 2.5em;
194   background-color: @heller;
195 }
196 #footer > hr.f
197 {
198   border-color: @hintergrund;
199 }
200
201
202 /** Marginal-Inhalte anpassen... */
203
204 .marginal h1,
205 .marginal h2,
206 .marginal h3,
207 .marginal h4
208 {
209   color: @hintergrund;
210 }
211
212
213 /** Faux-Column-Hack für Marginalinhalte */
214
215 .marginal
216 {
217   margin-top: 4em;
218   margin-bottom: -993em;
219   padding: 1em 1em 999em 2.5em;
220   background-color: @heller;
221 }