_jobs.scss 2.9 KB
Newer Older
Galen Frechette committed
1
.container.jobs {
2
  padding: 60px 30px 120px;
3

Matthew Mongeau committed
4 5
  q {
    display: block;
6
    margin: ($baseline/2) 0;
Matthew Mongeau committed
7 8 9 10 11 12 13 14 15 16
    font-style: italic;
    text-align: justify;
  }

  small.author {
    text-align: right;
    display: block;
    color: rgb(100, 100, 100);
  }

17
  h1 + hr {
18
    margin-bottom: ($baseline*4);
19 20 21
  }

  .message {
22 23
    @include clearfix();
    margin-bottom: ($baseline*4);
24 25 26 27 28
    position: relative;

    .photo {
      background: rgb(255,255,255);
      border: 1px solid rgb(210,210,210);
Galen Frechette committed
29 30
      float: left;
      margin-right: flex-gutter();
31 32 33 34 35 36
      padding: 1px;
      width: flex-grid(4);

      img {
        background: rgb(245,245,245);
        display: block;
37
        max-width: 100%;
38 39
      }
    }
40 41 42 43 44 45 46

    header {
      float: left;
      width: flex-grid(7);

      blockquote {
        margin-left: 0;
47
        margin-bottom: ($baseline*2);
48 49 50 51 52 53 54 55

        &:last-child {
          margin-bottom: 0;
        }

        p {
          margin-left: 0;
          font-style: italic;
56
          line-height: 1.6;
57 58 59 60 61 62 63 64
          font-size: 1.1em;
          color: #666;
        }

        cite {
          margin-top: 12px;
          display: block;
          color: #a0a0a0;
65
          font-weight: 300;
66 67 68
        }
      }
    }
69 70 71
  }

  .jobs-wrapper {
72
    @include clearfix();
73
    float: left;
74
    padding-top: 80px;
75 76 77
    width: flex-grid(12);

    > h2 {
78
      display: none;
79 80
      margin-bottom: ($baseline*3);
      padding-bottom: $baseline;
81 82 83 84
    }

    .jobs-sidebar {
      @include box-sizing(border-box);
85
      border: 1px solid rgb(220,220,220);
86
      float: left;
87
      padding: 20px;
88 89 90
      width: flex-grid(3);

      nav {
91
        margin-bottom: ($baseline*2);
92

93 94 95 96 97 98 99
        a {
          display: block;
          letter-spacing: 1px;
          margin: 0px -20px;
          padding: 12px 0px 12px 20px;
          text-align: left;

100
          &:hover, &:focus {
101 102
            background: rgb(245,245,245);
            text-decoration: none;
103 104 105 106 107
          }
        }
      }

      p + h2 {
108
        margin-top: ($baseline*2);
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
      }
    }

    .jobs-listing {
      float: left;
      margin-right: flex-gutter();
      width: flex-grid(9);

      .job {
        border-bottom: 1px solid rgb(220,220,220);
        padding: 40px 0px;

        &:first-child {
          padding-top: 0px;
        }

        &:last-child {
          border: none;
          padding-bottom: 0px;
        }

        .inner-wrapper {
        }

        h3 {
          font-family: $sans-serif;
135
          font-weight: 700;
136
          margin-bottom: ($baseline*0.75);
137
        }
138

139 140 141 142 143
        h4 {
          font-size: 1.0em;
          font-family: $sans-serif;
          font-weight: 700;
          margin-top: 25px;
144
          margin-bottom: ($baseline/2);
145 146
        }

147 148 149 150 151 152 153 154 155 156 157
        ul {
          padding-left: 50px;
        }

        li {
          font-family: $serif;
          font-size: 1em;
          line-height: 1.6em;
          color: #3c3c3c;
          margin-bottom: 0.2em;
        }
158 159 160 161
      }
    }
  }
}