xref: /template/sprintdoc/css/area_header.less (revision 31abc4ae3d69d3e07b4b5378a82d458722fb7efe) 
1/**
2 * This file provides the design styles for the page header.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8#dokuwiki__header {
9    @header-font-opacity: 1;
10
11/* + + +  wiki logo  + + + */
12    @media @screen_min-md {
13        div.claim {
14            display: table-cell;
15            height: 100%;
16            vertical-align: middle;
17        }
18
19        .logo {
20            padding: 1rem 0 .3rem;
21
22            img {
23                height: 4.6rem;
24                width: auto;
25                border-style: solid;
26                border-color: transparent;
27                border-width: 2px 0;
28            }
29
30            a:hover,
31            a:focus,
32            a:active {
33                img {
34                    border-width: 0;
35                }
36            }
37        }
38    }
39
40    @media @screen_max-md {
41        .logo {
42            display: table-cell;
43
44            .mobile-only {
45                margin: .8rem 1rem .6rem 0;
46            }
47        }
48    }
49
50
51/* + + +  wiki title + claim  + + + */
52    .main-title.desktop-only {
53        @media @screen_min-md {
54            display: table-cell;
55            vertical-align: middle;
56        }
57
58        @media @screen_max-md {
59            display: block;
60        }
61
62        p.title {
63            @media @screen_max-md {
64                display: none;
65            }
66        }
67
68        p.claim {
69            @media @screen_max-md {
70                display: block;
71                padding-bottom: 1rem;
72            }
73        }
74    }
75
76    .main-title:not([class*="desktop-only"]) {
77        @media @screen_max-md {
78            display: table-cell;
79            vertical-align: middle;
80        }
81    }
82
83
84/* + + +  wiki title  + + + */
85    p.title {
86        background-color: @ini_background;
87        opacity: @header-font-opacity;
88        color: @ini_text_webframe;
89        line-height: @line-height-default;
90        margin-bottom: .5rem;
91
92        @media @screen_min-md {
93            font-size: @font-size-big;
94        }
95
96        @media @screen_max-md {
97            font-size: (@font-size-default + .25);
98            padding-top: .5rem;
99            padding-left: 1rem;
100        }
101    }
102
103
104/* + + +  wiki claim  + + + */
105    p.claim {
106        opacity: @header-font-opacity;
107        color: @ini_text_webframe;
108        font-size: @font-size-default;
109        margin-bottom: 0;
110
111        @media @screen_max-md {
112            padding-top: .5rem;
113        }
114    }
115
116
117/* + + +  mobile nav togglelink  + + + */
118    .menu-togglelink {
119        margin: .45rem -(@very-small-spacing) 0 0;
120
121        a {
122            .fontello();
123            .icon-menu();
124
125            display: block;
126            min-height: @toggle-size;
127            min-width: @toggle-size;
128            box-sizing: border-box;
129            background-color: #fff;
130            border: 1px solid @ini_border;
131            border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
132            color: @ini_nav_menu_color;
133            font-size: 1rem;
134            text-align: center;
135            text-decoration: none;
136            line-height: 1;
137            transition: @transition color, @transition background-color, @transition border-color;
138
139            &::before {
140                font-size: 1.5rem;
141                margin: .1rem 0 0;
142            }
143
144            &:hover,
145            &:active,
146            &:focus {
147                background-color: @ini_nav_menu_hover_bg;
148                border-color: @ini_nav_menu_hover_color;
149                color: @ini_nav_menu_hover_color;
150            }
151        }
152    }
153
154
155/* + + + + +  with magic matcher  + + + + + */
156    &.has-magicmatcher {
157        .logo {
158            @media @screen_min-md {
159                padding-top: 2rem;
160            }
161        }
162
163        .main-title.desktop-only {
164            @media @screen_min-md {
165                vertical-align: bottom;
166                padding-top: @height-context-bar;
167                padding-bottom: 1rem;
168            }
169
170            p.title {
171                @media @screen_min-md {
172                    margin-right: 16rem;
173                }
174            }
175
176            p.claim {
177                @media @screen_max-md {
178                    display: block;
179                    padding-bottom: 1rem;
180                }
181            }
182        }
183    }
184}
185