Changeset 105804 in spip-zone


Ignore:
Timestamp:
Aug 16, 2017, 5:34:00 PM (2 years ago)
Author:
marcimat@…
Message:

Une composition pour rendre plus étroit le texte d’un article
+ couleurs différentes sur les dégradés d’accueil : la saturation trop forte à partir du 4è article était désagréable.
On tente de faire un virage de couleur plutôt.

Location:
_squelettes_/html5up_solid_state
Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/html5up_solid_state/css/layout/_wrapper.scss

    r105729 r105804  
    151151        @for $i from 2 through _misc(max-wrapper-styles) {
    152152                $j: 3 * ($i - 1);
    153                 $color: desaturate(lighten(_palette(bg), $j), $j * 0.5);
     153                //$color: desaturate(lighten(_palette(bg), $j), $j * 0.5);
     154                $color: adjust_hue(_palette(bg), $i * 5);
    154155
    155156                &.style#{$i} {
     
    200201                @for $i from 2 through _misc(max-wrapper-styles) {
    201202                        $j: 15 * ($i - 1) / 100;
    202                         $color: saturate(darken(_palette(accent), $j), $j * 0.5);
     203                        //$color: saturate(darken(_palette(accent), $j), $j * 0.5);
     204                        $color: adjust_hue(darken(_palette(accent), $i * 2), $i * 3);
    203205
    204206                        &.style#{$i} {
  • _squelettes_/html5up_solid_state/css/theme.scss

    r105801 r105804  
    163163                }
    164164        }
     165        .colonne {
     166                .inner {
     167                        @include vendor('display', 'flex');
     168                        @include vendor('align-items', 'start');
     169                        @include vendor('flex-direction', 'row');
     170                        .image {
     171                                width:18em;
     172                                -ms-flex: 1;
     173                                padding-right:2em;
     174                                img {
     175                                        float:none;
     176                                        max-width: 100%;
     177                                        height: auto;
     178                                }
     179                        }
     180                        .content { width:100%; -ms-flex:2; }
     181                        @include breakpoint(small) {
     182                                flex-direction:column;
     183                                .image {
     184                                        width: 100%;
     185                                        img {
     186                                                margin: 0 auto (_size(element-margin) * 0.5) auto !important;
     187                                        }
     188                                }
     189                        }
     190                }
     191        }
    165192}
    166193
  • _squelettes_/html5up_solid_state/inclure/sections/article.html

    r105803 r105804  
    11<BOUCLE_article(ARTICLES){id_article}>
    2 <section id="rubrique_#ID_RUBRIQUE" class="wrapper[ (#ENV{class})][ (#ENV{position}|html5up_sections_css{#ENV{alt},#ENV{spot}})]">
     2<section id="rubrique_#ID_RUBRIQUE" class="wrapper[ (#ENV{class})][ (#ENV{colonne}|oui)colonne][ (#ENV{position}|html5up_sections_css{#ENV{alt},#ENV{spot}})]">
    33        <div class="inner">
    4                 [(#ENV{spot}|oui)
    5                         [<span href="#URL_ARTICLE" class="image">(#LOGO_ARTICLE_RUBRIQUE|html5up_image_reduire_carre{300})</span>]
     4                [(#ENV{spot}|ou{#ENV{colonne}}|oui)
     5                        [(#ENV{noimage}|non)
     6                                [<span href="#URL_ARTICLE" class="image">(#LOGO_ARTICLE_RUBRIQUE|html5up_image_reduire_carre{300})</span>]
     7                        ][(#ENV{noimage}|oui)
     8                                <span class="image"></span>
     9                        ]
    610                        <div class="content">
    711                ]
    8                 [<div class="chapo #EDIT{chapo}">(#CHAPO|adaptive_images)</div>]
    9                 [<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images)</div>]
    10                 [<div class="ps #EDIT{ps}">(#PS|adaptive_images)</div>]
    11                 [<div class="notes">(#NOTES)</div>]
    12                 [(#ENV{spot}|oui)
     12
     13                        [<div class="chapo #EDIT{chapo}">(#CHAPO|adaptive_images)</div>]
     14                        [<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images)</div>]
     15                        [<div class="ps #EDIT{ps}">(#PS|adaptive_images)</div>]
     16                        [<div class="notes">(#NOTES)</div>]
     17
     18                [(#ENV{spot}|ou{#ENV{colonne}}|oui)
     19                                </div>
    1320                        </div>
    1421                ]
Note: See TracChangeset for help on using the changeset viewer.