source: spip-zone/_squelettes_/html5up_editorial/css/theme.scss @ 108041

Last change on this file since 108041 was 108041, checked in by chankalan@…, 19 months ago

résoudre conflit css entre les crayons et le modèle <iconebloc>
usage du modèle avec positionnement |left et |right

File size: 3.4 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@import 'css/components/image';
7
8/* adapter le theme Editorial pour SPIP */
9.arbo {
10        font-size:80%;
11        a, strong {
12                color:_palette(fg-light);
13        }
14}
15.pagination {
16        text-align:center;
17        font-size:110%;
18        border-top:1px solid _palette(border);
19        padding-top:1em;
20        margin-top:3em;
21}
22hr.spip {
23        clear:both;
24}
25/* header */
26#header {
27        .spip_logo_left {
28                margin-bottom:0;
29        }
30}
31/* sidebar */
32#sidebar {
33        #menu a { /* rehausser le contrast trop faible */
34                color:_palette(fg-bold);
35        }
36        .contact_form {
37                li { border:0; }
38        }
39}
40/* content */
41#main {
42        > .inner > section {
43                clear:both;
44                &:after {
45                        display:block;
46                        content:'';
47                        clear:both;
48                }
49        }
50        .chapo, .texte, .ps {
51                margin-bottom:3em;
52                position:relative;
53                clear:both;
54                &:after {
55                        display:block;
56                        content:'';
57                        clear:both;
58                }
59        }
60        .texte { /* texte en 2 colonnes, en attendant mieux (mixin ?) */
61                -moz-column-count: 2;
62                -webkit-column-count: 2;
63                column-count: 2;
64                -moz-column-gap: 3em;
65                -webkit-column-gap: 3em;
66                column-gap: 3em;
67        }
68        .ps { /* ps en 3 colonnes, en attendant mieux (mixin ?) */
69                -moz-column-count: 3;
70                -webkit-column-count: 3;
71                column-count: 3;
72                -moz-column-gap: 3em;
73                -webkit-column-gap: 3em;
74                column-gap: 3em;
75        }
76        img {
77                max-width:100%;
78                height:auto;
79        }
80        .spip_documents img {
81                border-radius:0.375em;
82        }
83}
84.iconemodele {
85        color: _palette(accent);
86}
87article.feature.bloc {
88        width:47%;
89        padding:2.8em 0 0 3.4em;
90        margin-bottom:2em;
91        min-height: 170px;
92        &.right {
93                float:right;
94        }
95        &.left {
96                float:left;
97                clear:both;
98        }
99        .icon { 
100                display: inline-block;
101                min-width: 50px;
102                text-align: center;
103                &:after {
104                        display: block;
105                        position: absolute;
106                        height: 7em;
107                        width: 7em;
108                        left: 50%;
109                        top: 50%;
110                        margin: -3.5em 0 0 -3.5em;
111                        transform: rotate(45deg);
112                        border-radius: 0.25rem;
113                        border: solid 2px _palette(border);
114                        content: '';
115                }
116                &:before {
117                        color: _palette(accent);
118                        font-size: 2.75rem;
119                        position: relative;
120                        top: 0.05em;
121                }
122        }
123        .content {
124                margin: -6.7em 0 0 7.5em;
125                p { margin:0; }
126        }
127}
128.formulaire_crayon {
129        .crayon-boutons button,
130        input[type="submit"],
131        input[type="reset"], 
132        input[type="button"], 
133        button, 
134        .button, 
135        textarea, 
136        input { 
137                border-radius:0; box-shadow:0 0 0; border:0;
138        }
139}
140#colorbox {
141        input[type="submit"], input[type="reset"], input[type="button"], button, .button {
142                border-radius:0;
143                box-shadow:0 0 0;
144        }
145}
146/* footer */
147/* le logo de SPIP en taille et en couleur */
148#footer svg { height:16px; width:16px;
149        #sp, #ip {
150                fill:_palette(accent);
151        }
152}
153/* general */
154.offscreen {
155        position:absolute;
156        top:-9999em;
157        left:-9999em;
158        width:1px;
159        height:1px;
160        overflow:hidden;
161}
162@media (max-width:767px) {
163        /* content */
164        #main {
165                .texte, .ps { /* texte et ps en 1 colonnes, en attendant mieux (mixin ?) */
166                        -moz-column-count: 1;
167                        -webkit-column-count: 1;
168                        column-count: 1;
169                }
170        }
171        article.feature.bloc {
172                padding: 1.8em 0 0 1.5em;
173                min-height: 90px;
174                .icon {
175                        &:after {
176                                height: 5em;
177                                width: 5em;
178                                margin: -2.5em 0 0 -2.5em;
179                        }
180                        &:before {
181                                font-size: 1.75rem;
182                        }
183                }
184                .content {
185                        margin: -5em 0 0 6em;
186                }
187        }
188}
189@media (max-width:640px) {
190        article.feature.bloc {
191                width:100%;
192                &.left, &.right { float:none; }
193        }
194}
195@media (max-width:480px) {
196        .page_sommaire #banner {
197                display:block;
198                .image, .content {
199                        display:block;
200                        width:100%;
201                        margin-left:0;
202                        float:none;
203                        clear:both;
204                }
205        }
206}
Note: See TracBrowser for help on using the repository browser.