source: spip-zone/_galaxie_/galactic/galactic/scss/base/_main.scss @ 105541

Last change on this file since 105541 was 105541, checked in by nicolas.dorigny@…, 3 years ago

Un squelette basé sur le design créé par Jordan
cf la capture écran sur l'article https://contrib.spip.net/Refonte-de-l-identite-graphique

Ce squelette Z et SCSS est conçu pour être surchargé par des thèmes spécialisé, sous la forme d'autres plugins à installer.

Ce ne sont pas des thèmes au sens de ceux qui existent pour la dist ou pour Spipr, ces thèmes là peuvent déclarer des dépendances, des configurations, des options etc.
Ils s'installent donc comme des plugins et pas avec Zen-Garden.

Deux thèmes pour l'instant : programmer.spip.net, et spip.net

C'est un travail en cours, j'uploade tout ça sur la zone pour le partager et en discuter.

TODO : une documentation du squelette et de la façon de créer un thème (surcharges).

  • Property svn:executable set to *
File size: 3.8 KB
Line 
1*,
2*:before,
3*:after {
4  -webkit-box-sizing: border-box;
5  -moz-box-sizing:    border-box;
6  box-sizing:         border-box;
7}
8
9html {
10  font-size:                100.01%;
11  -ms-text-size-adjust:     100%;
12  -webkit-text-size-adjust: 100%;
13}
14
15body {
16  line-height: $typo-line-height;
17  background:  white;
18}
19
20/* Titraille / Intertitres */
21
22h1, .h1,
23h2, .h2,
24h3, .h3,
25h4, .h4,
26h5, .h5,
27h6, .h6 {
28  display:     block;
29  font-size:   100%;
30  font-style:  normal;
31  font-weight: bold;
32  line-height: 1.2;
33  padding:     0;
34  margin:      0 0 0.8em 0;
35}
36
37/* Hyperlinks
38[fr] Signaletique des hyperliens : http://letrainde13h37.fr/43/signaletique-hyperliens/ */
39a {
40  background: transparent;
41  color:      inherit;
42  &:link {
43        transition: .3s;
44  }
45  &:visited {
46        color: inherit;
47  }
48  &:focus {
49        outline:     thin dotted;
50        text-shadow: none;
51  }
52  &:hover {
53        outline: 0;
54        cursor:  pointer;
55  }
56  &:active {
57        outline: 0;
58  }
59  &:after,
60  &:before,
61  & small {
62        font-size: 90%;
63        opacity:   .9;
64  }
65}
66
67ul, ol {
68  list-style: none;
69  margin:     0;
70  padding:    0;
71}
72
73ul, ol {
74  margin-left: $typo-margin-vertical;
75}
76
77ul {
78  list-style-type: square;
79}
80
81ol {
82  list-style-type: decimal;
83}
84
85ul ul, ol ol {
86  margin-bottom: 0;
87}
88
89dt {
90  font-weight: bold;
91}
92
93em, i {
94  font-style: italic;
95}
96
97strong, b {
98  font-weight: bold;
99}
100
101small,
102.small {
103  @include small();
104}
105
106sup,
107.sup {
108  top: -0.5em;
109}
110
111sub,
112.sub {
113  bottom: -0.25em;
114}
115
116p,
117ul,
118ol,
119dl,
120dd,
121blockquote,
122address,
123pre,
124table,
125fieldset,
126.pagination {
127  @include text-block();
128}
129
130img {
131  max-width:              100% !important;
132  height:                 auto !important;
133  width:                  auto \9
134  !important; /* IE7-8 need help adjusting responsive images */
135  vertical-align:         middle;
136  border:                 0;
137  -ms-interpolation-mode: bicubic;
138}
139
140/* Typography for small screens
141[fr] http://www.alsacreations.com/astuce/lire/1177 */
142@media (max-width: em(640px)) {
143  /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
144  img,
145  table,
146  td,
147  blockquote,
148  code,
149  pre,
150  textarea,
151  input,
152  iframe,
153  object,
154  embed,
155  video {
156        max-width: 100% !important;
157  }
158  /* gestion des mots longs */
159  textarea,
160  table,
161  td,
162  th,
163  pre,
164  code,
165  samp {
166        word-wrap: break-word;
167        /* cesure forcee */
168  }
169  pre,
170  code,
171  samp {
172        white-space: pre-line;
173        /* passage a la ligne specifique pour les elements a chasse fixe */
174  }
175}
176
177/* orientation iOS5 font-size fix */
178@media (orientation: landscape) and (max-device-width: em(640px)) {
179  html,
180  body {
181        -webkit-text-size-adjust: 100%;
182  }
183}
184
185/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */
186
187/*
188 * What follows is the result of much research on cross-browser styling.
189 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
190 * Kroc Camen, and the H5BP dev community and team.
191 */
192
193/*
194 * Remove text-shadow in selection highlight:
195 * https://twitter.com/miketaylr/status/12228805301
196 *
197 * These selection rule sets have to be separate.
198 * Customize the background color to match your design.
199 */
200
201::-moz-selection {
202  background:  #B3D4FC;
203  text-shadow: none;
204}
205
206::selection {
207  background:  #B3D4FC;
208  text-shadow: none;
209}
210
211/*
212 * A better looking default horizontal rule
213 */
214hr {
215  display:    block;
216  height:     1px;
217  border:     0;
218  border-top: 1px solid #CCC;
219  margin:     1em 0;
220  padding:    0;
221  clear:      both;
222}
223
224/*
225 * Remove the gap between audio, canvas, iframes,
226 * images, videos and the bottom of their containers:
227 * https://github.com/h5bp/html5-boilerplate/issues/440
228 */
229audio,
230canvas,
231iframe,
232img,
233svg,
234video {
235  vertical-align: middle;
236}
237
238/*
239 * Remove default fieldset styles.
240 */
241fieldset {
242  border:  0;
243  margin:  0;
244  padding: 0;
245}
246
247/*
248 * Allow only vertical resizing of textareas.
249 */
250textarea {
251  resize: vertical;
252}
253
254input[type="search"] {
255  box-sizing: border-box;
256}
257
258address {
259  font-style: normal;
260}
Note: See TracBrowser for help on using the repository browser.