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

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

trouver une place pour le slogan page sommaire
(emplacement du fil d'ariane)

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