xref: /template/sprintdoc/css/area_header.less (revision cb25c44ba15af293fd2f597931460a742fa7c4cf) 
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
12/* + + +  wiki logo  + + + */
13    @media @screen_min-md {
14        .logo {
15            /*position: absolute;
16            bottom: 1em;
17            overflow: visible;*/
18            padding: 1rem 0 .3rem;
19
20            img {
21                height: 4.6rem;
22                width: auto;
23                border-style: solid;
24                border-color: transparent;
25                border-width: 2px 0;
26            }
27
28            a:hover,
29            a:focus,
30            a:active {
31                img {
32                    border-width: 0;
33                }
34            }
35        }
36    }
37
38    @media @screen_max-md {
39        .logo {
40            display: table-cell;
41
42            .mobile-only {
43                margin: .8rem 1rem .6rem 0;
44            }
45        }
46    }
47
48
49/* + + +  wiki title  + + + */
50    .main-title {//background-color: pink;
51        &.desktop-only {
52            @media @screen_min-md {
53                display: table-cell;
54                vertical-align: middle;
55            }
56        }
57
58        &.mobile-only {
59            @media @screen_max-md {
60                display: table-cell;
61                vertical-align: middle;
62                padding-left: .6rem;
63            }
64        }
65    }
66
67    p.title {
68        background-color: @color-site-bg;;
69        opacity: @header-font-opacity;
70        line-height: @line-height-default;
71        margin-bottom: 0;
72
73        @media @screen_min-md {
74            font-size: @font-size-big;
75        }
76
77        @media @screen_max-md {
78            font-size: (@font-size-default + .25);
79            padding-top: .5rem;
80            padding-bottom: .5rem;
81        }
82    }
83
84
85/* + + +  wiki claim  + + + */
86    div.claim {
87        @media @screen_min-md {
88            display: table-cell;
89            height: 100%;
90            vertical-align: middle;
91        }
92
93        @media @screen_max-md {
94            min-height: 3rem;
95        }
96    }
97
98    p.claim {//background-color: deepskyblue;
99        opacity: @header-font-opacity;
100        margin-bottom: 0;
101        padding-bottom: 1rem;
102
103        @media @screen_min-xxs {
104            font-size: @font-size-small;
105        }
106
107        @media @screen_max-md {
108            padding-top: .5rem;
109        }
110
111        @media @screen_max-xxs {
112            font-size: @font-size-default;
113        }
114    }
115
116
117/* + + +  mobile nav togglelink  + + + */
118    .menu-togglelink {
119        margin: @very-small-spacing -(@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 @color-border;
131            border-radius: @border-radius;
132            font-size: 1rem;
133            text-align: center;
134            text-decoration: none;
135            line-height: 1;
136            transition: @transition color, @transition background-color, @transition border-color;
137
138            &::before {
139                font-size: 1.5rem;
140                margin: .1rem 0 0;
141            }
142        }
143
144        &:hover,
145        &:active,
146        &:focus {
147            background-color: @button_color;
148            border-color: @button_background;
149        }
150    }
151}
152