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

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

adapter le modèle <iconebloc> aux petits écrans + z

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