Changeset 107693 in spip-zone


Ignore:
Timestamp:
Nov 22, 2017, 12:44:38 AM (3 years ago)
Author:
tcharlss@…
Message:

Affinage de shevy (rythme vertical).

Location:
_squelettes_/integraal/theme/trunk/scss
Files:
5 edited

Legend:

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

    r107670 r107693  
    22 * Les mixins utilisées dans le projet
    33**/
     4
     5// Afficher la grille horizontale (pour le dev)
     6@mixin debug_rythm() {
     7  @if $debug_rythm {
     8    $baseline: base-spacing-math() / (base-spacing-math() * 0 + 1);
     9    $baseline_desktop: base-spacing-math($shevy-desktop) / (base-spacing-math($shevy-desktop) * 0 + 1);
     10    $baseline_large: base-spacing-math($shevy-large) / (base-spacing-math($shevy-large) * 0 + 1);
     11    // base
     12    background-image: url("//basehold.it/i/#{$baseline}");
     13    // bureaux
     14    @include gridle_state( desktop ) {
     15      background-image: url("//basehold.it/i/#{$baseline_desktop}");
     16    }
     17    // large
     18    @include gridle_state( large ) {
     19      background-image: url("//basehold.it/i/#{$baseline_large}");
     20    }
     21  }
     22}
  • _squelettes_/integraal/theme/trunk/scss/base/_rythm-settings.scss

    r107690 r107693  
    22 * Configuration du rythme vertical
    33 *
    4  * Définition des breakpoints, des gouttières, etc.
    5  *
    6  * [FIXME] Pour les variantes des breakpoints, est-ce qu'il faut à chaque fois *tout* redéfinir
    7  * ou juste les propriétés qui changent ?
     4 * @Notes
     5 * Pour chaque variante $shevy-[truc], il vaut mieux redéclarer toutes les variables,
     6 * sinon ça prend celles pas défaut (pas celles qu'on a mis nous dans le $shevy de base)
    87**/
    98
     9/* Variable pour afficher la grille horizontale pendant le dev */
     10$debug_rythm: false;
     11
     12/* Presets des tailles des titres (pour aider, pas obligatoire) */
     13$BASIC_SHEVY:      (2.5,       2.1,     1.8,   1.5,   1.25,  1);
     14$MINOR_SECOND:     (1.382,     1.295,   1.214, 1.138, 1.067, 1);
     15$MAJOR_SECOND:     (1.802,     1.602,   1.424, 1.266, 1.125, 1);
     16$MINOR_THIRD:      (2.488,     2.074,   1.728, 1.44,  1.2,   1);
     17$MAJOR_THIRD:      (3.052,     2.441,   1.953, 1.563, 1.25,  1);
     18$PERFECT_FOURTH:   (4.209,     3.157,   2.369, 1.777, 1.333, 1);
     19$AUGMENTED_FOURTH: (5.653,     3.998,   2.827, 1.999, 1.414, 1);
     20$PERFECT_FIFTH:    (7.594,     5.063,   3.375, 2.25,  1.5,   1);
     21$MINOR_SIXTH:      (10.486,    6.554,   4.096, 2.56,  1.6,   1);
     22$GOLDEN_SECTION:   (11.089,    6.854,   4.236, 2.618, 1.618, 1);
    1023
    1124/* Base */
    1225$shevy: (
    13   base-font-size: $typo-font-size,
     26  base-font-size: $typo-font-size, // Taille de police standard, defaut : 14px
     27  base-line-height: $typo-line-height, // Interligne standard,  defaut : 1.5
     28  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)
     29  margin-bottom: true, // Ajouter des marges inférieures aux titres, defaut : true
     30  proximity: false, // Ressérer le contenu (proximity effect), defaut : false
     31  proximity-factor: .85 // Facteur pour ressérer le contenu, defaut : .85
     32);
     33
     34/* Sur bureaux */
     35$shevy-desktop: (
     36  base-font-size: 18px,
    1437  base-line-height: $typo-line-height,
    15   base-font-scale: (2.5, 2.1, 1.8, 1.5, 1.25, 1),
     38  base-font-scale: $MAJOR_SECOND,
    1639  margin-bottom: true,
    1740  proximity: false,
     
    1942);
    2043
    21 /* Sur bureaux */
    22 $shevy-desktop: (
    23   base-font-size: $typo-font-size * 1.2,
    24 );
    25 
    2644/* Sur bureaux larges */
    2745$shevy-large: (
    28   base-font-size: $typo-font-size * 1.33,
     46  base-font-size: 20px,
     47  base-line-height: $typo-line-height,
     48  base-font-scale: $MINOR_THIRD,
     49  margin-bottom: true,
     50  proximity: false,
     51  proximity-factor: .85
    2952);
  • _squelettes_/integraal/theme/trunk/scss/base/_rythm.scss

    r107690 r107693  
    66 *
    77 * @notes
    8  * - Il faut un reset pour virer les marges par défaut (celles en haut)
    98 * - Il faut passer *après* Tinytypo.
    10  * - Pour définir des marges ailleurs dans le projet, utiliser la mixin bs(N)
     9 * - Pour définir des marges dans d'autres composants du projet, utiliser la mixin bs(N)
    1110**/
    1211
     
    4140  @include content($shevy-large);
    4241}
     42
     43
     44/**
     45 * Debug (uniquement si $debug_rythm = true)
     46**/
     47html {
     48  @include debug_rythm();
     49}
  • _squelettes_/integraal/theme/trunk/scss/base/_variables.scss

    r107690 r107693  
    1515$couleur-lien: $couleur-beige;
    1616
    17 /* Variables de typographie */
    18 $typo-font-size: 1em; // = taille du texte définie dans Tinytypo
     17/* Variables de typographie (voir aussi dans rythm-settings) */
     18$typo-font-size: 16px;
    1919$typo-line-height: 1.5;
    20 //$typo-margin-vertical: 1em; // Laisser Shevy s'occuper du rythme vertical
    21 $typo-font-text: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Geneva", "Verdana", sans-serif, sans; // Famille du texte principal
    22 $typo-font-heading: "Arial Black", "Arial Bold", "Gadget", sans-serif, sans; // Familles des titres
    23 $typo-font-alt: "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", "Georgia", serif;; // Familles des textes alternatifs (par ex. chapos, sous-titre etc.)
     20
     21/* Familles de polices */
     22$typo-font-text: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Geneva", "Verdana", sans-serif, sans; // Texte principal
     23$typo-font-heading: "Arial Black", "Arial Bold", "Gadget", sans-serif, sans; // Titres
     24$typo-font-alt: "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", "Georgia", serif;; // Textes alternatifs (par ex. chapos, sous-titre etc.)
  • _squelettes_/integraal/theme/trunk/scss/theme.scss

    r107692 r107693  
    1818@import "base/rythm-settings"; // configuration du rythme vertical
    1919//@import "frameworks/sassy-buttons/sassy-buttons"; // mixins pour des boutons faciles - http://jaredhardy.com/sassy-buttons
     20@import "base/mixins"; // mixins du projet
    2021
    2122
Note: See TracChangeset for help on using the changeset viewer.