src/wolnelektury/static/2022/styles/layout/_author.scss

   1 .l-author {
   2   width: 100%;
   3   display: flex;
   4   padding: 50px 0;
   5   justify-content: space-between;
   6   flex-direction: column;
   7   align-items: center;
   8
   9   @include rwd($break-flow) {
  10       flex-direction: row;
  11       align-items: flex-start;
  12   }
  13
  14   h2 {
  15     margin: 0;
  16     font-weight: 600;
  17     font-size: 21.5px;
  18     line-height: 140%;
  19     border-bottom: 1px solid #D9D9D9;
  20     padding-bottom: 15px;
  21     padding-top: 5px;
  22     letter-spacing: -0.01em;
  23     color: #007880;
  24     margin-bottom: 23px;
  25   }
  26
  27   .row {
  28     width: 100%;
  29
  30     &:nth-child(1) {
  31       div {
  32           display: flex;
  33           flex-wrap: wrap;
  34
  35           @include rwd($break-wide) {
  36               flex-wrap: nowrap;
  37           }
  38       }
  39
  40       h2 {
  41         width: 100%;
  42       }
  43
  44       .l-author__photo {
  45           width: calc(50% - 24px);
  46           @include rwd($break-wide) {
  47               width: 238px;
  48           }
  49
  50           img {
  51               width:100%;
  52           }
  53       }
  54     }
  55
  56     &:nth-child(2) {
  57         max-width: 415px - 32px;
  58         padding-top: 48px;
  59         @include rwd($break-flow) {
  60             max-width: 415px;
  61             padding-left: 32px;
  62         }
  63     }
  64   }
  65 }
  66
  67 .l-author__info {
  68     display: contents;
  69     min-width: 364px;
  70     @include rwd($break-wide) {
  71         display: block;
  72     }
  73
  74   h3 {
  75     margin: 0;
  76     font-weight: 600;
  77     font-size: 31px;
  78     line-height: 140%;
  79     letter-spacing: -0.01em;
  80     color: #007880;
  81
  82     width: 40%;
  83   }
  84   p {
  85     margin-top: 20px;
  86     font-weight: normal;
  87     font-size: 18px;
  88     line-height: 150%;
  89     color: #474747;
  90   }
  91   h4 {
  92     font-size: 18px;
  93     line-height: 150%;
  94     font-weight: bolder;
  95     color: #474747;
  96   }
  97
  98   ul {
  99     padding: 0;
 100     list-style: none;
 101     margin-top: 0.25rem;
 102     margin-bottom: 0;
 103     li {
 104       font-size: 18px;
 105       line-height: 150%;
 106       font-weight: normal;
 107     }
 108   }
 109
 110   dt {
 111       float: left;
 112       clear: left;
 113       margin-right: .4em;
 114       font-weight: normal;
 115       font-size: 18px;
 116       line-height: 150%;
 117   }
 118   dd {
 119       margin-left: 0;
 120       font-weight: normal;
 121       font-size: 18px;
 122       line-height: 150%;
 123   }
 124 }
 125
 126 .l-author__photo {
 127     margin: 0;
 128     margin-right: 16px;
 129     @include rwd($break-wide) {
 130         margin-right: 50px;
 131     }
 132   img {
 133     border-radius: 10px;
 134     overflow: hidden;
 135   }
 136   figcaption {
 137     margin-top: 5px;
 138     font-weight: normal;
 139     font-size: 15px;
 140     line-height: 160%;
 141     color: #808080;
 142   }
 143 }
 144
 145 .l-author__quotes {
 146   background: #E1F1F2;
 147   border-radius: 10px;
 148   padding: 48px 32px 40px 32px;
 149   position: relative;
 150
 151   &:before {
 152     display: flex;
 153     align-items: center;
 154     justify-content: center;
 155     content: $icon-quote;
 156     top: 0;
 157     transform: translateY(-50%);
 158
 159     font-family: '#{$icomoon-font-family}' !important;
 160     speak: never;
 161     font-style: normal;
 162     font-weight: normal;
 163     font-variant: normal;
 164     text-transform: none;
 165     line-height: 1;
 166
 167     /* Better Font Rendering =========== */
 168     -webkit-font-smoothing: antialiased;
 169     -moz-osx-font-smoothing: grayscale;
 170
 171     color: white;
 172     background-color: #007880;
 173     font-size: 33px;
 174     width: 60px;
 175     height: 60px;
 176     border-radius: 50%;
 177     position: absolute;
 178   }
 179 }
 180
 181 .l-author__quotes__slider {
 182   display: flex;
 183   div {
 184     em {
 185       font-style: italic;
 186       font-weight: 300;
 187       font-size: 28px;
 188       line-height: 140%;
 189       letter-spacing: -0.02em;
 190       color: #083F4D;
 191
 192       p {
 193           font-size: inherit;
 194           line-height: inherit;
 195           margin-top: 0;
 196       }
 197     }
 198     > p {
 199       font-style: normal;
 200       font-weight: normal;
 201       font-size: 15px;
 202       line-height: 160%;
 203       color: #007880;
 204     }
 205   }
 206 }
 207
 208 .l-author__quotes__slider__item {
 209   max-width: 336px;
 210   outline: 0;
 211 }
 212
 213
 214 .l-author__header {
 215   display: flex;
 216   align-items: center;
 217   width: 100%;
 218   border-bottom: 1px solid #D9D9D9;
 219   padding-bottom: 22px;
 220
 221   figure {
 222     padding: 0;
 223     font-size: 0;
 224     width: 40px;
 225     height: 40px;
 226     overflow: hidden;
 227     display: flex;
 228     align-items: center;
 229     justify-content: center;
 230     border-radius: 50%;
 231     margin: 0 12px 0 0;
 232
 233     img {
 234       max-width: 100%;
 235     }
 236   }
 237
 238   h1 {
 239     font-weight: $bold;
 240     font-size: 37px;
 241     line-height: 130%;
 242     letter-spacing: -0.01em;
 243     color: #083F4D;
 244     margin: 0;
 245
 246     span {
 247       font-weight: $regular;
 248     }
 249   }
 250 }