Changeset 107708 in spip-zone


Ignore:
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:
1 deleted
2 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/integraal/theme/trunk/scss/base/_rythm.scss

    r107696 r107708  
    22 * Contrôle du rythme vertical
    33 *
    4  * Définition des tailles de police, des interlignes, et des marges inférieures des principaux éléments
     4 * Définition des tailles de police, des interlignes et des marges inférieures pour obtenir un rythme vertical harmonieux.
    55 * Basé sur Shevy : https://kyleshevlin.github.io/shevy/
    66 *
    77 * @notes
    8  * - Il faut passer *après* Tinytypo.
     8 * - Il faut configurer le rythme vertical APRÈS Tinytypo.
     9 * - 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.).
     10 * - Pour chaque variante $shevy-[truc], il vaut mieux redéclarer toutes les variables,
     11 * sinon ça prend celles pas défaut (pas celles qu'on a mis nous dans le $shevy de base)
    912 * - Pour définir des marges dans d'autres composants du projet, utiliser la mixin bs(N)
    1013**/
    1114
     15/**
     16 * ================
     17 * 1) Configuration
     18 * ================
     19**/
     20
     21/* Presets des tailles des titres (pour aider, pas obligatoire) */
     22$BASIC_SHEVY:      (2.5,       2.1,     1.8,   1.5,   1.25,  1);
     23$MINOR_SECOND:     (1.382,     1.295,   1.214, 1.138, 1.067, 1);
     24$MAJOR_SECOND:     (1.802,     1.602,   1.424, 1.266, 1.125, 1);
     25$MINOR_THIRD:      (2.488,     2.074,   1.728, 1.44,  1.2,   1);
     26$MAJOR_THIRD:      (3.052,     2.441,   1.953, 1.563, 1.25,  1);
     27$PERFECT_FOURTH:   (4.209,     3.157,   2.369, 1.777, 1.333, 1);
     28$AUGMENTED_FOURTH: (5.653,     3.998,   2.827, 1.999, 1.414, 1);
     29$PERFECT_FIFTH:    (7.594,     5.063,   3.375, 2.25,  1.5,   1);
     30$MINOR_SIXTH:      (10.486,    6.554,   4.096, 2.56,  1.6,   1);
     31$GOLDEN_SECTION:   (11.089,    6.854,   4.236, 2.618, 1.618, 1);
     32
     33/* Base (mobile first)*/
     34$shevy: (
     35  base-font-size: $typo-font-size, // Taille de police, defaut : 14px
     36  base-line-height: $typo-line-height, // Interlignage, defaut : 1.5
     37  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)
     38  margin-bottom: true, // Ajouter des marges inférieures aux titres, defaut : true
     39  proximity: false, // Ressérer le contenu (proximity effect), defaut : false
     40  proximity-factor: .85 // Facteur pour ressérer le contenu, defaut : .85
     41);
     42
     43/* Bureaux et plus */
     44$shevy-desktop-up: (
     45  base-font-size: $typo-font-size * 1.2,
     46  base-line-height: $typo-line-height,
     47  base-font-scale: $MAJOR_SECOND,
     48  margin-bottom: true,
     49  proximity: false,
     50  proximity-factor: .85
     51);
     52
     53
     54/**
     55 * =================
     56 * 2) Mise en oeuvre
     57 * =================
     58**/
    1259
    1360/**
    1461 * Base (mobile first)
    1562**/
    16 
    17 
    18 // hn (font-size, line-height, margin-bottom)
    19 @include headings;
    20 
    21 // body (font-size, line-height)
    22 @include body;
    23 
    24 // p ol ul pre (font-size, line-height, margin-bottom)
    25 @include content;
    26 
     63@include body; // body (font-size, line-height)
     64@include headings; // hn (font-size, line-height, margin-bottom)
     65@include content; // p ol ul pre (font-size, line-height, margin-bottom)
    2766
    2867/**
    29  * Responsive
     68 * Bureaux et plus
    3069**/
    31 
    32 @include gridle_state( desktop ) {
    33   @include headings($shevy-desktop);
    34   @include body($shevy-desktop);
    35   @include content($shevy-desktop);
     70@include gridle_state( desktop-up ) {
     71  @include headings($shevy-desktop-up);
     72  @include body($shevy-desktop-up);
     73  @include content($shevy-desktop-up);
    3674}
    37 @include gridle_state( large ) {
    38   @include headings($shevy-large);
    39   @include body($shevy-large);
    40   @include content($shevy-large);
    41 }
  • _squelettes_/integraal/theme/trunk/scss/base/_variables.scss

    r107693 r107708  
    22 * Définition des variables du projet
    33 *
    4  * Voir aussi les fichiers xxx-settings.scss
    54**/
    65
     
    1615
    1716/* Variables de typographie (voir aussi dans rythm-settings) */
    18 $typo-font-size: 16px;
     17$typo-font-size: 1em;
    1918$typo-line-height: 1.5;
    2019
Note: See TracChangeset for help on using the changeset viewer.