assets/sass/layout/_contact.scss

   1 ///
   2 /// Forty by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Contact */
   8
   9         #contact {
  10                 border-bottom: solid 1px _palette(border);
  11                 overflow-x: hidden;
  12
  13                 > .inner {
  14                         @include vendor('display', 'flex');
  15                         padding: 0 !important;
  16
  17                         > :nth-child(2n - 1) {
  18                                 @include padding(4em, 0, (0, 3em, 0, 0));
  19                                 border-right: solid 1px _palette(border);
  20                                 width: 60%;
  21                         }
  22
  23                         > :nth-child(2n) {
  24                                 padding-left: 3em;
  25                                 width: 40%;
  26                         }
  27
  28                         > .split {
  29                                 padding: 0;
  30
  31                                 > * {
  32                                         @include padding(3em, 0, (0, 0, 0, 3em));
  33                                         position: relative;
  34
  35                                         &:before {
  36                                                 border-top: solid 1px _palette(border);
  37                                                 content: '';
  38                                                 display: block;
  39                                                 margin-left: -3em;
  40                                                 position: absolute;
  41                                                 top: 0;
  42                                                 width: calc(100vw + 3em);
  43                                         }
  44                                 }
  45
  46                                 > :first-child {
  47                                         &:before {
  48                                                 display: none;
  49                                         }
  50                                 }
  51                         }
  52                 }
  53
  54                 @include breakpoint('<=medium') {
  55                         > .inner {
  56                                 display: block;
  57
  58                                 > :nth-child(2n - 1) {
  59                                         @include padding(4em, 0, (0, 0, 0, 0));
  60                                         border-right: 0;
  61                                         width: 100%;
  62                                 }
  63
  64                                 > :nth-child(2n) {
  65                                         padding-left: 0;
  66                                         width: 100%;
  67                                 }
  68
  69                                 > .split {
  70                                         > * {
  71                                                 @include padding(3em, 0, (0, 0, 0, 0));
  72
  73                                                 &:before {
  74                                                 }
  75                                         }
  76
  77                                         > :first-child {
  78                                                 &:before {
  79                                                         display: block;
  80                                                 }
  81                                         }
  82                                 }
  83                         }
  84                 }
  85
  86                 @include breakpoint('<=small') {
  87                         > .inner {
  88                                 > :nth-child(2n - 1) {
  89                                         @include padding(3em, 0, (0, 0, 0, 0));
  90                                 }
  91                         }
  92                 }
  93         }