]>
Commit | Line | Data |
---|---|---|
dfb058c6 A |
1 | /** |
2 | * General | |
3 | */ | |
4ed6d1ba | 4 | body { |
dfb058c6 | 5 | |
4ed6d1ba A |
6 | } |
7 | ||
dfb058c6 A |
8 | .strong { |
9 | font-weight: bold; | |
10 | } | |
4ed6d1ba | 11 | |
dfb058c6 A |
12 | .clear { |
13 | clear: both; | |
14 | } | |
15 | ||
16 | /** | |
17 | * Extends Pure grids responsive to hide items. | |
18 | * Use xx-0 to hide an item on xx screen. | |
19 | * Display it at any level with xx-visible. | |
20 | */ | |
21 | .pure-u-0 { display: none !important; } | |
22 | @media screen and (min-width: 35.5em) { | |
23 | .pure-u-sm-0 { display: none !important; } | |
24 | .pure-u-sm-visible { display: inherit !important; } | |
25 | } | |
26 | @media screen and (min-width: 48em) { | |
27 | .pure-u-md-0 { display: none !important; } | |
28 | .pure-u-md-visible { display: inherit !important; } | |
29 | } | |
30 | @media screen and (min-width: 64em) { | |
31 | .pure-u-lg-0 { display: none !important; } | |
32 | .pure-u-lg-visible { display: inherit !important; } | |
33 | } | |
34 | @media screen and (min-width: 80em) { | |
35 | .pure-u-xl-0 { display: none !important; } | |
36 | .pure-u-xl-visible { display: inherit !important; } | |
4ed6d1ba A |
37 | } |
38 | ||
39 | /** | |
40 | * MENU | |
41 | **/ | |
dfb058c6 A |
42 | .shaarli-menu { |
43 | position: fixed; | |
44 | top: 0; | |
45 | width: 100%; | |
46 | background: #1b926c; | |
47 | -webkit-font-smoothing: antialiased; | |
48 | /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */ | |
49 | max-height: 2.1em; | |
50 | transition: max-height 0.5s; | |
51 | overflow: hidden; | |
52 | z-index: 999; | |
53 | } | |
54 | ||
55 | .shaarli-menu.open { | |
56 | max-height: 500px; | |
57 | transition: max-height 0.75s; | |
4ed6d1ba A |
58 | } |
59 | ||
60 | .pure-menu-selected { | |
dfb058c6 | 61 | background: #1A694C; |
4ed6d1ba A |
62 | } |
63 | ||
64 | .pure-menu-link, | |
65 | .pure-menu-link:visited, | |
66 | .pure-menu-selected .pure-menu-link, | |
67 | .pure-menu-selected .pure-menu-link:visited { | |
68 | color: #b0ddce; | |
69 | } | |
70 | ||
71 | .pure-menu-link:hover, | |
72 | .pure-menu-selected .pure-menu-link:hover { | |
dfb058c6 | 73 | color: #d1fff0; |
4ed6d1ba A |
74 | background: transparent; |
75 | } | |
76 | ||
4ed6d1ba A |
77 | .menu-toggle { |
78 | width: 34px; | |
79 | height: 34px; | |
80 | position: absolute; | |
81 | top: 0; | |
82 | right: 0; | |
83 | display: none; | |
84 | } | |
85 | ||
86 | .menu-toggle .bar { | |
87 | background-color: #b0ddce; | |
88 | display: block; | |
89 | width: 20px; | |
90 | height: 2px; | |
91 | border-radius: 100px; | |
92 | position: absolute; | |
93 | top: 18px; | |
94 | right: 7px; | |
95 | transition: all 0.5s; | |
96 | } | |
97 | ||
98 | .menu-toggle .bar:first-child { | |
99 | transform: translateY(-6px); | |
100 | } | |
101 | ||
102 | .menu-toggle.x .bar { | |
103 | transform: rotate(45deg); | |
104 | } | |
105 | ||
106 | .menu-toggle.x .bar:first-child { | |
107 | transform: rotate(-45deg); | |
108 | } | |
109 | ||
110 | @media screen and (max-width: 64em) { | |
111 | .menu-toggle { | |
112 | display: block; | |
113 | } | |
114 | } | |
115 | ||
116 | /** | |
dfb058c6 | 117 | * Header |
4ed6d1ba | 118 | */ |
dfb058c6 A |
119 | #header { |
120 | width: 100%; | |
121 | height: 150px; | |
122 | background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em; | |
4ed6d1ba | 123 | } |
dfb058c6 A |
124 | |
125 | #header h1 { | |
126 | position: fixed; | |
127 | float: left; | |
128 | margin: 45px 0 0 0; | |
129 | width: 44%; | |
130 | height: 100px; | |
131 | text-align: right; | |
4ed6d1ba | 132 | } |
dfb058c6 A |
133 | |
134 | #header h1 a, #header h1 a:visited { | |
135 | /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */ | |
136 | display: -ms-flexbox; | |
137 | display: flex; | |
138 | flex-direction: column; | |
139 | justify-content: center; | |
140 | ||
141 | overflow: hidden; | |
142 | height: 100px; | |
143 | color: #b0ddce; | |
144 | text-decoration: none; | |
145 | z-index: 1; | |
146 | ||
147 | /* TODO: font? */ | |
4ed6d1ba | 148 | } |
dfb058c6 A |
149 | |
150 | #header h1 a:hover { | |
151 | color: #d1fff0; | |
152 | } | |
153 | ||
154 | #linkcount { | |
155 | position: fixed; | |
156 | top: 40px; | |
157 | right: 10px; | |
158 | color: #b0ddce; | |
159 | font-size: 0.8em; | |
160 | } | |
161 | ||
162 | #search { | |
163 | position: fixed; | |
164 | top: 55px; | |
165 | right: 10px; | |
166 | width: 44%; | |
167 | text-align: right; | |
168 | } | |
169 | ||
170 | #content { | |
171 | position: relative; | |
172 | box-shadow: 0 -2px 1em #797979; | |
173 | z-index: 2; | |
174 | background: url(../img/noise.png) #979797; | |
4ed6d1ba | 175 | } |