source: spip-zone/_squelettes_/html5up_editorial/css/components/_list.scss @ 107460

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

ajout du squelette html5up editorial
README.txt :
Squelette SPIP pour intégrer le modèle Editorial de HTML5UP
https://html5up.net/editorial
Le squelette Solid State https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_solid_state
a été pris pour commencer celui-ci.

v1.0.0
Ce squelette n'utilise pour l'instant que les articles et les rubriques racines, sans sous-rubrique.

Conseil : utiliser Court-Circuit pour éviter la page rubrique s'il n'y a qu'un seul article dans une rubrique.

La page de configuration permet quelques réglages. On y défini le contenu de la page d'accueil, le premier article est le "héro", le second est le "majeur".
L'article héro : le titre, un résumé + le logo + un bouton "Lire la suite"
L'article majeur : le titre + le champ texte intégral. Si cet article est une "page unique" (plugin "Pages") il n'apparaîtra pas dans le menu. Pour rédiger le texte, un modèle permet d'afficher comme dans le thème de départ une icône de FontAwesome? et un texte en deux blocs par ligne. C'est le modèle <iconebloc|> qui prend quelques paramètres :

|icone=fa-rocket (ou tout autre icone de FontAwesome? http://fontawesome.io/icons/)
|iconetitre=le titre
|iconetexte=le texte

L'article héro de la colonne gauche est aussi désigné dans la page de configuration : on verra le titre, l'introduction et un lien vers la page. En utilisant le champ "Descriptif" des articles, on pourra rédiger le texte qui apparaît dans cette colonne gauche, qui pourra être différent des champs visible sur la page de l'article lui-même.
Le modèle <articleXX|resume> rendra le logo, le titre et un résumé de l'article XX, avec les parametres :

|affichertitre=non
|afficherlien=non

Un autre modèle permet d'insérer n'importe quel icône de FontAwesome? dans le flux d'un texte <icone> avec des parametres :

|icone=fa-rocket (ou tout autre icone de FontAwesome? http://fontawesome.io/icons/)
|taille=3em (ou 60px ou 150%)

Un problème js empêchait aléatoirement le script javscript/main.js de retirer la classe "is-loading" qui est placé sur la balise body (par ce même script). Ce petit soucis cause des prblèmes plus gros dans l'interface.
Un petit bout de code dans javascript/perso.js permet de retirer cette classe de manière plus sûre, mais c'est une rustine en attendant mieux.

TODO
Vérifier et adapter les modèles où qu'on les insère.
Retrouver le multilinguisme
Adapter les autres objets SPIP (mots, sites, brèves)

File size: 4.3 KB
Line 
1///
2/// Editorial by HTML5 UP
3/// html5up.net | @ajlkn
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5///
6
7/* List */
8
9        ol {
10                list-style: decimal;
11                margin: 0 0 _size(element-margin) 0;
12                padding-left: 1.25em;
13
14                li {
15                        padding-left: 0.25em;
16                }
17        }
18
19        ul {
20                list-style: disc;
21                margin: 0 0 _size(element-margin) 0;
22                padding-left: 1em;
23
24                li {
25                        padding-left: 0.5em;
26                }
27
28                &.alt {
29                        list-style: none;
30                        padding-left: 0;
31
32                        li {
33                                border-top: solid 1px _palette(border);
34                                padding: 0.5em 0;
35
36                                &:first-child {
37                                        border-top: 0;
38                                        padding-top: 0;
39                                }
40                        }
41                }
42
43                &.icons {
44                        cursor: default;
45                        list-style: none;
46                        padding-left: 0;
47
48                        li {
49                                display: inline-block;
50                                padding: 0 1em 0 0;
51
52                                &:last-child {
53                                        padding-right: 0;
54                                }
55
56                                .icon {
57                                        color: inherit;
58
59                                        &:before {
60                                                font-size: 1.25em;
61                                        }
62                                }
63                        }
64                }
65
66                &.contact {
67                        list-style: none;
68                        padding: 0;
69
70                        li {
71                                @include icon;
72                                border-top: solid 1px _palette(border);
73                                margin: 1.5em 0 0 0;
74                                padding: 1.5em 0 0 3em;
75                                position: relative;
76
77                                &:before {
78                                        color: _palette(accent);
79                                        display: inline-block;
80                                        font-size: 1.5em;
81                                        height: 1.125em;
82                                        left: 0;
83                                        line-height: 1.125em;
84                                        position: absolute;
85                                        text-align: center;
86                                        top: (1.5em / 1.5);
87                                        width: 1.5em;
88                                }
89
90                                &:first-child {
91                                        border-top: 0;
92                                        margin-top: 0;
93                                        padding-top: 0;
94
95                                        &:before {
96                                                top: 0;
97                                        }
98                                }
99
100                                a {
101                                        color: inherit;
102                                }
103                        }
104                }
105
106                &.actions {
107                        cursor: default;
108                        list-style: none;
109                        padding-left: 0;
110
111                        li {
112                                display: inline-block;
113                                padding: 0 (_size(element-margin) * 0.5) 0 0;
114                                vertical-align: middle;
115
116                                &:last-child {
117                                        padding-right: 0;
118                                }
119                        }
120
121                        &.small {
122                                li {
123                                        padding: 0 (_size(element-margin) * 0.25) 0 0;
124                                }
125                        }
126
127                        &.vertical {
128                                li {
129                                        display: block;
130                                        padding: (_size(element-margin) * 0.5) 0 0 0;
131
132                                        &:first-child {
133                                                padding-top: 0;
134                                        }
135
136                                        > * {
137                                                margin-bottom: 0;
138                                        }
139                                }
140
141                                &.small {
142                                        li {
143                                                padding: (_size(element-margin) * 0.25) 0 0 0;
144
145                                                &:first-child {
146                                                        padding-top: 0;
147                                                }
148                                        }
149                                }
150                        }
151
152                        &.fit {
153                                display: table;
154                                margin-left: (_size(element-margin) * -0.5);
155                                padding: 0;
156                                table-layout: fixed;
157                                width: calc(100% + #{(_size(element-margin) * 0.5)});
158
159                                li {
160                                        display: table-cell;
161                                        padding: 0 0 0 (_size(element-margin) * 0.5);
162
163                                        > * {
164                                                margin-bottom: 0;
165                                        }
166                                }
167
168                                &.small {
169                                        margin-left: (_size(element-margin) * -0.25);
170                                        width: calc(100% + #{(_size(element-margin) * 0.25)});
171
172                                        li {
173                                                padding: 0 0 0 (_size(element-margin) * 0.25);
174                                        }
175                                }
176                        }
177                }
178
179                &.pagination {
180                        cursor: default;
181                        list-style: none;
182                        padding-left: 0;
183
184                        li {
185                                display: inline-block;
186                                padding-left: 0;
187                                vertical-align: middle;
188
189                                > .page {
190                                        @include vendor('transition', (
191                                                'background-color #{_duration(transition)} ease-in-out',
192                                                'color #{_duration(transition)} ease-in-out'
193                                        ));
194                                        border-bottom: 0;
195                                        border-radius: _size(border-radius);
196                                        display: inline-block;
197                                        font-size: 0.8em;
198                                        font-weight: _font(weight-bold);
199                                        height: 2em;
200                                        line-height: 2em;
201                                        margin: 0 0.125em;
202                                        min-width: 2em;
203                                        padding: 0 0.5em;
204                                        text-align: center;
205
206                                        &.active {
207                                                background-color: _palette(accent);
208                                                color: _palette(bg) !important;
209
210                                                &:hover {
211                                                        background-color: lighten(_palette(accent), 3);
212                                                }
213
214                                                &:active {
215                                                        background-color: darken(_palette(accent), 3);
216                                                }
217                                        }
218                                }
219
220                                &:first-child {
221                                        padding-right: 0.75em;
222                                }
223
224                                &:last-child {
225                                        padding-left: 0.75em;
226                                }
227                        }
228
229                        @include breakpoint(xsmall) {
230                                li {
231                                        &:nth-child(n+2):nth-last-child(n+2) {
232                                                display: none;
233                                        }
234
235                                        &:first-child {
236                                                padding-right: 0;
237                                        }
238                                }
239                        }
240                }
241        }
242
243        dl {
244                margin: 0 0 _size(element-margin) 0;
245
246                dt {
247                        display: block;
248                        font-weight: _font(weight-bold);
249                        margin: 0 0 (_size(element-margin) * 0.5) 0;
250                }
251
252                dd {
253                        margin-left: _size(element-margin);
254                }
255        }
Note: See TracBrowser for help on using the repository browser.