xref: /template/sprintdoc/css/area_header.less (revision 402465276c1a27f76a731004ce8ef8ec61ac854f) 
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: .7;
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: @color-site-bg;;
87        opacity: @header-font-opacity;
88        line-height: @line-height-default;
89        margin-bottom: .5rem;
90
91        @media @screen_min-md {
92            font-size: @font-size-big;
93        }
94
95        @media @screen_max-md {
96            font-size: (@font-size-default + .25);
97            padding-top: .5rem;
98            padding-left: 1rem;
99        }
100    }
101
102
103/* + + +  wiki claim  + + + */
104    p.claim {
105        opacity: @header-font-opacity;
106        margin-bottom: 0;
107        font-size: @font-size-default;
108
109        @media @screen_max-md {
110            padding-top: .5rem;
111        }
112    }
113
114
115/* + + +  mobile nav togglelink  + + + */
116    .menu-togglelink {
117        margin: .45rem -(@very-small-spacing) 0 0;
118
119        a {
120            .fontello();
121            .icon-menu();
122
123            display: block;
124            min-height: @toggle-size;
125            min-width: @toggle-size;
126            box-sizing: border-box;
127            background-color: #fff;
128            border: 1px solid @color-border;
129            border-radius: @border-radius;
130            color: @color-nav;
131            font-size: 1rem;
132            text-align: center;
133            text-decoration: none;
134            line-height: 1;
135            transition: @transition color, @transition background-color, @transition border-color;
136
137            &::before {
138                font-size: 1.5rem;
139                margin: .1rem 0 0;
140            }
141
142            &:hover,
143            &:active,
144            &:focus {
145                background-color: @color-nav-hover-bg;
146                border-color: @color-nav-hover;
147                color: @color-nav-hover;
148            }
149        }
150    }
151}
152