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_light(border);
  11                 overflow-x: hidden;
  12                 @media screen and (prefers-color-scheme: dark) {
  13                         border-bottom: solid 1px _palette_dark(fg-light);
  14                 }
  15
  16                 > .inner {
  17                         @include vendor('display', 'flex');
  18                         padding: 0 !important;
  19
  20                         > :nth-child(2n - 1) {
  21                                 @include padding(4em, 0, (0, 3em, 0, 0));
  22                                 border-right: solid 1px _palette_light(border);
  23                                 width: 60%;
  24                                 @media screen and (prefers-color-scheme: dark) {
  25                                         border-right: solid 1px _palette_dark(fg-light);
  26                                 }
  27                         }
  28
  29                         > :nth-child(2n) {
  30                                 padding-left: 3em;
  31                                 width: 40%;
  32                         }
  33
  34                         > .split {
  35                                 padding: 0;
  36
  37                                 > * {
  38                                         @include padding(3em, 0, (0, 0, 0, 3em));
  39                                         position: relative;
  40
  41                                         &:before {
  42                                                 border-top: solid 1px _palette_light(border);
  43                                                 content: '';
  44                                                 display: block;
  45                                                 margin-left: -3em;
  46                                                 position: absolute;
  47                                                 top: 0;
  48                                                 width: calc(100vw + 3em);
  49                                                 @media screen and (prefers-color-scheme: dark) {
  50                                                         border-top: solid 1px _palette_dark(fg-light);
  51                                                 }
  52                                         }
  53                                 }
  54
  55                                 > :first-child {
  56                                         &:before {
  57                                                 display: none;
  58                                         }
  59                                 }
  60                         }
  61                 }
  62
  63                 @include breakpoint('<=medium') {
  64                         > .inner {
  65                                 display: block;
  66
  67                                 > :nth-child(2n - 1) {
  68                                         @include padding(4em, 0, (0, 0, 0, 0));
  69                                         border-right: 0;
  70                                         width: 100%;
  71                                 }
  72
  73                                 > :nth-child(2n) {
  74                                         padding-left: 0;
  75                                         width: 100%;
  76                                 }
  77
  78                                 > .split {
  79                                         > * {
  80                                                 @include padding(3em, 0, (0, 0, 0, 0));
  81
  82                                                 &:before {
  83                                                 }
  84                                         }
  85
  86                                         > :first-child {
  87                                                 &:before {
  88                                                         display: block;
  89                                                 }
  90                                         }
  91                                 }
  92                         }
  93                 }
  94
  95                 @include breakpoint('<=small') {
  96                         > .inner {
  97                                 > :nth-child(2n - 1) {
  98                                         @include padding(3em, 0, (0, 0, 0, 0));
  99                                 }
 100                         }
 101                 }
 102         }