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

Last change on this file since 107733 was 107733, checked in by chankalan@…, 3 years ago

corrections css

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