source: spip-zone/_squelettes_/html5up_landed/assets/sass/main.scss @ 110419

Last change on this file since 110419 was 110419, checked in by nicod@…, 18 months ago

On vire l'état loading sur le body, qui merdouille une fois sur deux

File size: 36.6 KB
Line 
1@import 'libs/vars';
2@import 'libs/functions';
3@import 'libs/mixins';
4/*
5        Landed by HTML5 UP
6        html5up.net | @ajlkn
7        Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
8*/
9@import "libs/skel";
10
11@include skel-breakpoints(
12    (
13      xlarge: '(max-width: 1680px)',
14      large: '(max-width: 1280px)',
15      medium: '(max-width: 980px)',
16      small: '(max-width: 736px)',
17      xsmall: '(max-width: 480px)'
18    )
19);
20
21@include skel-layout(
22    (
23      reset: 'full',
24      boxModel: 'border',
25      conditionals: true,
26      containers: 70em,
27      breakpoints: (
28        large: (containers: 90%,),
29        medium: (containers: (100%, true),
30        )
31      )
32    )
33);
34
35$size-wrapper-pad-tb: 6em;
36$size-wrapper-pad-lr: 3em;
37
38/* Basic */
39
40html, body {
41  background: _palette(bg);
42}
43
44body, input, select, textarea { 
45  color:       _palette(fg);
46  font-family: _font(family);
47  font-size:   15pt;
48  font-weight: _font(weight);
49  line-height: 1.75em;
50}
51
52a {
53  @include vendor('transition', ('border-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out'));
54  border-bottom:   dotted 1px;
55  color:           _palette(accent1);
56  text-decoration: none;
57
58  &:hover {
59    color:               darken(_palette(accent1), 15%) !important;
60    border-bottom-color: transparent;
61  }
62}
63
64strong, b {
65  color:       _palette(fg-bold);
66  font-weight: _font(weight-bold);
67}
68
69em, i {
70  font-style: italic;
71}
72
73p {
74  margin: 0 0 _size(element-margin) 0;
75}
76
77h1, h2, h3, h4, h5, h6 {
78  color:       _palette(fg-bold);
79  font-weight: _font(weight-bold);
80  line-height: 1em;
81  margin:      0 0 (_size(element-margin) * 0.5) 0;
82
83  a {
84    color:  inherit;
85    border: 0;
86  }
87}
88
89h1 {
90  font-size:      2em;
91  line-height:    1.5em;
92  letter-spacing: -0.025em;
93}
94
95h2 {
96  font-size:      1.6em;
97  line-height:    1.5em;
98  letter-spacing: -0.025em;
99}
100
101h3 {
102  font-size:   1.35em;
103  line-height: 1.5em;
104}
105
106h4 {
107  font-size:   1.1em;
108  line-height: 1.5em;
109}
110
111h5 {
112  font-size:   0.9em;
113  line-height: 1.5em;
114}
115
116h6 {
117  font-size:   0.7em;
118  line-height: 1.5em;
119}
120
121sub {
122  font-size: 0.8em;
123  position:  relative;
124  top:       0.5em;
125}
126
127sup {
128  font-size: 0.8em;
129  position:  relative;
130  top:       -0.5em;
131}
132
133hr {
134  border:        0;
135  border-bottom: solid 1px _palette(border);
136  margin:        (_size(element-margin) * 1.5) 0;
137
138  &.major {
139    margin: (_size(element-margin) * 2) 0;
140  }
141}
142
143blockquote {
144  border-left: solid 4px _palette(border);
145  font-style:  italic;
146  margin:      0 0 _size(element-margin) 0;
147  padding:     0.5em 0 0.5em 2em;
148}
149
150code {
151  background:    _palette(border-bg);
152  border-radius: _size(border-radius);
153  font-family:   _font(family-fixed);
154  font-size:     0.9em;
155  margin:        0 0.25em;
156  padding:       0.25em 0.65em;
157}
158
159pre {
160  -webkit-overflow-scrolling: touch;
161  font-family:                _font(family-fixed);
162  font-size:                  0.9em;
163  margin:                     0 0 _size(element-margin) 0;
164
165  code {
166    display:     block;
167    line-height: 1.75em;
168    padding:     1em 1.5em;
169    overflow-x:  auto;
170  }
171}
172
173.align-left {
174  text-align: left;
175}
176
177.align-center {
178  text-align: center;
179}
180
181.align-right {
182  text-align: right;
183}
184
185/* Loader */
186
187// Spinner
188
189@include keyframes('spinner-show') {
190  0% {
191    opacity: 0;
192  }
193  100% {
194    opacity: 1;
195  }
196}
197
198@include keyframes('spinner-hide') {
199  0% {
200    color:   _palette(fg-lighter);
201    z-index: _misc(z-index-overlay) + 1;
202    @include vendor('transform', 'scale(1) rotate(0deg)');
203  }
204  99% {
205    color:   _palette(bg);
206    z-index: _misc(z-index-overlay) + 1;
207    @include vendor('transform', 'scale(0.5) rotate(360deg)');
208  }
209  100% {
210    color:   _palette(bg);
211    z-index: -1;
212    @include vendor('transform', 'scale(0.5) rotate(360deg)');
213  }
214}
215
216@include keyframes('spinner-rotate') {
217  0% {
218    @include vendor('transform', 'scale(1) rotate(0deg)');
219  }
220  100% {
221    @include vendor('transform', 'scale(1) rotate(360deg)');
222  }
223}
224
225// Overlay
226
227@include keyframes('overlay-hide') {
228  0% {
229    opacity: 1;
230    z-index: _misc(z-index-overlay);
231  }
232  15% {
233    opacity: 1;
234    z-index: _misc(z-index-overlay);
235  }
236  99% {
237    opacity: 0;
238    z-index: _misc(z-index-overlay);
239  }
240  100% {
241    opacity: 0;
242    z-index: -1;
243  }
244}
245
246@media (-webkit-min-device-pixel-ratio: 2) {
247  body.landing:before {
248    line-height: 2.025em;
249  }
250}
251
252/* Section/Article */
253
254section, article {
255  &.special {
256    text-align: center;
257  }
258}
259
260header {
261  p {
262    color:    _palette(fg-bold);
263    position: relative;
264    margin:   0 0 (_size(element-margin) * 0.75) 0;
265  }
266
267  h2 + p {
268    font-size:   1.25em;
269    margin-top:  (_size(element-margin) * -0.5);
270    line-height: 1.75em;
271  }
272
273  h3 + p {
274    font-size:   1.1em;
275    margin-top:  (_size(element-margin) * -0.4);
276    line-height: 1.75em;
277  }
278
279  h4 + p,
280  h5 + p,
281  h6 + p {
282    font-size:   0.9em;
283    margin-top:  (_size(element-margin) * -0.3);
284    line-height: 1.5em;
285  }
286
287  &.major {
288    margin:     0 0 (_size(element-margin) * 2) 0;
289    text-align: center;
290
291    &:after {
292      background: _palette(accent1);
293      content:    '';
294      display:    inline-block;
295      height:     2px;
296      width:      100%;
297    }
298  }
299}
300
301body.sommaire header {
302  margin:     0 0 (_size(element-margin) * 2) 0;
303  text-align: center;
304}
305
306footer {
307  &.major {
308    margin: (_size(element-margin) * 2) 0 0 0;
309  }
310}
311
312/* Box */
313
314.box {
315  border-radius: _size(border-radius);
316  border:        solid 1px _palette(border);
317  margin-bottom: _size(element-margin);
318  padding:       1.5em;
319
320  > :last-child,
321  > :last-child > :last-child,
322  > :last-child > :last-child > :last-child {
323    margin-bottom: 0;
324  }
325
326  &.alt {
327    border:        0;
328    border-radius: 0;
329    padding:       0;
330  }
331}
332
333/* Image */
334
335.image, .spip_documents, .mediabox {
336  border-radius: _size(border-radius);
337  border:        0;
338  display:       inline-block;
339  position:      relative;
340  overflow:      hidden;
341
342  &:before {
343    content:          '';
344    display:          block;
345    position:         absolute;
346    left:             0;
347    top:              0;
348    background-image: url('images/overlay.png');
349    width:            100%;
350    height:           100%;
351    z-index:          1;
352  }
353
354  img {
355    border-radius: _size(border-radius);
356    display:       block;
357  }
358
359  &.spip_documents_left {
360    float:  left;
361    margin: 0 1.5em 1em 0;
362    top:    0.25em;
363  }
364
365  &.spip_documents_right {
366    float:  right;
367    margin: 0 0 1em 1.5em;
368    top:    0.25em;
369  }
370
371  &.spip_documents_left,
372  &.spip_documents_right {
373    max-width: 40%;
374
375    img {
376      width: 100%;
377    }
378  }
379
380  &.fit {
381    display: block;
382    margin:  0 0 _size(element-margin) 0;
383    width:   100%;
384
385    img {
386      width: 100%;
387    }
388  }
389}
390
391/* List */
392
393ol {
394  list-style:   decimal;
395  margin:       0 0 _size(element-margin) 0;
396  padding-left: 1.25em;
397
398  li {
399    padding-left: 0.25em;
400  }
401}
402
403ul {
404  list-style:   disc;
405  margin:       0 0 _size(element-margin) 1.5em;
406  padding-left: 1.5em;
407
408  li {
409    padding-left: 0.5em;
410  }
411
412  ul {
413    margin-bottom: 0;
414  }
415
416  &.alt {
417    list-style:   none;
418    padding-left: 0;
419
420    li {
421      border-top: solid 1px _palette(border);
422      padding:    0.5em 0;
423
424      &:first-child {
425        border-top:  0;
426        padding-top: 0;
427      }
428    }
429  }
430}
431
432dl {
433  margin: 0 0 _size(element-margin) 0;
434}
435
436/* Table */
437
438.table-wrapper {
439  -webkit-overflow-scrolling: touch;
440  overflow-x:                 auto;
441}
442
443table {
444  margin: 0 0 _size(element-margin) 0;
445  width:  100%;
446
447  tbody {
448    tr {
449      border:       solid 1px _palette(border);
450      border-left:  0;
451      border-right: 0;
452
453      &:nth-child(2n + 1) {
454        background-color: _palette(border-bg);
455      }
456    }
457  }
458
459  td {
460    padding: 0.75em 0.75em;
461  }
462
463  th {
464    color:       _palette(fg-bold);
465    font-size:   0.9em;
466    font-weight: _font(weight-bold);
467    padding:     0 0.75em 0.75em 0.75em;
468    text-align:  left;
469  }
470
471  thead {
472    border-bottom: solid 1px _palette(border);
473  }
474
475  tfoot {
476    border-top: solid 1px _palette(border);
477  }
478
479  &.alt {
480    border-collapse: separate;
481
482    tbody {
483      tr {
484        td {
485          border:            solid 1px _palette(border);
486          border-left-width: 0;
487          border-top-width:  0;
488
489          &:first-child {
490            border-left-width: 1px;
491          }
492        }
493
494        &:first-child {
495          td {
496            border-top-width: 1px;
497          }
498        }
499      }
500    }
501
502    thead {
503      border-bottom: 0;
504    }
505
506    tfoot {
507      border-top: 0;
508    }
509  }
510}
511
512/* Button */
513
514input[type="submit"],
515input[type="reset"],
516input[type="button"],
517.button {
518  @include vendor('appearance', 'none');
519  @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out', 'box-shadow #{_duration(transition)} ease-in-out'));
520  background-color: transparent;
521  border-radius:    _size(border-radius);
522  border:           0;
523  box-shadow:       inset 0 0 0 1px _palette(border);
524  color:            _palette(fg-bold) !important;
525  cursor:           pointer;
526  display:          inline-block;
527  font-weight:      _font(weight-bold);
528  height:           _size(element-height);
529  line-height:      _size(element-height);
530  padding:          0 2.25em;
531  text-align:       center;
532  text-decoration:  none;
533  white-space:      nowrap;
534
535  &:hover, &:active {
536    box-shadow: inset 0 0 0 1px _palette(accent1);
537    color:      _palette(accent1) !important;
538  }
539
540  &:active {
541    background-color: transparentize(_palette(accent1), 0.85);
542  }
543
544  &.fit {
545    display: block;
546    margin:  0 0 (_size(element-margin) * 0.5) 0;
547    width:   100%;
548  }
549
550  &.small {
551    font-size: 0.8em;
552  }
553
554  &.big {
555    font-size: 1.35em;
556  }
557
558  &.special {
559    background-color: _palette(accent1);
560    box-shadow:       none;
561    color:            _palette(fg-bold) !important;
562
563    &:hover {
564      background-color: lighten(_palette(accent1), 5);
565    }
566
567    &:active {
568      background-color: darken(_palette(accent1), 5);
569    }
570  }
571
572  &.disabled,
573  &:disabled {
574    background-color: _palette(border) !important;
575    box-shadow:       none !important;
576    color:            _palette(fg-bold) !important;
577    cursor:           default;
578    opacity:          0.25;
579  }
580}
581
582/* Goto Next */
583
584.goto-next {
585  border:      0;
586  bottom:      0;
587  display:     block;
588  height:      5em;
589  left:        50%;
590  margin:      0 0 0 -5em;
591  overflow:    hidden;
592  position:    absolute;
593  text-indent: 10em;
594  white-space: nowrap;
595  width:       10em;
596  z-index:     1;
597
598  &:before {
599    background-image:    url('images/arrow.svg');
600    background-position: center center;
601    background-repeat:   no-repeat;
602    background-size:     contain;
603    content:             '';
604    display:             block;
605    height:              1.5em;
606    left:                50%;
607    margin:              -0.75em 0 0 -1em;
608    position:            absolute;
609    top:                 50%;
610    width:               2em;
611    z-index:             1;
612  }
613}
614
615/* Spotlight */
616
617.spotlight {
618  background-attachment: fixed;
619  background-position:   center center;
620  background-size:       cover;
621  box-shadow:            0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
622  height:                100vh;
623  overflow:              hidden;
624  position:              relative;
625
626  // Force spotlights to stack in reverse order (needed for our box
627  // shadows to overlap stuff in the right direction).
628  @for $i from 1 through _misc(max-spotlight) {
629    &:nth-last-of-type(#{$i}) {
630      z-index: #{$i};
631    }
632  }
633
634  &:before {
635    //    background-image: url('images/overlay.png');
636    content: '';
637    display: block;
638    height:  100%;
639    left:    0;
640    top:     0;
641    width:   100%;
642  }
643
644  .image.main {
645    display: none;
646
647    img {
648      position: relative;
649    }
650  }
651
652  .content {
653    @include vendor('transform', 'translate(0,0)');
654    @include vendor('transition', 'transform 1s ease, opacity 1s ease');
655    background:   _palette(bg-transparent);
656    border-color: _palette(accent1);
657    border-style: solid;
658    opacity:      1;
659    position:     absolute;
660  }
661
662  .goto-next {
663    @include vendor('transform', 'translate(0,0)');
664    @include vendor('transition', 'transform 0.75s ease, opacity 1s ease-in');
665    @include vendor('transition-delay', '0.5s');
666    opacity: 1;
667  }
668
669  &.top, &.bottom {
670    .content {
671      left:    0;
672      padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
673      width:   100%;
674    }
675  }
676
677  &.top {
678    .content {
679      border-bottom-width: 0.35em;
680      top:                 0;
681    }
682  }
683
684  &.bottom {
685    .content {
686      border-top-width: 0.35em;
687      bottom:           0;
688    }
689  }
690
691  &.left, &.right {
692    .content {
693      height:  101%;
694      padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
695      top:     0;
696      width:   28em;
697    }
698  }
699
700  &.left {
701    .content {
702      border-right-width: 0.35em;
703      left:               0;
704    }
705  }
706
707  &.right {
708    .content {
709      border-left-width: 0.35em;
710      right:             0;
711    }
712  }
713
714  &.inactive {
715    .content {
716      opacity: 0;
717    }
718
719    .goto-next {
720      @include vendor('transform', 'translate(0,1.5em)');
721      opacity: 0;
722    }
723
724    &.top {
725      .content {
726        @include vendor('transform', 'translate(0,-5em)');
727      }
728    }
729
730    &.bottom {
731      .content {
732        @include vendor('transform', 'translate(0,5em)');
733      }
734    }
735
736    &.left {
737      .content {
738        @include vendor('transform', 'translate(-5em,0)');
739      }
740    }
741
742    &.right {
743      .content {
744        @include vendor('transform', 'translate(5em,0)');
745      }
746    }
747  }
748}
749
750body.is-touch {
751  .spotlight {
752    background-attachment: scroll;
753  }
754}
755
756/* Wrapper */
757
758.wrapper {
759  padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
760
761  &.fade-down {
762    > .container {
763      @include vendor('transform', 'translate(0,0)');
764      @include vendor('transition', 'transform 1s ease, opacity 1s ease');
765      opacity: 1;
766    }
767
768    &.inactive {
769      > .container {
770        @include vendor('transform', 'translate(0,-1em)');
771        opacity: 0;
772      }
773    }
774  }
775
776  &.fade-up {
777    > .container {
778      @include vendor('transform', 'translate(0,0)');
779      @include vendor('transition', 'transform 1s ease, opacity 1s ease');
780      opacity: 1;
781    }
782
783    &.inactive {
784      > .container {
785        @include vendor('transform', 'translate(0,1em)');
786        opacity: 0;
787      }
788    }
789  }
790
791  &.fade {
792    > .container {
793      @include vendor('transition', 'opacity 1s ease');
794      opacity: 1;
795    }
796
797    &.inactive {
798      > .container {
799        opacity: 0;
800      }
801    }
802  }
803}
804
805.section-home {
806  position: relative;
807  height:   100vh;
808  .container {
809    text-align: center;
810  }
811}
812
813/* Dropotron */
814
815.dropotron {
816  background:    _palette(accent2-transparent);
817  border-radius: _size(border-radius);
818  box-shadow:    0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125);
819  list-style:    none;
820  margin-top:    calc(-0.25em + 1px);
821  min-width:     12em;
822  padding:       0.25em 0;
823
824  > li {
825    border-top: solid 1px rgba(255, 255, 255, 0.035);
826    padding:    0;
827
828    a, span {
829      border:          0;
830      color:           _palette(fg);
831      display:         block;
832      padding:         0.1em 1em;
833      text-decoration: none;
834    }
835
836    &:first-child {
837      border-top: 0;
838    }
839
840    &.active {
841      > a, > span {
842        color: _palette(accent1);
843      }
844    }
845  }
846
847  &.level-0 {
848    font-size:  0.8em;
849    margin-top: 1em;
850
851    &:before {
852      @include vendor('transform', 'rotate(45deg)');
853      background: _palette(accent2);
854      content:    '';
855      display:    block;
856      height:     1em;
857      position:   absolute;
858      right:      1.5em;
859      top:        -0.5em;
860      width:      1em;
861    }
862  }
863}
864
865body.landing {
866  .dropotron {
867    &.level-0 {
868      margin-top: 0;
869    }
870  }
871}
872
873/* Header */
874
875#page-wrapper {
876  padding-top: 3.5em;
877}
878
879#header {
880  background:  #303030;
881  box-shadow:  0 0 0.25em 0 rgba(0, 0, 0, 0.25);
882  cursor:      default;
883  height:      3.5em;
884  left:        0;
885  line-height: 3.5em;
886  position:    fixed;
887  top:         0;
888  width:       100%;
889  z-index:     100;
890
891  .logo-site {
892    display:                flex;
893    flex-direction:         column;
894    -webkit-flex-direction: column;
895    justify-content:        center;
896    height:                 inherit;
897    line-height:            inherit;
898    margin:                 0;
899    position:               absolute;
900    top:                    0;
901    left:                   1em;
902    font-size:              100%;
903    a {
904      color:         white;
905      border-bottom: none;
906      height:        inherit;
907      line-height:   inherit;
908      max-height:    80%;
909      img {
910        max-height: 100%;
911      }
912    }
913    img {
914      width:      auto;
915      max-height: 80%;
916    }
917    @include breakpoint(small) {
918      display: none;
919    }
920  }
921
922  nav {
923    position: absolute;
924    right:    1em;
925    top:      0;
926
927    ul {
928      margin: 0;
929
930      li {
931        display:     inline-block;
932        margin-left: 1em;
933
934        a, span {
935          border:      0;
936          color:       inherit;
937          display:     inline-block;
938          height:      inherit;
939          line-height: inherit;
940          outline:     0;
941
942          &.button {
943            height:      2em;
944            line-height: 2em;
945            padding:     0 1.25em;
946          }
947
948          &:not(.button):before {
949            margin-right: 0.5em;
950          }
951        }
952
953        &.on {
954          > a, > span {
955            color: _palette(accent1);
956          }
957        }
958
959        > ul {
960          display: none;
961        }
962      }
963
964    }
965
966
967    & > ul > li.on > a {
968      background-color: _palette(accent1);
969      box-shadow:       none;
970      border-radius:    4px;
971      border:           none;
972      color:            #FFFFFF !important;
973      display:          inline-block;
974      height:           2em;
975      line-height:      2em;
976      padding:          0 .5em;
977      text-align:       center;
978      text-decoration:  none;
979      white-space:      nowrap;
980      &:hover {
981        background-color: lighten(_palette(accent1), 5);
982      }
983    }
984   
985  }
986}
987
988.dropotron > .on > a {
989  color: _palette(accent1) !important;
990}
991
992body.landing {
993  #page-wrapper {
994    padding-top: 0;
995  }
996
997  //#header {
998  //  background: transparent;
999  //  box-shadow: none;
1000  //  position:   absolute;
1001  //}
1002}
1003
1004/* Banner */
1005
1006#banner {
1007  background-attachment: fixed;
1008  background-color:      _palette(accent2);
1009  background-position:   center center;
1010  background-size:       cover;
1011  box-shadow:            0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
1012  min-height:            100vh;
1013  position:              relative;
1014  text-align:            center;
1015  z-index:               (_misc(max-spotlight) + 1);
1016
1017  &:before {
1018    content:        '';
1019    display:        inline-block;
1020    height:         100vh;
1021    vertical-align: middle;
1022    width:          1%;
1023  }
1024
1025  &:after {
1026    @include vendor('background-image', ('linear-gradient(top, #{_palette(bg-transparent)}, #{_palette(bg-transparent)})', 'url("images/overlay.png")'));
1027    content:  '';
1028    display:  block;
1029    height:   100%;
1030    left:     0;
1031    position: absolute;
1032    top:      0;
1033    width:    100%;
1034  }
1035
1036  .content {
1037    display:        inline-block;
1038    margin-right:   1%;
1039    max-width:      95%;
1040    padding:        $size-wrapper-pad-tb;
1041    position:       relative;
1042    text-align:     center;
1043    vertical-align: middle;
1044    z-index:        1;
1045
1046    header {
1047      display:        inline-block;
1048      vertical-align: middle;
1049      text-align:     right;
1050      max-width:      50%;
1051      @include breakpoint(medium) {
1052        max-width: 100%;
1053      }
1054
1055      h2 {
1056        font-size: 2.5em;
1057        margin:    0;
1058      }
1059
1060      p {
1061        margin: (_size(element-margin) * 0.25) 0 0 0;
1062        top:    0;
1063      }
1064    }
1065
1066    .image {
1067      border-radius:  100%;
1068      display:        inline-block;
1069      height:         18em;
1070      margin-left:    3em;
1071      vertical-align: middle;
1072      width:          18em;
1073
1074      img {
1075        border-radius: 100%;
1076        display:       block;
1077        width:         100%;
1078      }
1079    }
1080  }
1081}
1082
1083body.is-touch {
1084  #banner {
1085    background-attachment: scroll;
1086  }
1087}
1088
1089/* Portfolio */
1090
1091.portfolio {
1092  list-style: none;
1093  display:    flex;
1094  flex-wrap:  wrap;
1095  margin:     0 -1em;
1096  padding:    0;
1097  > * {
1098    padding: 0;
1099    margin:  1em;
1100  }
1101}
1102
1103/* hierarchie */
1104
1105.hierarchie {
1106  display:   block;
1107  font-size: 0.9em;
1108  color:     rgba(255, 255, 255, 0.5);
1109  a, strong {
1110    color:           rgba(255, 255, 255, 0.5);
1111    text-decoration: none;
1112    border-bottom:   none;
1113  }
1114  .sep {
1115    display: inline-block;
1116    padding: 0.3em;
1117  }
1118  @include breakpoint(small) {
1119    display: none;
1120  }
1121}
1122
1123/* Footer */
1124
1125#footer {
1126  background: _palette(accent2);
1127  padding:    $size-wrapper-pad-tb 0;
1128  text-align: center;
1129
1130  ul {
1131    color:       _palette(fg-light);
1132    font-size:   0.9em;
1133    line-height: 1em;
1134    margin:      0;
1135    padding:     0;
1136    text-align:  center;
1137
1138    li {
1139      border-left:  solid 1px _palette(border);
1140      display:      inline-block;
1141      list-style:   none;
1142      margin-left:  1.5em;
1143      padding-left: 1.5em;
1144
1145      &:first-child {
1146        border-left:  0;
1147        margin-left:  0;
1148        padding-left: 0;
1149      }
1150
1151      a {
1152        color: inherit;
1153      }
1154    }
1155  }
1156
1157  .sociaux-list {
1158    margin-bottom: 2em;
1159    li {
1160      display:    inline-block;
1161      list-style: none;
1162      margin:     0 .5em;
1163      padding:    0;
1164      border:     none;
1165      a {
1166        color:  inherit;
1167        border: none;
1168      }
1169    }
1170    .socicon {
1171      @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out'));
1172      font-size:  1.2em;
1173      padding:    0.3em;
1174      background: _palette(bg);
1175      &:hover {
1176        color:      _palette(bg);
1177        background: white;
1178      }
1179    }
1180  }
1181
1182}
1183
1184/* Main */
1185
1186#main {
1187  overflow: hidden;
1188}
1189
1190/* XLarge */
1191
1192@include breakpoint(xlarge) {
1193
1194  /* Basic */
1195
1196  body, input, select, textarea {
1197    font-size: 13pt;
1198  }
1199
1200}
1201
1202/* Large */
1203
1204@include breakpoint(large) {
1205
1206  $size-wrapper-pad-tb: 4.5em;
1207  $size-wrapper-pad-lr: 2.5em;
1208
1209  /* Basic */
1210
1211  body, input, select, textarea {
1212    font-size: 11.5pt;
1213  }
1214
1215  /* Spotlight */
1216
1217  .spotlight {
1218    &.top {
1219      .content {
1220        padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
1221      }
1222    }
1223
1224    &.bottom {
1225      .content {
1226        padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 1.1) - _size(element-margin)) 0;
1227      }
1228    }
1229
1230    &.left, &.right {
1231      .content {
1232        padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
1233        width:   25em;
1234      }
1235    }
1236  }
1237
1238  /* Wrapper */
1239
1240  .wrapper {
1241    padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
1242  }
1243
1244  /* Dropotron */
1245
1246  .dropotron {
1247    &.level-0 {
1248      font-size: 1em;
1249    }
1250  }
1251
1252  /* Banner */
1253
1254  #banner {
1255    .content {
1256      padding: $size-wrapper-pad-tb;
1257    }
1258  }
1259
1260  /* Footer */
1261
1262  #footer {
1263    padding: $size-wrapper-pad-tb 0;
1264  }
1265
1266}
1267
1268/* Medium */
1269
1270@include breakpoint(medium) {
1271
1272  $size-wrapper-pad-tb: 4.5em;
1273  $size-wrapper-pad-lr: 2.5em;
1274
1275  /* Basic */
1276
1277  body, input, select, textarea {
1278    font-size: 12pt;
1279  }
1280
1281  /* Spotlight */
1282
1283  .spotlight {
1284    background-attachment: scroll;
1285    height:                auto;
1286
1287    .image.main {
1288      display:    block;
1289      margin:     0;
1290      max-height: 40vh;
1291      overflow:   hidden;
1292    }
1293
1294    .content {
1295      background-color: _palette(bg);
1296      border-width:     0 !important;
1297      border-top-width: 0.35em !important;
1298      bottom:           auto !important;
1299      left:             auto !important;
1300      padding:          $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
1301      position:         relative;
1302      right:            auto !important;
1303      text-align:       center;
1304      top:              auto !important;
1305      width:            100% !important;
1306    }
1307
1308    .goto-next {
1309      display: none;
1310    }
1311  }
1312
1313  /* Wrapper */
1314
1315  .wrapper {
1316    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
1317  }
1318
1319  /* Banner */
1320
1321  #banner {
1322    background-attachment: scroll;
1323
1324    .goto-next {
1325      height: 7em;
1326    }
1327
1328    .content {
1329      padding:    ($size-wrapper-pad-tb * 2) 0;
1330      text-align: center;
1331
1332      header {
1333        display:    block;
1334        margin:     0 0 _size(element-margin) 0;
1335        text-align: center;
1336      }
1337
1338      .image {
1339        margin: 0;
1340      }
1341    }
1342  }
1343
1344  /* Footer */
1345
1346  #footer {
1347    padding: $size-wrapper-pad-tb 0;
1348  }
1349
1350}
1351
1352/* Small */
1353
1354#navPanel, #titleBar {
1355  display: none;
1356}
1357
1358@include breakpoint(small) {
1359
1360  $size-wrapper-pad-tb: 3.25em;
1361  $size-wrapper-pad-lr: 1.5em;
1362
1363  /* Basic */
1364
1365  html, body {
1366    overflow-x: hidden;
1367  }
1368
1369  body, input, select, textarea {
1370    font-size: 12pt;
1371  }
1372
1373  h1 {
1374    font-size: 1.85em;
1375  }
1376
1377  h2 {
1378    font-size: 1.5em;
1379  }
1380
1381  h3 {
1382    font-size: 1.2em;
1383  }
1384
1385  h4 {
1386    font-size: 1em;
1387  }
1388
1389  /* Section/Article */
1390
1391  header {
1392    p {
1393      br {
1394        display: none;
1395      }
1396    }
1397
1398    h1 + p {
1399      font-size: 1em;
1400    }
1401
1402    h2 + p {
1403      font-size: 1em;
1404    }
1405
1406    h3 + p {
1407      font-size: 1em;
1408    }
1409
1410    h4 + p,
1411    h5 + p,
1412    h6 + p {
1413      font-size: 0.9em;
1414    }
1415
1416    &.major {
1417      margin: 0 0 _size(element-margin) 0;
1418    }
1419  }
1420
1421  /* Goto Next */
1422
1423  .goto-next {
1424    &:before {
1425      height: 0.8em;
1426      margin: -0.4em 0 0 -0.6em;
1427      width:  1.2em;
1428    }
1429  }
1430
1431  /* Spotlight */
1432
1433  .spotlight {
1434    box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
1435
1436    .image.main {
1437      max-height: 60vh;
1438    }
1439
1440    .content {
1441      border-top-width: 0.2em !important;
1442      padding:          $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
1443    }
1444  }
1445
1446  /* Wrapper */
1447
1448  .wrapper {
1449    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
1450  }
1451
1452  /* Header */
1453
1454  #header {
1455    display: none;
1456  }
1457
1458  /* Banner */
1459
1460  #banner {
1461    box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
1462    min-height: calc(100vh - 44px);
1463
1464    &:before {
1465      height: calc(100vh - 44px);
1466    }
1467
1468    .content {
1469      padding: ($size-wrapper-pad-tb * 1.25) $size-wrapper-pad-lr ($size-wrapper-pad-tb * 1.5) $size-wrapper-pad-lr;
1470
1471      header {
1472        h1, h2 {
1473          font-size: 1.5em;
1474        }
1475      }
1476
1477      .image {
1478        height: 9em;
1479        width:  9em;
1480      }
1481    }
1482  }
1483
1484  /* Off-Canvas Navigation */
1485
1486  #page-wrapper {
1487    @include vendor('backface-visibility', 'hidden');
1488    @include vendor('transition', 'transform #{_duration(navPanel)} ease');
1489    padding-bottom: 1px;
1490    padding-top:    44px !important;
1491  }
1492
1493  #titleBar {
1494    @include vendor('backface-visibility', 'hidden');
1495    @include vendor('transition', 'transform #{_duration(navPanel)} ease');
1496    display:    block;
1497    height:     44px;
1498    left:       0;
1499    position:   fixed;
1500    top:        0;
1501    width:      100%;
1502    z-index:    _misc(z-index-base) + 1;
1503    background: _palette(accent2);
1504    box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
1505
1506    .title {
1507      color:       _palette(fg-bold);
1508      display:     block;
1509      font-weight: _font(weight-bold);
1510      height:      44px;
1511      line-height: 44px;
1512      text-align:  center;
1513      a {
1514        color:   inherit;
1515        border:  0;
1516        display: inline-block;
1517        img {
1518          width:      auto;
1519          max-height: 36px;
1520          margin-top: 4px;
1521        }
1522      }
1523    }
1524
1525    .toggle {
1526      //@include icon;
1527      position: absolute;
1528      left:     0;
1529      top:      0;
1530      outline:  0;
1531      border:   0;
1532      height:   44px;
1533      width:    54px;
1534
1535      &:before {
1536        content:    '';
1537        position:   absolute;
1538        display:    block;
1539        top:        13px;
1540        left:       19px;
1541        height:     18px;
1542        width:      16px;
1543        background: linear-gradient(to bottom,
1544          _palette(accent2-transparent) 0%, _palette(accent2-transparent) 20%,
1545          transparent 20%, transparent 40%,
1546          _palette(accent2-transparent) 40%, _palette(accent2-transparent) 60%,
1547          transparent 60%, transparent 80%,
1548          _palette(accent2-transparent) 80%, _palette(accent2-transparent) 100%);
1549      }
1550    }
1551
1552    .img-logo {
1553      width:      auto;
1554      max-height: 44px;
1555      padding:    4px 0;
1556    }
1557  }
1558
1559  #navPanel {
1560    @include vendor('backface-visibility', 'hidden');
1561    @include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
1562    @include vendor('transition', ('transform #{_duration(navPanel)} ease'));
1563    display:    block;
1564    height:     100%;
1565    left:       0;
1566    overflow-y: auto;
1567    position:   fixed;
1568    top:        0;
1569    width:      _size(navPanel);
1570    z-index:    _misc(z-index-base) + 2;
1571    background: darken(_palette(bg), 2);
1572    padding:    0.75em 1.25em;
1573
1574    .link {
1575      border:          0;
1576      border-top:      solid 1px transparentize(_palette(border), 0.25);
1577      color:           _palette(fg);
1578      display:         block;
1579      height:          3em;
1580      line-height:     3em;
1581      text-decoration: none;
1582
1583      &:hover {
1584        color: inherit !important;
1585      }
1586
1587      &:first-child {
1588        border-top: 0;
1589      }
1590
1591      &.depth-0 {
1592        color:       _palette(fg-bold);
1593        font-weight: _font(weight-bold);
1594      }
1595
1596      .indent-1 {
1597        display: inline-block;
1598        width:   1.25em;
1599      }
1600      .indent-2 {
1601        display: inline-block;
1602        width:   2.5em;
1603      }
1604      .indent-3 {
1605        display: inline-block;
1606        width:   3.75em;
1607      }
1608      .indent-4 {
1609        display: inline-block;
1610        width:   5em;
1611      }
1612      .indent-5 {
1613        display: inline-block;
1614        width:   6.25em;
1615      }
1616    }
1617  }
1618
1619  body {
1620    &.navPanel-visible {
1621      #page-wrapper {
1622        @include vendor('transform', 'translateX(#{_size(navPanel)})');
1623      }
1624
1625      #titleBar {
1626        @include vendor('transform', 'translateX(#{_size(navPanel)})');
1627      }
1628
1629      #navPanel {
1630        @include vendor('transform', 'translateX(0)');
1631      }
1632    }
1633  }
1634
1635  /* Footer */
1636
1637  #footer {
1638    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
1639  }
1640
1641}
1642
1643/* XSmall */
1644
1645@include breakpoint(xsmall) {
1646
1647  $size-wrapper-pad-tb: 3em;
1648  $size-wrapper-pad-lr: 1.25em;
1649
1650  /* Basic */
1651
1652  html, body {
1653    min-width: 320px;
1654  }
1655
1656  body, input, select, textarea {
1657    font-size: 12pt;
1658  }
1659
1660  /* List */
1661
1662  ul {
1663    &.actions {
1664      margin: 0 0 _size(element-margin) 0;
1665
1666      li {
1667        display:    block;
1668        padding:    (_size(element-margin) * 0.5) 0 0 0;
1669        text-align: center;
1670        width:      100%;
1671
1672        &:first-child {
1673          padding-top: 0;
1674        }
1675
1676        > * {
1677          margin: 0 !important;
1678          width:  100%;
1679        }
1680      }
1681
1682      &.small {
1683        li {
1684          padding: (_size(element-margin) * 0.25) 0 0 0;
1685
1686          &:first-child {
1687            padding-top: 0;
1688          }
1689        }
1690      }
1691    }
1692  }
1693
1694  /* Button */
1695
1696  input[type="submit"],
1697  input[type="reset"],
1698  input[type="button"],
1699  .button {
1700    padding: 0;
1701  }
1702
1703  /* Spotlight */
1704
1705  .spotlight {
1706    .image.main {
1707      max-height: 50vh;
1708    }
1709
1710    .content {
1711      padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
1712    }
1713  }
1714
1715  /* Wrapper */
1716
1717  .wrapper {
1718    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
1719  }
1720
1721  /* Banner */
1722
1723  #banner {
1724    .content {
1725      padding: $size-wrapper-pad-tb ($size-wrapper-pad-lr * 1.25) ($size-wrapper-pad-tb * 1.75) ($size-wrapper-pad-lr * 1.25);
1726    }
1727  }
1728
1729  /* Footer */
1730
1731  #footer {
1732    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
1733
1734    .copyright {
1735      line-height: inherit;
1736
1737      li {
1738        border-left: 0;
1739        display:     block;
1740        margin:      0;
1741        padding:     0;
1742      }
1743    }
1744  }
1745
1746}
1747
1748/*
1749* Hide only visually, but have it available for screen readers:
1750* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
1751*/
1752.visuallyhidden {
1753  border:   0;
1754  clip:     rect(0 0 0 0);
1755  height:   1px;
1756  margin:   -1px;
1757  overflow: hidden;
1758  padding:  0;
1759  position: absolute;
1760  width:    1px;
1761}
1762
1763/*
1764 * Extends the .visuallyhidden class to allow the element
1765 * to be focusable when navigated to via the keyboard:
1766 * https://www.drupal.org/node/897638
1767 */
1768.visuallyhidden.focusable:active,
1769.visuallyhidden.focusable:focus {
1770  clip:     auto;
1771  height:   auto;
1772  margin:   0;
1773  overflow: visible;
1774  position: static;
1775  width:    auto;
1776}
1777
1778/*
1779 * Faire un lien sur un bloc entier
1780 */
1781.block-link-parent {
1782  position: relative;
1783  .block-link {
1784    &:before {
1785      content:  "";
1786      position: absolute;
1787      bottom:   0;
1788      left:     0;
1789      right:    0;
1790      top:      0;
1791      z-index:  1000;
1792    }
1793  }
1794}
1795
1796/* SFRUS */
1797
1798/* Tiles */
1799
1800.tiles {
1801  display:   flex;
1802  flex-wrap: wrap;
1803  margin:    -2.5em 0 0 -2.5em;
1804
1805  .tile {
1806    transition:    transform 0.5s ease, opacity 0.5s ease;
1807    position:      relative;
1808    width:         calc(25% - 2.5em);
1809    margin:        2.5em 0 0 2.5em;
1810    border-radius: _size(border-radius);
1811
1812    .picture {
1813      transition:    transform 0.5s ease;
1814      position:      relative;
1815      display:       block;
1816      width:         100%;
1817      border-radius: _size(border-radius);
1818      overflow:      hidden;
1819      & > div {
1820        background-size: cover;
1821        width:           300px;
1822        height:          200px;
1823      }
1824      img {
1825        display: block;
1826        width:   100%;
1827      }
1828      &:before {
1829        pointer-events: none;
1830        transition:     background-color 0.5s ease, opacity 0.5s ease;
1831        content:        '';
1832        display:        block;
1833        position:       absolute;
1834        top:            0;
1835        left:           0;
1836        width:          100%;
1837        height:         100%;
1838        z-index:        1;
1839        opacity:        0.8;
1840      }
1841      &:after {
1842        pointer-events:      none;
1843        transition:          opacity 0.5s ease;
1844        content:             '';
1845        display:             block;
1846        position:            absolute;
1847        top:                 0;
1848        left:                0;
1849        width:               100%;
1850        height:              100%;
1851        background-position: center;
1852        background-repeat:   no-repeat;
1853        background-size:     100% 100%;
1854        opacity:             0.25;
1855        z-index:             2;
1856      }
1857    }
1858
1859    & > a {
1860      display:                flex;
1861      -webkit-flex-direction: column;
1862      flex-direction:         column;
1863      align-items:            center;
1864      justify-content:        center;
1865      transition:             background-color 0.5s ease, transform 0.5s ease;
1866      position:               absolute;
1867      top:                    0;
1868      left:                   0;
1869      width:                  100%;
1870      height:                 100%;
1871      padding:                1em;
1872      border-radius:          4px;
1873      border-bottom:          0;
1874      color:                  #FFFFFF;
1875      text-align:             center;
1876      text-decoration:        none;
1877      z-index:                3;
1878
1879      &:hover {
1880        color: #FFFFFF !important;
1881      }
1882
1883      .title {
1884        font-size: 1.4em;
1885        margin:    0;
1886      }
1887
1888      .content {
1889        transition:  max-height 0.5s ease, opacity 0.5s ease;
1890        width:       100%;
1891        max-height:  0;
1892        line-height: 1.5;
1893        margin-top:  0.35em;
1894        opacity:     0;
1895        p {
1896          margin: 0;
1897        }
1898      }
1899    }
1900  }
1901}
1902
1903body:not(.is-touch) .tiles .tile:hover > .picture {
1904  -moz-transform:    scale(1.1);
1905  -webkit-transform: scale(1.1);
1906  -ms-transform:     scale(1.1);
1907  transform:         scale(1.1);
1908}
1909
1910body:not(.is-touch) .tiles .tile:hover > .picture:before {
1911  background-color: #333333;
1912  opacity:          0.35;
1913}
1914
1915body:not(.is-touch) .tiles .tile:hover > .picture:after {
1916  opacity: 0;
1917}
1918
1919body:not(.is-touch) .tiles .tile:hover .content {
1920  max-height: 15em;
1921  opacity:    1;
1922}
1923
1924* + .tiles {
1925  margin-top: 2em;
1926}
1927
1928body.is-touch .tiles .tile .content {
1929  max-height: 15em;
1930  opacity:    1;
1931}
1932
1933@media screen and (max-width: 1280px) {
1934
1935  .tiles {
1936    margin: -1.25em 0 0 -1.25em;
1937  }
1938
1939  .tiles .tile {
1940    width:  calc(33.33333% - 1.25em);
1941    margin: 1.25em 0 0 1.25em;
1942  }
1943
1944}
1945
1946@media screen and (max-width: 980px) {
1947
1948  .tiles {
1949    margin: -2.5em 0 0 -2.5em;
1950  }
1951
1952  .tiles .tile {
1953    width:  calc(50% - 2.5em);
1954    margin: 2.5em 0 0 2.5em;
1955  }
1956
1957}
1958
1959@media screen and (max-width: 736px) {
1960
1961  .tiles {
1962    margin: -1.25em 0 0 -1.25em;
1963  }
1964
1965  .tiles .tile {
1966    width:  calc(50% - 1.25em);
1967    margin: 1.25em 0 0 1.25em;
1968  }
1969
1970  .tiles .tile:hover > .picture {
1971    -moz-transform:    scale(1.0);
1972    -webkit-transform: scale(1.0);
1973    -ms-transform:     scale(1.0);
1974    transform:         scale(1.0);
1975  }
1976
1977}
1978
1979@media screen and (max-width: 480px) {
1980
1981  .tiles {
1982    margin: 0;
1983  }
1984
1985  .tiles .tile {
1986    width:  100%;
1987    margin: 1.25em 0 0 0;
1988  }
1989
1990}
1991
1992#spip-admin {
1993  top:   3.5em;
1994  right: 1em;
1995  a {
1996    font-size: 0.8em;
1997  }
1998}
Note: See TracBrowser for help on using the repository browser.