Changeset 70387 in spip-zone


Ignore:
Timestamp:
Mar 4, 2013, 5:00:42 PM (6 years ago)
Author:
cyril@…
Message:

optimisation du thème avec bootstrap;

Location:
_squelettes_/spiplogo/theme
Files:
31 added
2 deleted
4 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/spiplogo/theme/body.html

    r70334 r70387  
    11<body>
    2         <div class="page">
    3                 <div class="container">
    4 
    5                         <div class="header" id="header">
    6                                 <INCLURE{fond=header/#ENV{type-page},env} />
     2<div class="page">
     3        <div class="container">
     4                <div class="header" id="header">
     5                        <INCLURE{fond=header/#ENV{type-page},env} />
     6                </div>
     7                [<div class="navbar navbar-fixed-top navbar-responsive center" id="nav">
     8                        (#INCLURE{fond=inclure/nav,env}|navbar_responsive)
     9                </div>]
     10                <div class="row">
     11                        <div class="content span8 " id="content">
     12                                <INCLURE{fond=fil_ariane/#ENV{type-page},env} />
     13                                <INCLURE{fond=content/#ENV{type-page},env} />
    714                        </div>
    8                 </div>
    9                         <div class="navbar navbar-inverse row" id="nav">
    10                                 <div class="navbar-wrap span12">
    11                                 <INCLURE{fond=inclure/nav,env} />
    12                                 </div>
    13                         </div>
    14                 <div class="container">
    15                         <div class="row wrapper">
    16                                 <div class="content primary span8" id="content">
    17                                         <INCLURE{fond=breadcrumb/#ENV{type-page},env} />
    18                                         <INCLURE{fond=content/#ENV{type-page},env} />
    19                                 </div>
    20                                 <div class="aside secondary span3" id="aside">
    21                                         <INCLURE{fond=aside/#ENV{type-page},env} />
    22                                 </div>
    23                                 <div class="extra secondary span3" id="extra">
    24                                         <INCLURE{fond=extra/#ENV{type-page},env} />
    25                                 </div>
     15                        <div class="aside secondary col span3 offset1" id="aside">
     16                                <INCLURE{fond=aside/#ENV{type-page},env} />
     17                                <INCLURE{fond=extra/#ENV{type-page},env} />
    2618                        </div>
    2719                </div>
    2820                <div class="footer" id="footer">
    29                         <div class="container inner">
     21                        [<div class="navbar navbar-fixed-bottom navbar-responsive center" id="nav-bottom">
     22                                <div class="menu-conteneur navbar-inner ">
     23                                (#INCLURE{fond=inclure/menu,env, identifiant=etapes}|navbar_responsive{nav-bottom})
     24                                </div>
     25                        </div>]
    3026                        <INCLURE{fond=footer/#ENV{type-page},env} />
    31                         </div>
     27
    3228                </div>
    3329        </div>
     30</div>
    3431</body>
  • _squelettes_/spiplogo/theme/css/theme.less

    r70334 r70387  
    11@import "css/variables.less";
    22
     3body { padding-top: 50px; }
     4
     5// Typographie
     6@font-face {
     7  font-family: 'SansationRegular';
     8  src: url('fonts/Sansation_Regular-webfont.eot');
     9  src: url('fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
     10  url('fonts/Sansation_Regular-webfont.woff') format('woff'),
     11  url('fonts/Sansation_Regular-webfont.ttf') format('truetype'),
     12  url('fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
     13  font-weight: normal;
     14  font-style: normal;
     15
     16}
     17
     18// Titre et slogan
     19h1 small {color: @grayLighter}
     20
     21// Barre de navigation
     22.navbar {
     23  font-family: @sansFontFamily;
     24  font-size: 130%;
     25}
     26
     27// Fil d'Ariane
     28.fil_ariane.hierarchie.breadcrumb {
     29  background-color: transparent;
     30}
     31
     32// centrage des blocs ul portant la class "center"
     33.center.navbar .nav,
     34.center.navbar .nav > li {
     35  float:none;
     36  display:inline-block;
     37  *display:inline; /* ie7 fix */
     38  *zoom:1; /* hasLayout ie7 trigger */
     39  vertical-align: top;
     40}
     41
     42.center .navbar-inner {
     43  text-align:center;
     44}
  • _squelettes_/spiplogo/theme/css/variables.less

    r70335 r70387  
     1// @import "bootstrap2spip/css/variables.less";
     2
    13//
    24// Variables
    3 // Swatch: spiplogo
    4 // Version: 1.0.0
    55// --------------------------------------------------
    66
     
    1313// -------------------------
    1414@black:                 #000;
    15 @grayDarker:            #111;
    16 @grayDark:              #444;
     15@grayDarker:            #222;
     16@grayDark:              #333;
    1717@gray:                  #555;
    18 @grayLight:             #aaa;
    19 @grayLighter:           #ddd;
     18@grayLight:             #999;
     19@grayLighter:           #eee;
    2020@white:                 #fff;
    21 
    22 
    23 // Accent colors
    24 // -------------------------
    25 @blue:                  #00BCE1;
    26 @blueDark:              #1269B0;
    27 @green:                 #48CA3B;
    28 @red:                   #AD1D28;
    29 @yellow:                #DEBB27;
    30 @orange:                #DF6E1E;
    31 @pink:                  #FFBCB9;
    32 @purple:                #4D3A7D;
    3321
    3422// Couleurs perso
     
    4129@bleuextraclair:        #68A5D1;
    4230
     31// Accent colors
     32// -------------------------
     33@blue:                  #049cdb;
     34@blueDark:              #0064cd;
     35@green:                 #46a546;
     36@red:                   #9d261d;
     37@yellow:                #ffc40d;
     38@orange:                #f89406;
     39@pink:                  #c3325f;
     40@purple:                #7a43b6;
     41
    4342
    4443// Scaffolding
    4544// -------------------------
    46 @bodyBackground:        #0F65A2;
    47 @textColor:             rgba(255, 255, 255, 0.9);
     45@bodyBackground:        @bleu;
     46@textColor:             @white;
    4847
    4948
    5049// Links
    5150// -------------------------
    52 @linkColor:             lighten(@bleuextraclair, 15%);
    53 @linkColorHover:        @linkColor;
     51@linkColor:             #900;
     52@linkColorHover:        darken(@linkColor, 15%);
    5453
    5554
    5655// Typography
    5756// -------------------------
    58 @sansFontFamily:        'Cabin', Verdana, sans-serif;
    59 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
    60 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
     57@sansFontFamily:        SansationRegular, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     58@serifFontFamily:       Georgia, Cambria, Times New Roman, Times, serif;
     59@monoFontFamily:        "Courier New", Courier, monospace;
    6160
    6261@baseFontSize:          14px;
    63 @baseFontFamily:        @sansFontFamily;
     62@baseFontFamily:        @monoFontFamily;
    6463@baseLineHeight:        20px;
    65 @altFontFamily:         @serifFontFamily;
    66 
    67 @headingsFontFamily:    'Roboto', cursive; // empty to use BS default, @baseFontFamily
    68 @headingsFontWeight:    normal;    // instead of browser default, bold
     64@altFontFamily:         @sansFontFamily;
     65
     66@headingsFontFamily:    @sansFontFamily; // empty to use BS default, @baseFontFamily
     67@headingsFontWeight:    bold;    // instead of browser default, bold
    6968@headingsColor:         inherit; // empty to use BS default, @textColor
    7069
     
    8079@paddingLarge:          11px 19px; // 44px
    8180@paddingSmall:          2px 10px;  // 26px
    82 @paddingMini:           1px 6px;   // 24px
     81@paddingMini:           0 6px;   // 22px
    8382
    8483@baseBorderRadius:      4px;
    85 @borderRadiusLarge:     5px;
     84@borderRadiusLarge:     6px;
    8685@borderRadiusSmall:     3px;
    8786
     
    8988// Tables
    9089// -------------------------
    91 @tableBackground:                   lighten(#147E88, 10%); // overall background-color
    92 @tableBackgroundAccent:             lighten(#147E88, 15%); // for striping
    93 @tableBackgroundHover:              rgba(255, 255, 255, 0.4); // for hover
    94 @tableBorder:                       lighten(#147E88, 12%); // table and cell border
     90@tableBackground:                   transparent; // overall background-color
     91@tableBackgroundAccent:             #f9f9f9; // for striping
     92@tableBackgroundHover:              #f5f5f5; // for hover
     93@tableBorder:                       #ddd; // table and cell border
    9594
    9695// Buttons
    9796// -------------------------
    98 @btnBackground:                     @grayLighter;
    99 @btnBackgroundHighlight:            @grayLighter;
    100 @btnBorder:                         rgba(0, 0, 0, 0);
    101 
    102 @btnPrimaryBackground:              @navbarBackground;
    103 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
    104 
    105 @btnInfoBackground:                 @purple;
    106 @btnInfoBackgroundHighlight:        @purple;
    107 
    108 @btnSuccessBackground:              @green;
    109 @btnSuccessBackgroundHighlight:     @green;
    110 
    111 @btnWarningBackground:              @orange;
     97@btnBackground:                     @white;
     98@btnBackgroundHighlight:            darken(@white, 10%);
     99@btnBorder:                         #bbb;
     100
     101@btnPrimaryBackground:              @linkColor;
     102@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
     103
     104@btnInfoBackground:                 #5bc0de;
     105@btnInfoBackgroundHighlight:        #2f96b4;
     106
     107@btnSuccessBackground:              #62c462;
     108@btnSuccessBackgroundHighlight:     #51a351;
     109
     110@btnWarningBackground:              lighten(@orange, 15%);
    112111@btnWarningBackgroundHighlight:     @orange;
    113112
    114 @btnDangerBackground:               @bleuextraclair;
    115 @btnDangerBackgroundHighlight:      @bleuextraclair;
    116 
    117 @btnInverseBackground:              #27666D;
    118 @btnInverseBackgroundHighlight:     #27666D;
     113@btnDangerBackground:               #ee5f5b;
     114@btnDangerBackgroundHighlight:      #bd362f;
     115
     116@btnInverseBackground:              #444;
     117@btnInverseBackgroundHighlight:     @grayDarker;
    119118
    120119
     
    122121// -------------------------
    123122@inputBackground:               @white;
    124 @inputBorder:                   transparent;
    125 @inputBorderRadius:             0;
     123@inputBorder:                   #ccc;
     124@inputBorderRadius:             @baseBorderRadius;
    126125@inputDisabledBackground:       @grayLighter;
    127 @formActionsBackground:         transparent;
     126@formActionsBackground:         #f5f5f5;
    128127@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
    129128
     
    138137@dropdownLinkColor:             @grayDark;
    139138@dropdownLinkColorHover:        @white;
    140 @dropdownLinkColorActive:       @dropdownLinkColor;
    141 
    142 @dropdownLinkBackgroundActive:  @red;
    143 @dropdownLinkBackgroundHover:   @red;
     139@dropdownLinkColorActive:       @white;
     140
     141@dropdownLinkBackgroundActive:  @linkColor;
     142@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
    144143
    145144
     
    155154@zindexDropdown:          1000;
    156155@zindexPopover:           1010;
    157 @zindexTooltip:           1020;
     156@zindexTooltip:           1030;
    158157@zindexFixedNavbar:       1030;
    159158@zindexModalBackdrop:     1040;
     
    174173// Hr border color
    175174// -------------------------
    176 @hrBorder:                transparent;
     175@hrBorder:                @grayLighter;
    177176
    178177
     
    184183// Wells
    185184// -------------------------
    186 @wellBackground:                  #3CB9C6;
     185@wellBackground:                  #f5f5f5;
    187186
    188187
     
    192191@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
    193192
    194 @navbarHeight:                    50px;
    195 @navbarBackgroundHighlight:       @red;
    196 @navbarBackground:                @red;
     193@navbarHeight:                    40px;
     194@navbarBackgroundHighlight:       @bleuclair;
     195@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
    197196@navbarBorder:                    darken(@navbarBackground, 12%);
    198197
    199198@navbarText:                      @white;
    200199@navbarLinkColor:                 @white;
    201 @navbarLinkColorHover:            @white;
    202 @navbarLinkColorActive:           @navbarLinkColorHover;
    203 @navbarLinkBackgroundHover:       lighten(@navbarBackground, 10%);
    204 @navbarLinkBackgroundActive:      lighten(@navbarBackground, 10%);
     200@navbarLinkColorHover:            @grayLight;
     201@navbarLinkColorActive:           @grayLighter;
     202@navbarLinkBackgroundHover:       transparent;
     203@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
    205204
    206205@navbarBrandColor:                @navbarLinkColor;
    207206
    208207// Inverted navbar
    209 @navbarInverseBackground:                @bleuextraclair;
    210 @navbarInverseBackgroundHighlight:       @bleuextraclair;
    211 @navbarInverseBorder:                    rgba(0, 0, 0, 0.1);
    212 
    213 @navbarInverseText:                      @white;
    214 @navbarInverseLinkColor:                 @white;
     208@navbarInverseBackground:                #111111;
     209@navbarInverseBackgroundHighlight:       #222222;
     210@navbarInverseBorder:                    #252525;
     211
     212@navbarInverseText:                      @grayLight;
     213@navbarInverseLinkColor:                 @grayLight;
    215214@navbarInverseLinkColorHover:            @white;
    216 @navbarInverseLinkColorActive:           @white;
    217 @navbarInverseLinkBackgroundHover:       rgba(255, 255, 255, 0.2);
    218 @navbarInverseLinkBackgroundActive:      rgba(255, 255, 255, 0.2);
     215@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
     216@navbarInverseLinkBackgroundHover:       transparent;
     217@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
    219218
    220219@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
    221220@navbarInverseSearchBackgroundFocus:     @white;
    222221@navbarInverseSearchBorder:              @navbarInverseBackground;
    223 @navbarInverseSearchPlaceholderColor:    @white;
     222@navbarInverseSearchPlaceholderColor:    #ccc;
    224223
    225224@navbarInverseBrandColor:                @navbarInverseLinkColor;
     
    228227// Pagination
    229228// -------------------------
    230 @paginationBackground:                #3CB9C6;
    231 @paginationBorder:                    transparent;
    232 @paginationActiveBackground:          rgba(255, 255, 255, 0.4);
     229@paginationBackground:                #fff;
     230@paginationBorder:                    #ddd;
     231@paginationActiveBackground:          #f5f5f5;
    233232
    234233
    235234// Hero unit
    236235// -------------------------
    237 @heroUnitBackground:              #3CB9C6;
     236@heroUnitBackground:              @grayLighter;
    238237@heroUnitHeadingColor:            inherit;
    239238@heroUnitLeadColor:               inherit;
     
    269268@popoverArrowWidth:       10px;
    270269@popoverArrowColor:       #fff;
    271 @popoverTitleBackground:  @navbarBackground;
     270@popoverTitleBackground:  darken(@popoverBackground, 3%);
    272271
    273272// Special enhancement for popovers
  • _squelettes_/spiplogo/theme/plugin.xml

    r69858 r70387  
    11<plugin>
    22        <nom>SPIP logo - Thème</nom>
    3         <version>1.0.0</version>
     3        <version>1.0.1</version>
    44        <etat>dev</etat>
    55        <auteur>cym</auteur>
Note: See TracChangeset for help on using the changeset viewer.