Changeset 107708 in spip-zone

Timestamp:

Nov 23, 2017, 11:09:27 AM (16 months ago)

Author:

tcharlss@…

Message:

[facepalm] taille des polices en em, pas en px. On merge les 2 fichiers pour le rythme vertical, et pour le responsive une seule variante de rythme pour les bureaux

Location:

_squelettes_/integraal/theme/trunk/scss/base

Files:

• _rythm-settings.scss (deleted)
• _rythm.scss (modified) (1 diff)
• _variables.scss (modified) (2 diffs)

_squelettes_/integraal/theme/trunk/scss/base/_rythm.scss

@@ -2 +2 @@
  * Contrôle du rythme vertical
  *
- * Définition des tailles de police, des interlignes, et des marges inférieures des principaux éléments
+ * Définition des tailles de police, des interlignes et des marges inférieures pour obtenir un rythme vertical harmonieux.
  * Basé sur Shevy : https://kyleshevlin.github.io/shevy/
  *
  * @notes
- * - Il faut passer *après* Tinytypo.
+ * - Il faut configurer le rythme vertical APRÈS Tinytypo.
+ * - Les variantes $shevy-[truc] ne sont pas que pour le responsive, elles peuvent être utilisées pour n'importe quel sélecteur (blocs de mises en avant, etc.).
+ * - Pour chaque variante $shevy-[truc], il vaut mieux redéclarer toutes les variables,
+ * sinon ça prend celles pas défaut (pas celles qu'on a mis nous dans le $shevy de base)
  * - Pour définir des marges dans d'autres composants du projet, utiliser la mixin bs(N)
 **/
 
+/**
+ * ================
+ * 1) Configuration
+ * ================
+**/
+
+/* Presets des tailles des titres (pour aider, pas obligatoire) */
+$BASIC_SHEVY:      (2.5,       2.1,     1.8,   1.5,   1.25,  1);
+$MINOR_SECOND:     (1.382,     1.295,   1.214, 1.138, 1.067, 1);
+$MAJOR_SECOND:     (1.802,     1.602,   1.424, 1.266, 1.125, 1);
+$MINOR_THIRD:      (2.488,     2.074,   1.728, 1.44,  1.2,   1);
+$MAJOR_THIRD:      (3.052,     2.441,   1.953, 1.563, 1.25,  1);
+$PERFECT_FOURTH:   (4.209,     3.157,   2.369, 1.777, 1.333, 1);
+$AUGMENTED_FOURTH: (5.653,     3.998,   2.827, 1.999, 1.414, 1);
+$PERFECT_FIFTH:    (7.594,     5.063,   3.375, 2.25,  1.5,   1);
+$MINOR_SIXTH:      (10.486,    6.554,   4.096, 2.56,  1.6,   1);
+$GOLDEN_SECTION:   (11.089,    6.854,   4.236, 2.618, 1.618, 1);
+
+/* Base (mobile first)*/
+$shevy: (
+  base-font-size: $typo-font-size, // Taille de police, defaut : 14px
+  base-line-height: $typo-line-height, // Interlignage, defaut : 1.5
+  base-font-scale: $MINOR_SECOND, // Facteurs des tailles des titres, du h1 au h6, defaut : (2.5, 2.1, 1.8, 1.5, 1.25, 1)
+  margin-bottom: true, // Ajouter des marges inférieures aux titres, defaut : true
+  proximity: false, // Ressérer le contenu (proximity effect), defaut : false
+  proximity-factor: .85 // Facteur pour ressérer le contenu, defaut : .85
+);
+
+/* Bureaux et plus */
+$shevy-desktop-up: (
+  base-font-size: $typo-font-size * 1.2,
+  base-line-height: $typo-line-height,
+  base-font-scale: $MAJOR_SECOND,
+  margin-bottom: true,
+  proximity: false,
+  proximity-factor: .85
+);
+
+
+/**
+ * =================
+ * 2) Mise en oeuvre
+ * =================
+**/
 
 /**
  * Base (mobile first)
 **/
-
-
-// hn (font-size, line-height, margin-bottom)
-@include headings;
-
-// body (font-size, line-height)
-@include body;
-
-// p ol ul pre (font-size, line-height, margin-bottom)
-@include content;
-
+@include body; // body (font-size, line-height)
+@include headings; // hn (font-size, line-height, margin-bottom)
+@include content; // p ol ul pre (font-size, line-height, margin-bottom)
 
 /**
- * Responsive
+ * Bureaux et plus
 **/
-
-@include gridle_state( desktop ) {
-  @include headings($shevy-desktop);
-  @include body($shevy-desktop);
-  @include content($shevy-desktop);
+@include gridle_state( desktop-up ) {
+  @include headings($shevy-desktop-up);
+  @include body($shevy-desktop-up);
+  @include content($shevy-desktop-up);
 }
-@include gridle_state( large ) {
-  @include headings($shevy-large);
-  @include body($shevy-large);
-  @include content($shevy-large);
-}

_squelettes_/integraal/theme/trunk/scss/base/_variables.scss

@@ -2 +2 @@
  * Définition des variables du projet
  *
- * Voir aussi les fichiers xxx-settings.scss
 **/
 
@@ -16 +15 @@
 
 /* Variables de typographie (voir aussi dans rythm-settings) */
-$typo-font-size: 16px;
+$typo-font-size: 1em;
 $typo-line-height: 1.5;