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

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

Hauteur des images en small, et cacher les liens goto-next

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