source: spip-zone/_squelettes_/html5up_solid_state/css/theme.scss @ 115514

Last change on this file since 115514 was 115514, checked in by jeanmarie.listes@…, 9 months ago

Ajustements CSS

File size: 5.3 KB
Line 
1@import 'css/libs/vars';
2@import 'css/vars_spip';
3@import 'css/libs/functions';
4@import 'css/libs/mixins';
5@import 'css/libs/skel';
6
7@include skel-breakpoints((
8                xlarge: '(max-width: 1680px)',
9                large: '(max-width: 1280px)',
10                medium: '(max-width: 980px)',
11                small: '(max-width: 736px)',
12                xsmall: '(max-width: 640px)',
13                xxsmall: '(max-width: 360px)'
14));
15
16$border-hover: dotted 1px _palette(fg-light);
17
18.hide, .bugajaxie {
19        display: none;
20}
21
22#header {
23        padding-right:125px;
24        height:auto;
25        h1 {
26                display: inline-block;
27                .spip_logo {
28                        margin-right: 1em;
29                        border-radius: 100%;
30                        vertical-align: middle;
31                        border: 1px solid rgba(255, 255, 255, .5);
32                }
33        }
34
35        .breadcrumb {
36                display: inline-block;
37                & > span,
38                & > a {
39                        position: relative;
40                        display: inline-block; /* positionner correctement &:before qui est en position:absolute; */
41                        margin-left: 1.3em;
42                        border:0;
43                        &:before {
44                                content: "❯";
45                                color: _palette(fg);
46                                opacity: 0.7;
47                                position: absolute;
48                                left: -1em;
49                        }
50                        strong.on {
51                                font-weight: normal;
52                        }
53                }
54        }
55
56        .menu_lang {
57                margin-right: 10em;
58                line-height: 1.5em;
59                margin-top: .7em;
60                a {
61                        border-bottom: $border-hover;
62                        padding: 0;
63                        text-transform: none;
64                        opacity: .8;
65                        &:hover, &:active {
66                                opacity: 1;
67                                border-color: _palette(fg-bold);
68                        }
69                        &.on {
70                                opacity: 1;
71                        }
72                        & + a {
73                                margin-left: 1em;
74                        }
75                }
76                @include breakpoint(xsmall) {
77                        margin-right: 4em;
78                }
79        }
80}
81
82#banner {
83        p {
84                text-transform: none;
85                font-size: 1.2em;
86                line-height: 1.75;
87        }
88        .inner .presentation {
89                @include vendor('display', 'flex');
90                @include vendor('align-items', 'start');
91                @include vendor('flex-direction', 'row');
92
93                .logo {
94                        margin: 0 _size(section-spacing, large) _size(element-margin) 0;
95                        width: 22em;
96                        overflow: hidden;
97                        -ms-flex: 1;
98
99                        img {
100                                border-radius: 100%;
101                                width: 100%;
102                                max-height:100%;
103                        }
104                }
105                .content {
106                        width: 100%;
107                        -ms-flex: 2;
108                        h2 {
109                                margin-top: 2em;
110                        }
111                        .surtitre {
112                                font-size: 1.5em;
113                                margin-bottom: .2em;
114                                margin-top: 1em;
115                        }
116                        .surtitre + h2 {
117                                margin-top: 0;
118                        }
119                        .soustitre {
120                                font-size: 1.5em;
121                                margin-top: -0.8em;
122                                margin-bottom: 1em;
123                        }
124                }
125        }
126        @include breakpoint(xsmall) {
127                .inner .presentation {
128                        display: block;
129                        .logo {
130                                margin:    0 auto (_size(element-margin) * 0.5) auto !important;
131                                max-width: 85%;
132                                width:     12em;
133                                text-align:center;
134                        }
135                }
136        }
137}
138
139#wrapper {
140        .inner {
141                .content {
142                        .surtitre {
143                                font-size: 1.5em;
144                                margin-bottom: .2em;
145                                margin-top: 1em;
146                        }
147                        .surtitre + h2 {
148                                margin-top: 0;
149                        }
150                        .soustitre {
151                                font-size: 1.5em;
152                                margin-top: -0.8em;
153                                margin-bottom: 1em;
154                        }
155                }
156                .chapo {
157                        font-size: 1.2em;
158                        letter-spacing: 0.1em;
159                }
160                .ps, .notes {
161                        border-top:1px solid rgba(255, 255, 255, .5);
162                        margin:1em auto 0 0;
163                        padding-top:1em;
164                        font-size: .9em;
165                        clear: both;
166                }
167                .notes {
168                        width:60%;
169                }
170        }
171        .colonne {
172                .inner {
173                        @include vendor('display', 'flex');
174                        @include vendor('align-items', 'start');
175                        @include vendor('flex-direction', 'row');
176                        .image {
177                                width:18em;
178                                -ms-flex: 1;
179                                padding-right:2em;
180                                img {
181                                        float:none;
182                                        max-width: 100%;
183                                        height: auto;
184                                }
185                        }
186                        .content { width:100%; -ms-flex:2; }
187                        @include breakpoint(small) {
188                                flex-direction:column;
189                                .image {
190                                        width: 100%;
191                                        img {
192                                                margin: 0 auto (_size(element-margin) * 0.5) auto !important;
193                                        }
194                                }
195                        }
196                }
197        }
198}
199
200.features.petit {
201        article {
202                display: inline-block;
203                width: calc(32% - #{_size(section-spacing, large) * 0.5});
204                &:nth-child(3n) {
205                        margin-right: 0 !important;
206                }
207                &:nth-child(2n) {
208                        margin-right: _size(section-spacing, large);
209                }
210        }
211        @include breakpoint(medium) {
212                article {
213                        width:  calc(32% - #{_size(section-spacing, medium) * 0.5});
214                        &:nth-child(2n) {
215                                margin-right: _size(section-spacing, medium);
216                        }
217                        &:nth-child(3n) {
218                                margin-right: 0 !important;
219                        }
220                }
221        }
222        @include breakpoint(small) {
223                article {
224                        width:  calc(50% - #{_size(section-spacing, small) * 0.5} - 1px);
225                        &:nth-child(3n) {
226                                margin-right: _size(section-spacing, small) !important;
227                        }
228                        &:nth-child(2n) {
229                                margin-right: 0 !important;
230                        }
231                }
232        }
233        @include breakpoint(xsmall) {
234                display: block;
235                article {
236                        width:  100%;
237                        margin: 0 0 _size(element-margin) 0 !important;
238                }
239        }
240}
241
242.citation {
243        @include vendor('display', 'flex');
244        @include vendor('justify-content', 'center');
245        margin:5em auto 3em;
246        font-size:2em;
247        position:relative;
248        blockquote {
249                width:auto;
250                border: none;
251                margin: 0;
252                padding: 0;
253                max-width:15em;
254        }
255        @include breakpoint(xsmall) {
256                font-size:1.5em;
257        }
258}
259#banner {
260        .citation {
261                font-size:1.25em;
262                margin:1em 0 0;
263                blockquote {
264                        max-width:100%;
265                }
266        }
267}
268
269q::before {
270        content: open-quote;
271}
272q::after {
273        content: close-quote;
274}
275:lang(fr) > q {
276        quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
277}
278q {
279        quotes: "\201C" "\201D" "\2018" "\2019";
280}
281dl, dt {
282        clear:both;
283}
284
285.liste.documents_joints .liste-items {
286        padding-left: 0;
287}
288
289/** admin */
290#spip-admin.spip-admin-bloc,
291#spip-admin.spip-admin-float {
292        z-index: 10001;
293        right: 10px;
294        top: 4.1em;
295
296        .spip-admin-boutons {
297                border-radius: 5px;
298                background-color: rgba(255, 255, 255, .05);
299                border: 1px solid rgba(255, 255, 255, .2);
300                color: inherit;
301        }
302        @include breakpoint(xsmall) {
303                display: none;
304        }
305}
306
307
308@media (max-width:640px) {
309        #header {
310                padding-right:50px;
311        }
312}
Note: See TracBrowser for help on using the repository browser.