Changeset 5582


Ignore:
Timestamp:
08/20/14 15:09:12 (10 years ago)
Author:
Sander Maijers
Message:
  • Implement a number of suggestions on

https://trac.clarin.eu/wiki/CLARIN%20style

  • Reduced page load time by optimizing font usage.
  • First work on switching to flex divs.
Location:
CLARIN_style
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • CLARIN_style

    • Property svn:ignore set to
      .sass-cache

  • CLARIN_style/CLARIN.scss

    r5528 r5582  
    1414
    1515$thin_separator_grey: #e7e7e7;
    16 $text: #666;
    17 $text2: #222;
     16$text_emphasized: #222;
     17$text_deemphasized: #666;
    1818//$hyperlink_color: #03683f;
    19 $hyperlink_visited: #806a52;
     19$text_emphasized_periphery: #806a52;
     20$text_deemphasized_periphery: #c0a37c;
     21$hyperlink: $text_emphasized_periphery;
     22$hyperlink_visited: $text_deemphasized_periphery;
    2023$background_color: #f9f9f9;
    2124
    2225// Font
    23 
    24 @import "//fonts.googleapis.com/css?family=Roboto";
    25 // "//fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,400italic,400,500italic,500,700italic,700,900italic,900"
    26 $font-stack: 'Roboto', Arial, Helvetica, Myriad, Verdana, Sans-Serif;
    27 
     26// https://bugzilla.mozilla.org/show_bug.cgi?id=604421
     27/*
     28@font-face {
     29  font-family: 'Roboto Condensed';
     30  font-style: normal;
     31  font-weight: 400;
     32  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url('Roboto_Condensed_with_European_character_sets.woff') format('woff');
     33}
     34*/
     35
     36@font-face {
     37  font-family: 'Roboto';
     38  font-style: normal;
     39  font-weight: 400;
     40  src: local('Roboto Regular'), local('Roboto-Regular'), url('Roboto_with_European_character_sets.woff') format('woff');
     41}
     42
     43$font-stack: 'Roboto', sans-serif;
    2844
    2945body {
    30     font-family: $font-stack;
    31     -webkit-font-smoothing: antialiased;
    32     -moz-osx-font-smoothing: grayscale;
    33     color: $text2;
    34     font-size: 100%;
    35     word-wrap: break-word;
     46  font-family: $font-stack;
     47  -webkit-font-smoothing: antialiased;
     48  -moz-osx-font-smoothing: grayscale;
     49  color: $text_emphasized;
     50  font-size: 100%;
     51  word-wrap: break-word;
    3652}
    3753
    3854a {
    39     //color: $text2;
    40     text-decoration: dotted !important;
    41 
    42     &:hover, &:focus {
    43         // color: inherit;
    44         text-decoration: none !important;
    45     }
    46 
    47     &:visited {
    48         color: $hyperlink_visited;
    49     }
     55  color: $hyperlink;
     56  text-decoration: dotted !important;
     57
     58  &:hover, &:focus {
     59    // color: inherit;
     60    text-decoration: none !important;
     61  }
     62
     63  &:visited {
     64    color: $hyperlink_visited;
     65  }
     66}
     67
     68div.navbar-header {
     69  text-overflow: ellipsis;
     70  overflow: hidden;
     71  //max-height: 30px; // TODO: transition to flex divs.
    5072}
    5173
    5274a.navbar-brand {
    53     // color: #d7ceb2;
    54     //text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
    55     font-size: 3em;
    56     //letter-spacing: 1px;
    57 
    58     //$clarin_blue1: #00406f;
    59     //$clarin_blue2: #006dab;
    60     //$clarin_blue3: #007eda;
    61 
    62     //font-weight: bold;
    63     line-height: 1em;
    64     //color: $clarin_blue !important;
    65 
    66     text-shadow: -.025em -.025em .0125em rgba(0, 64, 111, 0.8), -.060em -.080em 0.02em rgba(0, 64, 111, 0.6); //rgba(90, 90, 90, .6);
     75  color: $text_emphasized_periphery;
     76  //text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
     77  font-size: 2em;
     78  text-overflow: ellipsis;
     79  //overflow: hidden;
     80  //letter-spacing: 1px;
     81
     82  //$clarin_blue1: #00406f;
     83  //$clarin_blue2: #006dab;
     84  //$clarin_blue3: #007eda;
     85
     86  //font-weight: bold;
     87  line-height: 1em;
     88  //color: $clarin_blue !important;
     89
     90  //text-shadow: -.025em -.025em .0125em rgba(0, 64, 111, 0.8), -.060em -.080em 0.02em rgba(0, 64, 111, 0.6); //rgba(90, 90, 90, .6);
    6791}
    6892
    … …  
    100124
    101125h1, h2, h3, h4, h5, h6, label {
    102     color: $text;
    103     font-weight: normal;
    104     line-height: 1.2em;
     126  color: $text_deemphasized;
     127  font-weight: normal;
     128  line-height: 1.2em;
    105129}
    106130
    107131body, h1, h2, h3, h4, h5, h6 {
    108     font-size-adjust: 0.5;
     132  font-size-adjust: 0.5;
    109133}
    110134
    … …  
    112136
    113137#page {
     138  font-size: 1em;
     139  /* equivalent to 16px */
     140  line-height: 1.25;
     141  /* equivalent to 20px */
     142}
     143
     144h1 {
     145  font-size: 2em;
     146  /* 2x body copy size = 32px */
     147  line-height: 1.25;
     148  /* 45px / 36px */
     149  margin-top: 0px !important;
     150  margin-bottom: 0px !important;
     151}
     152
     153h2 {
     154  font-size: 1.625em;
     155  /* 1.625x body copy size = 26px */
     156  line-height: 1.15384615;
     157  /* 30px / 26px */
     158}
     159
     160h3 {
     161  font-size: 1.375em;
     162  /* 1.375x body copy size = 22px */
     163  line-height: 1.13636364;
     164  /* 25px / 22px */
     165}
     166
     167h4 {
     168  font-size: 1.125em;
     169  /* 1.125x body copy size = 18px */
     170  line-height: 1.11111111;
     171}
     172
     173blockquote {
     174  font-size: 1.25em;
     175  /* 20px / 16px */
     176  line-height: 1.25;
     177  /* 25px / 20px */
     178}
     179
     180@media (min-width: 56.25em) {
     181  h1 {
     182    font-size: 3em;
     183    /* 3x body copy size = 48px */
     184    line-height: 1.05;
     185    /* keep to a multiple of the 20px line height
     186    and something more appropriate for display headings */
     187  }
     188
     189  h2 {
     190    font-size: 2.25em;
     191    /* 2.25x body copy size = 36px */
     192    line-height: 1.25;
     193  }
     194
     195  h3 {
     196    font-size: 1.75em;
     197    /* 1.75x body copy size = 28px */
     198    line-height: 1.25;
     199  }
     200}
     201
     202@media (min-width: 43.75em) {
     203  #page {
    114204    font-size: 1em;
    115205    /* equivalent to 16px */
    116     line-height: 1.25;
    117     /* equivalent to 20px */
    118 }
    119 
    120 h1 {
     206    line-height: 1.375;
     207    /* equivalent to 22px */
     208  }
     209
     210  h1 {
     211    font-size: 2.5em;
     212    /* 2.5x body copy size = 40px */
     213    line-height: 1.125;
     214  }
     215
     216  h2 {
    121217    font-size: 2em;
    122218    /* 2x body copy size = 32px */
    123219    line-height: 1.25;
    124     /* 45px / 36px */
    125     margin-top: 0px !important;
    126     margin-bottom: 0px !important;
    127 }
    128 
    129 h2 {
    130     font-size: 1.625em;
    131     /* 1.625x body copy size = 26px */
    132     line-height: 1.15384615;
    133     /* 30px / 26px */
    134 }
    135 
    136 h3 {
    137     font-size: 1.375em;
    138     /* 1.375x body copy size = 22px */
    139     line-height: 1.13636364;
    140     /* 25px / 22px */
    141 }
    142 
    143 h4 {
    144     font-size: 1.125em;
    145     /* 1.125x body copy size = 18px */
    146     line-height: 1.11111111;
    147 }
    148 
    149 blockquote {
    150     font-size: 1.25em;
    151     /* 20px / 16px */
     220  }
     221
     222  h3 {
     223    font-size: 1.5em;
     224    /* 1.5x body copy size = 24px */
    152225    line-height: 1.25;
    153     /* 25px / 20px */
    154 }
    155 
    156 @media (min-width: 56.25em) {
    157     h1 {
    158         font-size: 3em;
    159         /* 3x body copy size = 48px */
    160         line-height: 1.05;
    161         /* keep to a multiple of the 20px line height
    162         and something more appropriate for display headings */
    163     }
    164 
    165     h2 {
    166         font-size: 2.25em;
    167         /* 2.25x body copy size = 36px */
    168         line-height: 1.25;
    169     }
    170 
    171     h3 {
    172         font-size: 1.75em;
    173         /* 1.75x body copy size = 28px */
    174         line-height: 1.25;
    175     }
    176 }
    177 
    178 @media (min-width: 43.75em) {
    179     #page {
    180         font-size: 1em;
    181         /* equivalent to 16px */
    182         line-height: 1.375;
    183         /* equivalent to 22px */
    184     }
    185 
    186     h1 {
    187         font-size: 2.5em;
    188         /* 2.5x body copy size = 40px */
    189         line-height: 1.125;
    190     }
    191 
    192     h2 {
    193         font-size: 2em;
    194         /* 2x body copy size = 32px */
    195         line-height: 1.25;
    196     }
    197 
    198     h3 {
    199         font-size: 1.5em;
    200         /* 1.5x body copy size = 24px */
    201         line-height: 1.25;
    202     }
    203 
    204     h4 {
    205         line-height: 1.22222222;
    206         /* (22px / 18px */
    207     }
    208 
    209     blockquote {
    210         font-size: 1.5em;
    211         /* 24px / 16px = */
    212         line-height: 1.45833333;
    213         /* 35px / 24px */
    214     }
     226  }
     227
     228  h4 {
     229    line-height: 1.22222222;
     230    /* (22px / 18px */
     231  }
     232
     233  blockquote {
     234    font-size: 1.5em;
     235    /* 24px / 16px = */
     236    line-height: 1.45833333;
     237    /* 35px / 24px */
     238  }
    215239}
    216240
    217241p {
    218     margin: 0 0 15px 0;
     242  margin: 0 0 15px 0;
    219243}
    220244
    … …  
    224248
    225249menu, ol, ul {
    226     padding: 0 0 0 20px;
     250  padding: 0 0 0 20px;
    227251}
    228252
    229253hr {
    230     clear: both;
     254  clear: both;
    231255}
    232256
    233257div.container {
    234     z-index: -1 !important;
     258  z-index: -1 !important;
    235259}
    236260
    … …  
    240264
    241265table.display {
     266  border-collapse: collapse !important;
     267  position: relative !important;
     268  border-spacing: 0 !important;
     269  border: 0px !important;
     270  background-clip: padding-box;
     271  //background-repeat: no-repeat;
     272  //background-position: center top;
     273
     274  th, td {
     275    border: 0px !important;
     276    //background-clip: content-box !important;
     277  }
     278
     279  thead tr th {
     280    background-color: $clarin_blue !important;
    242281    border-collapse: collapse !important;
    243     position: relative !important;
    244     border-spacing: 0 !important;
    245     border: 0px !important;
    246     background-clip: padding-box;
    247     //background-repeat: no-repeat;
    248     //background-position: center top;
    249 
    250     th, td {
    251         border: 0px !important;
    252         //background-clip: content-box !important;
    253     }
    254 
    255     thead tr th {
    256         background-color: $clarin_blue !important;
    257         border-collapse: collapse !important;
    258         //background-clip: content-box !important;
    259         background-attachment: scroll !important;
    260         //border-bottom: 0px !important;
    261         color: #fff !important;
    262     }
    263 
    264     thead {
    265         tr th:first-child {
    266             border-top-left-radius: 6px !important;
    267             border-bottom-left-radius: 6px !important;
    268 
    269             -webkit-border-top-left-radius: 6px !important;
    270             -webkit-border-bottom-left-radius: 6px !important;
    271 
    272             -moz-border-top-left-radius: 6px !important;
    273             -moz-border-bottom-left-radius: 6px !important;
    274         }
    275 
    276         tr {
    277             padding: $indent $indent !important;
    278             font-weight: bolder !important;
    279             text-align: left !important;
    280             border: 0px !important;
    281         }
    282 
    283         tr th a {
    284             color: #fff !important;
    285             text-decoration: underline !important;
    286         }
    287 
    288         tr th:last-child {
    289             border-top-right-radius: 6px !important;
    290             border-bottom-right-radius: 6px !important;
    291 
    292             -webkit-border-top-right-radius: 6px !important;
    293             -webkit-border-bottom-right-radius: 6px !important;
    294 
    295             -moz-border-top-right-radius: 6px !important;
    296             -moz-border-bottom-right-radius: 6px !important;
    297         }
    298     }
     282    //background-clip: content-box !important;
     283    background-attachment: scroll !important;
     284    //border-bottom: 0px !important;
     285    color: #fff !important;
     286  }
     287
     288  thead {
     289    tr th:first-child {
     290      border-top-left-radius: 6px !important;
     291      border-bottom-left-radius: 6px !important;
     292
     293      -webkit-border-top-left-radius: 6px !important;
     294      -webkit-border-bottom-left-radius: 6px !important;
     295
     296      -moz-border-top-left-radius: 6px !important;
     297      -moz-border-bottom-left-radius: 6px !important;
     298    }
     299
     300    tr {
     301      padding: $indent $indent !important;
     302      font-weight: bolder !important;
     303      text-align: left !important;
     304      border: 0px !important;
     305    }
     306
     307    tr th a {
     308      color: #fff !important;
     309      text-decoration: underline !important;
     310    }
     311
     312    tr th:last-child {
     313      border-top-right-radius: 6px !important;
     314      border-bottom-right-radius: 6px !important;
     315
     316      -webkit-border-top-right-radius: 6px !important;
     317      -webkit-border-bottom-right-radius: 6px !important;
     318
     319      -moz-border-top-right-radius: 6px !important;
     320      -moz-border-bottom-right-radius: 6px !important;
     321    }
     322  }
    299323}
    300324
    301325table {
    302     tbody {
    303         tr:nth-child(2n+1) td {
    304             background-color: $grey !important;
    305         }
    306 
    307         td:first-child {
    308             -webkit-border-top-left-radius: 6px !important;
    309             -webkit-border-bottom-left-radius: 6px !important;
    310 
    311             -moz-border-top-left-radius: 6px !important;
    312             -moz-border-bottom-left-radius: 6px !important;
    313 
    314             border-top-left-radius: 6px !important;
    315             border-bottom-left-radius: 6px !important;
    316         }
    317 
    318         td:last-child {
    319             -webkit-border-top-right-radius: 6px !important;
    320             -webkit-border-bottom-right-radius: 6px !important;
    321 
    322             -moz-border-top-right-radius: 6px !important;
    323             -moz-border-bottom-right-radius: 6px !important;
    324 
    325             border-top-right-radius: 6px !important;
    326             border-bottom-right-radius: 6px !important;
    327         }
    328 
    329         tr {
    330             //border-bottom: 1px solid #e6e6e6 !important;
    331             vertical-align: middle !important;
    332             //background-clip: padding-box !important;
    333             //border-collapse: collapse !important;
    334         }
    335 
    336         tr:last-child td:first-child {
    337             -webkit-border-bottom-left-radius: 6px !important;
    338             -moz-border-bottom-left-radius: 6px !important;
    339             border-bottom-left-radius: 6px !important;
    340         }
    341 
    342         tr:last-child td:last-child {
    343             -webkit-border-bottom-right-radius: 6px !important;
    344             -moz-border-bottom-right-radius: 6px !important;
    345             border-bottom-right-radius: 6px !important;
    346         }
    347 
    348         tr:last-child {
    349             border-bottom: 1px solid $clarin_blue !important;
    350         }
    351     }
     326  tbody {
     327    tr:nth-child(2n+1) td {
     328      background-color: $grey !important;
     329    }
     330
     331    td:first-child {
     332      -webkit-border-top-left-radius: 6px !important;
     333      -webkit-border-bottom-left-radius: 6px !important;
     334
     335      -moz-border-top-left-radius: 6px !important;
     336      -moz-border-bottom-left-radius: 6px !important;
     337
     338      border-top-left-radius: 6px !important;
     339      border-bottom-left-radius: 6px !important;
     340    }
     341
     342    td:last-child {
     343      -webkit-border-top-right-radius: 6px !important;
     344      -webkit-border-bottom-right-radius: 6px !important;
     345
     346      -moz-border-top-right-radius: 6px !important;
     347      -moz-border-bottom-right-radius: 6px !important;
     348
     349      border-top-right-radius: 6px !important;
     350      border-bottom-right-radius: 6px !important;
     351    }
     352
     353    tr {
     354      //border-bottom: 1px solid #e6e6e6 !important;
     355      vertical-align: middle !important;
     356      //background-clip: padding-box !important;
     357      //border-collapse: collapse !important;
     358    }
     359
     360    tr:last-child td:first-child {
     361      -webkit-border-bottom-left-radius: 6px !important;
     362      -moz-border-bottom-left-radius: 6px !important;
     363      border-bottom-left-radius: 6px !important;
     364    }
     365
     366    tr:last-child td:last-child {
     367      -webkit-border-bottom-right-radius: 6px !important;
     368      -moz-border-bottom-right-radius: 6px !important;
     369      border-bottom-right-radius: 6px !important;
     370    }
     371
     372    tr:last-child {
     373      border-bottom: 1px solid $clarin_blue !important;
     374    }
     375  }
    352376}
    353377
    354378table:not(.display) {
    355     tr:first-child {
    356         border-top: 1px solid $clarin_blue !important;
    357     }
    358 
    359     td, th {
    360         padding: 5px;
    361     }
    362 
    363     th {
    364         background-color: $grey;
    365         border-right: 1px dotted black;
    366     }
    367 
     379  tr:first-child {
     380    border-top: 1px solid $clarin_blue !important;
     381  }
     382
     383  td, th {
     384    padding: 5px;
     385  }
     386
     387  th {
     388    background-color: $grey;
     389    border-right: 1px dotted black;
     390  }
    368391}
    369392
    370393html body ul#nav ul, html body ul#nav ul li {
    371     width: 200px;
     394  width: 200px;
    372395}
    373396
    374397html body ul#nav ul ul {
    375     margin: 0 0 0 200px;
     398  margin: 0 0 0 200px;
    376399}
    377400
    378401div#body {
    379     min-height: 100%;
    380     height: auto;
    381     margin: 0 auto -60px;
    382     /* Pad top and bottom to prevent overflow over body div. */
    383     padding: 60px 0 60px;
     402  min-height: 100%;
     403  height: auto;
     404  //margin: 0 auto -60px;
     405  /* Pad top and bottom to prevent overflow over body div if using fixed-top navbar. */
     406  //padding: 60px 0 60px; // TODO: transition to flex divs.
    384407}
    385408
    386409div#footer {
    387     height: 60px;
    388     background-color: #f5f5f5;
    389     //position: absolute;
    390     bottom: 0;
    391     left: 0;
    392     width: 100%;
    393     border-top: 1px solid $thin_separator_grey;
    394     margin-top: 20px;
    395 
    396     div.container {
    397         // height: 60px !important;
    398         height: 100%;
    399     }
    400 
    401     a {
    402         color: $text2;
    403         text-decoration: none;
    404 
    405         &:hover, &:focus {
    406             color: inherit;
    407             text-decoration: none !important;
    408         }
    409 
    410         &:visited {
    411             color: inherit;
    412         }
    413     }
     410  //height: 60px;
     411  background-color: #f5f5f5; // TODO: parameterize
     412  //position: absolute;
     413  bottom: 0;
     414  left: 0;
     415  width: 100%;
     416  border-top: 1px solid $thin_separator_grey;
     417  margin-top: 20px;
     418
     419  div.container {
     420    //height: 60px !important;
     421    height: 100%;
     422    display : flex;
     423    flex-flow: row wrap;
     424    justify-content: space-between;
     425    align-items: center;
     426    align-content: space-around;
    414427
    415428    div#CLARIN_footer_left {
    416         float: left;
     429      order: 1;
     430      //float: left;
     431      //display: inline-block;
     432      display: flex !important;
     433      text-align: left;
     434      vertical-align: middle;
     435      margin: auto;
     436      align-content: space-around;
     437      //width: 25%;
     438      //max-height: 100%;
     439    }
     440
     441    div#CLARIN_footer_middle {
     442      order: 2;
     443      //float: left;
     444      //display: inline-block;
     445      display: flex !important;
     446      text-align: center;
     447      margin: auto;
     448      align-content: space-around;
     449      //width: 50%;
     450      //max-height: 100%;
     451
     452      img {
    417453        display: inline-block;
    418         text-align: left;
    419         width: 25%;
     454        max-width: 100%;
    420455        max-height: 100%;
    421     }
    422 
    423     div#CLARIN_footer_middle {
    424         float: left;
    425         display: inline-block;
    426         text-align: center;
    427         width: 50%;
    428         max-height: 100%;
    429 
    430         img {
    431             display: inline-block;
    432             max-width: 100%;
    433             max-height: 100%;
    434             overflow: hidden;
    435         }
     456        overflow: hidden;
     457      }
    436458    }
    437459
    438460    div#CLARIN_footer_right {
    439         float: left;
    440         text-align: right;
    441         width: 25%;
    442         max-height: 100%;
    443     }
     461      order: 3;
     462      //float: left;
     463      text-align: right;
     464      vertical-align: middle;
     465      display: flex !important;
     466      margin: auto;
     467      align-content: space-around;
     468      //width: 25%;
     469      //max-height: 100%;
     470    }
     471  }
    444472}
    445473
    446474ul#CLARIN_header_right, div#CLARIN_footer_left, div#CLARIN_footer_right {
    447     :not(.glyphicon) {
    448         font-family: $font-stack;
    449     }
    450 
    451     margin: 0px 4px 0 p x 4px;
    452     text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    453     color: #584938;
    454     opacity: 0.4;
    455 }
    456 
     475  :not(.glyphicon) {
     476    font-family: $font-stack;
     477    font-size: smaller;
     478    font-variant: small-caps;
     479  }
     480
     481  a {
     482    color: $text_emphasized_periphery;
     483    text-decoration: none;
     484
     485    &:hover, &:focus {
     486      color: inherit !important;
     487      text-decoration: none !important;
     488    }
     489
     490    &:visited {
     491      color: inherit !important;
     492      text-decoration: none !important;
     493      //color: $text_deemphasized_periphery;
     494    }
     495  }
     496
     497  margin: 0px 4px 0 p x 4px;
     498  //text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
     499  color: $text_emphasized_periphery;
     500  //opacity: 0.8;
     501}
     502
Note: See TracChangeset for help on using the changeset viewer.